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

[Refactor, Feat] Gnb: 헤더 기본 출력 기능 추가

Author: hhjin1

src/components/Layouts/DashboardLayout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import HeaderDashboard from "@/components/gnb/HeaderDashboard";
+import SideMenu from "@/components/sideMenu/SideMenu";
+import { DashboardType } from "@/types/dashboard";
+import { TEAM_ID } from "@/constants/team";
+
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+  dashboardList: DashboardType[];
+  dashboardId?: string | string[];
+}
+
+const DashboardLayout = ({
+  children,
+  dashboardList,
+  dashboardId,
+}: DashboardLayoutProps) => {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <SideMenu teamId={TEAM_ID} dashboardList={dashboardList} />
+      <div className="flex flex-col flex-1">
+        <HeaderDashboard variant="dashboard" dashboardId={dashboardId} />
+        <div className="overflow-auto flex-1 px-[50px] pt-[10px] pb-10">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;

src/components/gnb/HeaderDashboard.tsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
+import SkeletonUser from "@/shared/skeletonUser";
 import Image from "next/image";
-import SkeletonUser from "../../shared/skeletonUser";
-import { MemberType, UserType } from "../../types/users";
+import { MemberType, UserType } from "@/types/users";
 import { getMembers } from "@/api/members";
 import { getUserInfo } from "@/api/user";
 import { getDashboardById } from "@/api/dashboards";
 import { TEAM_ID } from "@/constants/team";
-import RandomProfile from "../table/member/RandomProfile";
-import InviteDashboard from "../modal/InviteDashboard";
+import RandomProfile from "@/components/table/member/RandomProfile";
+import InviteDashboard from "@/components/modal/InviteDashboard";
 
 interface HeaderDashboardProps {
   variant?: "mydashboard" | "dashboard" | "mypage";
@@ -27,7 +27,11 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
   const router = useRouter();
   const [user, setUser] = useState<UserType | null>(null);
   const [members, setMembers] = useState<MemberType[]>([]);
-  const [dashboardTitle, setDashboardTitle] = useState();
+  const [dashboard, setDashboard] = useState<{
+    title: string;
+    createdByMe: boolean;
+  } | null>(null);
+  const [errorMessage, setErrorMessage] = useState("");
   const [isLoading, setIsLoading] = useState(true);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -45,7 +49,8 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         const user = await getUserInfo({ teamId: TEAM_ID });
         setUser(user);
       } catch (error) {
-        console.log("유저 정보 불러오기 실패", error);
+        console.error("유저 정보 불러오기 실패", error);
+        setErrorMessage("유저 정보를 불러오지 못했습니다.");
       } finally {
         setIsLoading(false);
       }
@@ -62,6 +67,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         setMembers(members);
       } catch (error) {
         console.error("멤버 불러오기 실패:", error);
+        setErrorMessage("멤버 정보를 불러오지 못했습니다.");
       } finally {
         setIsLoading(false);
       }
@@ -73,46 +79,66 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
 
   /*대시보드 이름 api 호출*/
   useEffect(() => {
-    const fetchDashboardTitle = async () => {
+    const fetchDashboard = async () => {
       if (variant === "dashboard" && dashboardId) {
         try {
-          const dashboard = await getDashboardById({
+          const dashboardData = await getDashboardById({
             teamId: TEAM_ID,
             dashboardId: Number(dashboardId),
           });
-          setDashboardTitle(dashboard.title);
+          setDashboard(dashboardData);
         } catch (error) {
-          console.error("대시보드 타이틀 불러오기 실패", error);
+          console.error("대시보드 정보 불러오기 실패", error);
+          setErrorMessage("대시보드를 불러오지 못했습니다.");
+        } finally {
+          setIsLoading(false);
         }
       }
     };
-    fetchDashboardTitle();
+    fetchDashboard();
   }, [variant, dashboardId]);
 
-  const title =
-    variant === "mypage"
-      ? "계정 관리"
-      : variant === "dashboard" && dashboardTitle
-        ? dashboardTitle
-        : "내 대시보드";
+  /*헤더 종류에 따라 다른 제목 표시*/
+  const title = (() => {
+    if (variant === "mypage") return "계정 관리";
+    if (variant === "dashboard" && dashboard?.title) return dashboard.title;
+    return "내 대시보드";
+  })();
 
   return (
     <header className="w-full h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[#D9D9D9]">
       <div className="w-full flex items-center justify-between pl-[4vw]">
-        <div className="flex items-center gap-[8px]">
-          <p
-            className={`text-base text-black3 font-bold md:text-xl
-            ${variant === "mydashboard" ? "block" : "hidden lg:block"}`}
-          >
-            {title}
+        {errorMessage && (
+          <p className="text-sm text-[var(--color-red)] px-4 py-2">
+            {errorMessage}
           </p>
+        )}
+        <div className="flex items-center gap-[8px]">
+          <p className="text-base text-black3 font-bold md:text-xl">{title}</p>
+          {dashboard?.createdByMe && (
+            <Image
+              src="/svgs/crown.svg"
+              alt="왕관 아이콘"
+              width={22}
+              height={22}
+              className="inline-block"
+              unoptimized
+              priority
+            />
+          )}
         </div>
 
         <div className="flex items-center">
           {/*관리 / 초대하기 버튼*/}
           <div className="flex gap-[6px] md:gap-[16px] pr-[40px]">
             <button
-              onClick={() => router.push(`/dashboard/${dashboardId}/edit`)}
+              onClick={() => {
+                if (dashboardId) {
+                  router.push(`/dashboard/${dashboardId}/edit`);
+                } else {
+                  router.push("mydashboard");
+                }
+              }}
               className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
             >
               <Image

src/pages/404.tsx

@@ -30,3 +30,5 @@ export default function Custom404() {
     </div>
   );
 }
+
+Custom404.hideHeader = true;

src/pages/_app.tsx

@@ -1,6 +1,33 @@
-import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
+import HeaderDefault from "@/components/gnb/HeaderDefault";
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  const router = useRouter();
+  const pathname = router.pathname;
+
+  const isDashboardPage = pathname.startsWith("/dashboard");
+  // 헤더 숨길 페이지
+  const noHeaderRoutes = ["/login", "/signup", "/mydashboard", "/mypage"];
+  const isHeaderHidden =
+    (Component as any).hideHeader ||
+    noHeaderRoutes.includes(pathname) ||
+    isDashboardPage;
+
+  // 상황별 헤더 분기
+  const isLandingPage = pathname === "/";
+
+  const renderHeader = () => {
+    if (isHeaderHidden) return null;
+    if (isLandingPage) return <HeaderDefault variant="black" />;
+    return <HeaderDefault />;
+  };
+
+  return (
+    <>
+      {renderHeader()}
+      <Component {...pageProps} />
+    </>
+  );
 }

src/pages/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import Footer from "@/components/landing/Footer";
-import LandingHeader from "@/components/gnb/HeaderDefault";
 import LandingMain from "@/components/landing/LandingMain";
 
 export default function Home() {
@@ -21,7 +20,6 @@ export default function Home() {
 
   return (
     <>
-      <LandingHeader variant="black" />
       <LandingMain />
       <Footer />
     </>

src/types/dashboard.ts

@@ -0,0 +1,9 @@
+export interface DashboardType {
+  id: number;
+  title: string;
+  color: string;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
+  userId: number;
+}