Merge pull request #129 from rover1523/mypage

[Fix] mypage: SideMenu 수정, 대시보드에서 카드 클릭시 모달창 나오게 설정

Author: rover1523

src/api/card.ts

@@ -1,5 +1,5 @@
 import axiosInstance from "./axiosInstance";
-import type { CardType } from "@/types/cards"; // Dashboard 타입 import
+import type { CardDetailType } from "@/types/cards"; // Dashboard 타입 import
 import { apiRoutes } from "@/api/apiRoutes";
 
 /** 1. 카드 이미지 업로드 */
@@ -114,34 +114,13 @@ export const updateCard = async ({
   return response.data;
 };
 
-// 카드 목록 조회
-export const getCardsByColumn = async ({
-  columnId,
-  cursorId,
-  size = 10,
-}: {
-  columnId: number;
-  cursorId?: number;
-  size?: number;
-}) => {
-  const res = await axiosInstance.get(apiRoutes.cards(), {
-    params: {
-      columnId,
-      cursorId,
-      size,
-    },
-  });
-
-  return res.data;
-};
-
-// 카드 상세 조회
-export async function getCardDetail(cardId: number): Promise<CardType> {
+//카드조회
+export async function getCardDetail(cardId: number): Promise<CardDetailType> {
   try {
     // apiRoutes를 사용하여 URL 동적 생성
     const url = apiRoutes.cardDetail(cardId);
     const response = await axiosInstance.get(url);
-    return response.data as CardType;
+    return response.data as CardDetailType;
   } catch (error) {
     console.error("대시보드 데이터를 불러오는 데 실패했습니다.", error);
     throw error;

src/components/columnCard/Column.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { CardType } from "@/types/task";
+import { CardDetailType } from "@/types/cards";
 import Card from "./Card";
 import TodoModal from "@/components/modalInput/ToDoModal";
 import TodoButton from "@/components/button/TodoButton";
@@ -9,6 +10,7 @@ import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/columns";
 import { getDashboardMembers } from "@/api/card";
 import { MemberType } from "@/types/users";
+import CardDetailModal from "../modalDashboard/CardDetailModal";
 import { TEAM_ID } from "@/constants/team";
 
 type ColumnProps = {
@@ -31,8 +33,12 @@ export default function Column({
   const [members, setMembers] = useState<
     { id: number; userId: number; nickname: string }[]
   >([]);
+  const [selectedCard, setSelectedCard] = useState<CardDetailType | null>(null);
+
+  const handleCloseDetailModal = () => {
+    setSelectedCard(null);
+  };
 
-  // ✅ 멤버 불러오기
   useEffect(() => {
     const fetchMembers = async () => {
       try {
@@ -125,12 +131,35 @@ export default function Column({
               typeof window !== "undefined" && window.innerWidth < 768;
             if (isMobile && index > 0) return null;
             return (
-              <Card
+              <div
                 key={task.id}
-                {...task}
-                imageUrl={task.imageUrl}
-                assignee={task.assignee}
-              />
+                onClick={() =>
+                  setSelectedCard({
+                    id: task.id,
+                    title: task.title,
+                    tags: task.tags,
+                    dueDate: task.dueDate,
+                    assignee: {
+                      ...task.assignee,
+                      profileImageUrl: task.assignee.profileImageUrl ?? "",
+                    },
+                    imageUrl: task.imageUrl ?? null,
+                    description: task.description ?? "",
+                    columnId: task.columnId,
+                    dashboardId: task.dashboardId,
+                    status: columnTitle,
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                  })
+                }
+              >
+                <Card
+                  key={task.id}
+                  {...task}
+                  imageUrl={task.imageUrl}
+                  assignee={task.assignee}
+                />
+              </div>
             );
           })}
         </div>
@@ -166,6 +195,14 @@ export default function Column({
         onClose={() => setIsDeleteModalOpen(false)}
         onDelete={handleDeleteColumn}
       />
+      {selectedCard && (
+        <CardDetailModal
+          card={selectedCard}
+          onClose={handleCloseDetailModal}
+          currentUserId={selectedCard.assignee.id}
+          dashboardId={dashboardId}
+        />
+      )}
     </div>
   );
 }

src/components/modalDashboard/CardDetail.tsx

@@ -1,9 +1,9 @@
 import Image from "next/image";
-import { CardType } from "@/types/cards";
+import { CardDetailType } from "@/types/cards";
 import { ProfileIcon } from "./profelicon";
 
 interface CardDetailProps {
-  card: CardType;
+  card: CardDetailType;
   columnName: string;
 }
 

src/components/modalDashboard/CardDetailModal.tsx

@@ -6,11 +6,11 @@ import CardInput from "@/components/modalInput/CardInput";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createComment } from "@/api/comment";
 import { deleteCard } from "@/api/card";
-import type { CardType } from "@/types/cards";
+import type { CardDetailType } from "@/types/cards";
 import TaskModal from "@/components/modalInput/TaskModal"; // 경로는 실제 위치에 맞게 조정하세요
 
 interface CardDetailModalProps {
-  card: CardType;
+  card: CardDetailType;
   currentUserId: number;
   dashboardId: number;
   onClose: () => void;
@@ -22,7 +22,7 @@ export default function CardDetailPage({
   dashboardId,
   onClose,
 }: CardDetailModalProps) {
-  const [cardData, setCardData] = useState<CardType>(card);
+  const [cardData, setCardData] = useState<CardDetailType>(card);
   const [commentText, setCommentText] = useState("");
   const [showMenu, setShowMenu] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);

src/components/modalInput/ToDoModal.tsx

@@ -7,8 +7,8 @@ import ModalImage from "@/components/modalInput/ModalImage";
 import TextButton from "@/components/modalInput/TextButton";
 
 interface TaskModalProps {
-  onClose: () => void;
   isOpen: boolean;
+  onClose: () => void;
   teamId: string;
   dashboardId: number;
   columnId: number;

src/pages/mypage.tsx

@@ -1,45 +1,37 @@
-// import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import HeaderMyPage from "@/components/gnb/HeaderDashboard";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import ProfileCard from "@/components/card/Profile";
 import ChangePassword from "@/components/card/ChangePassword";
+import { Dashboard, getDashboards } from "@/api/dashboards";
+import { useAuthGuard } from "@/hooks/useAuthGuard";
 import { TEAM_ID } from "@/constants/team";
-// import { getDashboards } from "@/api/dashboards";
 
 export default function MyPage() {
-  // const teamId = "13-4";
-  //const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
+  const { user, isInitialized } = useAuthGuard();
+  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
 
-  /*interface Dashboard {
-    id: number;
-    title: string;
-    color: string;
-    userId: number;
-    createdAt: string;
-    updatedAt: string;
-    createdByMe: boolean;
-  }*/
+  const fetchDashboards = async () => {
+    try {
+      const res = await getDashboards({});
+      setDashboards(res.dashboards); // 👉 정상 저장
+    } catch (error) {
+      console.error("대시보드 불러오기 실패:", error);
+    }
+  };
 
-  /* SideMenu 값 불러오기 */
-  // const fetchDashboards = async () => {
-  //   try {
-  //     const res = await getDashboards({ teamId });
-  //     setDashboardList(res.dashboards);
-  //   } catch (error) {
-  //     console.error("대시보드 불러오기 실패:", error);
-  //   }
-  // };
-
-  // useEffect(() => {
-  //   fetchDashboards();
-  // }, [teamId]);
+  useEffect(() => {
+    if (isInitialized && user) {
+      fetchDashboards();
+    }
+  }, [isInitialized, user]);
 
   return (
     <div className="flex">
-      <SideMenu teamId={TEAM_ID} dashboardList={[]} />
+      <SideMenu teamId={TEAM_ID} dashboardList={dashboards} />
       <div className="flex flex-col w-full">
         <HeaderMyPage variant="mypage" />
-        <div className="flex flex-col items-center w-full mt-10">
+        <div className="flex flex-col justify-start w-full mt-10">
           <ProfileCard />
           <ChangePassword />
         </div>

src/types/cards.ts

@@ -4,7 +4,7 @@ export interface Assignee {
   id: number;
 }
 
-export interface CardType {
+export interface CardDetailType {
   status: string;
   id: number;
   title: string;
@@ -16,4 +16,5 @@ export interface CardType {
   columnId: number;
   createdAt: string;
   updatedAt: string;
+  dashboardId: number;
 }