Merge pull request #106 from part3-4team-Taskify/feature/Login

[Feat, Refactor, Fix] Login: 비로그인 상태에서 페이지 접근 시 /login 이동

Author: MINJI121

src/api/apiRoutes.ts

@@ -1,8 +1,8 @@
-const TEAM_ID = "13-4";
+import { TEAM_ID } from "@/constants/team";
 
 export const apiRoutes = {
   //로그인
-  Login: () => `/${TEAM_ID}/login`, //post
+  Login: () => `/${TEAM_ID}/auth/login`, //post
   //비밀번호변경
   Password: () => `/${TEAM_ID}/auth/password`, //put
   //카드

src/api/auth.ts

@@ -0,0 +1,22 @@
+import axiosInstance from "./axiosInstance";
+import { apiRoutes } from "./apiRoutes";
+import { UserResponse } from "./users";
+
+interface AuthResponse extends UserResponse {
+  accessToken: string;
+  expiresIn: number;
+}
+
+export const postAuthData = async ({
+  email,
+  password,
+}: {
+  email: string;
+  password: string;
+}) => {
+  const response = await axiosInstance.post<AuthResponse>(apiRoutes.Login(), {
+    email,
+    password,
+  });
+  return response.data;
+};

src/api/axiosInstance.ts

@@ -1,6 +1,7 @@
 // axiosInstance.ts
 
 import axios from "axios";
+import useUserStore from "@/store/useUserStore";
 
 console.log("🔐 BASE_URL:", process.env.NEXT_PUBLIC_BASE_URL);
 console.log("🔐 API_TOKEN:", process.env.NEXT_PUBLIC_API_TOKEN);
@@ -9,7 +10,7 @@ const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
-// 👉 Authorization 헤더 자동 설정, 요청 보낼때 마다 localstorage에서 토큰 가져오기
+// 👉 요청 보낼 때마다 토큰 자동 추가
 axiosInstance.interceptors.request.use((config) => {
   const token = localStorage.getItem("accessToken"); // localStorage에서 토큰 가져오기
   if (token) {
@@ -18,11 +19,25 @@ axiosInstance.interceptors.request.use((config) => {
   return config;
 });
 
-// 👉 요청 보낼 때마다 토큰 자동 추가
+// login 토큰 만료 체크 함수
+const isTokenExpired = () => {
+  const expiresAt = localStorage.getItem("expiresAt");
+  if (!expiresAt) return true;
+
+  return new Date().getTime() > parseInt(expiresAt, 10);
+};
+
+// 인터셉터로 만료 체크 후 헤더에 추가
 axiosInstance.interceptors.request.use((config) => {
-  const token = localStorage.getItem("accessToken"); // localStorage에서 토큰 가져오기
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`; // 헤더에 Authorization 추가
+  const token = localStorage.getItem("accessToken");
+
+  if (token && !isTokenExpired()) {
+    config.headers.Authorization = `Bearer ${token}`;
+  } else {
+    // 만료되거나 없는 경우
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("expiresAt");
+    useUserStore.getState().clearUser(); // Zustand 상태 초기화
   }
   return config;
 });

src/api/user.ts src/api/users.tssrc/api/user.ts renamed to src/api/users.ts

@@ -1,6 +1,6 @@
 import axiosInstance from "./axiosInstance";
 
-interface UserResponse {
+export interface UserResponse {
   id: number;
   email: string;
   nickname: string;

src/components/gnb/HeaderDashboard.tsx

@@ -4,7 +4,7 @@ import SkeletonUser from "@/shared/skeletonUser";
 import Image from "next/image";
 import { MemberType, UserType } from "@/types/users";
 import { getMembers } from "@/api/members";
-import { getUserInfo } from "@/api/user";
+import { getUserInfo } from "@/api/users";
 import { getDashboardById } from "@/api/dashboards";
 import { TEAM_ID } from "@/constants/team";
 import { MemberAvatars, UserAvatars } from "@/components/gnb/Avatars";
@@ -74,8 +74,10 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         setIsLoading(false);
       }
     };
-
-    fetchUser();
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      fetchUser();
+    }
   }, []);
 
   /*대시보드 api 호출*/
@@ -205,31 +207,34 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
             </div>
           )}
 
-          {/*드롭다운 메뉴 너비 지정 목적의 유저 정보 섹션 div*/}
+          {/*드롭다운 메뉴 너비 지정 목적의 유저 섹션 div*/}
           <div className="relative flex items-center h-[60px] md:h-[70px] pr-[10px] md:pr-[30px] lg:pr-[80px]">
             {/*구분선*/}
             <div className="h-[34px] md:h-[38px] w-[1px] bg-[var(--color-gray3)]" />
-
-            {/*유저 정보*/}
-            {isLoading ? (
-              <SkeletonUser />
-            ) : (
-              user && (
-                <div
-                  onClick={() => setIsMenuOpen((prev) => !prev)}
-                  className="flex items-center gap-[12px] pl-[20px] md:pl-[30px] lg:pl-[35px] cursor-pointer"
-                >
-                  <UserAvatars user={user} />
-                  <span className="hidden md:block text-black3 md:text-base md:font-medium">
-                    {user.nickname}
-                  </span>
-                  <UserMenu
-                    isMenuOpen={isMenuOpen}
-                    setIsMenuOpen={setIsMenuOpen}
-                  />
-                </div>
-              )
-            )}
+            {/*유저 드롭다운 메뉴*/}
+            <div
+              onClick={() => setIsMenuOpen((prev) => !prev)}
+              className="flex items-center gap-[12px] pl-[20px] md:pl-[30px] lg:pl-[35px] cursor-pointer"
+            >
+              <UserMenu
+                user={user}
+                isMenuOpen={isMenuOpen}
+                setIsMenuOpen={setIsMenuOpen}
+              />
+              {/*유저 프로필*/}
+              {isLoading ? (
+                <SkeletonUser />
+              ) : (
+                user && (
+                  <>
+                    <UserAvatars user={user} />
+                    <span className="hidden md:block text-black3 md:text-base md:font-medium">
+                      {user.nickname}
+                    </span>
+                  </>
+                )
+              )}
+            </div>
           </div>
         </div>
       </div>

src/components/gnb/HeaderDefault.tsx

@@ -9,19 +9,20 @@ interface HeaderDefaultProps {
 
 const HeaderDefault: React.FC<HeaderDefaultProps> = ({ variant = "white" }) => {
   const router = useRouter();
-  const { user, clearUser } = useUserStore();
+  const user = useUserStore((state) => state.user);
+  const { clearUser } = useUserStore();
 
-  const isLoggedIn = !user;
+  const isLoggedIn = !!user;
   const isWhite = variant === "white";
 
   const handleAuthClick = () => {
     if (isLoggedIn) {
       clearUser();
       localStorage.removeItem("accessToken");
       localStorage.removeItem("expiresAt");
-      window.location.reload();
+      router.push("/");
     } else {
-      router.push("login");
+      router.push("/login");
     }
   };
 

src/components/gnb/UserMenu.tsx

@@ -2,18 +2,30 @@ import React, { useRef } from "react";
 import { useRouter } from "next/router";
 import { useClosePopup } from "@/hooks/useClosePopup";
 import { User, LogOut, FolderPen } from "lucide-react";
+import { UserType } from "@/types/users";
+import useUserStore from "@/store/useUserStore";
 
 interface UserMenuProps {
+  user: UserType | null;
   isMenuOpen: boolean;
   setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
+  const { clearUser } = useUserStore();
   const router = useRouter();
   const ref = useRef<HTMLDivElement>(null);
 
   useClosePopup(ref, () => setIsMenuOpen(false));
 
+  const handleLogout = () => {
+    localStorage.setItem("isLoggingOut", "true");
+    clearUser();
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("expiresAt");
+    router.push("/");
+  };
+
   return (
     <div
       ref={ref}
@@ -37,10 +49,7 @@ const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
         <span className="hidden md:block">내 대시보드</span>
       </button>
       <button
-        onClick={() => {
-          localStorage.removeItem("accessToken");
-          router.push("/login");
-        }}
+        onClick={handleLogout}
         className="flex justify-center items-center w-full pt-2 pb-3 font-16r text-black3 hover:bg-[var(--color-gray5)]"
       >
         <LogOut size={20} className="md:hidden" />

src/components/table/invited/InvitedDashBoard.tsx

@@ -5,6 +5,7 @@ import EmptyInvitations from "./EmptyInvitations";
 import { apiRoutes } from "@/api/apiRoutes";
 import axiosInstance from "@/api/axiosInstance";
 import { Invite } from "@/types/invite";
+import useUserStore from "@/store/useUserStore";
 
 const ITEMS_PER_PAGE = 6; // 한 번에 보여줄 개수
 
@@ -179,6 +180,7 @@ function InvitedList({
 type CursorId = number;
 
 export default function InvitedDashBoard() {
+  const { user } = useUserStore();
   const [searchTitle, setSearchTitle] = useState("");
   const [invitationData, setInvitationData] = useState<Map<CursorId, Invite[]>>(
     new Map()
@@ -193,63 +195,67 @@ export default function InvitedDashBoard() {
   };
 
   useEffect(() => {
-    fetchNextPage(); // 초기 데이터 6개 불러오기
-  }, []);
+    if (user) {
+      fetchNextPage();
+    } // 초기 데이터 6개 불러오기
+  }, [user]);
 
   /* 초대 목록 데이터 불러오기 */
   const fetchNextPage = async () => {
-    try {
-      const existingCursorId =
-        cursorId !== null && cursorId !== undefined
-          ? invitationData.get(cursorId)
-          : undefined;
+    if (user) {
+      try {
+        const existingCursorId =
+          cursorId !== null && cursorId !== undefined
+            ? invitationData.get(cursorId)
+            : undefined;
 
-      if (existingCursorId && existingCursorId.length > 0) {
-        // 이미 데이터가 존재하면 더 이상 요청하지 않음
-        return;
-      }
+        if (existingCursorId && existingCursorId.length > 0) {
+          // 이미 데이터가 존재하면 더 이상 요청하지 않음
+          return;
+        }
 
-      if (isFetchingRef.current) return; // 이미 데이터가 불러와졌다면 중복 요청 방지
-      isFetchingRef.current = true; // 데이터 요청 시작
+        if (isFetchingRef.current) return; // 이미 데이터가 불러와졌다면 중복 요청 방지
+        isFetchingRef.current = true; // 데이터 요청 시작
 
-      const res = await axiosInstance.get(apiRoutes.Invitations(), {
-        params: {
-          size: ITEMS_PER_PAGE,
-          cursorId: cursorId || null,
-        },
-      });
+        const res = await axiosInstance.get(apiRoutes.Invitations(), {
+          params: {
+            size: ITEMS_PER_PAGE,
+            cursorId: cursorId || null,
+          },
+        });
 
-      if (res.data && Array.isArray(res.data.invitations)) {
-        const newInvitations = res.data.invitations.map(
-          (item: {
-            id: number;
-            dashboard: { title: string };
-            inviter: { nickname: string };
-          }) => ({
-            id: item.id,
-            title: item.dashboard.title,
-            nickname: item.inviter.nickname,
-          })
-        ) as Invite[];
+        if (res.data && Array.isArray(res.data.invitations)) {
+          const newInvitations = res.data.invitations.map(
+            (item: {
+              id: number;
+              dashboard: { title: string };
+              inviter: { nickname: string };
+            }) => ({
+              id: item.id,
+              title: item.dashboard.title,
+              nickname: item.inviter.nickname,
+            })
+          ) as Invite[];
 
-        if (newInvitations.length > 0) {
-          setCursorId(res.data.cursorId);
-        }
+          if (newInvitations.length > 0) {
+            setCursorId(res.data.cursorId);
+          }
 
-        setInvitationData((prev) => {
-          const newMap = new Map(prev);
-          newMap.set(cursorId as CursorId, newInvitations);
-          return newMap;
-        });
+          setInvitationData((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(cursorId as CursorId, newInvitations);
+            return newMap;
+          });
 
-        if (newInvitations.length < ITEMS_PER_PAGE) {
-          setHasMore(false);
+          if (newInvitations.length < ITEMS_PER_PAGE) {
+            setHasMore(false);
+          }
         }
+      } catch (error) {
+        console.error("초대내역 불러오는데 오류 발생:", error);
+      } finally {
+        isFetchingRef.current = false; // 데이터 요청 완료
       }
-    } catch (error) {
-      console.error("초대내역 불러오는데 오류 발생:", error);
-    } finally {
-      isFetchingRef.current = false; // 데이터 요청 완료
     }
   };