Skip to content

Commit d143e45

Browse files
rover1523rover1523
committed
[fix] 상태가 표시 되지 않은 부분에 대해서 수정 및 마이페이지 주석처리
1 parent 24d49af commit d143e45

File tree

4 files changed

+114
-78
lines changed

4 files changed

+114
-78
lines changed

‎src/components/modalDashboard/CardDetail.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface CardDetailProps {
77
columnName: string;
88
}
99

10-
export default function CardDetail({ card, columnName }: CardDetailProps) {
10+
export default function CardDetail({ card }: CardDetailProps) {
1111
return (
1212
<div className="p-4 ">
1313
<h2 className="text-xl font-bold mb-2">{card.title}</h2>
@@ -46,8 +46,11 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
4646
</div>
4747
</div>
4848
<div className="flex flex-wrap gap-2 mb-4">
49-
<span className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800">
50-
#{columnName}
49+
<span
50+
className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800"
51+
title={`상태: ${card.status}`}
52+
>
53+
{card.status}
5154
</span>
5255
{card.tags.map((tag, idx) => (
5356
<span
@@ -68,7 +71,6 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
6871
wordBreak: "break-word", // 긴 단어도 줄바꿈
6972
}}
7073
>
71-
ASDDKAHLklhaslhSZHlfhawsoluiehfoshfolshfhfhoalwshfwehofhweofhawoefhahsdfo;hsdfo;h
7274
{card.description}
7375
</p>
7476
{card.imageUrl && (

‎src/components/modalDashboard/CardDetailModal.tsx‎

Lines changed: 90 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { useState } from "react";
2-
import { MoreVertical, X } from "lucide-react"; // lucide 아이콘
2+
import { MoreVertical, X } from "lucide-react";
33
import CardDetail from "./CardDetail";
44
import CommentList from "./CommentList";
55
import CardInput from "@/components/modalInput/CardInput";
66
import { useMutation, useQueryClient } from "@tanstack/react-query";
77
import { createComment } from "@/api/comment";
88
import { deleteCard } from "@/api/card";
99
import type { CardType } from "@/types/cards";
10+
import TaskModal from "@/components/modalInput/TaskModal"; // 경로는 실제 위치에 맞게 조정하세요
1011

1112
interface CardDetailModalProps {
1213
card: CardType;
1314
currentUserId: number;
1415
teamId: string;
1516
dashboardId: number;
1617
onClose: () => void;
17-
onEditClick?: () => void; // 수정 모달 열기용 (선택)
1818
}
1919

2020
export default function CardDetailPage({
@@ -23,16 +23,16 @@ export default function CardDetailPage({
2323
teamId,
2424
dashboardId,
2525
onClose,
26-
onEditClick,
2726
}: CardDetailModalProps) {
27+
const [cardData, setCardData] = useState<CardType>(card);
2828
const [commentText, setCommentText] = useState("");
2929
const [showMenu, setShowMenu] = useState(false);
30+
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
3031
const queryClient = useQueryClient();
3132

3233
const { mutate: createCommentMutate } = useMutation({
3334
mutationFn: createComment,
3435
onSuccess: () => {
35-
console.log("댓글 등록 성공!");
3636
setCommentText("");
3737
queryClient.invalidateQueries({ queryKey: ["comments", card.id] });
3838
},
@@ -42,7 +42,7 @@ export default function CardDetailPage({
4242
mutationFn: () => deleteCard(teamId, card.id),
4343
onSuccess: () => {
4444
queryClient.invalidateQueries({ queryKey: ["cards"] });
45-
onClose(); // 모달 닫기
45+
onClose();
4646
},
4747
});
4848

@@ -57,64 +57,97 @@ export default function CardDetailPage({
5757
};
5858

5959
return (
60-
<div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
61-
<div className="relative bg-white rounded-lg shadow-lg w-[730px] h-[763px] flex flex-col">
62-
{/* 오른쪽 상단 메뉴 */}
63-
<div className="absolute top-2 right-6 w-[50px] h-[50px] z-30 flex items-center gap-2">
64-
<div className="relative">
65-
<button onClick={() => setShowMenu((prev) => !prev)}>
66-
<MoreVertical className="w-8 h-8 text-gray-500 hover:text-black" />
60+
<>
61+
<div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
62+
<div className="relative bg-white rounded-lg shadow-lg w-[730px] h-[763px] flex flex-col">
63+
{/* 오른쪽 상단 메뉴 */}
64+
<div className="absolute top-2 right-6 w-[50px] h-[50px] z-30 flex items-center gap-2">
65+
<div className="relative">
66+
<button onClick={() => setShowMenu((prev) => !prev)}>
67+
<MoreVertical className="w-8 h-8 text-gray-500 hover:text-black" />
68+
</button>
69+
{showMenu && (
70+
<div className="absolute right-0 mt-2 w-24 bg-white border rounded shadow z-40">
71+
<button
72+
className="block w-full px-3 py-2 text-sm text-violet-600 hover:bg-gray-100"
73+
onClick={() => {
74+
setIsEditModalOpen(true);
75+
setShowMenu(false);
76+
}}
77+
>
78+
수정하기
79+
</button>
80+
<button
81+
className="block w-full px-3 py-2 text-sm text-red-500 hover:bg-gray-100"
82+
onClick={() => deleteCardMutate()}
83+
>
84+
삭제하기
85+
</button>
86+
</div>
87+
)}
88+
</div>
89+
<button onClick={onClose}>
90+
<X className="w-8 h-8 text-gray-500 hover:text-black" />
6791
</button>
68-
{showMenu && (
69-
<div className="absolute right-0 mt-2 w-24 bg-white border rounded shadow z-40">
70-
<button
71-
className="block w-full px-3 py-2 text-sm text-violet-600 hover:bg-gray-100"
72-
onClick={() => {
73-
onEditClick?.();
74-
setShowMenu(false);
75-
}}
76-
>
77-
수정하기
78-
</button>
79-
<button
80-
className="block w-full px-3 py-2 text-sm text-red-500 hover:bg-gray-100"
81-
onClick={() => deleteCardMutate()}
82-
>
83-
삭제하기
84-
</button>
85-
</div>
86-
)}
8792
</div>
88-
<button onClick={onClose}>
89-
<X className="w-8 h-8 text-gray-500 hover:text-black" />
90-
</button>
91-
</div>
9293

93-
{/* 모달 내부 콘텐츠 */}
94-
<div className="p-6 flex gap-6 overflow-y-auto">
95-
<CardDetail card={card} columnName={""} />
96-
</div>
94+
{/* 모달 내부 콘텐츠 */}
95+
<div className="p-6 flex gap-6 overflow-y-auto">
96+
<CardDetail card={cardData} columnName={""} />
97+
</div>
9798

98-
{/* 댓글 입력창 */}
99-
<div className="p-4">
100-
<CardInput
101-
hasButton
102-
small
103-
value={commentText}
104-
onTextChange={setCommentText}
105-
onButtonClick={handleCommentSubmit}
106-
/>
107-
</div>
99+
{/* 댓글 입력창 */}
100+
<div className="p-4">
101+
<CardInput
102+
hasButton
103+
small
104+
value={commentText}
105+
onTextChange={setCommentText}
106+
onButtonClick={handleCommentSubmit}
107+
/>
108+
</div>
108109

109-
{/* 댓글 목록 */}
110-
<div className="px-6 space-y-4 max-h-[200px] overflow-y-auto">
111-
<CommentList
112-
cardId={card.id}
113-
currentUserId={currentUserId}
114-
teamId={teamId}
115-
/>
110+
{/* 댓글 목록 */}
111+
<div className="px-6 space-y-4 max-h-[200px] overflow-y-auto">
112+
<CommentList
113+
cardId={card.id}
114+
currentUserId={currentUserId}
115+
teamId={""}
116+
/>
117+
</div>
116118
</div>
117119
</div>
118-
</div>
120+
121+
{/* TaskModal 수정 모드 */}
122+
{isEditModalOpen && (
123+
<TaskModal
124+
mode="edit"
125+
onClose={() => setIsEditModalOpen(false)}
126+
onSubmit={(data) => {
127+
setCardData((prev) => ({
128+
...prev,
129+
status: data.status as "todo" | "in-progress" | "done",
130+
assignee: { ...prev.assignee, nickname: data.assignee },
131+
title: data.title,
132+
description: data.description,
133+
dueDate: data.deadline,
134+
tags: data.tags,
135+
imageUrl: data.image ?? "",
136+
}));
137+
setIsEditModalOpen(false);
138+
}}
139+
initialData={{
140+
status: cardData.status,
141+
assignee: cardData.assignee.nickname,
142+
title: cardData.title,
143+
description: cardData.description,
144+
deadline: cardData.dueDate,
145+
tags: cardData.tags,
146+
image: cardData.imageUrl ?? "",
147+
}}
148+
members={[{ nickname: cardData.assignee.nickname }]}
149+
/>
150+
)}
151+
</>
119152
);
120153
}

‎src/pages/mypage.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
import React, { useState, useEffect } from "react";
1+
// import React, { useState, useEffect } from "react";
22
import HeaderMyPage from "@/components/gnb/HeaderDashboard";
33
import SideMenu from "@/components/sideMenu/SideMenu";
44
import ProfileCard from "@/components/card/Profile";
55
import ChangePassword from "@/components/card/ChangePassword";
6-
import { getDashboards } from "@/api/dashboards";
6+
// import { getDashboards } from "@/api/dashboards";
77

88
export default function MyPage() {
9-
const teamId = "13-4";
10-
const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
9+
// const teamId = "13-4";
10+
//const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
1111

12-
interface Dashboard {
12+
/*interface Dashboard {
1313
id: number;
1414
title: string;
1515
color: string;
1616
userId: number;
1717
createdAt: string;
1818
updatedAt: string;
1919
createdByMe: boolean;
20-
}
20+
}*/
2121

2222
/* SideMenu 값 불러오기 */
23-
const fetchDashboards = async () => {
24-
try {
25-
const res = await getDashboards({ teamId });
26-
setDashboardList(res.dashboards);
27-
} catch (error) {
28-
console.error("대시보드 불러오기 실패:", error);
29-
}
30-
};
23+
// const fetchDashboards = async () => {
24+
// try {
25+
// const res = await getDashboards({ teamId });
26+
// setDashboardList(res.dashboards);
27+
// } catch (error) {
28+
// console.error("대시보드 불러오기 실패:", error);
29+
// }
30+
// };
3131

32-
useEffect(() => {
33-
fetchDashboards();
34-
}, [teamId]);
32+
// useEffect(() => {
33+
// fetchDashboards();
34+
// }, [teamId]);
3535

3636
return (
3737
<div className="flex">

‎src/types/cards.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export interface Assignee {
55
}
66

77
export interface CardType {
8+
status: string;
89
id: number;
910
title: string;
1011
description: string;

0 commit comments

Comments
 (0)