[♻️ Refactor/319] ColumnList Context로 분리

[aahreum]

✅ PR 체크리스트

1. 코드 & 기능

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

2. UI

• UI 동작 및 레이아웃 확인

3. 컨벤션

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

🔗 이슈 번호

• close [♻️ Refactor] ColumnList Context로 분리 #319

✨ 작업한 내용

• props가 너무 깊고 columnList를 필요로 하지 않는 곳에서도 전달만 하고 있어서 context로 분리했습니다

💁 리뷰 요청 / 코멘트

💡 참고사항

Summary by CodeRabbit

릴리스 노트

• 리팩토링
  • 대시보드 상세 페이지의 열 관리 로직을 재구조화하여 코드 유지보수성 개선
  • 상태 관리 방식 개선으로 코드 가독성 및 확장성 강화

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

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

새로운 ColumnListContext 기반 상태 관리 패턴을 도입하여 대시보드 상세 화면의 컴포넌트 구조를 리팩토링합니다. 기존 props drilling을 제거하고 ColumnListProvider로 열 데이터와 CRUD 작업을 중앙화하며, DashboardDetailContent에서 모달 및 유효성 검사 로직을 처리합니다.

Changes

코호트 / 파일	변경 요약
새로운 Context 및 Hook 인프라 src/context/columnListContext.ts, src/hooks/useColumnListContext.ts	ColumnListContextType 인터페이스와 ColumnListContext 생성; useColumnListContext 훅으로 컨텍스트 접근 및 에러 처리 제공
Provider 컴포넌트 src/components/dashboard-detail/ColumnListProvider.tsx	새로운 ColumnListProvider 컴포넌트로 getColumnList 쿼리를 통해 열 데이터를 관리하고, createColumn, updateColumn, deleteColumn CRUD 함수 노출
새로운 상세 콘텐츠 컴포넌트 src/components/dashboard-detail/DashboardDetailContent.tsx	리스트 컨텍스트 소비, 멤버 데이터 조회, 3개 모달 관리, 열 생성/수정/삭제 뮤테이션 처리, 중복 검증 로직 포함하는 새로운 컴포넌트
Props Drilling 제거 - 카드 컴포넌트 src/components/dashboard-detail/card/ColumnCardList.tsx, src/components/dashboard-detail/card/DashboardCard.tsx	columnListData 프로퍼티 및 ColumnsResponse 임포트 제거; 프로퍼티 체이닝 간소화
Props Drilling 제거 - 모달 컴포넌트 src/components/dashboard-detail/modal/ChangeCardModal.tsx, src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx	columnListData 프로퍼티 제거 및 useColumnListContext 훅으로 대체; columnList 참조 일관성 유지
API 리팩토링 src/lib/apis/columns.ts	changeColumn을 updateColumn으로 이름 변경; ChangeColumnType을 UpdateColumnType/UpdateColumnVariables로 분리
페이지 레이아웃 개선 src/pages/DashboardDetail.tsx	인라인 로직 제거 및 ColumnListProvider + DashboardDetailContent 컴포지션으로 단순화; 상태 관리 및 뮤테이션 로직 위임

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• DashboardDetailContent.tsx: 모달 상태 관리, 열 생성/수정/삭제 뮤테이션 핸들링, 중복 검증 로직, 드래그&드롭 이벤트 처리의 복합성
• ColumnListProvider.tsx: 로컬 캐시 업데이트 로직 (createColumnFn, updateColumnFn의 배열 매핑/필터링)
• 컨텍스트 기반 리팩토링: 여러 모달 및 카드 컴포넌트에서 props 제거 및 훅 통합의 일관성 확인 필요
• API 인터페이스 변경: 함수명 및 타입 이름 변경이 모든 콜 사이트에 올바르게 적용되었는지 검증

Possibly related PRs

• [✨ Feature/278] 할 일 생성 수정 모달 구현 api 연결 #311: columnListData 프로퍼티 드릴링 구조와 직접 충돌하는 기존 구현 — 이 PR과 정반대 방향의 리팩토링 관계
• [✨ Feature/225] 대시보드 상세 - 컬럼 조회 api 연결 #258: getColumnList API 추가 및 DashboardDetail 열 조회 로직 변경 — 같은 데이터 흐름 개선
• [🐛 Bug/312] 대시보드 상태 변경 시 컬럼 리패치 오류 해결 #313: ColumnCardList와 대시보드 간 열 별 refetch 콜백 및 카드 이동 이벤트 연동 — 상태 동기화 메커니즘 관련

Suggested reviewers

• hjiasdq
• jung518
• yujin-fe

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/319/column-context

---

📜 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 615687b and abf35fb.

📒 Files selected for processing (10)

• src/components/dashboard-detail/ColumnListProvider.tsx (1 hunks)
• src/components/dashboard-detail/DashboardDetailContent.tsx (1 hunks)
• src/components/dashboard-detail/card/ColumnCardList.tsx (3 hunks)
• src/components/dashboard-detail/card/DashboardCard.tsx (0 hunks)
• src/components/dashboard-detail/modal/ChangeCardModal.tsx (4 hunks)
• src/components/dashboard-detail/modal/card-detail-modal/CardDetailModal.tsx (3 hunks)
• src/context/columnListContext.ts (1 hunks)
• src/hooks/useColumnListContext.ts (1 hunks)
• src/lib/apis/columns.ts (2 hunks)
• src/pages/DashboardDetail.tsx (1 hunks)

---

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

[github-actions]

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