Wraffle-Inc · Joy0w0 · Nov 13, 2024 · Nov 13, 2024 · Oct 30, 2024 · Oct 30, 2024
diff --git a/apps/front/wraffle-webview/app/api/auth/[...nextauth]/route.ts b/apps/front/wraffle-webview/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import {handlers} from '@/shared/util/auth';
+
+export const {GET, POST} = handlers;
diff --git a/apps/front/wraffle-webview/app/join/page.tsx b/apps/front/wraffle-webview/app/join/page.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import type {z} from 'zod';
-import {joinDefaultValues, joinSchema} from '@/entities/auth/join/schema';
-import type {JoinStep} from '@/entities/auth/join/type';
-import {Header, ProgressBar} from '@/shared/ui';
-import GenericForm from '@/shared/ui/form/GenericForm';
-import {Info, Name, Extra, PhoneFunnel} from '@/widgets/join';
+import {Header, ProgressBar, GenericForm} from '@/shared/ui';
+import type {JoinStep} from '@/widgets/join/config';
+import {joinDefaultValues, joinSchema} from '@/widgets/join/config';
+import {Info, Name, Extra, PhoneFunnel} from '@/widgets/join/ui';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {useFunnel} from '@use-funnel/browser';
 
@@ -28,7 +27,7 @@ const Join = () => {
   return (
     <div>
       <section className='py-5'>
-        <Header withBackButton>
+        <Header>
           <Header.Left>
             <Header.BackButton onClick={() => funnel.history.back()} />
           </Header.Left>

diff --git a/apps/front/wraffle-webview/app/layout.tsx b/apps/front/wraffle-webview/app/layout.tsx
@@ -2,6 +2,7 @@ import './globals.css';
 import type {Metadata} from 'next';
 import {ReactQueryProviders} from '@/app/providers';
 import {pretendard} from '@/shared/util/font';
+import {Toaster} from '@wraffle/ui';
 import IconLoader from '@wraffle/ui/src/ui/icon/IconLoader';
 
 export const metadata: Metadata = {
@@ -19,6 +20,7 @@ export default function RootLayout({
       <body className={`${pretendard.variable} font-pretendard`}>
         <div className='container h-screen min-h-screen'>
           <ReactQueryProviders>
+            <Toaster />
             {IconLoader}
             {children}
           </ReactQueryProviders>

diff --git a/apps/front/wraffle-webview/app/login/email/page.tsx b/apps/front/wraffle-webview/app/login/email/page.tsx
@@ -1,28 +1,34 @@
 'use client';
 
+import useLoginToast from './useLoginToast';
 import type {z} from 'zod';
+import {signIn} from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
-import {useRouter} from 'next/navigation';
-import {loginDefaultValues, loginSchema} from '@/entities/auth';
-import {Header} from '@/shared/ui';
-import GenericForm from '@/shared/ui/form/GenericForm';
-import {EmailForm} from '@/widgets/login/EmailForm';
+import {useSearchParams} from 'next/navigation';
+import {GenericForm, Header} from '@/shared/ui';
+import {loginDefaultValues, loginSchema} from '@/widgets/login/config';
+import {EmailForm} from '@/widgets/login/ui';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Typography} from '@wraffle/ui';
 
 const EmailLogin = () => {
-  const router = useRouter();
-
+  const params = useSearchParams();
   const onSubmit = (data: z.infer<typeof loginSchema>) => {
-    //!TODO: 로그인 로직 구현
-    console.log(data.email, data.password);
+    signIn('credentials', {
+      email: data.email,
+      password: data.password,
+      redirectTo: '/',
+    });
   };
+  useLoginToast({code: params.get('code')});
 
   return (
     <div>
       <Header>
-        <Header.BackButton onClick={router.back} />
+        <Header.Left>
+          <Header.BackButton />
+        </Header.Left>
       </Header>
       <div className='flex h-full flex-col items-center px-5'>
         <Image src='/logo.png' alt='logo' width={136} height={75} priority />
@@ -40,7 +46,7 @@ const EmailLogin = () => {
         </section>
         <section className='mt-5 flex gap-[14px]'>
           <Link className='flex items-center' href={'/'}>
-            <Typography className='text-[13px] text-zinc-500'>
+            <Typography size='p4' color='zinc500'>
               비밀번호 찾기
             </Typography>
           </Link>

diff --git a/apps/front/wraffle-webview/app/login/email/useLoginToast.tsx b/apps/front/wraffle-webview/app/login/email/useLoginToast.tsx
@@ -0,0 +1,46 @@
+import {useEffect} from 'react';
+import {ERROR_STATUS} from '@/shared/util';
+import {useToast} from '@wraffle/ui';
+
+interface Props {
+  code: string | null;
+}
+
+const useLoginToast = ({code}: Props) => {
+  const {toast} = useToast();
+
+  if (!code) return;
+
+  useEffect(() => {
+    switch (code) {
+      case ERROR_STATUS.NON_EXISTENT_ACCOUNT.code: {
+        toast({
+          title: ERROR_STATUS.NON_EXISTENT_ACCOUNT.message,
+          duration: 2000,
+          variant: 'warning',
+          icon: 'close',
+        });
+        break;
+      }
+      case ERROR_STATUS.MISMATCHED_PASSWORD.code: {
+        toast({
+          title: ERROR_STATUS.MISMATCHED_PASSWORD.message,
+          duration: 2000,
+          variant: 'warning',
+          icon: 'close',
+        });
+        break;
+      }
+      default: {
+        toast({
+          title: '로그인에 실패했습니다.',
+          duration: 2000,
+          variant: 'warning',
+          icon: 'close',
+        });
+      }
+    }
+  }, []);
+};
+
+export default useLoginToast;
diff --git a/apps/front/wraffle-webview/app/login/page.tsx b/apps/front/wraffle-webview/app/login/page.tsx
@@ -14,8 +14,10 @@ const Login = () => {
         priority
       />
       <div className='mt-auto flex w-full flex-col items-center gap-5'>
-        <Button className='animate-fade-in-down font-semibold opacity-0 delay-200 duration-700 fill-mode-forwards'>
-          시작하기
+        <Button className='animate-fade-in-down opacity-0 delay-200 duration-700 fill-mode-forwards'>
+          <Typography size='h6' color='white'>
+            시작하기
+          </Typography>
         </Button>
         <span className='flex animate-fade-in-down gap-1 opacity-0 delay-500 duration-700 fill-mode-forwards'>
           <Typography size='p4'>이미 계정이 있으신가요?</Typography>

diff --git a/apps/front/wraffle-webview/app/page.tsx b/apps/front/wraffle-webview/app/page.tsx
@@ -1,113 +1,33 @@
-import Image from 'next/image';
+import {categories} from '@/entities/category';
+import {RecentRaffles} from '@/features/manage-raffle/config';
+import {Banner} from '@/features/manage-raffle/ui';
+import {Header} from '@/shared/ui';
+import {CategoryButtons} from '@/widgets/category-list/ui';
+import {recommendItems} from '@/widgets/recommend-list/config';
+import {RecommendList} from '@/widgets/recommend-list/ui';
+import {BottomNavigation, Icon} from '@wraffle/ui';
 
 export default function Home() {
   return (
-    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
-      <div className='z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'>
-        <p className='fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:dark:bg-zinc-800/30'>
-          Get started by editing&nbsp;
-          <code className='font-mono font-bold'>src/app/page.tsx</code>
-        </p>
-        <div className='fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:size-auto lg:bg-none dark:from-black dark:via-black'>
-          <a
-            className='pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0'
-            href='https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            By{' '}
-            <Image
-              src='/vercel.svg'
-              alt='Vercel Logo'
-              className='dark:invert'
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="before:bg-gradient-radial after:bg-gradient-conic relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40">
-        <Image
-          className='relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert'
-          src='/next.svg'
-          alt='Next.js Logo'
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className='mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left'>
-        <a
-          href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
-          className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <h2 className='mb-3 text-2xl font-semibold'>
-            Docs{' '}
-            <span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-              -&gt;
-            </span>
-          </h2>
-          <p className='m-0 max-w-[30ch] text-sm opacity-50'>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-          className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <h2 className='mb-3 text-2xl font-semibold'>
-            Learn{' '}
-            <span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-              -&gt;
-            </span>
-          </h2>
-          <p className='m-0 max-w-[30ch] text-sm opacity-50'>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
-          className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <h2 className='mb-3 text-2xl font-semibold'>
-            Templates{' '}
-            <span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-              -&gt;
-            </span>
-          </h2>
-          <p className='m-0 max-w-[30ch] text-sm opacity-50'>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
-          className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <h2 className='mb-3 text-2xl font-semibold'>
-            Deploy{' '}
-            <span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-              -&gt;
-            </span>
-          </h2>
-          <p className='m-0 max-w-[30ch] text-balance text-sm opacity-50'>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+    <main className='h-auto pb-16'>
+      <Header withUnderline>
+        <Header.Left>
+          <Header.Logo />
+        </Header.Left>
+        <Header.Right>
+          <Icon name='bell' />
+        </Header.Right>
+      </Header>
+      <section className='my-4'>
+        <Banner recentRaffle={RecentRaffles} />
+      </section>
+      <section className='mb-4 flex justify-center'>
+        <CategoryButtons categories={categories} />
+      </section>
+      <section className='flex justify-center'>
+        <RecommendList recommendItems={recommendItems} />
+      </section>
+      <BottomNavigation />
     </main>
   );
 }
diff --git a/apps/front/wraffle-webview/app/password/find/page.tsx b/apps/front/wraffle-webview/app/password/find/page.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import {useSendEmail} from 'features/password/api/password';
 import {useRouter} from 'next/navigation';
 import {useForm} from 'react-hook-form';
-import {type EmailPayload, emailObjectSchema} from '@/entities/auth';
-import {Form, RHFInput} from '@/shared/ui';
-import {Header} from '@/shared/ui';
-import BottomFixedBox from '@/shared/ui/bottom/BottomFixedBox';
+import type {EmailPayload} from '@/entities/auth';
+import {emailObjectSchema} from '@/entities/auth';
+import {useSendEmail} from '@/features/password/api';
+import {BottomFixedBox, Form, Header, RHFInput} from '@/shared/ui';
 import {getDefaults} from '@/shared/util';
 import {zodResolver} from '@hookform/resolvers/zod';
-import {Button, Toaster, Typography, useToast} from '@wraffle/ui';
+import {Button, Typography, useToast} from '@wraffle/ui';
 
 const FindPasswordPage = () => {
   const router = useRouter();
@@ -45,7 +44,6 @@ const FindPasswordPage = () => {
 
   return (
     <div>
-      <Toaster />
       <Header>
         <Header.BackButton onClick={router.back} />
         <Header.Middle>비밀번호 찾기</Header.Middle>
@@ -54,7 +52,7 @@ const FindPasswordPage = () => {
       <Form {...form}>
         <form className='px-5' onSubmit={form.handleSubmit(onSubmit)}>
           <div>
-            <Typography className='my-5 text-h2'>
+            <Typography size='h2' className='my-5'>
               비밀번호 설정을 위해 <br />
               가입한 이메일을 입력해주세요.
             </Typography>
@@ -66,7 +64,7 @@ const FindPasswordPage = () => {
               placeholder='[email protected]'
             />
 
-            <Typography className='text-xs text-[#6D7684]'>
+            <Typography size='sm1' className='text-[#6D7684]'>
               *이메일이 수신되지 않거나, 이메일주소가 기억나지 않을 경우
               고객센터로 문의주시기 바랍니다.
             </Typography>
@@ -77,14 +75,12 @@ const FindPasswordPage = () => {
               className='flex flex-col items-center py-2'
               onClick={handleContactCustomerCenter}
             >
-              <Typography className='text-sm text-[#6D7684]'>
+              <Typography size='p3' className='text-[#6D7684]'>
                 고객센터 문의
               </Typography>
             </div>
 
-            <Button type='submit' disabled={isFormEmpty}>
-              이메일 발송
-            </Button>
+            <Button disabled={isFormEmpty}>이메일 발송</Button>
           </BottomFixedBox>
         </form>
       </Form>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {handlers} from '@/shared/util/auth';

		export const {GET, POST} = handlers;