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

rover1523 · web-flow · commit 24a4aa2555fc · 2025-04-02T19:27:49.000+09:00
[Style, Refactor] mydashboard: 레이아웃 수정 / edit: 여백, 정렬 조정 / login: 전체 페이지 비로그인 접근 방지 적용
diff --git a/src/components/modal/NewDashboard.tsx b/src/components/modal/NewDashboard.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import Input from "../input/Input";
 import Image from "next/image";
 import { createDashboard } from "@/api/dashboards";
+import { toast } from "react-toastify";
 
 interface Dashboard {
   id: number;
@@ -38,7 +39,7 @@ export default function NewDashboard({ onClose, onCreate }: NewDashboardProps) {
       onCreate?.(response.data);
       onClose?.();
     } catch {
-      alert("대시보드 생성에 실패했습니다.");
+      toast.error("대시보드 생성에 실패했습니다.");
     } finally {
       setLoading(false);
     }
diff --git a/src/components/modalInput/ModalImage.tsx b/src/components/modalInput/ModalImage.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import AddButton from "./AddButton";
 import { uploadCardImage } from "@/api/card";
+import { toast } from "react-toastify";
 
 interface ModalImageProps {
   label: string;
@@ -51,7 +52,7 @@ export default function ModalImage({
       onImageSelect(imageUrl);
     } catch (error) {
       console.error("이미지 업로드 실패:", error);
-      alert("이미지 업로드에 실패했어요.");
+      toast.error("이미지 업로드에 실패했어요.");
     }
   };
 
diff --git a/src/components/modalInput/ToDoModal.tsx b/src/components/modalInput/ToDoModal.tsx
@@ -6,6 +6,7 @@ import ModalTextarea from "@/components/modalInput/ModalTextarea";
 import ModalImage from "@/components/modalInput/ModalImage";
 import TextButton from "@/components/modalInput/TextButton";
 import { useRouter } from "next/router";
+import { toast } from "react-toastify";
 
 interface TaskModalProps {
   isOpen: boolean;
@@ -66,7 +67,7 @@ export default function TaskModal({
       const assigneeUserId = selectedAssignee?.userId;
 
       if (!assigneeUserId) {
-        alert("담당자를 선택해 주세요.");
+        toast("담당자를 선택해 주세요.");
         return;
       }
 
@@ -85,7 +86,7 @@ export default function TaskModal({
       onClose();
     } catch (err) {
       console.error("카드 생성 실패:", err);
-      alert("카드 생성에 실패했습니다.");
+      toast.error("카드 생성에 실패했습니다.");
     }
   };
 
diff --git a/src/components/table/invited/InvitedDashBoard.tsx b/src/components/table/invited/InvitedDashBoard.tsx
@@ -95,56 +95,44 @@ function InvitedList({
   };
 
   return (
-    <div className="relative bg-white w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px] mx-auto mt-[40px]">
+    /* 초대 목록 헤더 */
+    <div className="relative bg-white w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px] mx-auto mt-1">
       {filteredData.length > 0 && (
-        <div className="hidden sm:grid grid-cols-3 px-6 w-full h-[26px] justify-start items-center">
-          <p className="lg:ml-10 font-normal text-[var(--color-gray2)]">이름</p>
-          <p className="font-normal text-[var(--color-gray2)]">초대자</p>
-          <p className="lg:ml-13 font-normal text-[var(--color-gray2)]">
+        <div className="font-16r hidden sm:grid grid-cols-[3fr_2fr_3fr] px-4 w-full h-[26px] items-center mb-5">
+          <p className="text-[var(--color-gray2)] whitespace-nowrap">이름</p>
+          <p className="text-[var(--color-gray2)] whitespace-nowrap">초대자</p>
+          <p className="text-center text-[var(--color-gray2)] whitespace-nowrap">
             수락 여부
           </p>
         </div>
       )}
-      <div className="scroll-area h-[400px] overflow-y-auto overflow-x-hidden">
-        {filteredData.length > 0
-          ? filteredData.map((invite, index) => (
-              <div
-                key={index}
-                className="pb-5 mb-[20px] w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px] h-auto sm:h-[50px]
-                sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
-              >
-                {/* 모바일 레이아웃 */}
-                <div className="flex flex-col mt-1 sm:hidden">
+
+      {/* 리스트 */}
+      <div className="scroll-area h-[150vw] max-h-[570px] sm:max-h-[320px] lg:max-h-[400px] overflow-y-auto overflow-x-hidden">
+        {filteredData.length > 0 ? (
+          filteredData.map((invite, index) => (
+            <div
+              key={index}
+              className="pb-5 mb-[20px] w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px]
+                 h-auto sm:h-[50px] border-b border-[var(--color-gray4)]
+                 sm:grid sm:grid-cols-[3fr_2fr_3fr] sm:items-center
+                 flex flex-col gap-10"
+            >
+              {/* 모바일 레이아웃 */}
+              <div className="flex flex-col mt-1 sm:hidden px-4 w-full gap-2">
+                <div className="flex justify-between">
                   <span className="text-[var(--color-gray2)]">이름</span>
-                  <span className="text-[#333236]">{invite.title}</span>
-                  <span className="mr-3.5 text-[var(--color-gray2)]">
-                    초대자
-                  </span>{" "}
-                  <span className="text-[#333236]">{invite.nickname}</span>
-                  <div className="flex gap-2 mt-2 justify-center">
-                    <button
-                      className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
-                      onClick={() => rejectInvite(invite.id)}
-                    >
-                      거절
-                    </button>
-                    <button
-                      className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
-                      onClick={() => acceptInvite(invite.id)}
-                    >
-                      수락
-                    </button>
-                  </div>
+                  <span className="text-[#333236] font-medium">
+                    {invite.title}
+                  </span>
                 </div>
-
-                {/* 웹, 태블릿 레이아웃 */}
-                <p className="lg:ml-21 md:ml-11 ml-9 justify-left mt-1 w-full hidden sm:flex">
-                  {invite.title}
-                </p>
-                <p className="lg:mr-25 md:mr-10 ml-9 justify-left mt-1 hidden sm:flex">
-                  {invite.nickname}
-                </p>
-                <div className="lg:mr-5 gap-2 mt-1 mr-2 justify-between sm:justify-start hidden sm:flex">
+                <div className="flex justify-between">
+                  <span className="text-[var(--color-gray2)]">초대자</span>
+                  <span className="text-[#333236] font-medium">
+                    {invite.nickname}
+                  </span>
+                </div>
+                <div className="flex gap-2 mt-1 justify-end">
                   <button
                     className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
                     onClick={() => rejectInvite(invite.id)}
@@ -159,15 +147,43 @@ function InvitedList({
                   </button>
                 </div>
               </div>
-            ))
-          : !hasMore && <NoResultDashBoard searchTitle={searchTitle} />}{" "}
-        {/* 검색 내역이 없을 경우 */}
+
+              {/* 웹/태블릿 레이아웃 */}
+              <div className="hidden sm:flex items-center pl-4">
+                <p className="text-[#333236]">{invite.title}</p>
+              </div>
+              <div className="hidden sm:flex items-center pl-5 lg:pl-0">
+                <p className="text-[#333236]">{invite.nickname}</p>
+              </div>
+              <div className="hidden sm:flex items-center justify-center gap-2 mr-1 lg:mr-12">
+                <button
+                  className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
+                  onClick={() => rejectInvite(invite.id)}
+                >
+                  거절
+                </button>
+                <button
+                  className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
+                  onClick={() => acceptInvite(invite.id)}
+                >
+                  수락
+                </button>
+              </div>
+            </div>
+          ))
+        ) : !hasMore ? (
+          <NoResultDashBoard searchTitle={searchTitle} />
+        ) : null}
+
+        {/* 검색 결과가 존재하지만 더 이상 데이터가 없을 때 */}
         {filteredData.length > 0 && !hasMore && (
-          <p className="lg:mr-18 text-center text-gray-400 bg-transparent">
+          <p className="text-center text-gray-400 bg-transparent">
             더 이상 초대 목록이 없습니다.
           </p>
         )}
-        {hasMore && <div ref={observerRef} className="h-[50px] w-[50px]"></div>}
+
+        {/* 인터섹션 옵저버 */}
+        {hasMore && <div ref={observerRef} className="h-[50px] w-[50px]" />}
       </div>
     </div>
   );
@@ -264,34 +280,33 @@ export default function InvitedDashBoard() {
       ) : (
         <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
           <div className="flex flex-col p-6 w-full h-[104px]">
-            <div className="flex flex-col w-[228px] sm:w-[448px] lg:w-[966px] gap-[24px]">
+            <div className="flex flex-col w-full sm:w-[448px] lg:w-[966px] gap-[24px]">
               <p className="text-black3 text-xl sm:text-2xl font-bold">
                 초대받은 대시보드
               </p>
 
-              <div className="relative w-[228px] sm:w-[448px] lg:w-[966px] mx-auto">
+              <div className="relative w-full sm:w-[448px] lg:w-[966px] mx-auto">
                 <input
                   id="title"
                   placeholder="검색"
                   type="text"
                   value={searchTitle}
                   onChange={handleSearchInputChange}
-                  className="text-[var(--color-gray2)] w-full h-[40px] px-[40px] py-[6px] border border-[#D9D9D9] bg-white rounded-[6px] placeholder-gray-400 outline-none"
+                  className="text-black3 w-full h-[40px] pl-[40px] py-[6px] border border-[#D9D9D9] bg-white rounded-[6px] placeholder-gray-400 outline-none"
                 />
                 <Search
                   width={18}
                   height={18}
                   color="#333236"
-                  className="absolute left-[12px] top-1/2 transform -translate-y-1/2"
-                />
-
-                <InvitedList
-                  searchTitle={searchTitle}
-                  invitationData={invitationArray}
-                  fetchNextPage={fetchNextPage}
-                  hasMore={hasMore}
+                  className="absolute left-[16px] top-1/2 transform -translate-y-1/2 z-50"
                 />
               </div>
+              <InvitedList
+                searchTitle={searchTitle}
+                invitationData={invitationArray}
+                fetchNextPage={fetchNextPage}
+                hasMore={hasMore}
+              />
             </div>
           </div>
         </div>
diff --git a/src/pages/dashboard/[dashboardId]/edit.tsx b/src/pages/dashboard/[dashboardId]/edit.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
+import { useAuthGuard } from "@/hooks/useAuthGuard";
 import ChangeBebridge from "@/components/modal/ChangeBebridge";
 import HeaderDashboardEdit from "@/components/gnb/HeaderDashboard";
 import MemberList from "@/components/table/member/MemberList";
@@ -10,9 +11,11 @@ import { getDashboards } from "@/api/dashboards";
 import DeleteDashboardModal from "@/components/modal/DeleteDashboardModal";
 import { DashboardType } from "@/types/task";
 import { TEAM_ID } from "@/constants/team";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 export default function EditDashboard() {
   const router = useRouter();
+  const { user, isInitialized } = useAuthGuard();
   const [dashboardList, setDashboardList] = useState<DashboardType[]>([]);
   const { dashboardId } = router.query;
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -45,8 +48,14 @@ export default function EditDashboard() {
   };
 
   useEffect(() => {
-    fetchDashboards();
-  }, []);
+    if (isInitialized && user) {
+      fetchDashboards();
+    }
+  }, [isInitialized, user]);
+
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
 
   return (
     <div className="flex h-screen overflow-hidden">
diff --git a/src/pages/dashboard/[dashboardId]/index.tsx b/src/pages/dashboard/[dashboardId]/index.tsx
@@ -1,6 +1,7 @@
 // src/pages/dashboard/[dashboardId]/index.tsx
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
+import { useAuthGuard } from "@/hooks/useAuthGuard";
 import { getColumns, createColumn } from "@/api/columns";
 import { getCardsByColumn } from "@/api/card";
 import { getDashboards } from "@/api/dashboards";
@@ -17,9 +18,11 @@ import ColumnsButton from "@/components/button/ColumnsButton";
 import AddColumnModal from "@/components/columnCard/AddColumnModal";
 import { TEAM_ID } from "@/constants/team";
 import { toast } from "react-toastify";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 export default function Dashboard() {
   const router = useRouter();
+  const { user, isInitialized } = useAuthGuard();
   const { dashboardId } = router.query;
   const [columns, setColumns] = useState<ColumnType[]>([]);
   const [tasksByColumn, setTasksByColumn] = useState<TasksByColumn>({});
@@ -41,12 +44,11 @@ export default function Dashboard() {
   const isMaxColumns = columns.length >= 10;
   const isCreateDisabled = isTitleEmpty || isDuplicate || isMaxColumns;
 
-  // router 준비되었을 때 렌더링
   useEffect(() => {
-    if (router.isReady && dashboardId) {
+    if (router.isReady && dashboardId && isInitialized && user) {
       setIsReady(true);
     }
-  }, [router.isReady, dashboardId]);
+  }, [router.isReady, dashboardId, isInitialized, user]);
 
   // 대시보드 목록 불러오기
   const fetchDashboards = async () => {
@@ -60,7 +62,7 @@ export default function Dashboard() {
 
   // 대시보드 및 칼럼/카드 데이터 패칭
   useEffect(() => {
-    if (!isReady || !dashboardId) return;
+    if (!isReady || !dashboardId || !isInitialized || !user) return;
 
     fetchDashboards();
 
@@ -93,9 +95,11 @@ export default function Dashboard() {
     };
 
     fetchColumnsAndCards();
-  }, [isReady, dashboardId]);
+  }, [isReady, dashboardId, isInitialized, user]);
 
-  if (!isReady) return <div>로딩 중...</div>;
+  if (!isReady || !isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
 
   return (
     <div className="flex h-screen overflow-hidden ">
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -6,6 +6,7 @@ import { postAuthData } from "@/api/auth";
 import Link from "next/link";
 import Input from "@/components/input/Input";
 import { apiRoutes } from "@/api/apiRoutes";
+import { toast } from "react-toastify";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -40,7 +41,7 @@ export default function LoginPage() {
       router.push("/mydashboard");
     } catch (error) {
       console.error("로그인 실패:", error);
-      alert("로그인에 실패했습니다.");
+      toast.error("로그인에 실패했습니다.");
     }
   };
 
diff --git a/src/pages/mydashboard.tsx b/src/pages/mydashboard.tsx
@@ -14,6 +14,7 @@ import { DeleteModal } from "@/components/modal/DeleteModal";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
 import { TEAM_ID } from "@/constants/team";
 import { Search } from "lucide-react";
+import { toast } from "react-toastify";
 
 interface Dashboard {
   id: number;
@@ -113,7 +114,7 @@ export default function MyDashboardPage() {
       setSelectedDashboardId(null);
       fetchDashboards();
     } catch (error) {
-      alert("대시보드 삭제에 실패했습니다.");
+      toast.error("대시보드 삭제에 실패했습니다.");
       console.error("삭제 실패:", error);
     }
   };
@@ -195,7 +196,7 @@ export default function MyDashboardPage() {
 
           {/* 초대받은 대시보드 */}
           <section className="w-full">
-            <div className="mt-[74px]">
+            <div className="mt-[50px]">
               <InvitedDashBoard />
             </div>
           </section>
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
@@ -5,6 +5,7 @@ import Input from "@/components/input/Input";
 import Link from "next/link";
 import { Modal } from "@/components/modal/Modal";
 import { CustomBtn } from "@/components/button/CustomButton";
+import { toast } from "react-toastify";
 
 export default function SignUpPage() {
   const [email, setEmail] = useState("");
@@ -44,7 +45,7 @@ export default function SignUpPage() {
       setIsSuccessModalOpen(true);
     } catch (error) {
       console.error("회원가입 실패", error);
-      alert("회원가입에 실패했습니다.");
+      toast.error("회원가입에 실패했습니다.");
     }
   };
 
