Merge pull request #204 from part3-4team-Taskify/minji

ozen0718 · web-flow · commit 23394fd11d00 · 2025-04-12T11:36:25.000+09:00
[Feat, Rafactor] CardDetailModal: 이미지 클릭 시 팝업 오픈 / ModalInput: tag 개수 4개 제한 &amp; 백스페이스 삭제 기능 추가
diff --git a/src/components/columnCard/Card.tsx b/src/components/columnCard/Card.tsx
@@ -1,5 +1,7 @@
 import { AssigneeType, CardType } from "@/types/task";
 import Image from "next/image";
+import { getTagColor } from "../modalInput/chips/ColorTagChip";
+import RandomProfile from "../table/member/RandomProfile";
 
 type CardProps = CardType & {
   imageUrl?: string | null;
@@ -61,28 +63,26 @@ export default function Card({
         {/* 태그 + 날짜 + 닉네임 */}
         <div
           className={`
-            flex flex-col gap-2 mt-2
+            flex flex-col gap-2 mt-2 whitespace-nowrap
+            sm:max-w-none max-w-[192px] 
             md:flex-row md:items-center md:justify-between md:mt-1
             lg:flex-col lg:items-start lg:mt-2
             text-sm md:text-xs
           `}
         >
           {/* 태그들 */}
           <div className="flex gap-1 flex-wrap">
-            {tags.map((tag, idx) => (
-              <span
-                key={idx}
-                className={`px-2 py-0.5 rounded-md text-xs font-medium ${
-                  idx % 3 === 0
-                    ? "bg-[#F9EEE3] text-[#D58D49]"
-                    : idx % 3 === 1
-                      ? "bg-[#F7DBF0] text-[#D549B6]"
-                      : "bg-[#DBE6F7] text-[#4981D5]"
-                }`}
-              >
-                {tag}
-              </span>
-            ))}
+            {tags.map((tag, idx) => {
+              const { textColor, bgColor } = getTagColor(idx);
+              return (
+                <span
+                  key={idx}
+                  className={`px-2 py-0.5 rounded-md text-xs font-medium ${textColor} ${bgColor}`}
+                >
+                  {tag}
+                </span>
+              );
+            })}
           </div>
 
           {/* 날짜 + 닉네임 */}
@@ -100,13 +100,16 @@ export default function Card({
               <Image
                 src={assignee.profileImageUrl}
                 alt="프로필 이미지"
-                width={24}
-                height={24}
-                className="w-6 h-6 rounded-full object-cover"
+                width={22}
+                height={22}
+                className="sm:w-[24px] sm:h-[24px] rounded-full object-cover"
               />
             ) : (
-              <div className="w-6 h-6 flex items-center justify-center bg-[#A3C4A2] text-white font-medium rounded-full text-xs">
-                {assignee.nickname[0]}
+              <div
+                className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px] rounded-full
+                overflow-hidden flex items-center justify-center"
+              >
+                <RandomProfile name={assignee.nickname} />
               </div>
             )}
           </div>
diff --git a/src/components/columnCard/Column.tsx b/src/components/columnCard/Column.tsx
@@ -160,7 +160,7 @@ export default function Column({
       </div>
 
       {/* 스크롤바 컨테이너 */}
-      <div className="flex flex-col lg:pl-[21px] overflow-y-auto w-full lg:w-[357px] rounded-[12px] bg-[#F5F2FC]">
+      <div className="flex flex-col lg:pl-[21px] overflow-y-auto w-full lg:w-[357px] rounded-md bg-[#F5F2FC]">
         {/* 카드 리스트 */}
         <div
           className="flex-1 overflow-y-auto overflow-x-hidden"
diff --git a/src/components/modal/DeleteMemberModal.tsx b/src/components/modal/DeleteMemberModal.tsx
@@ -38,7 +38,7 @@ export default function DeleteDashboardModal({
       onClose={onClose}
       width="w-[327px] sm:w-[568px]"
       height="h-[160px] sm:h-[174px]"
-      backgroundClassName="bg-black/30 z-50"
+      backgroundClassName="bg-black/35 z-50"
     >
       <div className="flex flex-col sm:gap-10 gap-6 text-center ">
         <p className="text-xl mt-1.5">멤버를 삭제하시겠습니까?</p>
diff --git a/src/components/modalDashboard/CardDetail.tsx b/src/components/modalDashboard/CardDetail.tsx
@@ -1,16 +1,20 @@
+import { useState } from "react";
 import Image from "next/image";
 import { CardDetailType } from "@/types/cards";
 import { ColumnNameTag } from "../modalInput/chips/ColumnNameTag";
 import ColorTagChip, {
   getTagColor,
 } from "@/components/modalInput/chips/ColorTagChip";
+import { PopupImageModal } from "./PopupImageModal";
 
 interface CardDetailProps {
   card: CardDetailType;
   columnName: string;
 }
 
 export default function CardDetail({ card, columnName }: CardDetailProps) {
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+
   return (
     <div className="flex flex-col gap-5 w-full">
       <div className="flex flex-wrap items-center gap-5">
@@ -34,7 +38,7 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
       {/* 내용 */}
       <p
         className="
-          text-black font-normal sm:text-[14px] text-[12px] overflow-auto pr-1
+          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
@@ -45,17 +49,28 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
 
       {/* 이미지 */}
       {card.imageUrl && (
-        <div className="md:w-[420px] lg:w-[445px]">
+        <div
+          className="md:w-[420px] lg:w-[445px] cursor-pointer"
+          onClick={() => setIsImageModalOpen(true)}
+        >
           <Image
             src={card.imageUrl}
             alt="카드 이미지"
             width={290}
             height={168}
             className="rounded-lg object-cover
-            lg:w-[445px] md:w-[420px]"
+            lg:w-[445px] md:w-[420px]
+            lg:h-[280px] md:h-[240px]
+            sm:max-h-none max-h-[180px]"
           />
         </div>
       )}
+      {isImageModalOpen && (
+        <PopupImageModal
+          imageUrl={card.imageUrl!}
+          onClose={() => setIsImageModalOpen(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/modalDashboard/CardDetailModal.tsx b/src/components/modalDashboard/CardDetailModal.tsx
@@ -98,10 +98,10 @@ export default function CardDetailPage({
     <>
       {/* 모달 고정 div */}
       <div
-        className="fixed inset-0 bg-black/30 z-50
+        className="fixed inset-0 bg-black/35 z-50
       flex items-center justify-center px-4 sm:px-6"
       >
-        {/* 모달 컨테이너 */}
+        {/* 모달창 */}
         <div
           className="relative flex flex-col
           overflow-y-auto
@@ -115,7 +115,7 @@ export default function CardDetailPage({
               {/* 헤더 */}
               <div className="flex justify-between sm:mb-4 mb-2">
                 {/* 카드 제목 */}
-                <h2 className="text-black3 font-bold sm:text-[24px] text-[20px]">
+                <h2 className="text-black3 font-bold sm:text-[20px] text-[16px]">
                   {cardData.title}
                 </h2>
                 {/* 버튼 컨테이너 */}
@@ -133,16 +133,18 @@ export default function CardDetailPage({
                   >
                     <MoreVertical className="w-8 h-8 text-black3 cursor-pointer" />
                   </button>
+                  {/* 카드 편집 드롭다운 메뉴 */}
                   {showMenu && (
                     <div
                       className="absolute right-0 top-9.5 p-2 z-40
-                    sm:w-28 w-20
+                      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"
                     >
                       <button
-                        className="w-full rounded-sm
+                        className="w-full h-full rounded-sm
                         font-normal sm:text-[14px] text-[12px] text-black3
-                        hover:bg-[#F1EFFD] hover:text-[#5534DA]
+                        hover:bg-[var(--color-violet8)] hover:text-[var(--primary)]
                         cursor-pointer"
                         type="button"
                         onClick={() => {
@@ -153,9 +155,9 @@ export default function CardDetailPage({
                         수정하기
                       </button>
                       <button
-                        className="w-full rounded-sm
+                        className="w-full h-full rounded-sm
                         font-normal sm:text-[14px] text-[12px] text-black3
-                        hover:bg-[#F1EFFD] hover:text-[#5534DA]
+                        hover:bg-[var(--color-violet8)] hover:text-[var(--primary)]
                         cursor-pointer"
                         type="button"
                         onClick={() => deleteCardMutate()}
@@ -189,7 +191,6 @@ export default function CardDetailPage({
                 </p>
                 <CardInput
                   hasButton
-                  small
                   value={commentText}
                   onTextChange={setCommentText}
                   onButtonClick={handleCommentSubmit}
diff --git a/src/components/modalDashboard/PopupImageModal.tsx 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<HTMLDivElement>(null);
+  useClosePopup(ref, onClose);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/35 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div
+        ref={ref}
+        className="relative bg-white rounded-md p-2 cursor-default
+        min-h-0 min-w-0"
+        // onClick={(e) => e.stopPropagation()}
+      >
+        <Image
+          src={imageUrl}
+          alt="확대 이미지"
+          width={600}
+          height={600}
+          objectFit="contain"
+          className="object-contain rounded-md
+          w-full h-auto
+          max-w-[80vw]
+          max-h-[80vh]
+          lg:max-w-[800px] sm:max-w-[400px]"
+          unoptimized // 외부 이미지면 성능 최적화 해제
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/modalDashboard/ProfileIcon.tsx b/src/components/modalDashboard/ProfileIcon.tsx
@@ -20,12 +20,17 @@ export const ProfileIcon: React.FC<ProfileIconProps> = ({
       <Image
         src={profileImageUrl}
         alt="유저 프로필 아이콘"
-        width={34}
-        height={34}
-        className="object-cover w-[26px] h-[26px] rounded-full"
+        width={26}
+        height={26}
+        className="object-cover sm:w-[34px] sm:h-[34px] rounded-full"
       />
     ) : (
-      <RandomProfile name={nickname} />
+      <div
+        className="sm:w-[34px] sm:h-[34px] w-[26px] h-[26px] rounded-full
+      overflow-hidden flex items-center justify-center"
+      >
+        <RandomProfile name={nickname} />
+      </div>
     )}
   </>
 );
diff --git a/src/components/modalDashboard/Representative.tsx b/src/components/modalDashboard/Representative.tsx
@@ -17,7 +17,7 @@ export const Representative = ({ card }: RepresentativeProps) => {
       <div className="flex sm:flex-col sm:gap-4 gap-17">
         {/* 담당자 컨테이너 */}
         <div>
-          <p className="font-12sb text-black3 mb-1">담당자</p>
+          <p className="font-12sb text-black3 mb-[4px]">담당자</p>
           <div className="flex items-center gap-2">
             <ProfileIcon
               userId={card.assignee.id}
@@ -35,7 +35,7 @@ export const Representative = ({ card }: RepresentativeProps) => {
 
         {/* 마감일 컨테이너 */}
         <div>
-          <p className="font-12sb text-black3 sm:mb-1 mb-[8px]">마감일</p>
+          <p className="font-12sb text-black3 sm:mb-1 mb-[4px]">마감일</p>
           <p className="font-normal text-black3 sm:text-[14px] text-[12px]">
             {new Date(card.dueDate).toLocaleString("ko-KR", {
               year: "numeric",
diff --git a/src/components/modalInput/ModalInput.tsx b/src/components/modalInput/ModalInput.tsx
@@ -6,6 +6,7 @@ import ColorTagChip, { getTagColor } from "./chips/ColorTagChip";
 import { inputClassNames } from "./InputClassNames";
 import clsx from "clsx";
 import { format } from "date-fns";
+import { toast } from "react-toastify";
 
 type ModalInputType = "제목" | "마감일" | "태그";
 
@@ -63,6 +64,18 @@ export default function ModalInput({
 
   const handleAddTag = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter" && tagInput.trim() !== "") {
+      if (tagInput.trim().length > 10) {
+        toast.error("10자 이하로 입력해 주세요.");
+        return;
+      }
+
+      // 태그 개수 제한
+      if (tags.length >= 4) {
+        setTagInput("");
+        toast.error("태그는 4개까지 입력할 수 있습니다.");
+        return;
+      }
+
       if (tags.some((tag) => tag.text === tagInput.trim())) {
         setTagInput("");
         return;
@@ -86,6 +99,17 @@ export default function ModalInput({
     onValueChange(updatedTags.map((tag) => tag.text));
   };
 
+  const handleKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
+    handleAddTag(e);
+
+    if (e.key === "Backspace" && tagInput === "") {
+      const lastTag = tags[tags.length - 1];
+      if (lastTag) {
+        handleDeleteTag(lastTag.text);
+      }
+    }
+  };
+
   const handleDateChange = (date: Date | null) => {
     setSelectedDate(date);
     if (date) {
@@ -174,7 +198,7 @@ export default function ModalInput({
             value={tagInput}
             placeholder="입력 후 Enter"
             onChange={handleTagInputChange}
-            onKeyDown={handleAddTag}
+            onKeyDown={handleKeydown}
             className="flex-grow min-w-[100px] h-full
             border-none outline-none
             font-normal text-[14px] sm:text-[16px]
diff --git a/src/components/modalInput/chips/ColorTagChip.tsx b/src/components/modalInput/chips/ColorTagChip.tsx
@@ -2,16 +2,16 @@ import clsx from "clsx";
 
 const tagColorSet = [
   {
-    textColor: "text-[var(--sortTextGreen)]",
-    bgColor: "bg-[var(--sortTextBgGreen)]",
+    textColor: "text-[var(--sortTextBlue)]",
+    bgColor: "bg-[var(--sortTextBgBlue)]",
   },
   {
     textColor: "text-[var(--sortTextPink)]",
     bgColor: "bg-[var(--sortTextBgPink)]",
   },
   {
-    textColor: "text-[var(--sortTextBlue)]",
-    bgColor: "bg-[var(--sortTextBgBlue)]",
+    textColor: "text-[var(--sortTextGreen)]",
+    bgColor: "bg-[var(--sortTextBgGreen)]",
   },
   {
     textColor: "text-[var(--sortTextOrange)]",
diff --git a/src/components/modalInput/chips/ColumnNameTag.tsx b/src/components/modalInput/chips/ColumnNameTag.tsx
@@ -6,7 +6,9 @@ export const ColumnNameTag = ({ label }: ColumnNameTagProps) => {
   return (
     <div className="gap-[6px] px-3 py-1 flex items-center bg-[#F3EDFF] rounded-full">
       <span className="w-[6px] h-[6px] rounded-full bg-[var(--primary)]" />
-      <span className="font-12r text-[var(--primary)]">{label}</span>
+      <span className="text-[var(--primary)] font-normal sm:text-[14px] text-[12px]">
+        {label}
+      </span>
     </div>
   );
 };
diff --git a/src/components/table/member/RandomProfile.tsx b/src/components/table/member/RandomProfile.tsx
@@ -15,7 +15,9 @@ export default function RandomProfile({ name, index }: RandomProfileProps) {
 
   return (
     <div
-      className={`flex items-center justify-center text-white font-16sb leading-none rounded-full ${bgColor} w-[34px] h-[34px] md:w-[38px] md:h-[38px]`}
+      className={`flex items-center justify-center
+        leading-none text-white font-medium
+        rounded-full ${bgColor} w-[34px] h-[34px] md:w-[38px] md:h-[38px]`}
     >
       {name[0]}
     </div>
diff --git a/src/hooks/useClosePopup.tsx b/src/hooks/useClosePopup.tsx

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default function DeleteDashboardModal({`
`38`	`38`	`onClose={onClose}`
`39`	`39`	`width="w-[327px] sm:w-[568px]"`
`40`	`40`	`height="h-[160px] sm:h-[174px]"`
`41`		`- backgroundClassName="bg-black/30 z-50"`
	`41`	`+ backgroundClassName="bg-black/35 z-50"`
`42`	`42`	`>`
`43`	`43`	`<div className="flex flex-col sm:gap-10 gap-6 text-center ">`
`44`	`44`	`<p className="text-xl mt-1.5">멤버를 삭제하시겠습니까?</p>`
Original file line number	Diff line number	Diff line change
`@@ -2,16 +2,16 @@ import clsx from "clsx";`
`2`	`2`
`3`	`3`	`const tagColorSet = [`
`4`	`4`	`{`
`5`		`- textColor: "text-[var(--sortTextGreen)]",`
`6`		`- bgColor: "bg-[var(--sortTextBgGreen)]",`
	`5`	`+ textColor: "text-[var(--sortTextBlue)]",`
	`6`	`+ bgColor: "bg-[var(--sortTextBgBlue)]",`
`7`	`7`	`},`
`8`	`8`	`{`
`9`	`9`	`textColor: "text-[var(--sortTextPink)]",`
`10`	`10`	`bgColor: "bg-[var(--sortTextBgPink)]",`
`11`	`11`	`},`
`12`	`12`	`{`
`13`		`- textColor: "text-[var(--sortTextBlue)]",`
`14`		`- bgColor: "bg-[var(--sortTextBgBlue)]",`
	`13`	`+ textColor: "text-[var(--sortTextGreen)]",`
	`14`	`+ bgColor: "bg-[var(--sortTextBgGreen)]",`
`15`	`15`	`},`
`16`	`16`	`{`
`17`	`17`	`textColor: "text-[var(--sortTextOrange)]",`