[🐛 Bug/312] 대시보드 상태 변경 시 컬럼 리패치 오류 해결

[aahreum]

✅ PR 체크리스트

1. 코드 & 기능

• 변수/함수 이름 이해 가능한지
• 기능 정상 동작 & 콘솔 에러 없음

2. UI

• UI 동작 및 레이아웃 확인

3. 컨벤션

• 팀 컨벤션에 맞게 함수 이름을 정의했는지

🔗 이슈 번호

• close [🐛 Bug] 대시보드 상태 변경 시 컬럼 리패치 오류 해결 #312

✨ 작업한 내용

• 대시보드 상태 변경 시 컬럼이동하지 않던 문제 해결했습니다.

💁 리뷰 요청 / 코멘트

💡 참고사항

Summary by CodeRabbit

• New Features

  • 컬럼별 재조회 등록 기능 추가 및 카드 이동 발생 시 양쪽 컬럼을 즉시 갱신하도록 연동

• 개선 사항

  • 카드 이동 처리 로직 개선으로 이동된 카드가 원컬럼에서 즉시 제거되고 대상 컬럼에 반영
  • 카드 업데이트 흐름 개선으로 편집 후 반영 및 모달 닫기 동작이 더 빠르고 일관되게 작동
  • 페이지 내 데이터 새로고침 메커니즘 현대화하여 동기화 신뢰성 향상

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

컬럼별 리패치 콜백 등록(onRegisterRefetch)과 카드 이동 알림(onCardMoved)을 추가하고, 카드 업데이트를 위한 새 훅(useUpdateCard)을 도입해 ColumnCardList, CardDetailModal, DashboardDetail 사이에 리패치/이동 처리 흐름을 연결합니다.

Changes

Cohort / File(s)	Change Summary
카드 업데이트 훅 src/hooks/dashboard-detail/useUpdateCard.ts	새 훅 추가: useMutation 기반 카드 업데이트 로직을 캡슐화하고 선택적 onSuccess 콜백을 노출
컬럼 카드 리스트 src/components/dashboard-detail/card/ColumnCardList.tsx	공개 props 추가: onRegisterRefetch(columnId, fn) 및 onCardMoved(fromColumnId, toColumnId); useInfiniteScroll에서 resetData 노출 및 외부 리패치 등록, 카드가 다른 컬럼으로 이동하면 원본에서 제거하고 onCardMoved 호출
카드 상세 모달 src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx	기존 update 흐름을 useUpdateCard 훅으로 교체: 업데이트 성공 시 모달 종료 및 onUpdateCard 호출로 동작 변경, 기존 refetch 제거
대시보드 상세 페이지 src/pages/DashboardDetail.tsx	columnRefetchMap(useRef) 추가 및 registerRefetch, handleCardMoved 구현. ColumnCardList에 onRegisterRefetch와 onCardMoved 전달하여 컬럼별 리패치/이동 처리 연결

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• 추가 검토 필요 영역:
  • useUpdateCard의 타입 서명 및 onSuccess 호출 가드
  • ColumnCardList에서 카드 이동 시 totalCount 감소와 제거 로직 타이밍
  • DashboardDetail의 columnRefetchMap 등록/해제(메모리/수명) 관리
  • 컬럼 간 동기화 시 race condition 또는 중복 리패치 가능성

Possibly related PRs

• [✨ Feature/278] 할 일 생성 수정 모달 구현 api 연결 #311 — 동일 컴포넌트들(ColumnCardList, CardDetailModal, DashboardDetail)에서 카드 업데이트/이동 및 리패치 와이어링을 다룹니다.
• [✨ Feature/279] 대시보드 카드 리스트 조회 api #283 — ColumnCardList 변경을 기반으로 외부 리패치 등록 및 카드 이동 처리 기능을 확장한 PR입니다.
• [✨ Feature/288] 댓글, 카드 상세 모달 UI 구현, 카드 무한 스크롤 연동 #289 — ColumnCardList와 CardDetailModal 관련 흐름(무한스크롤/모달 업데이트)을 같이 수정한 PR입니다.

Suggested reviewers

• jung518
• yujin-fe
• hjiasdq

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 링크된 이슈 #312의 제목과 동일하며, 대시보드 상태 변경 시 컬럼 리패치 오류 해결이라는 주요 변경사항을 명확하게 설명합니다.
Description check	✅ Passed	PR 설명이 저장소의 템플릿을 충실히 따르고 있으며, 체크리스트 완료, 이슈 번호 명시, 작업 내용 기술 등 필수 정보가 포함되어 있습니다.
Linked Issues check	✅ Passed	코드 변경사항이 이슈 #312의 목표인 '대시보드 상태 변경 시 컬럼 리패치 오류 해결'을 충족합니다. 새로운 refetch 콜백 등록 메커니즘과 카드 이동 감지 기능을 구현하여 문제를 해결했습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 컬럼 리패치 메커니즘 개선과 카드 이동 처리라는 이슈 범위 내에 있으며, 범위를 벗어난 변경은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a994581 and cee2466.

