Auth > SignUp: email 및 sns 회원가입 form과 otp 모달 및 프로필 설정 페이지 추가

src/app/auth/login/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+import React, { useState } from 'react';
+
+import BasicLoginModal from '@/features/auth/login/components/basiclogin/basic-login-modal';
+import SeasonLoginModal from '@/features/auth/login/components/seasonlogin/season-login-modal';
+import Button from '@/shared/components/ui/button';
+
+const LoginPage: React.FC = () => {
+  const [showSeasonLoginModal, setShowSeasonLoginModal] = useState(false);
+  const [showBasicLoginModal, setShowBasicLoginModal] = useState(false);
+
+  return (
+    <div className='space-y-8 p-8'>
+      <div className='flex flex-col items-center gap-4'>
+        <Button
+          onClick={() => setShowSeasonLoginModal(true)}
+          className='bg-blue-500 hover:bg-blue-600'
+        >
+          기간제 로그인
+        </Button>
+
+        <SeasonLoginModal
+          isOpen={showSeasonLoginModal}
+          onClose={() => setShowSeasonLoginModal(false)}
+        />
+
+        <div className='py-8'>
+          <p className='text-center text-gray-500'>빈공간</p>
+        </div>
+
+        <Button
+          onClick={() => setShowBasicLoginModal(true)}
+          className='bg-blue-500 hover:bg-blue-600'
+        >
+          기본 로그인
+        </Button>
+
+        <BasicLoginModal
+          isOpen={showBasicLoginModal}
+          onClose={() => setShowBasicLoginModal(false)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

src/app/auth/signup/email/page.tsx

@@ -0,0 +1,12 @@
+' use client';
+
+import EmailSignup from '@/features/auth/signup/email/components/email-signup';
+
+const EmailSignupPage = () => {
+  return (
+    <div>
+      <EmailSignup />
+    </div>
+  );
+};
+export default EmailSignupPage;

src/app/auth/signup/social/page.tsx

@@ -0,0 +1,13 @@
+' use client';
+
+import SocialSignup from '@/features/auth/signup/social/components/social-signup';
+
+const SocialSignupPage = () => {
+  return (
+    <div>
+      <SocialSignup />
+    </div>
+  );
+};
+
+export default SocialSignupPage;

src/app/onboarding/page.tsx

@@ -0,0 +1,7 @@
+import Onboarding from '@/features/onboarding/components/onboarding';
+
+const OnboardingPage = () => {
+  return <Onboarding />;
+};
+
+export default OnboardingPage;

src/features/auth/login/components/basiclogin/basic-login-modal.tsx

@@ -0,0 +1,18 @@
+import BasicLogin from './basic-login';
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const BasicLoginModal = ({ isOpen }: LoginModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4'>
+      <BasicLogin />
+    </div>
+  );
+};
+
+export default BasicLoginModal;

src/features/auth/login/components/basiclogin/basic-login.tsx

@@ -0,0 +1,86 @@
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+import Button from '@/shared/components/ui/button';
+import Input from '@/shared/components/ui/input';
+
+const BasicLogin: React.FC = () => {
+  const [autoLogin, setAutoLogin] = useState(false);
+
+  const handleLogin = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className='flex items-center justify-center rounded-lg bg-white'>
+      <div className='w-[426px] rounded-lg border p-14'>
+        <div>
+          <div className='flex items-start justify-center'>
+            <p className='-mt-8 text-2xl font-bold text-[#0E0E0F]'>로그인</p>
+          </div>
+          <div className='mt-8 flex flex-col gap-4'>
+            <Input
+              className='text-md h-11 tracking-[-0.03em]'
+              type='email'
+              placeholder='이메일을 입력하세요.'
+            />
+            <Input
+              className='text-md h-11 tracking-[-0.03em]'
+              type='password'
+              placeholder='비밀번호를 입력하세요.'
+            />
+            <div className='flex items-center gap-2'>
+              <input
+                type='checkbox'
+                checked={autoLogin}
+                onChange={(e) => setAutoLogin(e.target.checked)}
+                className='h-4 w-4 rounded border border-[#37383C9C] text-[#6B66F4] focus:ring-[#6B66F4]'
+              />
+              <span className='text-sm font-medium text-[#6C6F78]'>자동 로그인</span>
+            </div>
+            <Button className='font-bold' size='full' onClick={handleLogin}>
+              로그인
+            </Button>
+          </div>
+          <div className='mt-4 flex justify-center gap-3 p-1 text-sm tracking-[-0.02em] text-[#6C6F78]'>
+            <button className='hover:text-[#0E0E0F]'>회원가입</button>
+            <span>|</span>
+            <button className='hover:text-[#0E0E0F]'>이메일 찾기</button>
+            <span>|</span>
+            <button className='hover:text-[#0E0E0F]'>비밀번호 찾기</button>
+          </div>
+          <div className='my-6 flex items-center'>
+            <div className='flex-grow border-t border-gray-300' />
+            <span className='mx-4 text-sm text-gray-500'>또는</span>
+            <div className='flex-grow border-t border-gray-300' />
+          </div>
+          <div className='mt-6 flex justify-center'>
+            <Image
+              src='/icons/Apple.png'
+              alt='Apple 로그인'
+              width={40}
+              height={40}
+              className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+            />
+            <Image
+              src='/icons/Google.png'
+              alt='Google 로그인'
+              width={40}
+              height={40}
+              className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+            />
+            <Image
+              src='/icons/Github.png'
+              alt='Github 로그인'
+              width={40}
+              height={40}
+              className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BasicLogin;

src/features/auth/login/components/seasonlogin/season-login-modal.tsx

@@ -0,0 +1,18 @@
+import SeasonLogin from './season-login';
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SeasonLoginModal = ({ isOpen }: LoginModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4'>
+      <SeasonLogin />
+    </div>
+  );
+};
+
+export default SeasonLoginModal;

src/features/auth/login/components/seasonlogin/season-login.tsx

@@ -0,0 +1,123 @@
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+import Button from '@/shared/components/ui/button';
+import Input from '@/shared/components/ui/input';
+
+const SeasonLogin: React.FC = () => {
+  const router = useRouter();
+  const [isLoginMode, setIsLoginMode] = useState(false);
+  const [autoLogin, setAutoLogin] = useState(false);
+
+  const handleLogin = () => {
+    window.location.reload();
+  };
+  const handleSignup = () => {
+    router.push('/auth/signup/email');
+  };
+
+  return (
+    <div className='flex items-center justify-center rounded-lg bg-white'>
+      <div className='w-[426px] rounded-lg border p-14'>
+        {isLoginMode ? (
+          <div>
+            <div className='flex items-start justify-center'>
+              <p className='-mt-8 text-2xl font-bold text-[#0E0E0F]'>로그인</p>
+            </div>
+            <div className='mt-8 flex flex-col gap-4'>
+              <Input
+                className='text-md h-11 tracking-[-0.03em]'
+                type='email'
+                placeholder='이메일을 입력하세요.'
+              />
+              <Input
+                className='text-md h-11 tracking-[-0.03em]'
+                type='password'
+                placeholder='비밀번호를 입력하세요.'
+              />
+              <div className='flex items-center gap-2'>
+                <input
+                  type='checkbox'
+                  checked={autoLogin}
+                  onChange={(e) => setAutoLogin(e.target.checked)}
+                  className='h-4 w-4 rounded border border-[#37383C9C] text-[#6B66F4] focus:ring-[#6B66F4]'
+                />
+                <span className='text-sm font-medium text-[#6C6F78]'>자동 로그인</span>
+              </div>
+              <Button size='full' onClick={handleLogin}>
+                로그인
+              </Button>
+            </div>
+            <div className='mt-4 flex justify-center gap-3 p-1 text-sm tracking-[-0.02em]'>
+              <button className='text-[#6C6F78] hover:text-[#0E0E0F]'>이메일 찾기</button>
+              <span className='text-[#6C6F78]'>|</span>
+              <button className='text-[#6C6F78] hover:text-[#0E0E0F]'>비밀번호 찾기</button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <Image
+              src='/icons/BloletLogo.png'
+              alt='블로렛 로고'
+              width={140}
+              height={52}
+              className='mx-auto'
+            />
+
+            <div className='mt-8 flex flex-col items-center gap-4 p-3'>
+              <Button onClick={handleSignup} className='h-13 w-87'>
+                처음이신가요?
+              </Button>
+              <Button
+                variant='secondary'
+                className='h-10 w-87'
+                onClick={() => setIsLoginMode(true)}
+              >
+                다시 만나 반가워요!
+              </Button>
+            </div>
+
+            <div className='mt-4 flex justify-center gap-3 text-sm tracking-[-0.02em] text-[#6C6F78]'>
+              <button className='hover:text-[#0E0E0F]'>이메일 찾기</button>
+              <span>|</span>
+              <button className='hover:text-[#0E0E0F]'>비밀번호 찾기</button>
+            </div>
+
+            <div className='my-6 flex items-center'>
+              <div className='flex-grow border-t border-gray-300' />
+              <span className='mx-4 text-sm text-gray-500'>또는</span>
+              <div className='flex-grow border-t border-gray-300' />
+            </div>
+
+            <div className='mt-6 flex justify-center'>
+              <Image
+                src='/icons/Apple.png'
+                alt='Apple 로그인'
+                width={40}
+                height={40}
+                className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+              />
+              <Image
+                src='/icons/Google.png'
+                alt='Google 로그인'
+                width={40}
+                height={40}
+                className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+              />
+              <Image
+                src='/icons/Github.png'
+                alt='Github 로그인'
+                width={40}
+                height={40}
+                className='mx-auto cursor-pointer transition-opacity hover:opacity-80'
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SeasonLogin;

src/features/auth/signup/email/components/email-otp-modal.tsx

@@ -0,0 +1,18 @@
+import EmailOTP from './email-otp';
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const EmailOTPModal = ({ isOpen }: LoginModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4'>
+      <EmailOTP />
+    </div>
+  );
+};
+
+export default EmailOTPModal;