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

[Style, Refactor] CardDetailModal: 전체적인 CSS 수정과 반응형 작업 / edit: 프로필 이미지 없이도 닉네임 변경

Author: ozen0718

src/components/card/Profile.tsx

@@ -52,12 +52,22 @@ export const ProfileCard = () => {
   };
 
   const handleSave = async () => {
-    if (!nickname || !image) return;
+    if (!nickname) return;
 
     try {
-      await updateProfile({ nickname, profileImageUrl: image });
+      const payload: { nickname: string; profileImageUrl?: string } = {
+        nickname,
+      };
+      if (image) {
+        payload.profileImageUrl = image;
+      }
+
+      await updateProfile(payload);
       updateNickname(nickname);
-      updateProfileImage(image);
+
+      if (image) {
+        updateProfileImage(image);
+      }
       toast.success("프로필 변경이 완료되었습니다.");
     } catch (error) {
       console.error("프로필 변경 실패:", error);

src/components/modal/ChangeBebridge.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import Input from "../input/Input";
 import Image from "next/image";

src/components/modalDashboard/CardDetail.tsx

@@ -1,6 +1,6 @@
 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";
@@ -12,69 +12,33 @@ interface CardDetailProps {
 
 export default function CardDetail({ card, columnName }: CardDetailProps) {
   return (
-    <div className="p-4">
-      {/* 담당자 정보 박스 */}
-      <div className="absolute w-[181px] h-[155px] lg:[200px] top-20 right-10 rounded-lg p-3.5 bg-white border border-[#D9D9D9]">
-        <div className="mb-3">
-          <p className="text-sm font-semibold text-black3 mb-1">담당자</p>
-          <div className="flex items-center gap-2">
-            <ProfileIcon
-              userId={card.assignee.id}
-              nickname={card.assignee.nickname}
-              profileImageUrl={card.assignee.profileImageUrl ?? ""}
-              id={card.assignee.id}
-              imgClassName="w-6 h-6"
-              fontClassName="text-sm"
-            />
-            <span className="text-sm text-black3">
-              {card.assignee.nickname}
-            </span>
-          </div>
-
-          <div>
-            <p className="text-sm font-semibold text-black3 mb-1 mt-3">
-              마감일
-            </p>
-            <p className="text-sm text-black3">
-              {new Date(card.dueDate).toLocaleString("ko-KR", {
-                year: "numeric",
-                month: "2-digit",
-                day: "2-digit",
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
-            </p>
-          </div>
+    <div className="flex flex-col gap-5 w-full">
+      <div className="flex flex-wrap items-center gap-5">
+        {/* 칼럼 이름 태그 */}
+        <ColumnNameTag label={columnName} />
+        {/* 구분선 */}
+        <div className="w-[1px] h-[20px] bg-[var(--color-gray3)]" />
+        {/* 카드 태그 */}
+        <div className="flex flex-wrap gap-[6px]">
+          {card.tags.map((tag, idx) => {
+            const { textColor, bgColor } = getTagColor(idx);
+            return (
+              <ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
+                {tag}
+              </ColorTagChip>
+            );
+          })}
         </div>
       </div>
 
-      {/* 상태 + 태그 */}
-      <div className="flex items-center gap-2 mb-2">
-        <span
-          className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800"
-          title={`상태: ${columnName}`}
-        >
-          {columnName}
-        </span>
-        <span className="text-2xl font-extralight text-[#D9D9D9]">|</span>
-        {card.tags.map((tag, idx) => {
-          const { textColor, bgColor } = getTagColor(idx);
-          return (
-            <ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
-              {tag}
-            </ColorTagChip>
-          );
-        })}
-      </div>
-
-      {/* 설명 */}
+      {/* 내용 */}
       <p
         className="
-          text-black3 p-2 overflow-auto
-          w-full max-w-[470px] md:max-w-[349px]
+          text-black font-normal sm:text-[14px] text-[12px] 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
-          h-[70px]
-        "
+          "
       >
         {card.description}
       </p>
@@ -85,9 +49,10 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
           <Image
             src={card.imageUrl}
             alt="카드 이미지"
-            width={420}
-            height={226}
-            className="rounded-lg object-cover lg:w-[445px] lg:h-[260px] w-[420px] h-[246px]"
+            width={290}
+            height={168}
+            className="rounded-lg object-cover
+            lg:w-[445px] md:w-[420px]"
           />
         </div>
       )}

src/components/modalDashboard/CardDetailModal.tsx

@@ -3,6 +3,7 @@ import { MoreVertical, X } from "lucide-react";
 import CardDetail from "./CardDetail";
 import CommentList from "./CommentList";
 import CardInput from "@/components/modalInput/CardInput";
+import { Representative } from "@/components/modalDashboard/Representative";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createComment } from "@/api/comment";
 import { deleteCard, EditCard } from "@/api/card";
@@ -95,78 +96,119 @@ export default function CardDetailPage({
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center px-4 sm:px-6">
+      {/* 모달 고정 div */}
+      <div
+        className="fixed inset-0 bg-black/30 z-50
+      flex items-center justify-center px-4 sm:px-6"
+      >
+        {/* 모달 컨테이너 */}
         <div
-          className="
-      relative bg-white rounded-lg shadow-lg flex flex-col
-      w-[327px] h-[710px]
-      md:w-[678px] md:h-[766px]
-      lg:w-[730px] lg:h-[763px]
-    "
+          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"
         >
-          <div className="flex justify-between items-center px-6 pt-6 pb-2">
-            <h2 className="font-24sb">{cardData.title}</h2>
-            <div className="flex items-center gap-3 relative" ref={popupRef}>
-              <button
-                onClick={() => setShowMenu((prev) => !prev)}
-                className="w-7 h-7 flex items-center justify-center hover:cursor-pointer"
-                title="수정하기"
-                type="button"
-              >
-                <MoreVertical className="w-8 h-8 text-black cursor-pointer" />
-              </button>
-              {showMenu && (
-                <div className="absolute right-0 top-10 p-2 w-27 bg-white border border-[#D9D9D9] z-40 rounded-lg">
+          <div className="flex items-center justify-center px-6 pt-6 pb-2">
+            {/* 내부 아이템 컨테이너 */}
+            <div className="flex flex-col lg:w-[674px] sm:w-[614px] w-[295px]">
+              {/* 헤더 */}
+              <div className="flex justify-between sm:mb-4 mb-2">
+                {/* 카드 제목 */}
+                <h2 className="text-black3 font-bold sm:text-[24px] text-[20px]">
+                  {cardData.title}
+                </h2>
+                {/* 버튼 컨테이너 */}
+                <div
+                  className="relative flex items-center sm:gap-[24px] gap-[16px]"
+                  ref={popupRef}
+                >
+                  {/* 메뉴 버튼 */}
                   <button
-                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm cursor-pointer"
+                    onClick={() => 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);
-                    }}
                   >
-                    수정하기
+                    <MoreVertical className="w-8 h-8 text-black3 cursor-pointer" />
                   </button>
-                  <button
-                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm cursor-pointer"
-                    type="button"
-                    onClick={() => deleteCardMutate()}
-                  >
-                    삭제하기
+                  {showMenu && (
+                    <div
+                      className="absolute right-0 top-9.5 p-2 z-40
+                    sm:w-28 w-20
+                    bg-white border border-[#D9D9D9] rounded-lg"
+                    >
+                      <button
+                        className="w-full rounded-sm
+                        font-normal sm:text-[14px] text-[12px] text-black3
+                        hover:bg-[#F1EFFD] hover:text-[#5534DA]
+                        cursor-pointer"
+                        type="button"
+                        onClick={() => {
+                          setIsEditModalOpen(true);
+                          setShowMenu(false);
+                        }}
+                      >
+                        수정하기
+                      </button>
+                      <button
+                        className="w-full rounded-sm
+                        font-normal sm:text-[14px] text-[12px] text-black3
+                        hover:bg-[#F1EFFD] hover:text-[#5534DA]
+                        cursor-pointer"
+                        type="button"
+                        onClick={() => deleteCardMutate()}
+                      >
+                        삭제하기
+                      </button>
+                    </div>
+                  )}
+                  {/* 닫기 버튼 */}
+                  <button onClick={handleClose} title="닫기">
+                    <X
+                      className="sm:w-[28px] sm:h-[28px] w-[20px] h-[20px]
+                    flex items-center justify-center hover:cursor-pointer"
+                    />
                   </button>
                 </div>
-              )}
-              <button onClick={handleClose} title="닫기">
-                <X className="w-7 h-7 flex items-center justify-center hover:cursor-pointer" />
-              </button>
-            </div>
-          </div>
+              </div>
 
-          {/* 콘텐츠 (스크롤 없음) */}
-          <div className="px-6 pb-4 flex flex-col gap-6 flex-1 overflow-hidden">
-            {/* 카드 상세 */}
-            <CardDetail card={cardData} columnName={columnName} />
-
-            {/* 댓글 입력 */}
-            <div className="w-full max-w-[450px]">
-              <p className="text-sm font-semibold mb-2">댓글</p>
-              <CardInput
-                hasButton
-                small
-                value={commentText}
-                onTextChange={setCommentText}
-                onButtonClick={handleCommentSubmit}
-                placeholder="댓글 작성하기"
-              />
-            </div>
+              {/* 카드 내용 + 담당자 컨테이너 */}
+              <div className="flex flex-col-reverse sm:flex-row gap-4">
+                <CardDetail card={cardData} columnName={columnName} />
+                <div>
+                  <Representative card={card} />
+                </div>
+              </div>
 
-            {/* 댓글 리스트 (스크롤 가능) */}
-            <div className="w-full max-w-[450px] text-base max-h-[180px] overflow-y-auto scrollbar-hidden">
-              <CommentList
-                cardId={card.id}
-                currentUserId={currentUserId}
-                teamId={""}
-              />
+              {/* 댓글 입력창 */}
+              <div className="mt-4 w-full lg:max-w-[445px] md:max-w-[420px]">
+                <p className="mb-1 text-black3 font-medium sm:text-[16px] text-[14px]">
+                  댓글
+                </p>
+                <CardInput
+                  hasButton
+                  small
+                  value={commentText}
+                  onTextChange={setCommentText}
+                  onButtonClick={handleCommentSubmit}
+                  placeholder="댓글 작성하기"
+                />
+              </div>
+
+              {/* 댓글 목록 (스크롤 가능) */}
+              <div
+                className="w-full lg:max-w-[445px] md:max-w-[420px]
+                sm:max-h-[140px] max-h-[70px]
+                my-2 overflow-y-auto"
+              >
+                <CommentList
+                  cardId={card.id}
+                  currentUserId={currentUserId}
+                  teamId={""}
+                />
+              </div>
             </div>
           </div>
         </div>

src/components/modalDashboard/CommentList.tsx

@@ -37,16 +37,29 @@ export default function CommentList({
     data?.pages.flatMap((page) => page.comments) ?? [];
 
   return (
-    <div className="min-h-[80px] p-2 rounded bg-white shadow-sm">
-      {allComments.map((comment) => (
-        <div key={comment.id} className="p-2  last:border-b-0">
-          <UpdateComment
-            comment={comment}
-            currentUserId={currentUserId}
-            teamId={""}
-          />
-        </div>
-      ))}
+    <div
+      className="min-h-[80px] sm:max-h-[240px] max-h-[215px] w-full
+      rounded bg-white
+      flex flex-col"
+    >
+      {allComments.length === 0 ? (
+        <p
+          className="sm:pt-8 pt-4 text-center text-[var(--color-gray1)]
+        font-normal sm:text-[14px] text-[12px]"
+        >
+          작성된 댓글이 없습니다.
+        </p>
+      ) : (
+        allComments.map((comment) => (
+          <div key={comment.id} className=" shrink-0 py-2 last:border-b-0">
+            <UpdateComment
+              comment={comment}
+              currentUserId={currentUserId}
+              teamId={""}
+            />
+          </div>
+        ))
+      )}
       <div ref={ref} />
     </div>
   );

…components/modalDashboard/profelicon.tsx …omponents/modalDashboard/ProfileIcon.tsxsrc/components/modalDashboard/profelicon.tsx renamed to src/components/modalDashboard/ProfileIcon.tsx src/components/modalDashboard/profelicon.tsx renamed to src/components/modalDashboard/ProfileIcon.tsx

@@ -15,16 +15,17 @@ export const ProfileIcon: React.FC<ProfileIconProps> = ({
   nickname,
   profileImageUrl,
 }) => (
-  <div className="relative w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full overflow-hidden">
+  <>
     {profileImageUrl ? (
       <Image
         src={profileImageUrl}
         alt="유저 프로필 아이콘"
-        fill
-        className="object-cover"
+        width={34}
+        height={34}
+        className="object-cover w-[26px] h-[26px] rounded-full"
       />
     ) : (
       <RandomProfile name={nickname} />
     )}
-  </div>
+  </>
 );