Merge pull request #62 from Beside-Potenday/seungbeom

feat: 프로필 사진 및 정보 추가

src/Provider/Auth.tsx

@@ -9,6 +9,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const updateAuthInfo = (auth: AuthInfo) => {
     if (auth) {
       setAuthInfo(auth);
+      sessionStorage.setItem('authToken', auth.accessToken);
     }
   };
 

src/pages/Login/AuthPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useGetLogin } from '@/api/hooks/useGetLogin';
 import { RouterPath } from '@/routes/path';
+import { useAuth } from '@/Provider/Auth';
 
 export const AuthPage = () => {
   const location = useLocation();
@@ -11,14 +12,26 @@ export const AuthPage = () => {
   const code = query.get('code');
 
   const { data, error, isLoading } = useGetLogin({ code: code || '' });
+  const { updateAuthInfo } = useAuth();
 
   useEffect(() => {
     if (data && !error) {
-      console.log('data' + data);
-      sessionStorage.setItem('authToken', data.accessToken);
+      console.log('data', data);
+
+      updateAuthInfo({
+        accessToken: data.accessToken,
+        picture: data.picture,
+        name: data.name,
+        email: data.email,
+      });
+
       navigate(RouterPath.home);
+    } else if (error) {
+      console.error('Login failed:', error);
+      // 로그인 실패 시 로그인 페이지로 리디렉션하거나 사용자에게 알리는 로직 추가
+      navigate(RouterPath.login);
     }
-  }, [data, error, navigate]);
+  }, [data, error, navigate, updateAuthInfo]);
 
   return <div>{isLoading ? <h1>Logging in...</h1> : error ? <h1>Login failed!</h1> : null}</div>;
 };

src/pages/MyPage/index.tsx

@@ -1,21 +1,26 @@
+import { useAuth } from '@/Provider/Auth';
 import { Grid, GridItem } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 export const MyPage = () => {
+  const { authInfo } = useAuth();
+
   return (
     <Wrapper>
       <Grid
         h="100%"
         w="100%"
-        templateColumns="repeat(2, 1fr)"
+        templateColumns="0.5fr 1fr"
         gap={20}
         p={10}
         background="gray.50"
         borderRadius="lg"
       >
         <GridItem backgroundColor={'yellow'}>
           <h2>User Information</h2>
-          {/* user information */}
+          <h1>{authInfo?.email}</h1>
+          <h1>{authInfo?.email}</h1>
+          <img src={authInfo?.picture} alt="사용자 프로필" />
         </GridItem>
         <GridItem backgroundColor={'blue'}>
           <h2>User History</h2>