Merge pull request #109 from part3-4team-Taskify/feature/Gnb

[Feat, Style, Refactor] 비로그인 상태에서 페이지 접근 시 화면 깜빡임 현상 수정, 로딩 스피너 추가

Author: hhjin1

src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center w-full h-screen bg-white">
+      <div className="w-12 h-12 border-6 border-[var(--primary)] border-solid rounded-full animate-spin border-t-transparent" />
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/components/gnb/HeaderDashboard.tsx

@@ -145,7 +145,6 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         </div>
 
         <div className="flex items-center">
-          {/*관리 버튼*/}
           <div
             className={`flex gap-[6px] md:gap-[16px] ${variant === "mydashboard" ? "pr-[22px] md:pr-[32px]" : ""}`}
           >
@@ -172,20 +171,25 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
               />
               <span className="text-sm md:text-base text-gray1">관리</span>
             </button>
+
             {/*초대하기 버튼*/}
-            <button
-              onClick={openInviteModal}
-              className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
-            >
-              <Image
-                src="/svgs/add-box.svg"
-                alt="초대하기 아이콘"
-                width={20}
-                height={20}
-                className="hidden md:block"
-              />
-              <span className="text-sm md:text-base text-gray1">초대하기</span>
-            </button>
+            {variant !== "mydashboard" && (
+              <button
+                onClick={openInviteModal}
+                className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
+              >
+                <Image
+                  src="/svgs/add-box.svg"
+                  alt="초대하기 아이콘"
+                  width={20}
+                  height={20}
+                  className="hidden md:block"
+                />
+                <span className="text-sm md:text-base text-gray1">
+                  초대하기
+                </span>
+              </button>
+            )}
             {isModalOpen && <InviteDashboard onClose={closeInviteModal} />}
           </div>
 

src/components/gnb/MemberListMenu.tsx

@@ -30,7 +30,7 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
         {members.map((member) => (
           <li
             key={member.id}
-            className="px-4 py-2 flex items-center gap-2 hover:bg-gray-100"
+            className="px-4 py-2 flex items-center gap-2 hover:bg-[#f9f9f9]"
           >
             <UserAvatars user={member} />
             <span className="text-black3 text-sm md:text-base">

src/components/gnb/UserMenu.tsx

@@ -11,6 +11,9 @@ interface UserMenuProps {
   setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+const dropdownButtonStyles =
+  "flex justify-center md:justify-start items-center w-full px-3 py-3 gap-3 font-16r text-black3 hover:text-[var(--primary)] hover:bg-[#f9f9f9] cursor-pointer";
+
 const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
   const { clearUser } = useUserStore();
   const router = useRouter();
@@ -36,23 +39,20 @@ const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
     >
       <button
         onClick={() => router.push("/mypage")}
-        className="flex justify-center items-center w-full pt-3 pb-2 font-16r text-black3 hover:bg-[var(--color-gray5)]"
+        className={dropdownButtonStyles}
       >
-        <User size={20} className="md:hidden" />
+        <User size={20} />
         <span className="hidden md:block">내 정보</span>
       </button>
       <button
         onClick={() => router.push("/mydashboard")}
-        className="flex justify-center items-center w-full pt-2 pb-2 font-16r text-black3 hover:bg-[var(--color-gray5)]"
+        className={dropdownButtonStyles}
       >
-        <FolderPen size={20} className="md:hidden" />
+        <FolderPen size={20} />
         <span className="hidden md:block">내 대시보드</span>
       </button>
-      <button
-        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" />
+      <button onClick={handleLogout} className={dropdownButtonStyles}>
+        <LogOut size={20} />
         <span className="hidden md:block">로그아웃</span>
       </button>
     </div>

src/hooks/useAuthGuard.ts

@@ -1,4 +1,5 @@
-// 로그아웃 상태에서 인증 필수 페이지 접근 시, 로그인 페이지로 이동
+// 로그아웃 상태에서 인증 필수 페이지 접근 시, 로그인 페이지로 이동시키는 역할
+// 각 페이지에 import 해서 실행 함수 추가해 줘야 작동함
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useUserStore from "@/store/useUserStore";
@@ -30,7 +31,7 @@ export const useAuthGuard = (redirectTo: string = "/login") => {
     restoreUser();
   }, [user, redirectTo, setUser, router]);
 
-  // 로그아웃 상태에서 인증 페이지 접근 시 로그인 페이지로 이동
+  // 직접 로그아웃한 게 아닐 때만 로그인 페이지로 이동
   useEffect(() => {
     const isLoggingOut = localStorage.getItem("isLoggingOut");
 

src/pages/_app.tsx

@@ -1,20 +1,29 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { NextPage } from "next";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useUserStore from "@/store/useUserStore";
 import HeaderDefault from "@/components/gnb/HeaderDefault";
 import { getUserInfo } from "@/api/users";
 import { TEAM_ID } from "@/constants/team";
 
+type NextPageWithLayout = NextPage & {
+  hideHeader?: boolean;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
 // 토큰 만료 설정
 function isTokenExpired() {
   const expiresAt = localStorage.getItem("expiresAt");
   if (!expiresAt) return true;
   return new Date().getTime() > parseInt(expiresAt, 10);
 }
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
   useEffect(() => {
     const initializeUser = async () => {
       const token = localStorage.getItem("accessToken");
@@ -42,7 +51,7 @@ export default function App({ Component, pageProps }: AppProps) {
   // 헤더 숨길 페이지
   const noHeaderRoutes = ["/login", "/signup", "/mydashboard", "/mypage"];
   const isHeaderHidden =
-    (Component as any).hideHeader ||
+    Component.hideHeader ||
     noHeaderRoutes.includes(pathname) ||
     isDashboardPage;
 

src/pages/mydashboard.tsx

@@ -9,6 +9,7 @@ import DashboardAddButton from "@/components/button/DashboardAddButton";
 import { getDashboards } from "@/api/dashboards";
 import { useRouter } from "next/router";
 import { useAuthGuard } from "@/hooks/useAuthGuard";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 interface Dashboard {
   id: number;
@@ -29,21 +30,6 @@ export default function MyDashboardPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const itemsPerPage = 6;
 
-  useEffect(() => {
-    if (isInitialized && user) {
-      fetchDashboards();
-    }
-  }, [isInitialized, user]);
-
-  // 로그인 여부 파악 전 렌더링 X, 로딩 중 표시
-  if (!isInitialized) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        로딩 중...
-      </div>
-    );
-  }
-
   const totalPages = Math.ceil((dashboardList.length + 1) / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
 
@@ -69,6 +55,12 @@ export default function MyDashboardPage() {
     }
   };
 
+  useEffect(() => {
+    if (isInitialized && user) {
+      fetchDashboards();
+    }
+  }, [isInitialized, user]);
+
   const handlePrevPage = () => {
     if (currentPage > 1) setCurrentPage((prev) => prev - 1);
   };
@@ -77,6 +69,10 @@ export default function MyDashboardPage() {
     if (currentPage < totalPages) setCurrentPage((prev) => prev + 1);
   };
 
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <div className="flex h-screen overflow-hidden">
       <SideMenu teamId={teamId} dashboardList={dashboardList} />