Skip to content

Commit 91d007c

Browse files
ozen0718ozen0718
authored
Merge pull request #207 from part3-4team-Taskify/minji
[Style, Refactor] CardDetail: 태그 영역 하단 이동 / dashboardindex: 칼럼 추가 버튼 반응형 출력 변경, 헤더&사이드메뉴 고정
2 parents c3fed30 + c06fe4e commit 91d007c

File tree

6 files changed

+57
-56
lines changed

6 files changed

+57
-56
lines changed

‎src/components/modalDashboard/CardDetail.tsx‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -22,46 +22,16 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
2222

2323
return (
2424
<div className="flex flex-col gap-5 w-full">
25-
{/* 상태 + 태그 */}
26-
<div className="flex flex-wrap items-center gap-5">
27-
<ColumnNameTag label={columnName} />
28-
<div className="w-[1px] h-[20px] bg-[var(--color-gray3)]" />
29-
<div className="flex flex-wrap gap-[6px]">
30-
{currentCard.tags.map((tag, idx) => {
31-
const { textColor, bgColor } = getTagColor(idx);
32-
return (
33-
<ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
34-
{tag}
35-
</ColorTagChip>
36-
);
37-
})}
38-
</div>
39-
</div>
40-
41-
{/* 설명 */}
42-
<p className="text-black font-normal sm:text-[16px] text-[14px] overflow-auto pr-1 w-full lg:max-w-[445px] sm:max-w-[420px] max-w-[295px] min-h-0 sm:max-h-[100px] max-h-[80px] whitespace-pre-wrap word-break break-words">
25+
{/* 내용 */}
26+
<p
27+
className="text-black font-normal sm:text-[16px] text-[14px] overflow-auto pr-1
28+
w-full lg:max-w-[445px] sm:max-w-[420px] max-w-[295px]
29+
min-h-0 sm:max-h-[140px] max-h-[80px]
30+
whitespace-pre-wrap word-break break-words"
31+
>
4332
{currentCard.description}
4433
</p>
4534

46-
{/* 담당자 */}
47-
<div className="flex items-center gap-2 text-sm text-[var(--color-gray1)]">
48-
<span className="font-medium">담당자:</span>
49-
{currentCard.assignee.profileImageUrl ? (
50-
<Image
51-
src={currentCard.assignee.profileImageUrl}
52-
alt="프로필 이미지"
53-
width={24}
54-
height={24}
55-
className="w-6 h-6 rounded-full object-cover"
56-
/>
57-
) : (
58-
<div className="w-6 h-6 flex items-center justify-center bg-[#A3C4A2] text-white font-medium rounded-full text-xs">
59-
{currentCard.assignee.nickname[0]}
60-
</div>
61-
)}
62-
<span>{currentCard.assignee.nickname}</span>
63-
</div>
64-
6535
{/* 이미지 */}
6636
{currentCard.imageUrl && (
6737
<div
@@ -81,6 +51,22 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
8151
</div>
8252
)}
8353

54+
{/* 상태 + 태그 */}
55+
<div className="flex flex-wrap items-center gap-5">
56+
<ColumnNameTag label={columnName} />
57+
<div className="w-[1px] h-[20px] bg-[var(--color-gray3)]" />
58+
<div className="flex flex-wrap gap-[6px]">
59+
{currentCard.tags.map((tag, idx) => {
60+
const { textColor, bgColor } = getTagColor(idx);
61+
return (
62+
<ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
63+
{tag}
64+
</ColorTagChip>
65+
);
66+
})}
67+
</div>
68+
</div>
69+
8470
{isImageModalOpen && currentCard.imageUrl && (
8571
<PopupImageModal
8672
imageUrl={currentCard.imageUrl}

‎src/components/modalDashboard/CardDetailModal.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useMemo, useRef, useState } from "react";
2+
import clsx from "clsx";
23
import { MoreVertical, X } from "lucide-react";
34
import CardDetail from "./CardDetail";
45
import CommentList from "./CommentList";
5-
import CardInput from "@/components/modalInput/CardInput";
6+
import CommentInput from "@/components/modalInput/CardInput";
67
import { Representative } from "@/components/modalDashboard/Representative";
78
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
89
import { createComment } from "@/api/comment";
@@ -106,18 +107,38 @@ export default function CardDetailPage({
106107

107108
return (
108109
<>
109-
<div className="fixed inset-0 bg-black/35 z-50 flex items-center justify-center px-4 sm:px-6">
110-
<div className="relative flex flex-col overflow-y-auto max-w-[730px] max-h-[calc(100vh-4rem)] lg:w-[730px] sm:w-[678px] w-[327px] bg-white rounded-lg shadow-lg">
110+
{/* 모달 고정 div */}
111+
<div
112+
className={clsx(
113+
"fixed inset-0 z-50",
114+
"flex items-center justify-center px-4 sm:px-6",
115+
"bg-black/35"
116+
)}
117+
>
118+
{/* 모달창 */}
119+
<div
120+
className={clsx(
121+
"relative flex flex-col overflow-y-auto",
122+
"lg:w-[730px] sm:w-[678px] w-[327px]",
123+
"max-w-[730px] max-h-[calc(100vh-6rem)]",
124+
"bg-white rounded-lg shadow-lg"
125+
)}
126+
>
111127
<div className="flex items-center justify-center px-6 pt-6 pb-2">
128+
{/* 내부 아이템 컨테이너 */}
112129
<div className="flex flex-col lg:w-[674px] sm:w-[614px] w-[295px]">
130+
{/* 헤더 컨테이너 */}
113131
<div className="flex justify-between sm:mb-4 mb-2">
132+
{/* 제목 */}
114133
<h2 className="text-black3 font-bold sm:text-[20px] text-[16px]">
115134
{cardData.title}
116135
</h2>
136+
{/* 버튼 컨테이너 */}
117137
<div
118138
className="relative flex items-center sm:gap-[24px] gap-[16px]"
119139
ref={popupRef}
120140
>
141+
{/* 메뉴 버튼 */}
121142
<button
122143
onClick={() => setShowMenu((prev) => !prev)}
123144
className="sm:w-[28px] sm:h-[28px] w-[20px] h-[20px] flex items-center justify-center hover:cursor-pointer"
@@ -126,6 +147,7 @@ export default function CardDetailPage({
126147
>
127148
<MoreVertical className="w-8 h-8 text-black3 cursor-pointer" />
128149
</button>
150+
{/* 수정/삭제 드롭다운 메뉴 */}
129151
{showMenu && (
130152
<div className="absolute right-0 top-9.5 p-2 z-40 flex flex-col items-center justify-center sm:gap-[6px] gap-[11px] sm:w-28 w-20 sm:h-24 bg-white border border-[#D9D9D9] rounded-lg">
131153
<button
@@ -153,18 +175,20 @@ export default function CardDetailPage({
153175
</div>
154176
</div>
155177

178+
{/* 카드 내용 */}
156179
<div className="flex flex-col-reverse sm:flex-row gap-4">
157180
<CardDetail card={cardData} columnName={columnName} />
158181
<div>
159182
<Representative card={cardData} />
160183
</div>
161184
</div>
162185

186+
{/* 댓글 */}
163187
<div className="mt-4 w-full lg:max-w-[445px] md:max-w-[420px]">
164188
<p className="mb-1 text-black3 font-medium sm:text-[16px] text-[14px]">
165189
댓글
166190
</p>
167-
<CardInput
191+
<CommentInput
168192
hasButton
169193
value={commentText}
170194
onTextChange={setCommentText}

‎src/components/modalDashboard/CommentList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function CommentList({
4444
>
4545
{allComments.length === 0 ? (
4646
<p
47-
className="sm:pt-8 pt-4 text-center text-[var(--color-gray1)]
47+
className="sm:pt-4 pt-2 text-center text-[var(--color-gray1)]
4848
font-normal sm:text-[14px] text-[12px]"
4949
>
5050
작성된 댓글이 없습니다.

‎src/components/modalDashboard/Representative.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const Representative = ({ card }: RepresentativeProps) => {
3535

3636
{/* 마감일 컨테이너 */}
3737
<div>
38-
<p className="font-12sb text-black3 sm:mb-1 mb-[4px]">마감일</p>
38+
<p className="font-12sb text-black3 sm:mb-1 mb-[8px]">마감일</p>
3939
<p className="font-normal text-black3 sm:text-[14px] text-[12px]">
4040
{new Date(card.dueDate).toLocaleString("ko-KR", {
4141
year: "numeric",

‎src/components/modalInput/CardInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function CardInput({
3434
placeholder={placeholder}
3535
className={clsx(
3636
"sm:p-4 p-2 w-full resize-none",
37-
"sm:h-[110px] h-[55px]",
37+
"sm:h-[80px] h-[55px]",
3838
"bg-white rounded-md border border-[var(--color-gray3)]",
3939
"text-black3 font-normal sm:text-[14px] text-[12px]",
4040
"focus:border-[var(--primary)] outline-none",
@@ -62,7 +62,7 @@ export default function CardInput({
6262
text-[var(--primary)] font-12m
6363
cursor-pointer whitespace-nowrap"
6464
>
65-
입력
65+
등록
6666
</TextButton>
6767
</div>
6868
)}

‎src/pages/dashboard/[dashboardId]/index.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default function Dashboard() {
101101
}
102102

103103
return (
104-
<div className="flex min-h-screen">
104+
<div className="flex h-screen min-h-screen">
105105
<SideMenu
106106
teamId={TEAM_ID}
107107
dashboardList={dashboardList}
@@ -135,7 +135,7 @@ export default function Dashboard() {
135135
/>
136136
))}
137137
{/* ColumnsButton: 모바일/태블릿에서는 하단 고정, 데스크탑에서는 원래 위치 */}
138-
<div className={`py-10 px-2 hidden lg:block bg-white`}>
138+
<div className={`lg:py-10 pb-5 lg:px-2 bg-white`}>
139139
<ColumnsButton onClick={openModal} />
140140
</div>
141141
</div>
@@ -173,15 +173,6 @@ export default function Dashboard() {
173173
/>
174174
)}
175175
</main>
176-
<div className="h-[100px] lg:hidden shrink-0" />
177-
{/* fixed 버튼 (모바일, 태블릿용) */}
178-
<div
179-
className={`z-10 fixed bottom-0 left-[33px] md:left-[80px] w-full p-3
180-
bg-white border-t border-gray-200
181-
flex justify-center lg:hidden`}
182-
>
183-
<ColumnsButton onClick={openModal} />
184-
</div>
185176
</div>
186177
</div>
187178
);

0 commit comments

Comments
 (0)