Conversation
Walkthrough대시보드 삭제 API 함수 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Suggested reviewers
개요대시보드 삭제 기능을 구현하는 변경사항입니다. 새로운 변경 사항
예상 코드 리뷰 소요 시간🎯 3 (보통) | ⏱️ ~20분
연관 이슈
추천 리뷰어
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/lib/apis/dashboards.ts (2)
48-53: 변수명 일관성을 위해res사용을 권장합니다.이 파일의 다른 API 함수들(
createDashboard,getDashboards,getDashboardDetail,changeDashboard)은 모두res변수명을 사용하는데, 이 함수만response를 사용하고 있습니다. 코드베이스 전체의 일관성을 위해res로 통일하는 것이 좋습니다.- const response = await api.delete(`/dashboards/${dashboardId}`); - return response.data; + const res = await api.delete(`/dashboards/${dashboardId}`); + return res.data;
50-53: 반환 타입 명시를 고려해보세요.
changeDashboard함수는 명시적인 반환 타입(Promise<AxiosResponse<Dashboard>>)을 가지고 있지만, 이 함수는 타입 명시가 없습니다. 타입 안정성과 코드 가독성을 위해 반환 타입을 명시하는 것을 권장합니다.-export const deleteDashboard = async (dashboardId: number) => { +export const deleteDashboard = async (dashboardId: number): Promise<void> => { const response = await api.delete(`/dashboards/${dashboardId}`); return response.data; };참고: API 응답이 특정 데이터를 반환한다면 해당 타입을 사용하세요.
src/pages/DashboardEdit.tsx (2)
18-20: 불필요한 useMemo 사용을 재고해보세요.
dashboardId를 숫자로 변환하는 단순한 연산에useMemo를 사용하고 있습니다.useParams의 값은 이미 안정적이고,Number()변환 비용이 매우 낮기 때문에 메모이제이션이 불필요합니다.- const numericDashboardId = useMemo(() => { - return dashboardId ? Number(dashboardId) : null; - }, [dashboardId]); + const numericDashboardId = dashboardId ? Number(dashboardId) : null;
59-65: 삭제 확인 모달에 취소 버튼이 없습니다.현재
BaseModalFrame은 "확인" 버튼만 제공하며, 사용자가 실수로 삭제 버튼을 클릭했을 경우 취소할 방법이 없습니다. 파괴적인 작업(삭제)에는 취소 옵션을 제공하는 것이 일반적인 UX 패턴입니다.
BaseModalFrame을 수정하거나, 커스텀 모달을 만들어서 "취소"와 "삭제" 두 버튼을 제공하는 것을 권장합니다. 또는 모달 바깥 영역을 클릭하면 닫히도록 dimmed 영역에 클릭 핸들러를 추가할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/lib/apis/dashboards.ts(1 hunks)src/pages/DashboardEdit.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.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/lib/apis/dashboards.ts
**/*.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/DashboardEdit.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-28T14:56:38.460Z
Learnt from: aahreum
Repo: sprint-19-part3-7team/Taskify-Frontend PR: 239
File: src/components/dashboard/header/Header.tsx:79-81
Timestamp: 2025-11-28T14:56:38.460Z
Learning: In src/components/dashboard/header/Header.tsx, the mobile-only Title component intentionally shows only {title} (from getBasicTitle) without the dashboard name fallback. On /dashboard/:id routes, the mobile header title should remain empty per requirements.
Applied to files:
src/pages/DashboardEdit.tsx
📚 Learning: 2025-11-22T16:39:21.177Z
Learnt from: aahreum
Repo: sprint-19-part3-7team/Taskify-Frontend PR: 93
File: src/components/dashboard/dropdown/DropdownMenuSearchTrigger.tsx:32-63
Timestamp: 2025-11-22T16:39:21.177Z
Learning: In the DropdownMenuSearchTrigger component (src/components/dashboard/dropdown/DropdownMenuSearchTrigger.tsx), a div element is intentionally used instead of a button because the component conditionally renders an input element when open, and nesting input inside button is invalid HTML.
Applied to files:
src/pages/DashboardEdit.tsx
🧬 Code graph analysis (2)
src/lib/apis/dashboards.ts (2)
src/lib/axios/index.ts (1)
api(40-40)src/lib/apis/Invitations.ts (2)
dashboardId(31-35)dashboardId(4-7)
src/pages/DashboardEdit.tsx (3)
src/lib/apis/dashboards.ts (1)
deleteDashboard(50-53)src/components/common/Button.tsx (1)
Button(64-85)src/components/common/modal/BaseModalFrame.tsx (1)
BaseModalFrame(28-59)
🔇 Additional comments (1)
src/pages/DashboardEdit.tsx (1)
1-1: 필요한 임포트가 올바르게 추가되었습니다.
useState,useMemo,BaseModalFrame,deleteDashboard가 새로운 모달 삭제 플로우를 위해 적절하게 임포트되었습니다.Also applies to: 4-4, 9-9
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/pages/DashboardEdit.tsx (1)
27-39: 에러 핸들링이 여전히 누락되어 있습니다.이전 리뷰에서 지적된 대로,
deleteDashboardAPI 호출에 에러 처리가 없습니다. 현재 구현에서는:
- 모달이 API 호출 전에 먼저 닫힘 (line 28)
- API 실패 시에도
/mydashboard로 이동함- 사용자가 삭제 실패 여부를 알 수 없음
이전 리뷰의 제안대로 try/catch를 추가하고, 성공 시에만 모달을 닫고 navigate하도록 수정해주세요.
🧹 Nitpick comments (1)
src/pages/DashboardEdit.tsx (1)
16-21:resetKey는 불필요한 상태입니다.
resetKey는 line 35에서 증가되지만, 바로 다음에navigate('/mydashboard')가 호출되어 컴포넌트가 언마운트됩니다. 따라서resetKey증가는 아무런 효과가 없습니다.불필요한 상태를 제거하세요:
const [isModalOpen, setIsModalOpen] = useState(false); - const [resetKey, setResetKey] = useState(0);그리고 line 35의
setResetKey((prev) => prev + 1);와 line 51의key={resetKey}도 함께 제거하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/lib/apis/dashboards.ts(1 hunks)src/pages/DashboardEdit.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/lib/apis/dashboards.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.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/DashboardEdit.tsx
🔇 Additional comments (2)
src/pages/DashboardEdit.tsx (2)
1-9: LGTM!import 구문이 올바르게 구성되어 있으며, 추가된 모든 import가 컴포넌트에서 사용되고 있습니다.
23-25: LGTM!핸들러 네이밍이 팀 컨벤션(
handle*)을 따르고 있습니다.
|
사이드바 목록은 삭제 성공하면 대시보드 사이드바 데이터를 refetch 해오면 될 것 같습니다! |
Co-authored-by: apple <apple@apples-MacBook-Air.local>
2 participants
✅ PR 체크리스트
1. 코드 & 기능
2. UI
3. 컨벤션
🔗 이슈 번호
✨ 작업한 내용
대시보드 삭제 버튼 + api 연결
💁 리뷰 요청 / 코멘트
새로고침을 해야 사이드바 목록 변경사항이 반영되는데 이 부분은 어떻게 해야 할지 고민입니다.
사이드바 목록
💡 참고사항
Summary by CodeRabbit
✏️ Tip: 리뷰 설정에서 이 요약을 사용자화할 수 있습니다.