Feat: 로그인 api 연결

src/api/auth/googleLogin/authConstants.ts

@@ -1,5 +1,5 @@
 export const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-export const GOOGLE_REDIRECT_URI = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
+export const GOOGLE_REDIRECT_URI = import.meta.env.VITE_GOOGLE_REDIRECT_URI_LOCAL;
 export const GOOGLE_AUTH_BASE_URL = 'https://accounts.google.com/o/oauth2/v2/auth';
 export const GOOGLE_SCOPE = 'openid email profile';
 export const GOOGLE_RESPONSE_TYPE = 'code';

src/api/auth/googleLogin/util/getAccessToken.ts

@@ -1,12 +1,13 @@
 import axiosInstance from '@/api/axiosInstance';
 
 const getAccessToken = async (code: string) => {
-  const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
+  const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI_LOCAL;
 
   const response = await axiosInstance.post(
     `/auth/oauth2/google/callback?redirect_uri=${redirectUri}`,
     { code },
   );
+
   return response.data.data;
 };
 

src/api/domain/signup/hook/useGetUser.ts

@@ -4,8 +4,11 @@ import { getUser } from '@/api/domain/signup';
 import { QUERY_KEY } from '@/api/constant/queryKey';
 
 export const useGetUser = () => {
+  const token = localStorage.getItem('accessToken');
+
   return useQuery({
     queryKey: QUERY_KEY.USER_INFO,
     queryFn: getUser,
+    enabled: !!token,
   });
 };

src/common/component/UserModal/UserModal.css.ts

@@ -23,7 +23,7 @@ export const profileContainer = style({
 export const profileImage = style({
   width: '5rem',
   height: '5rem',
-  borderRadius: '25%',
+  borderRadius: '50%',
   objectFit: 'cover',
 });
 

src/page/home/Home.tsx

@@ -1,4 +1,4 @@
 import { useNavigate } from 'react-router-dom';
 
 import { HomeContainer } from '@/page/home/Home.css';
 import { INTRO_MESSAGE } from '@/page/home/constant/scrollSection';
@@ -10,19 +10,21 @@
 import { useMultipleFadeInOnView } from '@/page/home/hook/useMultipleFadeInOnView';
 import mandalAnimation from '@/assets/lottie/mandalart.json';
 import aiAnimation from '@/assets/lottie/ai.json';
-import { PATH } from '@/route';
 import todoAnimation from '@/assets/lottie/todo.json';
+import { useModal } from '@/common/hook/useModal';
+import LoginModal from '@/common/component/LoginModal/LoginModal';
+
 const animationDataArray = [mandalAnimation, aiAnimation, todoAnimation];
 const sectionKeys = ['mandalart', 'ai', 'todo'] as const;
 
 const Home = () => {
-  const navigate = useNavigate();
   const scrolls = useMultipleFadeInOnView();
   const end = useFadeInOnView<HTMLDivElement>();
 
+  const { openModal, closeModal, ModalWrapper } = useModal();
+
   const handleOpenLogin = () => {
-    // openModal(<LoginModal onClose={closeModal} />);
-    navigate(PATH.TODO);
+    openModal(<LoginModal onClose={closeModal} />);
   };
 
   return (
@@ -44,6 +46,7 @@
       })}
 
       <EndSection fadeInRef={end.ref} visible={end.visible} onClick={handleOpenLogin} />
+      {ModalWrapper}
     </div>
   );
 };

src/shared/component/Layout/layoutHeader/Header.css.ts

@@ -76,6 +76,7 @@ export const profilePlaceholder = style({
   borderRadius: '50%',
   backgroundColor: colors.grey6,
   flexShrink: 0,
+  cursor: 'pointer',
 });
 
 export const loginButton = style({

src/shared/component/Layout/layoutHeader/Header.tsx

@@ -1,10 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 
 import * as styles from './Header.css';
 
 import { PATH } from '@/route/path';
 import IcLogo from '@/assets/svg/IcLogo';
+import LoginModal from '@/common/component/LoginModal/LoginModal';
+import { useModal } from '@/common/hook/useModal';
+import { useGetUser } from '@/api/domain/signup/hook/useGetUser';
+import UserModal from '@/common/component/UserModal/UserModal';
 
 const MENUS = [
   { label: '나의 할 일', path: PATH.TODO },
@@ -16,16 +20,37 @@ const Header = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const accessToken = localStorage.getItem('accessToken');
+
   const findActiveMenu = MENUS.find((menu) => location.pathname.startsWith(menu.path));
   const initialMenu = findActiveMenu ? findActiveMenu.label : '';
 
   const [activeMenu, setActiveMenu] = useState<string>(initialMenu);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(!!accessToken);
+  const [openProfile, setOpenProfile] = useState<boolean>(false);
+
+  const { openModal, closeModal, ModalWrapper } = useModal();
+
+  const { data: user, isLoading } = useGetUser();
+
+  useEffect(() => {
+    setIsLoggedIn(!!localStorage.getItem('accessToken'));
+  }, []);
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+    openModal(<LoginModal onClose={closeModal} />);
+  };
 
   const handleMenuClick = (menuLabel: string, path: string) => {
     setActiveMenu(menuLabel);
     navigate(path);
   };
 
+  const handleProfile = () => {
+    setOpenProfile((prev) => !prev);
+  };
+
   const renderNavMenu = () => (
     <>
       <nav className={styles.navWrapper}>
@@ -45,6 +70,17 @@ const Header = () => {
           );
         })}
       </nav>
+      {!isLoading && user && (
+        <>
+          <img
+            src={user.profileImageUrl}
+            alt="유저 프로필"
+            className={styles.profilePlaceholder}
+            onClick={handleProfile}
+          />
+          {openProfile && <UserModal onClose={handleProfile} />}
+        </>
+      )}
     </>
   );
 
@@ -55,8 +91,15 @@ const Header = () => {
           <IcLogo className={styles.logoImage} />
         </Link>
 
-        {renderNavMenu()}
+        {isLoggedIn ? (
+          renderNavMenu()
+        ) : (
+          <button className={styles.loginButton} onClick={handleLogin}>
+            로그인
+          </button>
+        )}
       </div>
+      {ModalWrapper}
     </header>
   );
 };