feat:#9 로그인 이미지 업로드 상태 관리

MJU-Letter · Mar 15, 2024 · 4cc05c3 · 4cc05c3
1 parent b2a1a1b
commit 4cc05c3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/public/icons/loginImg.png b/public/icons/loginImg.png
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>
   );
 };