Merge pull request #35 from codeit-sprint-part4-8-1/F81-72-Root-컨텍스트

feat: F81-72 Root Context 제작 및 헤더 수정

Author: Minjo123

src/components/@Shared/GNB.tsx

@@ -1,12 +1,17 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import Image from 'next/image';
 import LogoButton from './Buttons/LogoButton';
-
+import { useRoot } from '@/hook/useRoot';
 const GNB = () => {
   // 로그인 상태 관리
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const { userData, setUserData } = useRoot();
 
+  useEffect(()=>{
+    if(userData) return setIsLoggedIn(true);
+    if(!userData) return setIsLoggedIn(false);
+  },[userData])
   return (
     <nav className="bg-white shadow-md">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
@@ -18,8 +23,10 @@ const GNB = () => {
             {/* 알림 버튼 */}
             <button className="text-gray-700 hover:text-blue-500">
               <Image
-                src="/Ico_notification.svg"
+                src="/ico/ico_notification.svg"
                 alt="종모양 아이콘(알림)"
+                width={10}
+                height={10}
                 className="w-6 h-6"
               />
             </button>
@@ -50,7 +57,11 @@ const GNB = () => {
                 <Menu.Item>
                   {({ active }) => (
                     <button
-                      onClick={() => setIsLoggedIn(false)} // 로그아웃 처리
+                      onClick={() => {
+                        setUserData(undefined)
+                        localStorage.removeItem('accessToken');
+                        localStorage.removeItem('refreshToken');
+                      } } // 로그아웃 처리
                       className={`block w-full text-left px-4 py-2 text-sm ${
                         active ? 'bg-gray-100' : ''
                       }`}

src/components/auth/AuthDtos.ts

@@ -3,6 +3,15 @@ export interface signUpFormData {
   nickname: string;
   password: string;
 }
+
+export interface UserData {
+  id: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
 export interface LoginFormData {
   email: string;
   password: string;

src/components/auth/LoginForm.tsx

@@ -1,23 +1,23 @@
 import { FC, useState } from 'react';
 import { Button } from "@/components/@Shared/Buttons/Button";
 import { useForm } from 'react-hook-form';
-import { axiosInstance } from '@/apis/instance/axiosInstance';
 import AuthInput from './AuthInput';
 import clsx from 'clsx';
-
 import createValidations from './Validations';
 import { LoginFormData } from './AuthDtos';
 import Modal from './Modal';
 import useModalClose from './modalClose';
 import axios from 'axios';
+import { useRoot } from '@/hook/useRoot';
 
 
 const LoginForm: FC = () => {
   const { register, handleSubmit, watch, trigger, formState: { errors } } = useForm<LoginFormData>({ mode: 'onBlur' });
-  const [isButtonValid, setIsButtonValid] = useState<boolean>(false);
+  const [ isButtonValid, setIsButtonValid] = useState<boolean>(false);
   const [ modalOpen, setModalOpen ] = useState<boolean>(false);
   const [ modalMessage, setModalMessage ] = useState<string>('');
   const [ isLoginSuccess, setIsLoginSuccess ] = useState<boolean>(true);
+  const { useLogin } = useRoot();
   const Validations = createValidations(watch('password'));
   const modalClose = useModalClose();
   const handleBlur = async (name: keyof LoginFormData) => {
@@ -28,14 +28,7 @@ const LoginForm: FC = () => {
 
   const onSubmit = async (data: LoginFormData) => {
     try {
-      const response = await axiosInstance.post('/auth/login', data);
-      console.log(response.data);
-      const {accessToken, refreshToken } = response.data;
-      
-      console.log(`엑세스토큰, 리프레시토큰 로컬스토리지에 저장`);
-      localStorage.setItem('accessToken', accessToken);
-      localStorage.setItem('refreshToken', refreshToken);
-      
+      await useLogin(data);
       setIsLoginSuccess(true);
       setModalMessage(`로그인 성공`);
       setModalOpen(true);
@@ -63,7 +56,6 @@ const LoginForm: FC = () => {
       <AuthInput label="이메일" register={register} name="email" validation={Validations.email} onBlur={() => handleBlur('email')} errors={errors} type='email' />
       <AuthInput label="비밀번호" register={register} name="password" validation={Validations.password} onBlur={() => handleBlur('password')} errors={errors} type="password"/>
       <Button variant="solid" label="로그인 하기" type="submit" disabled={!isButtonValid} className='h-[48px]' />
-
     </form>
   );
 };

src/hook/useRoot.tsx

@@ -0,0 +1,66 @@
+import { axiosInstance } from "@/apis/instance/axiosInstance";
+import { LoginFormData as LoginRequestData, UserData } from "@/components/auth/AuthDtos";
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from "react"
+
+interface rootTypes {
+  userData : UserData | undefined;
+  refreshUser : () => void;
+  useLogin : (data : LoginRequestData) => void;
+  setUserData: Dispatch<SetStateAction<UserData | undefined>>;
+}
+const rootContext = createContext<rootTypes>({
+  userData : undefined,
+  refreshUser : () => {},
+  useLogin : () => {},
+  setUserData : ()=> {},
+});
+
+export const RootProvider : React.FC<{children: ReactNode}>= ({children})=> {
+  const [ userData, setUserData ] = useState<UserData | undefined>(undefined);
+
+  const useLogin = async (data : LoginRequestData) => {
+    // 로그인 api 보내기.
+    try{
+    const rs = await axiosInstance.post('auth/login',data);
+    const { user, refreshToken, accessToken } = rs.data;
+    setUserData(user);
+    // 데이터 받아서 user 에 데이터 넣기
+    localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+    // 엑세스토큰, 리프레시토큰 로컬스토리지에 넣기
+    }catch(error){
+      return Promise.reject(error);
+    // 에러 그대로 반환하기
+    }
+      }
+
+  const refreshUser = async ()=> {
+    try{
+      const rs = await axiosInstance.get('user/me');
+      const data = rs.data;
+      setUserData(data);
+    } catch(error){
+      console.log(error);
+    }
+    // axios get /user/me 로 내정보 fetch 후 const rs에 넣음
+    // userData 에 덮어쓰기
+    // 에러 있을 시 error console에 띄움
+  }
+  return(
+    <rootContext.Provider value={{userData, setUserData, useLogin, refreshUser}}>
+      {children}
+    </rootContext.Provider>
+  )
+}
+
+
+export const useRoot = ()=> {
+  const context = useContext(rootContext);
+  if(context === undefined) {
+    throw new Error('RootContext 는 RootProvider 안에서만 사용할 수 있습니다.');
+  }
+
+  return context;
+}
+
+

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import GNB from '@/components/@Shared/GNB';
 import Container from '@/components/@Shared/Container';
 import Footer from '@/components/@Shared/Footer';
+import { RootProvider } from '@/hook/useRoot';
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
@@ -19,14 +20,16 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <div className="flex flex-col min-h-screen">
-      <GNB />
-      {/* 컨테이너 컴포넌트에 fullWidth prop을 전달 */}
-      <Container fullWidth={isMainPage}>
-        <QueryClientProvider client={queryClient}>
-          <Component {...pageProps} />
-        </QueryClientProvider>
-      </Container>
-      <Footer className="mt-auto" />
+      <RootProvider>
+        <GNB />
+        {/* 컨테이너 컴포넌트에 fullWidth prop을 전달 */}
+        <Container fullWidth={isMainPage}>
+          <QueryClientProvider client={queryClient}>
+            <Component {...pageProps} />
+          </QueryClientProvider>
+        </Container>
+        <Footer className="mt-auto" />
+      </RootProvider>
     </div>
   );
 }

src/pages/login/index.tsx

@@ -1,5 +1,4 @@
 import AuthContainer from "@/components/auth/AuthContainer";
-import AuthLogo from "@/components/auth/AuthLogo";
 import LoginForm from "@/components/auth/LoginForm";
 
 const Login = ()=> {