depromeet · Collection50 · Aug 29, 2024 · Aug 24, 2024 · Aug 27, 2024 · Aug 27, 2024
@@ -75,6 +75,7 @@
     "lowlight": "^3.1.0",
     "lucide-react": "^0.411.0",
     "next": "14.2.4",
+    "next-auth": "beta",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-day-picker": "8.10.1",

@@ -24,7 +24,6 @@ axiosInstance.interceptors.request.use(async (requestConfig: InternalAxiosReques
   if (typeof window === 'undefined') {
     return requestConfig;
   }
-
   const token = getCookie('accessToken');
   const config = { ...requestConfig };
 
@@ -49,6 +48,7 @@ axiosInstance.interceptors.response.use(
     if (axios.isAxiosError(error)) {
       const status = error.response?.status;
       const refreshToken = getCookie('refreshToken');
+
       if (status === 401) {
         if (refreshToken) {
           deleteCookie('accessToken');

@@ -2,7 +2,7 @@
 
 import { Dropdown, Icon } from '@/system/components';
 import { InfoCardList } from './components/InfoCardList';
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { AddInfoCardDialog } from './components/AddInfoCardDialog';
 import { TouchButton } from '@/components/TouchButton';
 import { INFO_TYPES, InfoType } from '@/types';

@@ -0,0 +1,13 @@
+import { auth } from '@/auth';
+import { Redirect } from '@/components/Redirect';
+import { StrictPropsWithChildren } from '@/types';
+
+export default async function AuthRedirect({ children }: StrictPropsWithChildren) {
+  const session = await auth();
+
+  return (
+    <Redirect condition={session?.accessToken != null} to="/login">
+      {children}
+    </Redirect>
+  );
+}
@@ -0,0 +1,3 @@
+import { handlers } from '@/auth';
+
+export const { GET, POST } = handlers;
@@ -4,6 +4,7 @@ import '@/styles/globals.css';
 import '@/styles/memo.css';
 import { Inter } from 'next/font/google';
 import { cn } from '@/utils';
+import { SessionProvider } from 'next-auth/react';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -23,7 +24,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(inter.className, 'bg-neutral-1')}>
-        <QueryProvider>{children}</QueryProvider>
+        <QueryProvider>
+          <SessionProvider>{children}</SessionProvider>
+        </QueryProvider>
       </body>
     </html>
   );

@@ -0,0 +1,5 @@
+'use server';
+
+import { signIn } from '@/auth';
+
+export const googleLogin = () => signIn('google', { redirectTo: '/login?auth=select' });
@@ -0,0 +1,12 @@
+import { http } from '@/apis/http';
+
+export const postLogin = (provider: 'GOOGLE' | 'KAKAO', token: string) =>
+  http.post<{ accessToken: string; refreshToken: string }>({
+    url: '/users/social-login',
+    params: {
+      provider,
+    },
+    headers: {
+      'SOCIAL-AUTH-TOKEN': token,
+    },
+  });
@@ -0,0 +1,46 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { TouchButton } from '@/components/TouchButton';
+import { Icon } from '@/system/components';
+import { googleLogin } from '../actions';
+
+export function Login() {
+  return (
+    <motion.form
+      initial={{
+        opacity: 0,
+        y: 150,
+      }}
+      animate={{
+        opacity: 1,
+        y: 0,
+      }}
+      exit={{
+        opacity: 0,
+        x: 120,
+      }}
+      transition={{ duration: 1 }}
+      action={googleLogin}
+      className="w-552 h-604 p-68 pt-116 flex flex-col justify-between rounded-30 bg-[white]">
+      <div className="flex flex-col items-center gap-16">
+        <Icon name="cloverLogo" size={74} />
+
+        <h1 className="text-28 font-bold tracking-[-0.972px]">뽀각 시작하기</h1>
+        <p className="text-center text-neutral-70 trackiing-[0.091px]">
+          취업 준비 과정에서의 정보를 쉽게 <br />
+          정리하고 탐색해보세요
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-12">
+        <TouchButton type="submit" className="relative h-62 rounded-54 bg-[#F2F2F2]">
+          <div className="absolute top-6 left-6">
+            <Icon name="google" size={50} />
+          </div>
+          <p className="font-semibold tracking-[-0.091px]">구글로 시작하기</p>
+        </TouchButton>
+      </div>
+    </motion.form>
+  );
+}
@@ -0,0 +1,74 @@
+import { easeIn, motion } from 'framer-motion';
+import { TouchButton } from '@/components/TouchButton';
+import { Icon } from '@/system/components';
+import { cn } from '@/utils';
+import { useState } from 'react';
+import { useFunnelContext } from '@/system/components/Funnel/useFunnel';
+
+export default function Select() {
+  const [position, setPosition] = useState<'designer' | 'developer' | ''>('');
+  const { setStep } = useFunnelContext();
+
+  return (
+    <motion.section
+      initial={{
+        opacity: 0,
+        x: 150,
+      }}
+      animate={{
+        opacity: 1,
+        x: 0,
+      }}
+      exit={{
+        opacity: 0,
+        x: -150,
+      }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
+      className="w-552 h-604 p-68 pt-116 flex flex-col justify-center gap-56 rounded-30 bg-[white]">
+      <div className="flex flex-col items-center gap-16">
+        <h1 className="text-36 font-bold">환영해요 조혜원님!</h1>
+
+        <p className="text-center text-neutral-70 trackiing-[0.091px]">
+          취업 준비 중인 직군을 선택해주시면 <br />
+          직군에 맞는 키워드 태그를 제공해드려요
+        </p>
+      </div>
+
+      <div>
+        <div className="flex gap-28">
+          <TouchButton
+            onClick={() => setPosition('developer')}
+            className={cn(
+              'relative flex flex-col justify-center items-center gap-16 w-190 h-212 hover:bg-neutral-1 transition-all rounded-18 border-1 border-transparent',
+              position === 'developer' && 'bg-[#EEF9F5] border-[#2DC98E] hover:bg-bg-[#EEF9F5]',
+            )}>
+            <Icon name="codingSignUp" size={120} />
+            <p className="font-bold text-20 tracking-[-0.24px]">개발자</p>
+          </TouchButton>
+
+          <TouchButton
+            onClick={() => setPosition('designer')}
+            className={cn(
+              'relative flex flex-col justify-center items-center gap-16 w-190 h-212 hover:bg-neutral-1 transition-all rounded-18 border-1 border-transparent',
+              position === 'designer' && 'bg-[#EEF9F5] border-[#2DC98E] hover:bg-bg-[#EEF9F5]',
+            )}>
+            <Icon name="designSignUp" size={120} />
+            <p className="font-bold text-20 tracking-[-0.24px]">디자이너</p>
+          </TouchButton>
+        </div>
+      </div>
+
+      <TouchButton
+        disabled={position === ''}
+        className={cn(
+          'bg-neutral-5 rounded-6 py-13 h-48 px-20 w-full text-15 font-semibold text-neutral-30 transition-all',
+          position !== '' && 'text-white bg-[black]',
+        )}
+        onClick={() => {
+          setStep('aaa');
+        }}>
+        선택 완료
+      </TouchButton>
+    </motion.section>
+  );
+}
@@ -0,0 +1,13 @@
+import { auth } from '@/auth';
+import { Redirect } from '@/components/Redirect';
+import { StrictPropsWithChildren } from '@/types';
+
+export default async function Layout({ children }: StrictPropsWithChildren) {
+  const session = await auth();
+
+  return (
+    <Redirect condition={!!session?.accessToken}>
+      <main className="h-screen flex justify-center items-center bg-neutral-95">{children}</main>;
+    </Redirect>
+  );
+}
@@ -0,0 +1,27 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useFunnel } from '@/system/components/Funnel/useFunnel';
+import { Login } from './components/Login';
+import { Redirect } from '@/components/Redirect';
+import Select from './components/Select';
+
+export default function Page() {
+  const session = useSession();
+  const Funnel = useFunnel(['login', 'select'] as const, { initialStep: 'login', stepQueryKey: 'auth' });
+
+  return (
+    <Funnel mode="wait">
+      <Funnel.Step name="login">
+        <Login />
+      </Funnel.Step>
+
+      <Funnel.Step name="select">
+        {/* TODO: initial 로그인 여부 확인 */}
+        <Redirect condition={!session.data?.accessToken}>
+          <Select />
+        </Redirect>
+      </Funnel.Step>
+    </Funnel>
+  );
+}