Feat: 로그인 모달 연동전까지 로그인을 하기위한 임시페이지 추가

src/app/login/page.tsx

@@ -1,49 +1,44 @@
-'use client';
-
 /**
  TODO
- - [ ] 로그인 만료 확인, refreshToken(추후)
- - [ ] 로그인 페이지 UI
+ * 로그인 모달이 모든 곳에 연동될 때까지 로그인을 하기위한 임시페이지
+ * 추후 페이지 삭제 예정
  */
 
-import Link from 'next/link';
-import Image from 'next/image';
-
-import NaverLoginIcon from '/public/icons/naver_login.svg';
-import GoogleLoginIcon from '/public/icons/google_login.svg';
-import KakaoLoginIcon from '/public/icons/kakao_login.svg';
-
-const oauthType = {
-  naver: 'naver',
-  google: 'google',
-  kakao: 'kakao',
-};
+'use client';
 
-const baseUrl = 'https://dev.api.listywave.com'; // TODO 이 부분은 나중에 .env.local로 수정
+import Modal from '@/components/Modal/Modal';
+import LoginModal from '@/components/login/LoginModal';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
 
 export default function LoginPage() {
+  const { isOn, handleSetOff, handleSetOn } = useBooleanOutput();
+
   return (
-    <section>
-      <div>
-        <Image src={`/icons/large_logo.svg`} width={207} height={35} alt="리스티웨이브 로고" priority />
-        <div>
-          <h1>시작하기</h1>
-          <p>
-            나만의 <span>리스트</span>를 만들어보세요!
-          </p>
-        </div>
-      </div>
-      <div>
-        <Link href={`${baseUrl}/auth/${oauthType.naver}`}>
-          <NaverLoginIcon />
-        </Link>
-        <Link href={`${baseUrl}/auth/${oauthType.google}`}>
-          <GoogleLoginIcon />
-        </Link>
-        <Link href={`${baseUrl}/auth/${oauthType.kakao}`}>
-          <KakaoLoginIcon />
-        </Link>
-      </div>
-    </section>
+    <>
+      <section
+        style={{
+          padding: '5rem',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <button onClick={() => handleSetOn()}>
+          누르면 로그인 모달 등장
+          <div
+            style={{
+              fontSize: '5rem',
+            }}
+          >
+            🌊🏄🏄‍♀️🏄‍♂️🌊
+          </div>
+        </button>
+      </section>
+      {isOn && (
+        <Modal handleModalClose={handleSetOff}>
+          <LoginModal />
+        </Modal>
+      )}
+    </>
   );
 }

src/components/login/LoginModal.tsx

@@ -3,7 +3,7 @@
 /**
  TODO
  - [ ] 로그인 만료 확인, refreshToken(추후)
- - [ ] 로그인 페이지 UI
+ - [x] 로그인 페이지 UI (모달)
  */
 
 import Link from 'next/link';