Conversation
|
Warning Rate limit exceeded@jjangminii has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 45 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
Walkthrough레벨/사이드바에서 도토리(acorn) 수를 API로 연동하고 로딩/에러 흐름을 추가했습니다. 공용 API/쿼리/타입/유틸을 신설·이동하며, 기존 사이드바 전용 axios 모듈을 제거했습니다. main.tsx의 getQueryClient 경로가 변경되었고, 클라이언트 .gitignore에 .env가 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI_Level as Level Page
participant UI_Sidebar as Sidebar
participant Queries as useGetArcons (React Query)
participant API as getAcorns()
participant HTTP as apiRequest (Axios)
participant BE as Backend
par Level fetch
UI_Level->>Queries: useGetArcons()
and Sidebar fetch
UI_Sidebar->>Queries: useGetArcons()
end
Queries->>API: fetch()
API->>API: now = formatLocalDateTime(new Date)
API->>HTTP: GET /api/v1/users/acorns?now=...
HTTP->>BE: Request
BE-->>HTTP: { acornCount, remindDateTime }
HTTP-->>Queries: data
alt 성공
Queries-->>UI_Level: data.acornCount
Queries-->>UI_Sidebar: data.acornCount
note over UI_Level,UI_Sidebar: 로딩 해제 → UI에 acornCount 반영
else 에러
Queries-->>UI_Level: isError
Queries-->>UI_Sidebar: isError
note over UI_Level,UI_Sidebar: 에러 분기(early return)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks (2 passed, 3 warnings)❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
Poem
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![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
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/client/.gitignore(1 hunks)apps/client/src/main.tsx(1 hunks)apps/client/src/pages/level/Level.tsx(2 hunks)apps/client/src/shared/apis/axios.ts(1 hunks)apps/client/src/shared/apis/queries.ts(2 hunks)apps/client/src/shared/components/sidebar/Sidebar.tsx(4 hunks)apps/client/src/shared/components/sidebar/apis/axios.ts(0 hunks)apps/client/src/shared/types/api.ts(1 hunks)apps/client/src/shared/utils/formatDateTime.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/client/src/shared/components/sidebar/apis/axios.ts
🧰 Additional context used
🧬 Code graph analysis (4)
apps/client/src/pages/level/Level.tsx (3)
apps/client/src/shared/apis/queries.ts (1)
useGetArcons(23-28)apps/client/src/shared/utils/treeLevel.ts (1)
getTreeLevel(28-31)apps/client/src/pages/level/components/TreeStatusCard.tsx (1)
TreeStatusCard(9-38)
apps/client/src/shared/apis/axios.ts (1)
apps/client/src/shared/utils/formatDateTime.ts (1)
formatLocalDateTime(1-9)
apps/client/src/shared/apis/queries.ts (2)
apps/client/src/shared/types/api.ts (1)
AcornsResponse(11-14)apps/client/src/shared/apis/axios.ts (1)
getAcorns(16-22)
apps/client/src/shared/components/sidebar/Sidebar.tsx (1)
apps/client/src/shared/apis/queries.ts (1)
useGetArcons(23-28)
🔇 Additional comments (10)
apps/client/.gitignore (1)
25-25: 환경 변수 파일 추가가 적절합니다.API 연동 작업에 필요한 환경 변수들을 보호하기 위해
.env파일을 gitignore에 추가한 것이 좋습니다.apps/client/src/shared/types/api.ts (1)
11-14: AcornsResponse 타입 정의가 명확합니다.도토리 개수와 리마인드 시간을 포함하는 타입 정의가 적절하며, API 응답 구조를 잘 반영하고 있습니다.
apps/client/src/main.tsx (1)
5-5: 확인: getQueryClient가 새 경로에 존재합니다.
apps/client/src/shared/apis/setting/query/getQueryClient.ts 파일이 확인되었습니다.apps/client/src/shared/utils/formatDateTime.ts (1)
1-9: 날짜 포맷팅 유틸리티가 잘 구현되었습니다.ISO 8601 형식으로 로컬 시간을 포맷하는 함수가 명확하고 재사용 가능하게 작성되었습니다. padStart를 사용한 제로 패딩 처리도 적절합니다.
apps/client/src/pages/level/Level.tsx (2)
17-18: API 데이터 연동이 올바르게 구현되었습니다.하드코딩된 값 대신 API에서 받은
acornCount를 사용하여 동적으로 레벨 정보를 계산하는 것이 좋습니다.
50-54: Badge 컴포넌트에 동적 데이터가 잘 연결되었습니다.
countNum={acornCount}로 실제 도토리 개수가 표시되도록 구현된 것이 적절합니다.apps/client/src/shared/apis/queries.ts (2)
2-2: API 모듈 경로 변경이 적절합니다.기존 사이드바 전용 API에서 공용 API 모듈로 이전한 것이 코드 구조 개선에 도움이 됩니다.
23-28: useGetArcons 훅이 올바르게 구현되었습니다.React Query를 사용한 데이터 페칭 로직이 적절하며, 타입 정의도 명확합니다. 쿼리 키도 의미있게 설정되었습니다.
apps/client/src/shared/components/sidebar/Sidebar.tsx (1)
16-17: 도토리 API 연동이 성공적으로 구현되었습니다.
useGetArcons훅을 사용하여 실시간 도토리 데이터를 가져오고,MyLevelItem에 동적으로 전달하는 구현이 올바릅니다.Also applies to: 27-27, 72-72, 143-143
apps/client/src/shared/apis/axios.ts (1)
4-7: API 함수들이 잘 구현되었습니다.
getDashboardCategories와postCategory함수가 적절하게 구현되어 있고, 응답 구조도 일관성 있게 처리되고 있습니다.Also applies to: 9-14
| if (isPending) return console.log('로딩중...'); | ||
| if (isError) return console.log('에러...'); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로딩 및 에러 상태 처리를 개선해주세요.
현재 console.log만 사용하고 있어서 사용자에게 적절한 피드백을 제공하지 못합니다. 사용자 경험을 위해 적절한 로딩 스피너나 에러 메시지를 표시해야 합니다.
다음과 같이 사용자 친화적인 상태 처리로 개선하세요:
- if (isPending) return console.log('로딩중...');
- if (isError) return console.log('에러...');
+ if (isPending) return <div>도토리 정보를 불러오는 중...</div>;
+ if (isError) return <div>도토리 정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>;📝 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.
| if (isPending) return console.log('로딩중...'); | |
| if (isError) return console.log('에러...'); | |
| if (isPending) return <div>도토리 정보를 불러오는 중...</div>; | |
| if (isError) return <div>도토리 정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>; |
🤖 Prompt for AI Agents
In apps/client/src/pages/level/Level.tsx around lines 14-15, replace the current
early returns that call console.log with proper JSX-based UI for loading and
error states: render a loading spinner or friendly "Loading..." component
(import or reuse your app's Spinner/Loader) when isPending is true, and render a
user-facing error message or an Error component (with optional retry button or
navigation) when isError is true; do not use console.log as a return value,
ensure the component returns valid JSX and imports any needed UI components and
styles.
| const { data } = await apiRequest.get('/api/v1/users/acorns?now=', { | ||
| params: { now }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
getAcorns API 호출에서 쿼리 파라미터 구조를 확인해주세요.
현재 URL이 /api/v1/users/acorns?now=로 끝나고 있는데, params 옵션으로 now 값을 전달하면 실제로는 /api/v1/users/acorns?now=&now=TIMESTAMP 형태가 될 수 있습니다.
다음 스크립트로 실제 API 엔드포인트 구조를 확인해보세요:
올바른 형태는 다음 중 하나일 것입니다:
# 옵션 1: URL에서 ?now= 제거
- const { data } = await apiRequest.get('/api/v1/users/acorns?now=', {
+ const { data } = await apiRequest.get('/api/v1/users/acorns', {
params: { now },
});
# 옵션 2: params 대신 URL에 직접 추가
- const { data } = await apiRequest.get('/api/v1/users/acorns?now=', {
- params: { now },
- });
+ const { data } = await apiRequest.get(`/api/v1/users/acorns?now=${now}`);🏁 Script executed:
#!/bin/bash
# API 엔드포인트 구조 확인 (백엔드 라우터/컨트롤러 파일 검색)
rg -n "users/acorns" --type=ts --type=js -A 3 -B 3Length of output: 484
중복 'now' 쿼리 제거 — URL에서 '?now=' 삭제하거나 params 사용 일관화
현재 '/api/v1/users/acorns?now='와 params: { now }를 동시에 사용해 '?now=&now=TIMESTAMP' 형태로 중복 쿼리가 생깁니다.
위치: apps/client/src/shared/apis/axios.ts (lines 18–19)
# 옵션 1: URL에서 ?now= 제거
- const { data } = await apiRequest.get('/api/v1/users/acorns?now=', {
+ const { data } = await apiRequest.get('/api/v1/users/acorns', {
params: { now },
});# 옵션 2: params 대신 URL에 직접 추가
- const { data } = await apiRequest.get('/api/v1/users/acorns?now=', {
- params: { now },
- });
+ const { data } = await apiRequest.get(`/api/v1/users/acorns?now=${now}`);📝 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 { data } = await apiRequest.get('/api/v1/users/acorns?now=', { | |
| params: { now }, | |
| const { data } = await apiRequest.get('/api/v1/users/acorns', { | |
| params: { now }, | |
| }); |
| const { data } = await apiRequest.get('/api/v1/users/acorns?now=', { | |
| params: { now }, | |
| const { data } = await apiRequest.get(`/api/v1/users/acorns?now=${now}`); |
🤖 Prompt for AI Agents
In apps/client/src/shared/apis/axios.ts around lines 18–19, the request URL
currently includes a hardcoded '?now=' and also passes params: { now }, causing
duplicate now query params; remove the '?now=' fragment from the URL and rely
solely on the params object (or alternatively remove the params and inline the
timestamp into the URL) so only one now query parameter is sent, and ensure no
trailing '?' remains in the URL.
| if (isPending) return console.log('로딩중...'); | ||
| if (isError) return console.log('에러...'); | ||
| const acornCount = data.acornCount; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로딩 및 에러 상태 처리를 개선해주세요.
Level 컴포넌트와 동일한 문제로, console.log 대신 사용자에게 적절한 피드백을 제공해야 합니다.
다음과 같이 개선하세요:
- if (isPending) return console.log('로딩중...');
- if (isError) return console.log('에러...');
+ if (isPending) return <div>사이드바 정보를 불러오는 중...</div>;
+ if (isError) return <div>사이드바 정보를 불러오는데 실패했습니다.</div>;📝 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.
| if (isPending) return console.log('로딩중...'); | |
| if (isError) return console.log('에러...'); | |
| const acornCount = data.acornCount; | |
| if (isPending) return <div>사이드바 정보를 불러오는 중...</div>; | |
| if (isError) return <div>사이드바 정보를 불러오는데 실패했습니다.</div>; | |
| const acornCount = data.acornCount; |
constantly-dev
left a comment
constantly-dev
left a comment
There was a problem hiding this comment.
잘 구현해주셨네요!! isPending잘 써주신 것 같아요~~~ 👍
| if (isPending) return console.log('로딩중...'); | ||
| if (isError) return console.log('에러...'); |
2 participants
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit