Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough보드판을 라벨 기반에서 placeId/name 기반 데이터로 전환하고, /api/places를 호출해 각 장소의 스탬프 보유 여부를 조회하도록 Boardgame 컴포넌트를 변경했습니다. 아이콘 색 옵션에 'white'를 추가하고 관련 쿼리·API 모듈을 추가·조정했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Board as Boardgame.tsx
participant Hook as useGetHasBoardStamp
participant API as getHasBoardStamp
participant Server as /api/places
User->>Board: 페이지 로드
Board->>Hook: 훅 호출 (마운트)
Hook->>API: getHasBoardStamp 실행
API->>Server: GET /api/places
Server-->>API: StampStatusResponse (places)
API-->>Hook: 응답 반환
Hook-->>Board: data.result.places 제공
Board->>Board: boardData와 매칭 → name/hasStamp 결정
Board->>User: 활성 셀 렌더 (스탬프 오버레이 포함)
User->>Board: 셀 클릭
Board->>User: 라우트 이동 /main/node/{placeId}
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 검토 시 주의할 파일/영역:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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 |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/shared/components/main/components/board/Boardgame.tsx (1)
14-14: 프로덕션 코드에서 console.log 제거를 권장합니다.디버깅용 console.log가 남아있습니다. 개발 중에는 유용하지만, 프로덕션 배포 전에는 제거하거나 적절한 로깅 라이브러리로 교체하는 것이 좋습니다.
- console.log('보드게임 스탬프 현황:', places);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/shared/components/main/components/board/Boardgame.tsx(2 hunks)src/shared/constants/main/boardData.ts(1 hunks)src/shared/icons/components/icon.tsx(2 hunks)src/shared/main/api/getHasBoardStamp.ts(1 hunks)src/shared/main/queries/useGetHasBoardStamp.ts(1 hunks)src/shared/main/queries/useGetStampStatus.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
src/shared/main/queries/useGetHasBoardStamp.ts (1)
src/shared/main/api/getHasBoardStamp.ts (1)
getHasBoardStamp(22-25)
src/shared/components/main/components/board/Boardgame.tsx (3)
src/shared/main/queries/useGetHasBoardStamp.ts (1)
useGetHasBoardStamp(4-9)src/shared/lib/utils.ts (1)
cn(71-73)src/shared/icons/components/icon.tsx (1)
Icon(58-130)
src/shared/main/api/getHasBoardStamp.ts (1)
src/shared/api/instance.ts (1)
apiAuth(20-23)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (4)
src/shared/main/queries/useGetStampStatus.ts (1)
2-2: LGTM!API 파일을
api/폴더로 구조화하는 좋은 리팩토링입니다.src/shared/icons/components/icon.tsx (1)
39-39: LGTM!PR 설명에서 언급한 대로 스탬프 오버레이에 필요한 흰색 아이콘 색상이 추가되었습니다.
src/shared/constants/main/boardData.ts (1)
5-38: LGTM!
label에서placeId와name으로의 변경이 API 응답 구조(Place인터페이스)와 일치하며, 10개의 장소 모두 일관되게 업데이트되었습니다.src/shared/components/main/components/board/Boardgame.tsx (1)
39-70: API 데이터 기반 렌더링이 잘 구현되었습니다.각 셀에 대해:
- API 데이터와 매칭 (line 42)
- 이름 폴백 처리 (line 43)
- 스탬프 상태 표시 (lines 44, 62-69)
- 동적 내비게이션 (lines 52-57)
이 모든 로직이 올바르게 작동합니다. 다만,
useGetHasBoardStamp훅의 queryKey 충돌 문제가 해결되어야 정상적으로 작동할 것입니다.
| * 스탬프 수집 현황 조회 API (비로그인 접근 가능) | ||
| */ | ||
| export const getHasBoardStamp = async (): Promise<StampStatusResponse> => { | ||
| const { data } = await apiAuth.get<StampStatusResponse>('/api/places'); |
There was a problem hiding this comment.
🧩 Analysis chain
인증 요구사항과 주석의 불일치를 확인하세요.
주석에는 "비로그인 접근 가능"이라고 명시되어 있지만, apiAuth는 withCredentials: true로 설정되어 있어 인증 쿠키를 포함합니다. 실제로 비로그인 접근이 가능한 API라면 인증이 필요 없는 별도의 axios 인스턴스를 사용하거나, 주석을 수정하여 실제 동작과 일치시켜야 합니다.
다음 스크립트로 프로젝트의 다른 axios 인스턴스를 확인하세요:
🏁 Script executed:
#!/bin/bash
# Description: API 인스턴스 설정 확인
# API 인스턴스 정의 찾기
rg -n "axios\.create" --type=ts -A 3Length of output: 423
더 자세한 확인을 위해 프로젝트의 모든 axios 인스턴스를 검색하겠습니다.
---
🏁 Script executed:
```shell
#!/bin/bash
# Description: 모든 axios 인스턴스 확인 (전체 프로젝트)
# 모든 axios.create 호출 찾기
rg -n "export const \w+ = axios\.create" --type=ts -A 3
Length of output: 423
프로젝트의 axios 인스턴스 전체 파일을 확인하겠습니다.
---
🏁 Script executed:
```shell
#!/bin/bash
# Description: instance.ts 파일 전체 내용 확인
cat src/shared/api/instance.ts
Length of output: 2761
apiAuth는 withCredentials: true이므로 "비로그인 접근 가능" 주석이 부정확합니다.
확인 결과:
apiAuth는 "토큰이 필요 없는 요청용"으로 정의되어 있으나withCredentials: true로 설정되어 있습니다- 이는 요청에 쿠키/인증정보를 자동으로 포함한다는 의미입니다
- 함수 주석의 "비로그인 접근 가능"과 실제 동작이 일치하지 않습니다
필요한 수정:
- 실제로 비로그인 접근이 가능한 엔드포인트라면,
withCredentials: false인 별도 인스턴스를 사용하거나 함수 주석을 수정하세요 - 또는 백엔드 문서를 확인하여 이 엔드포인트가 정말 비인증 접근을 지원하는지 검증하세요
🤖 Prompt for AI Agents
In src/shared/main/api/getHasBoardStamp.ts around lines 20 to 23, the comment
states "비로그인 접근 가능" but the call uses apiAuth which has withCredentials: true so
it will send cookies/auth; either switch this call to an unauthenticated axios
instance (or create one) with withCredentials: false if the endpoint truly
allows anonymous access, or leave apiAuth and update the comment to
remove/adjust the "비로그인 접근 가능" claim after verifying backend behavior; update
code to use the correct axios instance or flip the withCredentials flag and/or
amend the comment accordingly and add a brief note referencing the backend doc
or test that confirms the chosen behavior.
2 participants
🔥 작업 내용
🤔 추후 작업 사항
🔗 이슈
PR Point (To Reviewer)
📸 피그마 스크린샷 or 기능 GIF
(작업 내역 스크린샷)
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항