Refactor/135/todo card

src/components/columns/ColumnItem.tsx

@@ -36,8 +36,18 @@ export default function ColumnItem({ column }: ColumnItemProps) {
       <DashboardButton variant='addTodo' onClick={() => addRef.current?.open()} />
       <div className='flex flex-col gap-4'>
         <AnimatePresence>
-          {cards.map((card) => (
-            <motion.div key={card.id} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 1.5 }}>
+          {cards.map((card, index) => (
+            <motion.div
+              key={card.id}
+              layout
+              initial={{ opacity: 0, y: 0 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{
+                opacity: { duration: 1 },
+                y: { delay: index * 0.5 },
+              }}
+            >
               <TodoCard card={card} />
             </motion.div>
           ))}

src/components/dashboard/DetailTodo.tsx

@@ -4,9 +4,7 @@ import { forwardRef, useState } from 'react';
 import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '../ui/Modal/Modal';
 import { motion } from 'motion/react';
 import useAlert from '@/hooks/useAlert';
-import { useRouter } from 'next/navigation';
 import { Card } from '@/apis/cards/types';
-import { deleteCard } from '@/apis/cards';
 import CommentSection from './CommentSection';
 import useConfirm from '@/hooks/useConfirm';
 import Image from 'next/image';
@@ -18,6 +16,7 @@ import RoundChip from '../ui/Chip/RoundChip';
 import { getErrorMessage } from '@/utils/errorMessage';
 import { formatDate } from '@/utils/formatDate';
 import { useColumnsQuery } from '@/apis/columns/queries';
+import { useRemoveCard } from '@/apis/cards/queries';
 
 interface DetailTodoProps {
   card: Card;
@@ -29,8 +28,8 @@ const NO_IMAGE_BASE_URL = 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws
 const DetailTodo = forwardRef<ModalHandle, DetailTodoProps>(({ card, onEdit }, ref) => {
   const alert = useAlert();
   const confirm = useConfirm();
-  const router = useRouter();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { mutateAsync: remove } = useRemoveCard();
 
   const formattedDueDate = formatDate(card.dueDate);
 
@@ -48,12 +47,11 @@ const DetailTodo = forwardRef<ModalHandle, DetailTodoProps>(({ card, onEdit }, r
 
     if (!userConfirmed) return; // 취소 버튼을 누르면 진행 중단
     try {
-      await deleteCard(card.id);
+      await remove(card.id);
       alert('카드가 삭제되었습니다.');
       if (ref && 'current' in ref && ref.current) {
-        ref.current.close();
+        ref?.current?.close();
       }
-      router.push('/dashboard');
     } catch (err) {
       const message = getErrorMessage(err);
       alert(message);

src/components/ui/Field/AssignInput.tsx

@@ -12,6 +12,7 @@ import Image from 'next/image';
 import XIcon from '@/assets/icons/x.svg';
 import Avatar from '../Avatar/Avatar';
 import { Member } from '@/apis/members/types';
+import { Assignee } from '@/types/common';
 
 const PAGE_SIZE = 5;
 
@@ -21,14 +22,15 @@ type AssignInputProps = BaseField &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
     value: number;
     onChange: (assignId: number) => void;
+    defaultAssignee?: Assignee;
   };
 
-export function AssignInput({ onChange, label, required, error, className }: AssignInputProps) {
+export function AssignInput({ onChange, label, required, error, className, defaultAssignee }: AssignInputProps) {
   const params = useParams();
   const dashboardId = Number(params.id);
   const [page, setPage] = useState(1);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [selectedMember, setSelectedMember] = useState<Member>();
+  const [selectedAssignee, setSelectedAssignee] = useState<Assignee | null>(defaultAssignee ?? null);
   const { data } = useMembersQuery({ dashboardId, page, size: PAGE_SIZE });
   const id = useId();
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -39,7 +41,7 @@ export function AssignInput({ onChange, label, required, error, className }: Ass
 
   const handleSelectItem = (member: Member) => {
     onChange(member.userId);
-    setSelectedMember(member);
+    setSelectedAssignee({ id: member.userId, nickname: member.nickname, profileImageUrl: member.profileImageUrl });
     setIsDropdownOpen(false);
   };
 
@@ -65,11 +67,11 @@ export function AssignInput({ onChange, label, required, error, className }: Ass
       )}
       <div ref={dropdownRef} className={cn(baseFieldClassName, 'relative flex h-auto min-h-[50px] items-center gap-2 px-4 py-2', error && baseErrorClassName, className)}>
         <div onClick={handleInputClick} className='flex w-full items-center gap-2'>
-          {selectedMember?.userId && <Avatar email={selectedMember.email} profileImageUrl={selectedMember.profileImageUrl} className='h-8 w-8' />}
+          {selectedAssignee?.id && <Avatar profileImageUrl={selectedAssignee.profileImageUrl} nickname={selectedAssignee.nickname} className='h-8 w-8' />}
           <input
             type='text'
             id={id}
-            value={selectedMember?.nickname || ''}
+            value={selectedAssignee?.nickname || ''}
             readOnly
             placeholder='담당자를 지정해 주세요'
             className={cn('flex flex-1 text-black focus-visible:outline-none', className)}
@@ -87,7 +89,6 @@ export function AssignInput({ onChange, label, required, error, className }: Ass
             >
               <li className='mb-2 flex h-10 items-center justify-between px-2'>
                 <div className='flex items-center gap-4'>
-                  <span>담당자 목록</span>
                   <PaginationWithCounter totalCount={data?.totalCount || 0} page={page} setPage={setPage} pageSize={PAGE_SIZE} />
                 </div>
 

src/types/common.ts

@@ -9,3 +9,9 @@ export type BaseCursor = {
 };
 
 export type NavigationMethod = 'infiniteScroll' | 'pagination';
+
+export interface Assignee {
+  id: number;
+  nickname: string;
+  profileImageUrl: string | null;
+}