Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough노드 페이지를 새로 추가하고 여러 페이지에서 next/router의 기본 import를 useRouter 훅으로 전환했습니다. 위치 획득 유틸(getLocation)을 추가하고, 일부 공유 컴포넌트의 너비 스타일과 아이콘 목록에 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant BG as Boardgame 컴포넌트
participant Router as Next useRouter
participant Node as Node 페이지
participant Geo as navigator.geolocation
participant CB as 콜백
U->>BG: 보드 셀 클릭
BG->>Router: router.push("/main/Node?label=...")
Router->>Node: 페이지 로드 (쿼리 포함)
U->>Node: 플로팅 버튼 클릭
Node->>Geo: getLocation(onSuccess, onError)
Geo->>CB: 위치 정보 반환 / 에러
CB->>Node: 위치 상태 업데이트 / 에러 처리
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/shared/components/button/AddressCopy.tsx (1)
37-48: 클릭 가능한 div의 접근성 보강 + copied 상태 활용
- 키보드 접근 불가(div+onClick). role/tabIndex/onKeyDown 필요.
- copied 상태가 UI에 반영되지 않음.
아래처럼 최소 수정 제안:
const AddressCopy = ({ @@ }: AddressCopyProps) => { const [copied, setCopied] = useState(false); + const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleCopy(); + } + }; + const handleCopy = () => { @@ return ( - <div + <div onClick={handleCopy} + role="button" + tabIndex={0} + onKeyDown={handleKeyDown} + aria-pressed={copied} + aria-label={copied ? `${label} 복사됨` : `${label} 복사`} className={cn( addressCopyStyle({ variant }), 'w-full h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]', 'cursor-pointer select-none', className, )}Also applies to: 51-58
src/pages/main/index.tsx (1)
34-46: 섹션 onClick 네비게이션은 접근성에 취약 — Link 사용 권장키보드/스크린리더 접근을 위해 Link로 교체해 주세요. 프리페치 이점도 있습니다.
-import { useRouter } from 'next/router'; +import { useRouter } from 'next/router'; +import Link from 'next/link'; @@ - <section - onClick={() => { - router.push('/main/Board'); - }} - > - <Image - src='/assets/board.svg' - alt='보드판' - width={354} - height={426.36} - className='w-full h-auto object-cover block' - /> - </section> + <Link href="/main/Board" className="block"> + <Image + src="/assets/board.svg" + alt="보드판" + width={354} + height={426.36} + className="w-full h-auto object-cover block" + /> + </Link>
♻️ Duplicate comments (1)
src/shared/icons/index.ts (1)
1-22: 자동 생성 파일의 수정 프로세스를 확인하세요.이 파일도 iconNames.ts와 마찬가지로 자동 생성 파일입니다. PressStamp.svg 추가를 포함한 모든 변경사항이 적절한 생성 도구를 통해 이루어졌는지 확인이 필요합니다. 수동 편집 시 향후 유지보수에 문제가 발생할 수 있습니다.
참고: iconNames.ts에서 요청한 검증 스크립트를 통해 함께 확인할 수 있습니다.
🧹 Nitpick comments (4)
src/shared/components/container/Card.tsx (1)
14-16: w-full로의 전환은 합리적이지만 컨테이너 제약 확인 필요
- flex-shrink-0 + w-full 조합은 가로 플렉스 컨텍스트에서 다수의 카드가 나란히 있을 때 수평 스크롤을 유발할 수 있습니다. 사용 컨테이너에서 max-w 또는 column 레이아웃 보장 여부를 확인해 주세요.
- 필요 시 size 변형에 max-w 옵션을 추가하는 것도 고려해 보세요(예: max-w-[35.4rem]).
src/shared/utils/handleGetLocation.ts (1)
6-15: SSR/보안 컨텍스트 가드 추가 제안
- SSR에서 navigator 접근 방지.
- HTTPS가 아니면 Geolocation 동작하지 않음(로컬 제외). isSecureContext 체크 권장.
export const getLocation = ( onSuccess: (pos: GeolocationPosition) => void, onError?: (err: GeolocationPositionError) => void, ) => { - if (!navigator.geolocation) { + if (typeof window === 'undefined') { + return; + } + if (!('geolocation' in navigator)) { console.error('❌ 현재 브라우저에서 위치 정보 사용이 불가능합니다.'); return; } + if (!isSecureContext) { + console.error('❌ 보안 컨텍스트(HTTPS)가 아니어서 위치 정보를 가져올 수 없습니다.'); + return; + } navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }); };src/pages/main/Node.tsx (2)
16-16: 모바일 100vh 이슈 — dvh/svh 사용 권장모바일 브라우저 주소창 영역 변화로 100vh가 화면을 넘칠 수 있습니다. dvh/svh 또는 임의 값으로 대체 권장.
- <div className='relative w-full h-[100vh] overflow-auto px-[2.4rem]'> + <div className='relative w-full min-h-[100dvh] overflow-auto px-[2.4rem]'>
36-44: 지오로케이션 UX: 실패/권한 거부 처리현재 콘솔 로깅만 존재합니다. TODO에 맞춰 모달/토스트 + 재시도/권한 안내(설정 이동)가 필요합니다. 성공 시 보상 페이지로 라우팅 로직도 함께 포함을 권장합니다. 원하시면 기본 모달/토스트 유틸 코드 드리겠습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/shared/icons/source/PressStamp.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
src/pages/main/Board.tsx(1 hunks)src/pages/main/Node.tsx(1 hunks)src/pages/main/components/board/Boardgame.tsx(2 hunks)src/pages/main/index.tsx(1 hunks)src/shared/components/button/AddressCopy.tsx(1 hunks)src/shared/components/container/Card.tsx(1 hunks)src/shared/icons/iconNames.ts(1 hunks)src/shared/icons/index.ts(1 hunks)src/shared/utils/handleGetLocation.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/main/Node.tsx (2)
src/shared/lib/utils.ts (1)
cn(71-73)src/shared/utils/handleGetLocation.ts (1)
getLocation(2-16)
⏰ 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 (5)
src/shared/icons/iconNames.ts (1)
1-22: 자동 생성 검증 완료 - 정상 상태입니다.생성 스크립트(
generate-icon-list.ts)를 검토한 결과, 다음이 확인되었습니다:
- 스크립트는
src/shared/icons/source/디렉토리에서 모든.svg파일을 자동으로 검색합니다- 아이콘 이름을 추출한 후 자동으로 알파벳순으로 정렬합니다 (
.sort())- PressStamp.svg가 존재하므로 스크립트 실행 시 자동으로 포함됩니다
- 제공된 코드에서 PressStamp는 MapPin_과 Save 사이에 올바르게 배치되어 있습니다
파일은
pnpm icons:gen명령으로 정상적으로 생성되었습니다.src/shared/components/button/AddressCopy.tsx (1)
55-58: w-full 전환은 OK레이아웃 일관성 측면에서 적절합니다.
src/pages/main/Board.tsx (1)
3-7: useRouter 전환 LGTMPages Router(파일 경로: src/pages/...)에서 next/router 사용은 적합합니다. App Router 사용 파일과 혼용되지 않는지만 확인해 주세요.
src/pages/main/components/board/Boardgame.tsx (1)
36-45: 경로 케이스 일관성 지적은 부정확 - 현재 일치하고 있음검증 결과:
- 파일명
Node.tsx와 라우트/main/Node이미 일치- 프로젝트 전체 라우팅 컨벤션: 파스칼케이스 (
/main/Board,/main/Node등)- 소문자로 변경 제안은 실제 프로젝트 컨벤션과 맞지 않음
A11y 개선는 선택사항 (Good Practice)
프로젝트 기존 패턴(CustomDropdown.tsx 등)에서
role,tabIndex,onKeyDown,aria-label구현이 있으므로, div+onClick의 키보드 접근성 개선는 유용하나 필수는 아님.Likely an incorrect or invalid review comment.
src/pages/main/Node.tsx (1)
29-33: 리뷰 댓글이 부정확합니다. 조치가 필요하지 않습니다.Tailwind CSS v4.1.14에서
blur-xs는 표준 유틸리티 클래스이며,filter: blur(4px)로 매핑됩니다. 현재 코드의 사용이 올바르므로 별도의 변경이나 대체가 필요하지 않습니다.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/shared/utils/handleGetLocation.ts(1 hunks)
🔇 Additional comments (2)
src/shared/utils/handleGetLocation.ts (2)
1-4: 함수 시그니처가 명확하고 타입이 적절합니다.콜백 기반 설계가 깔끔하고, TypeScript 타입이 올바르게 지정되어 있습니다.
10-14: 타임아웃 설정이 사용 사례에 적합한지 확인하세요.5초 타임아웃은 GPS cold start 또는 약한 신호 환경에서 부족할 수 있습니다. 특히 실내나 건물 밀집 지역에서 위치를 처음 가져올 때 더 오래 걸릴 수 있습니다. 노드 페이지의 사용자 경험을 고려하여 타임아웃이 충분한지 테스트해 보시기 바랍니다.
| if (!navigator.geolocation) { | ||
| console.error('❌ 현재 브라우저에서 위치 정보 사용이 불가능합니다.'); | ||
| return; | ||
| } |
There was a problem hiding this comment.
위치 정보 미지원 시 onError 콜백을 호출해야 합니다.
현재는 콘솔 로그만 남기고 조용히 반환하므로, 호출자가 이 에러를 프로그래밍 방식으로 처리할 수 없습니다. onError 콜백이 제공된 경우 이를 호출하여 일관된 에러 처리를 보장하세요.
다음 diff를 적용하여 수정하세요:
export const getLocation = (
onSuccess: (pos: GeolocationPosition) => void,
onError?: (err: GeolocationPositionError) => void,
) => {
if (!navigator.geolocation) {
console.error('❌ 현재 브라우저에서 위치 정보 사용이 불가능합니다.');
+ if (onError) {
+ // GeolocationPositionError 인터페이스에 맞춰 에러 객체 전달
+ onError({
+ code: 0,
+ message: '현재 브라우저에서 위치 정보 사용이 불가능합니다.',
+ PERMISSION_DENIED: 1,
+ POSITION_UNAVAILABLE: 2,
+ TIMEOUT: 3,
+ } as GeolocationPositionError);
+ }
return;
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/shared/utils/handleGetLocation.ts around lines 5 to 8, when
navigator.geolocation is not available the function currently only logs to
console and returns; update it to, if an onError callback is provided, invoke
onError with an Error (or a descriptive error object/message) describing that
location is unsupported, then return — ensure you still keep the console.error
for backwards visibility but call onError so callers can handle the failure
programmatically.
KongMezu
left a comment
KongMezu
left a comment
There was a problem hiding this comment.
버튼 width 수정 감사합니다 :) 많이 도움 받네요 큰 리뷰가 없어서(잘하셔서요)
금방 주소복사 수정해서 가져오도록 하겠습니다. approve 하겠습니다!
| className={cn( | ||
| addressCopyStyle({ variant }), | ||
| 'w-[35.4rem] h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]', | ||
| 'w-full h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]', |
There was a problem hiding this comment.
full 처리 감사합니다 :) 빠르게 address 버튼 수정해두겠습니다.
2 participants
🔥 작업 내용
🤔 추후 작업 사항
🔗 이슈
PR Point (To Reviewer)
📸 피그마 스크린샷 or 기능 GIF
(작업 내역 스크린샷)
2025-10-26.5.22.41.mov
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
리팩토링