✨ feat: 사이드바 대시보드 목록 API 연동 #60
Conversation
Walkthrough이 변경사항은 Sidebar 컴포넌트가 대시보드 목록을 정적으로 렌더링하던 방식에서 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant useDashboard
participant API
User->>Sidebar: 컴포넌트 마운트
Sidebar->>useDashboard: 훅 호출
useDashboard->>API: GET /{TEAM_ID}/dashboards
API-->>useDashboard: 대시보드 데이터 반환
useDashboard-->>Sidebar: 대시보드, 로딩, 에러 상태 전달
Sidebar->>User: 대시보드 목록, 로딩/에러 메시지 렌더링
User->>Sidebar: "대시보드 생성" 클릭
Sidebar->>CreateDashboardModal: 모달 오픈
User->>CreateDashboardModal: 폼 제출
CreateDashboardModal->>API: POST /{TEAM_ID}/dashboards
API-->>CreateDashboardModal: 생성 결과 반환
CreateDashboardModal->>useDashboard: refetch() 호출
useDashboard->>API: GET /{TEAM_ID}/dashboards (재요청)
API-->>useDashboard: 최신 대시보드 데이터 반환
useDashboard-->>Sidebar: 업데이트된 대시보드 목록 전달
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/app/shared/hooks/useDashboard.ts (2)
15-30:fetchDashboards를useCallback으로 래핑해 참조 안정성 확보훅의 반환값으로
refetch를 제공하고 있는데, 현재fetchDashboards는 렌더링마다 새로 생성됩니다.
컨슈머가useEffect의존성 배열에refetch를 넣거나 memoized 컴포넌트에서 사용하면 불필요한 재호출이 발생할 수 있습니다.useCallback으로 래핑해 안정적인 함수 참조를 보장해 주세요.- const fetchDashboards = async () => { + const fetchDashboards = useCallback(async () => { ... - } + }, [])
24-27:catch블록의 오류 타입 안전성 강화
err가unknown타입이므로 바로 로그만 남기면 타입 체커가 경고합니다.
instanceof Error체크 후message를 사용하는 것이 안전합니다.- } catch (err) { - console.error('대시보드 목록 조회 실패:', err) - setError('대시보드 목록을 불러오는데 실패했습니다.') + } catch (err) { + console.error('대시보드 목록 조회 실패:', err) + const message = + err instanceof Error ? err.message : '대시보드 목록을 불러오는데 실패했습니다.' + setError(message) }src/app/shared/components/common/sidebar/Sidebar.tsx (1)
53-74: 중첩 삼항 연산자 가독성 저하로딩/에러/빈 배열/정상 렌더링을 하나의 중첩 삼항으로 처리하면 유지보수가 어려워집니다.
별도 렌더링 함수 또는 early return 패턴으로 분리하면 가독성이 향상됩니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/shared/components/common/sidebar/Sidebar.tsx(3 hunks)src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx(1 hunks)src/app/shared/hooks/useDashboard.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/shared/components/common/sidebar/Sidebar.tsx (2)
src/app/shared/hooks/useDashboard.ts (1)
useDashboard(8-37)src/app/shared/components/common/sidebar/DashboardItem.tsx (1)
DashboardItem(7-47)
src/app/shared/hooks/useDashboard.ts (1)
src/app/shared/types/dashboard.ts (1)
DashboardListResponse(13-17)
| const response = await api.post(`/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`, formData) | ||
|
|
There was a problem hiding this comment.
팀 ID 환경 변수 누락 시 잘못된 엔드포인트 호출 가능성
NEXT_PUBLIC_TEAM_ID가 정의되지 않은 경우 "/undefined/dashboards"로 POST 요청이 전송됩니다.
API 호출 전 유효성을 점검하여 사용자에게 경고하거나 모달을 닫는 등의 처리가 필요합니다.
- const response = await api.post(`/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`, formData)
+ if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+ alert('팀 정보가 설정되지 않았습니다.')
+ return
+ }
+ const response = await api.post(
+ `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`,
+ formData,
+ )📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const response = await api.post(`/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`, formData) | |
| if (!process.env.NEXT_PUBLIC_TEAM_ID) { | |
| alert('팀 정보가 설정되지 않았습니다.') | |
| return | |
| } | |
| const response = await api.post( | |
| `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`, | |
| formData, | |
| ) |
🤖 Prompt for AI Agents
In src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
around lines 45 to 46, the code uses process.env.NEXT_PUBLIC_TEAM_ID directly in
the API endpoint without checking if it is defined. To fix this, add a
validation step before making the API call to verify that NEXT_PUBLIC_TEAM_ID is
set. If it is undefined, handle the case by showing a user warning or closing
the modal to prevent sending a request to an invalid endpoint.
Insung-Jo
left a comment
Insung-Jo
left a comment
There was a problem hiding this comment.
연동 수고 많으셨습니다! 환경 변수 같은 경우는 추후에 문제가 발생할 수도 있으니 논의를 통해서 통일 하는 게 좋을 거 같네요🤔
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
.env 파일 작성 내용 공유해주시면 이후 API 연동 시 그에 맞게 작업할 수 있을 것 같습니다!!
| const fetchDashboards = useCallback(async () => { | ||
| try { | ||
| setIsLoading(true) | ||
| setError(null) | ||
|
|
||
| if (!process.env.NEXT_PUBLIC_TEAM_ID) { | ||
| throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.') | ||
| } | ||
|
|
||
| const response = await api.get<DashboardListResponse>( | ||
| `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards?navigationMethod=infiniteScroll`, | ||
| ) | ||
| setDashboards(response.data.dashboards) | ||
| } catch (err) { | ||
| console.error('대시보드 목록 조회 실패:', err) | ||
| setError('대시보드 목록을 불러오는데 실패했습니다.') | ||
| } finally { | ||
| setIsLoading(false) | ||
| } | ||
| }, []) | ||
|
|
||
| useEffect(() => { | ||
| fetchDashboards() | ||
| }, [fetchDashboards]) | ||
|
|
||
| return { dashboards, isLoading, error, refetch: fetchDashboards } | ||
| } |
There was a problem hiding this comment.
여기서 환경변수 설정 여부를 파악하고 대시보드 목록을 조회해오는 구조군용!!
📌 변경 사항 개요
기존의 사이드바 목데이터를 API연동
✨ 요약
useDashboard📝 상세 내용
1. 커스텀 훅 구현 (useDashboard.ts)
dashboards,isLoading,error상태 관리GET /{TEAM_ID}/dashboards?navigationMethod=infiniteScrollAPI 연동2. 사이드바 컴포넌트 업데이트 (Sidebar.tsx)
mockDashboards제거useDashboard훅 연동3. 대시보드 생성 모달 업데이트 (CreateDashboardModal.tsx)
/dashboards→/{TEAM_ID}/dashboardsNEXT_PUBLIC_TEAM_ID활용🔗 관련 이슈
#59
🖼️ 스크린샷
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit