[✨ Feature/278] 할 일 생성 수정 모달 구현 api 연결

src/components/common/avatar/Avatar.tsx

@@ -24,7 +24,7 @@ interface AvatarProps {
 
 export default function Avatar({ children, size, user }: AvatarProps) {
   const [imageError, setImageError] = useState(false);
-  const AvatarStyle = cn('pointer-events-none rounded-full overflow-hidden', {
+  const AvatarStyle = cn('pointer-events-none rounded-full overflow-hidden shrink-0', {
     'w-[24px] h-[24px] ': size === 's',
     'w-[38px] h-[38px] border-2 border-gray-0': size === 'm',
   });

src/components/dashboard-detail/card/ColumnCardList.tsx

@@ -8,14 +8,15 @@ import { useModal } from '@/hooks/useModal';
 import useMutation from '@/hooks/useMutation';
 import useUserContext from '@/hooks/useUserContext';
 import { createCard, getCardListData, type CreateCardType } from '@/lib/apis/cards';
-import type { CardInitialValueType, CardsResponse } from '@/types/card';
-import type { ColumnsData } from '@/types/column';
+import type { CardDetailResponse, CardInitialValueType, CardsResponse } from '@/types/card';
+import type { ColumnsData, ColumnsResponse } from '@/types/column';
 import type { MembersResponse } from '@/types/members';
-import { createCardRequestBody } from '@/utils/card/createCardReqBody';
+import { createCardRequestBody } from '@/utils/card/createCardRequestBody';
 import { uploadCardImage } from '@/utils/card/uploadCardImage';
 
 interface ColumnCardListProps {
   column: ColumnsData;
+  columnListData: ColumnsResponse | null;
   dashboardId: string;
   memberData: MembersResponse | null;
   onHeaderClick: () => void;
@@ -28,6 +29,7 @@ export default function ColumnCardList({
   dashboardId,
   memberData,
   onHeaderClick,
+  columnListData,
 }: ColumnCardListProps) {
   const { userProfile } = useUserContext();
   const CREATE_MODAL_NAME = `CREATE_CARD_${column.id}`;
@@ -106,6 +108,18 @@ export default function ColumnCardList({
     await createCardMutation.mutate(reqBody);
   };
 
+  const handleUpdateCard = (updated: CardDetailResponse) => {
+    infiniteSetData((prev) => {
+      if (!prev) {
+        return prev;
+      }
+
+      const newCards = prev.cards.map((c) => (c.id === updated.id ? updated : c));
+
+      return { ...prev, cards: newCards };
+    });
+  };
+
   const handleDeleteCard = (cardId: number) => {
     infiniteSetData((prev) => {
       if (!prev) {
@@ -141,6 +155,9 @@ export default function ColumnCardList({
                 columnId={column.id}
                 cardData={card}
                 onDeleteCard={() => handleDeleteCard(card.id)}
+                onUpdateCard={handleUpdateCard}
+                memberData={memberData}
+                columnListData={columnListData}
               />
             </li>
           );

src/components/dashboard-detail/card/DashboardCard.tsx

@@ -6,20 +6,28 @@ import CardDetailModal from '@/components/dashboard-detail/modal/card-detail-mod
 import { DUE_DATE } from '@/constants/requestCardData';
 import { useModal } from '@/hooks/useModal';
 import type { CardDetailResponse } from '@/types/card';
+import type { ColumnsResponse } from '@/types/column';
+import type { MembersResponse } from '@/types/members';
 import { getProfileColorForId } from '@/utils/avatar';
 
 interface DashboardCardProps {
   cardData: CardDetailResponse;
   columnId: number;
   columnTitle: string;
+  columnListData: ColumnsResponse | null;
+  memberData: MembersResponse;
   onDeleteCard: () => void;
+  onUpdateCard: (updated: CardDetailResponse) => void;
 }
 
 export default function DashboardCard({
   cardData,
   columnId,
   columnTitle,
+  columnListData,
+  memberData,
   onDeleteCard,
+  onUpdateCard,
 }: DashboardCardProps) {
   const { imageUrl, tags, title, dueDate, assignee } = cardData;
   const [isImageError, setIsImageError] = useState(false);
@@ -76,6 +84,9 @@ export default function DashboardCard({
           closeModal={modal.handleModalClose}
           columnTitle={columnTitle}
           onDeleteCard={onDeleteCard}
+          onUpdateCard={onUpdateCard}
+          memberData={memberData}
+          columnListData={columnListData}
         />
       )}
     </>

src/components/dashboard-detail/modal/ChangeCardModal.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState } from 'react';
+import Avatar from '@/components/common/avatar/Avatar';
+import Button from '@/components/common/Button';
+import ImageUpload from '@/components/common/ImageUpload';
+import Input from '@/components/common/input/Input';
+import Label from '@/components/common/Label';
+import FormModal from '@/components/common/modal/FormModal';
+import TextArea from '@/components/common/TextArea';
+import Combobox, {
+  type StatusComboboxValue,
+  type UserComboboxValue,
+} from '@/components/dashboard/combobox/Combobox';
+import CardStatusBadge from '@/components/dashboard-detail/card/CardStatusBadge';
+import TagInput from '@/components/dashboard-detail/modal/TagInput';
+import { DUE_DATE, IMAGE_URL } from '@/constants/requestCardData';
+import { useModal } from '@/hooks/useModal';
+import type { CardEditFormValue } from '@/types/card';
+import type { ColumnsResponse } from '@/types/column';
+import type { MembersResponse } from '@/types/members';
+
+interface ChangeCardModalProps {
+  memberData: MembersResponse;
+  modalName: string;
+  initialValue: CardEditFormValue;
+  columnListData: ColumnsResponse | null;
+  serverErrorMessage: string | null;
+  onSubmit: (formValue: CardEditFormValue, imageFile: File | null) => Promise<void>;
+}
+
+export default function ChangeCardModal({
+  memberData,
+  modalName,
+  initialValue,
+  columnListData,
+  serverErrorMessage,
+  onSubmit,
+}: ChangeCardModalProps) {
+  const { handleModalClose } = useModal(modalName);
+  const [formValue, setFormValue] = useState(initialValue);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [defaultImageUrl, setDefaultImageUrl] = useState<string | null>(initialValue.imageUrl);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleChange = (key: keyof CardEditFormValue) => (value: string | null) => {
+    setFormValue((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleComboboxChange = (
+    key: 'columnId' | 'assigneeUser',
+    value: StatusComboboxValue | UserComboboxValue | null
+  ) => {
+    setFormValue((prev) => {
+      if (key === 'columnId') {
+        const newValue = value as StatusComboboxValue | null;
+        return {
+          ...prev,
+          columnId: newValue?.id ?? prev.columnId,
+        };
+      }
+      if (key === 'assigneeUser') {
+        const newValue = value as UserComboboxValue | null;
+        return {
+          ...prev,
+          assigneeUser: newValue,
+        };
+      }
+      return prev;
+    });
+  };
+
+  const isDisabled = useMemo(() => {
+    const original = initialValue;
+
+    const hasChanged =
+      original.columnId !== formValue.columnId
+      || original.imageUrl !== defaultImageUrl
+      || original.title !== formValue.title
+      || original.description !== formValue.description
+      || original.dueDate !== formValue.dueDate
+      || original.assigneeUser?.id !== formValue.assigneeUser?.id
+      || JSON.stringify(original.tags) !== JSON.stringify(formValue.tags)
+      || imageFile !== null;
+
+    return !hasChanged || formValue.title.trim() === '' || formValue.description.trim() === '';
+  }, [formValue, initialValue, imageFile, defaultImageUrl]);
+
+  const handleSubmit = async () => {
+    try {
+      await onSubmit(formValue, imageFile);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : '카드 수정 중 오류가 발생했습니다.';
+      setErrorMessage(errorMsg);
+    }
+  };
+
+  if (!columnListData) {
+    return null;
+  }
+
+  return (
+    <FormModal modalName={modalName}>
+      <FormModal.Title title='할 일 수정' />
+      <FormModal.Form onSubmit={handleSubmit}>
+        <FormModal.Body>
+          <div className='scrollbar-hidden scrollbar-thin-gray -mr-[10px] flex h-[calc(100dvh-450px)] flex-col gap-[32px] overflow-y-auto sm:mr-0 sm:max-h-[calc(100dvh-380px)]'>
+            <div className='flex w-full flex-col gap-[32px] sm:flex-row'>
+              <div className='input-group-style w-full'>
+                <Label htmlFor='columnId' className='label-style'>
+                  상태
+                </Label>
+                <Combobox
+                  id='columnId'
+                  value={
+                    columnListData.data
+                      .map((col) => ({ id: col.id, title: col.title }))
+                      .find((col) => col.id === formValue.columnId) ?? null
+                  }
+                  setValue={(value) => handleComboboxChange('columnId', value)}>
+                  <Combobox.Trigger name='컬럼' placeholder='컬럼 선택' />
+                  <Combobox.List>
+                    {columnListData.data.map((col) => (
+                      <Combobox.Item key={col.id} value={{ id: col.id, title: col.title }}>
+                        <CardStatusBadge title={col.title} />
+                      </Combobox.Item>
+                    ))}
+                  </Combobox.List>
+                </Combobox>
+              </div>
+
+              <div className='input-group-style w-full'>
+                <Label htmlFor='assigneeUserId' className='label-style'>
+                  담당자
+                </Label>
+                <Combobox
+                  id='assigneeUserId'
+                  value={formValue.assigneeUser}
+                  setValue={(value) => handleComboboxChange('assigneeUser', value)}>
+                  <Combobox.Trigger name='담당자' placeholder='이름을 입력해 주세요' />
+                  <Combobox.List>
+                    {memberData.members.map((m) => (
+                      <Combobox.Item key={m.id} value={m}>
+                        <Avatar size='s' user={m}>
+                          <Avatar.Img />
+                          <Avatar.Fallback />
+                        </Avatar>
+                        <span className='font-medium'>{m.nickname}</span>
+                      </Combobox.Item>
+                    ))}
+                  </Combobox.List>
+                </Combobox>
+              </div>
+            </div>
+
+            <Input value={formValue.title} onChange={handleChange('title')}>
+              <Input.Label required className='label-style'>
+                제목
+              </Input.Label>
+              <Input.Group>
+                <Input.Field name='title' type='text' placeholder='제목을 입력해 주세요' />
+              </Input.Group>
+            </Input>
+
+            <div className='input-group-style'>
+              <Label htmlFor='desc' required className='label-style'>
+                설명
+              </Label>
+              <TextArea
+                id='desc'
+                placeholder='설명을 입력해 주세요'
+                value={formValue.description}
+                onChange={handleChange('description')}
+              />
+            </div>
+
+            <Input
+              value={formValue.dueDate === DUE_DATE ? '' : formValue.dueDate}
+              onChange={handleChange('dueDate')}>
+              <Input.Label className='label-style'>마감일</Input.Label>
+              <Input.Group className='h-[48px]'>
+                <Input.FieldDate placeholder='마감일을 선택해주세요' />
+              </Input.Group>
+            </Input>
+
+            <div className='input-group-style'>
+              <Label htmlFor='tags' className='label-style'>
+                태그
+              </Label>
+              <TagInput
+                tags={formValue.tags}
+                setTags={(next) => setFormValue((prev) => ({ ...prev, tags: next }))}
+              />
+            </div>
+
+            <div className='input-group-style'>
+              <Label htmlFor='imageUrl' className='label-style'>
+                이미지
+              </Label>
+              <ImageUpload
+                edit
+                defaultImageUrl={defaultImageUrl === IMAGE_URL ? '' : defaultImageUrl}
+                setDefaultImageUrl={setDefaultImageUrl}
+                file={imageFile}
+                onFileChange={setImageFile}
+              />
+            </div>
+          </div>
+
+          {(serverErrorMessage || errorMessage) && (
+            <span className='mt-[12px] inline-block font-md-medium text-error'>
+              {serverErrorMessage || errorMessage}
+            </span>
+          )}
+        </FormModal.Body>
+
+        <FormModal.Footer className='pt-[32px]'>
+          <Button theme='outlined' onClick={handleModalClose}>
+            취소
+          </Button>
+          <Button disabled={isDisabled} theme='primary' type='submit'>
+            수정
+          </Button>
+        </FormModal.Footer>
+      </FormModal.Form>
+    </FormModal>
+  );
+}

src/components/dashboard-detail/modal/CreateCardModal.tsx

@@ -6,10 +6,13 @@ import Input from '@/components/common/input/Input';
 import Label from '@/components/common/Label';
 import FormModal from '@/components/common/modal/FormModal';
 import TextArea from '@/components/common/TextArea';
-import Combobox from '@/components/dashboard/combobox/Combobox';
+import Combobox, {
+  type StatusComboboxValue,
+  type UserComboboxValue,
+} from '@/components/dashboard/combobox/Combobox';
 import TagInput from '@/components/dashboard-detail/modal/TagInput';
 import { useModal } from '@/hooks/useModal';
-import type { Assignee, CardInitialValueType } from '@/types/card';
+import type { CardInitialValueType } from '@/types/card';
 import type { MembersResponse } from '@/types/members';
 
 interface CreateCardModalProps {
@@ -39,9 +42,11 @@ export default function CreateCardModal({
   const [imageFile, setImageFile] = useState<File | null>(null);
   const [errorMessage, setErrorMessage] = useState('');
 
-  const handleChange = (key: keyof typeof initialValue) => (value: string | Assignee | null) => {
-    setFormValue((prev) => ({ ...prev, [key]: value }));
-  };
+  const handleChange =
+    (key: keyof typeof initialValue) =>
+    (value: string | UserComboboxValue | StatusComboboxValue | null) => {
+      setFormValue((prev) => ({ ...prev, [key]: value }));
+    };
 
   const handleCardSubmit = async () => {
     try {

src/components/dashboard-detail/modal/TagInput.tsx

@@ -49,11 +49,13 @@ export default function TagInput({ tags, setTags }: TagInputProps) {
     <div className='flex flex-col gap-[4px]'>
       <div className='flex min-h-[48px] w-full flex-wrap items-center gap-[10px] rounded-[8px] border border-gray-300 bg-gray-0 px-[16px] py-[10px] focus-within:border-primary md:max-w-[520px]'>
         {tags.length > 0
-          && tags.map((tag, idx) => (
-            <Tag key={tag} onDelete={() => handleDelete(tag)} color={getProfileColorForId(idx)}>
-              {tag}
-            </Tag>
-          ))}
+          && tags
+            .filter((t) => t.trim() !== '')
+            .map((tag, idx) => (
+              <Tag key={tag} onDelete={() => handleDelete(tag)} color={getProfileColorForId(idx)}>
+                {tag}
+              </Tag>
+            ))}
         <input
           type='text'
           placeholder='입력 후 Enter'