MJU-Letter · frombozztoang · Mar 16, 2024 · Mar 11, 2024 · Mar 14, 2024 · Mar 14, 2024
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+  arrowParens: "always", // always - (x) => x | avoid - x => x
+  bracketSpacing: true, // 객체 리터럴에서 괄호에 공백 삽입 여부
+  jsxBracketSameLine: false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
+  endOfLine: "auto", // EoF 방식, OS별로 처리 방식이 다름
+  htmlWhitespaceSensitivity: "css", // HTML 공백 감도 설정
+  jsxSingleQuote: true, // JSX에 singe 따옴표 사용 여부
+  printWidth: 120, //  줄 바꿈 할 폭 길이
+  semi: true, // 세미콜론 사용 여부
+  singleQuote: true, // single 따옴표 사용 여부
+  tabWidth: 2, // 탭 너비
+  trailingComma: "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
+  useTabs: false, // 탭 사용 여부
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,10 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-responsive": "^9.0.2"
+    "react-responsive": "^9.0.2",
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.10",

diff --git a/public/icons/loginImg.png b/public/icons/loginImg.png
diff --git a/src/app/(social)/detail/page.tsx b/src/app/(social)/detail/page.tsx
@@ -1,5 +1,4 @@
 import MainDetail from "@/components/templates/social/mainDetail/MainDetail";
-import React from "react";
 
 const page = () => {
   return (

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import logo from "../../public/icons/logo.png";
 import "../styles/globals.css";
 import Navigation from "@/components/organisms/navigation/navigation/Navigation";
+import RecoilRootWrapper from "@/recoil/recoilRootWrapper";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -18,22 +19,24 @@ export default function RootLayout({
   return (
     <html lang="en" className=" bg-main-background">
       <body className="flex justify-center">
-        <figure className="hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100">
-          <Image
-            className="w-419 h-198 object-contain "
-            src={logo}
-            alt="logo"
-          />
-        </figure>
-        <main
-          id="modal"
-          className="flex flex-col items-center  relative  w-fit "
-        >
-          <header className="w-full mb-76">
-            <Navigation />
-          </header>
-          {children}
-        </main>
+        <RecoilRootWrapper>
+          <figure className="hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100">
+            <Image
+              className="w-419 h-198 object-contain "
+              src={logo}
+              alt="logo"
+            />
+          </figure>
+          <main
+            id="modal"
+            className="flex flex-col items-center  relative  w-fit "
+          >
+            <header className="w-full mb-76">
+              <Navigation />
+            </header>
+            {children}
+          </main>
+        </RecoilRootWrapper>
       </body>
     </html>
   );

diff --git a/src/app/login/auth/page.tsx b/src/app/login/auth/page.tsx
@@ -1,14 +1,31 @@
-"use client";
-import Auth from "@/components/templates/login/auth/Auth";
-import React from "react";
+import Image from 'next/image';
+import logo from '@public/icons/logo.png';
+import AuthImgUpload from '@/components/organisms/login/AuthImgUpload';
+import AuthModal from '@/components/organisms/modal/auth/AuthModal';
 
 const page = () => {
-  const test = () => {
-    console.log("hi");
-  };
   return (
     <div>
-      <Auth isUploaded={true} handleUpload={test} />
+      <AuthModal />
+      {/* {authStatus && authStatus !== "successed" && (
+        <AuthModal authStatus={authStatus} studentInfo={studentInfo} />
+      )} */}
+      <div className='w-360 min-h-640 flex flex-col items-center justify-center text-center text-main-point'>
+        <Image className='w-204 h-96 object-contain mb-32' src={logo} alt='logoImg' />
+        <h1 className='large-bold mb-20'>
+          '명지편지'는 명지대학교 학생들을 위한 <br /> 롤링페이퍼 서비스예요.
+        </h1>
+        <h2 className='medium-regular pb-47 border-b-1 border-gray-dark-text-1 w-264 mb-47'>
+          서비스 이용을 위해서는 <br />
+          학생카드 인증이 필요해요.
+        </h2>
+        <h2 className='medium-regular mb-32'>
+          1. MSI 학생정보시스템 접속 <br />
+          2. 학적/장학 → 학생카드 <br />
+          3. 학생카드 캡처 후 업로드 <br />
+        </h2>
+        <AuthImgUpload />
+      </div>
     </div>
   );
 };

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,11 +1,32 @@
-"use client";
-import Main from "@/components/templates/login/main/Main";
-import React from "react";
+import Image from "next/image";
+import logo from "@public/icons/logo.png";
+import loginImg from "@public/icons/loginImg.png";
+import Link from "next/link";
 
 const page = () => {
   return (
-    <div>
-      <Main />
+    <div className="w-360 min-h-640 flex flex-col items-center justify-center">
+      <Image className="w-228 h-108 object-contain" src={logo} alt="logo" />
+      <h1 className="mt-20 mb-116 gangwon-xl text-main-point">
+        명지인들과 롤링페이퍼로 마음을 나눠요
+      </h1>
+      <Link href={"/login/auth"}>
+        <button>
+          <Image src={loginImg} alt="loginImg" />
+        </button>
+      </Link>
+
+      <h2 className="w-284 mt-8 flex text-11 text-gray-medium-text-2 flex-wrap whitespace-pre-line">
+        시작할 경우, 명지편지의
+        <div className="ml-[3.5px] border-b-1 border-gray-medium-text-2 whitespace-pre-line">
+          서비스 이용약관
+        </div>
+        과
+        <div className="ml-[3.5px] border-b-1 border-gray-medium-text-2 whitespace-pre-line">
+          개인정보 보호정책
+        </div>
+        에 동의하게 됩니다.
+      </h2>
     </div>
   );
 };

diff --git a/src/components/atoms/button/modal/YesButton.tsx b/src/components/atoms/button/modal/YesButton.tsx
@@ -1,18 +1,10 @@
-import React from "react";
+import React from 'react';
 
-const YesButton = ({
-  info,
-  handler,
-  isOne,
-}: {
-  info: string;
-  handler: () => void;
-  isOne: boolean;
-}) => {
+const YesButton = ({ info, handler, isOne }: { info: string; handler: () => void; isOne: boolean }) => {
   return (
     <button
       className={`transition-opacity duration-500 ease-in-out hover:opacity-50 rounded-8 ${
-        isOne ? "w-280" : "w-120"
+        isOne ? 'w-248' : 'w-120'
       } h-44 bg-main-point text-white flex items-center justify-center`}
       onClick={() => {
         handler();

diff --git a/src/components/molecules/modal/ModalView.tsx b/src/components/molecules/modal/ModalView.tsx