📒 Files selected for processing (1)

• src/pages/DashboardDetail.tsx (4 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

✅ PREVIEW https://taskify-frontend-62fw16k5r-yujinhyuns-projects.vercel.app

[github-actions]

✅ PREVIEW https://taskify-frontend-6bumm5gkl-yujinhyuns-projects.vercel.app

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/dashboard-detail/card/ColumnCardList.tsx (1)

120-154: 카드 컬럼 이동 감지 로직이 정확하게 구현되었습니다.

구현이 견고합니다:

• oldCard 존재 여부 확인으로 안전성 확보
• 같은 컬럼 내 업데이트와 다른 컬럼으로의 이동을 명확히 구분
• 이동 시 totalCount 감소 처리 및 onCardMoved 호출

다만 Lines 121-122의 let 변수를 클로저에서 사용하는 패턴은 정확하지만 가독성 측면에서 약간 복잡할 수 있습니다.

가독성을 위해 다음과 같이 리팩토링을 고려할 수 있습니다:

  const handleUpdateCard = (updated: CardDetailResponse) => {
-   let fromColumnId: number | null = null;
-   let toColumnId: number | null = null;
+   let movedColumns: { from: number; to: number } | null = null;

    infiniteSetData((prev) => {
      if (!prev) {
        return prev;
      }

      const oldCard = prev.cards.find((c) => c.id === updated.id);
      if (!oldCard) {
        return prev;
      }

      if (oldCard.columnId === updated.columnId) {
        return {
          ...prev,
          cards: prev.cards.map((c) => (c.id === updated.id ? updated : c)),
        };
      }

-     fromColumnId = oldCard.columnId;
-     toColumnId = updated.columnId;
+     movedColumns = { from: oldCard.columnId, to: updated.columnId };

      return {
        ...prev,
        cards: prev.cards.filter((c) => c.id !== updated.id),
        totalCount: prev.totalCount - 1,
      };
    });

-   if (fromColumnId !== null && toColumnId !== null) {
-     onCardMoved(fromColumnId, toColumnId);
+   if (movedColumns) {
+     onCardMoved(movedColumns.from, movedColumns.to);
    }
  };

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2f81bf8 and a994581.

📒 Files selected for processing (4)

• src/components/dashboard-detail/card/ColumnCardList.tsx (6 hunks)
• src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx (2 hunks)
• src/hooks/dashboard-detail/useUpdateCard.ts (1 hunks)
• src/pages/DashboardDetail.tsx (4 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.tsx

⚙️ CodeRabbit configuration file

**/*.tsx: reviews:
instructions: |
우리 팀은 다음의 코드 스타일 가이드를 따릅니다:

[기본 규칙]
- 변수는 const 우선 사용
- 파일명은 PascalCase로 작성
- 컴포넌트는 default export를 사용
- 파일명과 컴포넌트명은 반드시 일치 (PascalCase)
- 불필요한 props는 전달하지 않기
- UI 관련 상태는 명확한 이름 사용 (isOpen, isLoading 등)

[함수 네이밍 규칙]
- 모든 함수는 **동사 + 목적어**
- UI 이벤트 핸들러는 handle* 사용 (handleClick, handleToggle 등)
- 내부 로직은 calculate / convert / format 등 의미 기반 네이밍 사용

[디렉토리 & 파일 구조]
- 디렉토리는 kebab-case
- 컴포넌트 파일은 PascalCase
- assets는 index 기반 export (Icons, Images, Logos 등)
- import 시 그룹 단위 import 사용

[상수 / 환경 변수]
- SNAKE_CASE 사용
- 예: PAGE_SIZE, API_URL

[함수 선언 규칙]
- 컴포넌트는 선언식 function Component() 형태
- 컴포넌트 내부의 로직 함수는 화살표 함수 사용
- 유틸성 컴포넌트가 아니면 default export

[주석 & 문서화]
- TODO 주석 사용 (미완성 코드 표시)
- TSDoc을 컴포넌트 단위로 활용
- 예시를 포함한 간단한 설명 추가

Files:

• src/pages/DashboardDetail.tsx
• src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx
• src/components/dashboard-detail/card/ColumnCardList.tsx

**/*.ts

⚙️ CodeRabbit configuration file

**/*.ts: language: "ko-KR"

reviews:
instructions: |
우리 팀은 다음의 코드 스타일 가이드를 따릅니다:

[기본 규칙]
- 변수는 항상 const 우선 사용
- 파일명은 camelCase로 작성
- 필요 없는 코드는 즉시 제거 (미사용 변수/함수 금지)
- 함수를 제외한 유틸 파일은 default export 대신 named export 권장

[함수 네이밍 규칙]
- 모든 함수는 **동사 + 목적어** 형태로 작성
- 데이터 조회 함수: get / fetch / load
- 데이터 수정 함수: set / update / save / remove
- 이벤트 함수: handle 사용
- 계산 / 변환 함수: calculate / convert / parse / format
- 조건 검사 함수: is / has / can

[디렉토리 & 파일 구조]
- 디렉토리명은 kebab-case 사용
- 에셋(icon, image, logos)은 index 파일을 통한 일괄 export
- import 시 `@/assets/icons` 형태로 그룹 단위 import

[상수 / 환경 변수]
- SNAKE_CASE 사용
- 예: PAGE_SIZE, API_URL

[주석 & 문서화]
- TODO 주석 적극 활용 (급한 PR / 미구현 영역)
- TSDoc 사용 가능 (컴포넌트 설명, 사용 예시 추가)
- @param은 TypeScript 타입으로 설명하기 때문에 비사용

Files:

• src/hooks/dashboard-detail/useUpdateCard.ts

🧠 Learnings (2)

📚 Learning: 2025-11-29T18:56:30.435Z

Learnt from: aahreum
Repo: sprint-19-part3-7team/Taskify-Frontend PR: 265
File: src/pages/DashboardDetail.tsx:106-116
Timestamp: 2025-11-29T18:56:30.435Z
Learning: In src/pages/DashboardDetail.tsx, column names (title field) are allowed to contain leading or trailing whitespace. Trimming whitespace from column names is not required.

Applied to files:

• src/pages/DashboardDetail.tsx
• src/components/dashboard-detail/card/ColumnCardList.tsx

📚 Learning: 2025-12-01T01:09:10.680Z

Learnt from: aahreum
Repo: sprint-19-part3-7team/Taskify-Frontend PR: 287
File: src/lib/apis/Invitations.ts:31-35
Timestamp: 2025-12-01T01:09:10.680Z
Learning: In this codebase, mutation functions (POST/PUT/DELETE) return the full response object (`res`) instead of `res.data`, because `useMutation` internally processes `res.data`. Only GET methods return `res.data` directly.

Applied to files:

• src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx

🧬 Code graph analysis (1)

src/hooks/dashboard-detail/useUpdateCard.ts (3)

src/types/card.ts (1)

• CardDetailResponse (10-22)

src/lib/apis/cards.ts (2)

• UpdateCardType (3-11)
• updateCard (51-54)

src/hooks/useMutation.ts (1)

• TData (11-59)

🔇 Additional comments (7)

src/pages/DashboardDetail.tsx (3)

1-1: 컬럼별 리패치 관리를 위한 useRef 도입이 적절합니다.

useRef를 사용하여 컬럼별 리패치 함수를 저장하는 방식은 리렌더링을 유발하지 않으면서도 최신 콜백을 유지할 수 있는 올바른 접근입니다.

Also applies to: 37-37

---

118-129: 카드 이동 감지 및 자동 리패치 로직이 잘 구현되었습니다.

두 함수의 역할이 명확하며 구현이 정확합니다:

• registerRefetch: 컬럼별 리패치 함수 등록
• handleCardMoved: 카드 이동 시 양쪽 컬럼 자동 리패치

동일 컬럼 내 이동을 조기 반환하여 불필요한 리패치를 방지한 점도 좋습니다.

---

207-208: ColumnCardList에 새 props 전달이 올바릅니다.

컬럼별 리패치 등록과 카드 이동 알림을 위한 콜백이 적절히 전달되고 있습니다.

src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx (2)

9-9: useUpdateCard 훅으로의 리팩토링이 적절합니다.

카드 업데이트 로직을 커스텀 훅으로 추상화하여 재사용성과 유지보수성이 향상되었습니다. import 정리도 깔끔하게 처리되었습니다.

Also applies to: 14-14

---

78-83: 새로운 리패치 전략에 맞춘 업데이트 흐름이 올바릅니다.

cardDetailQuery.refetch() 대신 editModal.handleModalCloseAll()을 사용하고, 컬럼별 리패치는 onUpdateCard(updated)를 통해 상위에서 처리하도록 변경한 것이 새로운 아키텍처와 일관성 있게 구현되었습니다.

src/hooks/dashboard-detail/useUpdateCard.ts (1)

1-21: 카드 업데이트 로직을 재사용 가능한 훅으로 잘 추상화했습니다.

구현이 깔끔하고 타입 안전성도 확보되어 있습니다:

• UseUpdateCardOptions 인터페이스로 명확한 API 제공
• onSuccess 콜백을 통한 유연한 후처리 지원
• Lines 13-15의 방어적 가드가 견고성을 높임

팀 코딩 가이드라인도 잘 준수되었습니다 (camelCase 파일명, default export, 동사+목적어 네이밍).

src/components/dashboard-detail/card/ColumnCardList.tsx (1)

24-25: 컬럼별 리패치 및 카드 이동 감지를 위한 props 추가가 적절합니다.

새로운 props를 통해 상위 컴포넌트와의 통신이 명확하게 구현되었습니다.

Also applies to: 36-37