setIsConfirmDeleteModalOpen(false)}
- className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
+ onClick={onCancel}
+ className="cursor-pointer border px-3 py-1 rounded-md
+ sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+ text-[var(--primary)] border-[var(--color-gray3)]"
>
취소
{
- setIsConfirmDeleteModalOpen(false);
- handleDelete(); // 진짜 삭제 실행
- toast.success("대시보드가 삭제되었습니다.");
- }}
- className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
+ onClick={onConfirm}
+ className="cursor-pointer bg-[var(--primary)] px-3 py-1 rounded-md
+ sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+ text-white"
>
확인
diff --git a/src/components/modal/FormModal.tsx b/src/components/modal/FormModal.tsx
new file mode 100644
index 00000000..f71911a0
--- /dev/null
+++ b/src/components/modal/FormModal.tsx
@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Input from "@/components/input/Input";
+
+interface FormModalProps {
+ title: string;
+ inputLabel: string;
+ inputValue: string;
+ inputPlaceholder: string;
+ isInputValid: boolean;
+ onInputChange: (value: string) => void;
+ onSubmit: () => void;
+ onClose: () => void;
+ submitText: string;
+ leftButtonText?: string;
+ onLeftButtonClick?: () => void;
+ errorMessage?: string;
+ charCount?: {
+ current: number;
+ max: number;
+ };
+}
+
+export default function FormModal({
+ title,
+ inputLabel,
+ inputValue,
+ inputPlaceholder,
+ isInputValid,
+ onInputChange,
+ onSubmit,
+ onClose,
+ submitText,
+ leftButtonText = "취소",
+ onLeftButtonClick,
+ errorMessage,
+ charCount,
+}: FormModalProps) {
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+ {charCount.current} / {charCount.max}
+
+ )}
+
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+
+
+ {leftButtonText}
+
+
+ {submitText}
+
+
+
+
+ );
+}
diff --git a/src/components/modal/InviteDashboard.tsx b/src/components/modal/InviteDashboard.tsx
index f5ac634d..e0ce3bdf 100644
--- a/src/components/modal/InviteDashboard.tsx
+++ b/src/components/modal/InviteDashboard.tsx
@@ -1,14 +1,19 @@
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
-import Input from "../input/Input";
-import Image from "next/image";
import axiosInstance from "@/api/axiosInstance";
import { apiRoutes } from "@/api/apiRoutes";
import { AxiosError } from "axios";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
+import FormModal from "@/components/modal/FormModal";
-export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
+export default function InviteDashboard({
+ onClose,
+ onUpdate,
+}: {
+ onClose: () => void;
+ onUpdate?: () => void;
+}) {
const [email, setEmail] = useState("");
const router = useRouter();
const { dashboardId } = router.query;
@@ -32,6 +37,9 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
},
}
);
+
+ if (onUpdate) onUpdate();
+
if (res.data && Array.isArray(res.data.invitations)) {
// 초대내역 리스트
const inviteData = res.data.invitations.map(
@@ -67,6 +75,7 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
});
toast.success("멤버 초대에 성공했습니다.");
+ onUpdate?.();
onClose?.();
} catch (error) {
if (error instanceof AxiosError) {
@@ -91,46 +100,19 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
};
return (
-
-
-
-
초대하기
-
-
-
-
-
- 취소
-
-
- 초대
-
-
-
-
+
);
}
diff --git a/src/components/modal/NewDashboard.tsx b/src/components/modal/NewDashboard.tsx
index 3d940bd6..98b1f2f2 100644
--- a/src/components/modal/NewDashboard.tsx
+++ b/src/components/modal/NewDashboard.tsx
@@ -1,4 +1,5 @@
import { useState } from "react";
+import { usePostGuard } from "@/hooks/usePostGuard";
import Input from "../input/Input";
import Image from "next/image";
import { createDashboard } from "@/api/dashboards";
@@ -23,10 +24,21 @@ interface NewDashboardProps {
export default function NewDashboard({ onClose, onCreate }: NewDashboardProps) {
const [title, setTitle] = useState("");
const [selected, setSelected] = useState
(null);
- const [loading, setLoading] = useState(false);
+ const [titleLength, setTitleLength] = useState(0);
+ const { guard: postGuard, isLoading } = usePostGuard();
+
+ const maxTitleLength = 30;
const colors = ["#7ac555", "#760DDE", "#FF9800", "#76A5EA", "#E876EA"];
+ /* 대시보드 이름 글자수 제한 */
+ const handleTitleChange = async (value: string) => {
+ if (value.length <= maxTitleLength) {
+ setTitle(value);
+ setTitleLength(value.length);
+ }
+ };
+
const handleSubmit = async () => {
const payload = {
title,
@@ -34,30 +46,43 @@ export default function NewDashboard({ onClose, onCreate }: NewDashboardProps) {
};
try {
- setLoading(true);
- const response = await createDashboard(payload);
- onCreate?.(response.data);
- onClose?.();
+ await postGuard(async () => {
+ const response = await createDashboard(payload);
+ onCreate?.(response.data);
+ onClose?.();
+ toast.success("대시보드가 생성되었습니다.");
+ });
} catch (error) {
console.error("대시보드 생성 실패:", error);
toast.error("대시보드 생성에 실패했습니다.");
- } finally {
- setLoading(false);
}
};
return (
-
새로운 대시보드
-
+
+ 새로운 대시보드
+
+
+
+ {titleLength} / {maxTitleLength}
+
+
{colors.map((color, index) => (
@@ -81,21 +106,23 @@ export default function NewDashboard({ onClose, onCreate }: NewDashboardProps) {
))}
-
+
취소
- {loading ? "생성 중..." : "생성"}
+ {isLoading ? "생성 중..." : "생성"}
diff --git a/src/components/modalDashboard/CardDetail.tsx b/src/components/modalDashboard/CardDetail.tsx
index a5b2685e..7e43b6f9 100644
--- a/src/components/modalDashboard/CardDetail.tsx
+++ b/src/components/modalDashboard/CardDetail.tsx
@@ -1,10 +1,11 @@
-// CardDetail.tsx
+import { useEffect, useState } from "react";
import Image from "next/image";
import { CardDetailType } from "@/types/cards";
-import { ProfileIcon } from "./profelicon";
+import { ColumnNameTag } from "../modalInput/chips/ColumnNameTag";
import ColorTagChip, {
getTagColor,
} from "@/components/modalInput/chips/ColorTagChip";
+import { PopupImageModal } from "./PopupImageModal";
interface CardDetailProps {
card: CardDetailType;
@@ -12,83 +13,66 @@ interface CardDetailProps {
}
export default function CardDetail({ card, columnName }: CardDetailProps) {
- return (
-
-
{card.title}
- {/* 작성자 정보 추가 */}
-
-
-
담당자
-
-
+ const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+ const [currentCard, setCurrentCard] = useState
(card);
-
- {card.assignee.nickname}
-
-
+ useEffect(() => {
+ setCurrentCard(card);
+ }, [card]);
-
-
- 마감일
-
-
- {new Date(card.dueDate).toLocaleString("ko-KR", {
- year: "numeric",
- month: "2-digit",
- day: "2-digit",
- hour: "2-digit",
- minute: "2-digit",
- })}
-
-
-
-
-
-
- {columnName}
-
- |
- {card.tags.map((tag, idx) => {
- const { textColor, bgColor } = getTagColor(idx);
- return (
-
- {tag}
-
- );
- })}
-
+ return (
+
+ {/* 내용 */}
- {card.description}
+ {currentCard.description}
- {card.imageUrl && (
-
+
+ {/* 이미지 */}
+ {currentCard.imageUrl && (
+
setIsImageModalOpen(true)}
+ >
)}
+
+ {/* 상태 + 태그 */}
+
+
+
+
+ {currentCard.tags.map((tag, idx) => {
+ const { textColor, bgColor } = getTagColor(idx);
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
+ {isImageModalOpen && currentCard.imageUrl && (
+
setIsImageModalOpen(false)}
+ />
+ )}
);
}
diff --git a/src/components/modalDashboard/CardDetailModal.tsx b/src/components/modalDashboard/CardDetailModal.tsx
index e1044aef..48ddcd3d 100644
--- a/src/components/modalDashboard/CardDetailModal.tsx
+++ b/src/components/modalDashboard/CardDetailModal.tsx
@@ -1,215 +1,193 @@
-import { useMemo, useRef, useState } from "react";
+import clsx from "clsx";
import { MoreVertical, X } from "lucide-react";
import CardDetail from "./CardDetail";
import CommentList from "./CommentList";
-import CardInput from "@/components/modalInput/CardInput";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { createComment } from "@/api/comment";
-import { deleteCard, EditCard } from "@/api/card"; // EditCard API 추가
-import type { CardDetailType } from "@/types/cards";
+import CommentInput from "@/components/modalInput/CardInput";
+import { Representative } from "@/components/modalDashboard/Representative";
import TaskModal from "@/components/modalInput/TaskModal";
-import { useClosePopup } from "@/hooks/useClosePopup";
-import { getColumn } from "@/api/columns";
-import { useRouter } from "next/router";
+import { DeleteModal } from "@/components/modal/DeleteModal";
import { toast } from "react-toastify";
+import { useDashboardPermission } from "@/hooks/useDashboardPermission";
+import { useCardDetailState } from "@/hooks/useCardDetailState";
+import { useCardDetail } from "@/hooks/useCardDetail";
+import { getCardDetail } from "@/api/card";
+import type { CardDetailType } from "@/types/cards";
+
interface CardDetailModalProps {
card: CardDetailType;
currentUserId: number;
dashboardId: number;
+ createdByMe: boolean;
onClose: () => void;
-}
-
-interface ColumnType {
- id: number;
- title: string;
- status: string;
+ onChangeCard?: () => void;
}
export default function CardDetailPage({
card,
- currentUserId,
dashboardId,
+ createdByMe,
onClose,
+ onChangeCard,
}: CardDetailModalProps) {
- const [cardData, setCardData] = useState
(card);
- const [commentText, setCommentText] = useState("");
- const [showMenu, setShowMenu] = useState(false);
- const [isEditModalOpen, setIsEditModalOpen] = useState(false);
- const queryClient = useQueryClient();
- const popupRef = useRef(null);
- const router = useRouter();
- useClosePopup(popupRef, () => setShowMenu(false));
-
- const { data: columns = [] } = useQuery({
- queryKey: ["columns", dashboardId],
- queryFn: () => getColumn({ dashboardId, columnId: card.columnId }),
- });
-
- const columnName = useMemo(() => {
- return (
- columns.find((col) => String(col.id) === String(cardData.columnId))
- ?.title || "알 수 없음"
- );
- }, [columns, cardData.columnId]);
-
- const { mutate: createCommentMutate } = useMutation({
- mutationFn: createComment,
- onSuccess: () => {
- setCommentText("");
- queryClient.invalidateQueries({ queryKey: ["comments", card.id] });
- },
- });
-
- const { mutate: deleteCardMutate } = useMutation({
- mutationFn: () => deleteCard(card.id),
- onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: ["cards"] });
- toast.success("카드가 삭제되었습니다.");
- onClose();
-
- setTimeout(() => {
- router.reload();
- }, 1500);
- },
- });
-
- const handleClose = () => {
- onClose();
- };
-
- const handleCommentSubmit = () => {
- if (!commentText.trim()) return;
- createCommentMutate({
- content: commentText,
- cardId: card.id,
- columnId: card.columnId,
- dashboardId,
- });
- };
+ const { canEditCards } = useDashboardPermission(dashboardId, createdByMe);
+ const { cardData, setCardData, columnName, members } = useCardDetailState(
+ card,
+ dashboardId
+ );
- const { mutateAsync: updateCardMutate } = useMutation({
- mutationFn: (data: Partial) => EditCard(cardData.id, data),
- onSuccess: (updatedCard) => {
- setCardData(updatedCard); // ✅ 서버 응답을 최신 cardData로 설정
- queryClient.invalidateQueries({ queryKey: ["cards"] }); // 필요시
- },
- });
+ const {
+ commentText,
+ setCommentText,
+ isEditModalOpen,
+ setIsEditModalOpen,
+ isDeleteModalOpen,
+ setIsDeleteModalOpen,
+ showMenu,
+ setShowMenu,
+ popupRef,
+ handleCommentSubmit,
+ handleConfirmDelete,
+ } = useCardDetail(card, dashboardId, onChangeCard, onClose);
return (
<>
-
+
-
- {/* 오른쪽 상단 메뉴 */}
-
-
setShowMenu((prev) => !prev)}
- className="w-7 h-7 flex items-center justify-center hover:cursor-pointer"
- title="수정하기"
- type="button"
- >
-
- {showMenu && (
-
+
+
+
+
+ {cardData.title}
+
+
setShowMenu((prev) => !prev)}
+ className="sm:w-[28px] sm:h-[28px] w-[20px] h-[20px] flex items-center justify-center hover:cursor-pointer"
+ title="수정하기"
type="button"
- onClick={() => {
- setIsEditModalOpen(true);
- setShowMenu(false);
- }}
>
- 수정하기
+
-
deleteCardMutate()}
- >
- 삭제하기
+ {showMenu && (
+
+ {
+ if (!canEditCards) {
+ toast.error("읽기 전용 대시보드입니다.");
+ return;
+ }
+ setIsEditModalOpen(true);
+ setShowMenu(false);
+ }}
+ >
+ 수정하기
+
+ {
+ if (!canEditCards) {
+ toast.error("읽기 전용 대시보드입니다.");
+ return;
+ }
+ setIsDeleteModalOpen(true);
+ }}
+ >
+ 삭제하기
+
+
+ )}
+
+
- )}
-
-
-
-
-
-
- {/* 모달 내부 콘텐츠 */}
-
-
+
- {/* 댓글 입력창 */}
-
-
- {/* 댓글 목록 */}
-
- {/* TaskModal 수정 모드 */}
{isEditModalOpen && (
setIsEditModalOpen(false)}
- onSubmit={async (data) => {
- const matchedColumn = columns.find(
- (col) => col.title === data.status
- ); // title → id
-
- await updateCardMutate({
- columnId: matchedColumn?.id, // ✅ columnId로 넘기기!
- assignee: { ...cardData.assignee, nickname: data.assignee },
- title: data.title,
- description: data.description,
- dueDate: data.deadline,
- tags: data.tags,
- imageUrl: data.image || undefined,
- });
-
- setIsEditModalOpen(false);
- router.reload();
+ onSubmit={async () => {
+ try {
+ const updatedCard = await getCardDetail(cardData.id);
+ setCardData(updatedCard);
+ onChangeCard?.();
+ } catch (error) {
+ console.error("카드 불러오기 실패:", error);
+ toast.error("카드 정보를 불러오는 데 실패했습니다.");
+ } finally {
+ setIsEditModalOpen(false);
+ }
}}
initialData={{
status: columnName,
assignee: cardData.assignee.nickname,
title: cardData.title,
description: cardData.description,
- deadline: cardData.dueDate,
+ deadline: cardData.dueDate ?? "",
tags: cardData.tags,
image: cardData.imageUrl ?? "",
}}
- members={[{ nickname: cardData.assignee.nickname }]}
/>
)}
+
+ setIsDeleteModalOpen(false)}
+ onConfirm={handleConfirmDelete}
+ />
);
}
diff --git a/src/components/modalDashboard/CardProfileIcon.tsx b/src/components/modalDashboard/CardProfileIcon.tsx
new file mode 100644
index 00000000..53c034fe
--- /dev/null
+++ b/src/components/modalDashboard/CardProfileIcon.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Image from "next/image";
+import RandomProfile from "@/components/common/RandomProfile";
+
+export interface ProfileIconProps {
+ id: number;
+ nickname: string;
+ profileImageUrl: string;
+ imgClassName?: string;
+ fontClassName?: string;
+ userId: number;
+}
+
+export const ProfileIcon: React.FC = ({
+ userId,
+ nickname,
+ profileImageUrl,
+ imgClassName = "sm:w-[34px] sm:h-[34px] w-[26px] h-[26px]",
+ fontClassName = "text-sm",
+}) => (
+ <>
+ {profileImageUrl ? (
+
- {allComments.map((comment) => (
-
-
- ))}
+
+ {allComments.length === 0 ? (
+
+ 작성된 댓글이 없습니다.
+
+ ) : (
+ allComments.map((comment) => (
+
+
+ ))
+ )}
);
diff --git a/src/components/modalDashboard/PopupImageModal.tsx b/src/components/modalDashboard/PopupImageModal.tsx
new file mode 100644
index 00000000..f5c86518
--- /dev/null
+++ b/src/components/modalDashboard/PopupImageModal.tsx
@@ -0,0 +1,45 @@
+// 이미지 클릭 시 확대 모달 오픈
+import { useRef } from "react";
+import Image from "next/image";
+import { useClosePopup } from "@/hooks/useClosePopup";
+
+interface PopupImageModalProps {
+ imageUrl: string;
+ onClose: () => void;
+}
+
+export const PopupImageModal = ({
+ imageUrl,
+ onClose,
+}: PopupImageModalProps) => {
+ const ref = useRef
(null);
+ useClosePopup(ref, onClose);
+
+ return (
+
+
e.stopPropagation()}
+ >
+
+
+ {/* 내부 아이템 컨테이너 */}
+
+ {/* 담당자 컨테이너 */}
+
+
담당자
+
+
+
+ {card.assignee.nickname}
+
+
+
+
+ {/* 마감일 컨테이너 */}
+
+
마감일
+
+
+ {card.dueDate
+ ? new Date(card.dueDate).toLocaleString("ko-KR", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ })
+ : "마감일 없음"}
+
+
+
+
+
{/* 작성자 + 시간 */}
-
-
+
+
{comment.author.nickname}
{formatDate(comment.createdAt)}
- {/* 본문 */}
+ {/* 댓글 수정 입력창 */}
{isEditing ? (
<>
+ 
+
+
-
-
## Development
-
-
## Libraries
-
-
+