Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@KwonDeaGeun has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 48 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 (1)
WalkthroughApp에 우측 고정 설정 버튼이 추가되어 showSettings로 SettingsPanel을 토글 렌더링하고, useId 기반 langId와 language 상태가 도입되었다. SettingsPanel은 언어 선택, 문의/가이드 링크, Escape 및 닫기 버튼으로 닫기를 지원한다. use-toast에는 단순 개행 추가만 있음. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 사용자
participant App as App
participant Panel as SettingsPanel
note right of App #DDEBF7: SettingsPanel은 React.lazy로 로드되고\n조건부로 Suspense 내에 렌더링됩니다
User->>App: 우측 설정 버튼 클릭
App->>App: toggleSettings() -> showSettings = true
App->>Panel: 렌더(language, setLanguage, onClose)
alt 언어 변경
User->>Panel: 언어 선택
Panel-->>App: setLanguage(lang)
App-->>App: language 상태 및 로컬스토리지 업데이트
end
User->>Panel: 닫기 클릭 또는 Escape
Panel-->>App: onClose()
App->>App: showSettings = false
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 (5)
src/components/SettingsPanel.tsx (2)
43-53: 초기 포커스 지정으로 키보드 사용성 개선패널 오픈 시 닫기 버튼에 초점이 가도록 autoFocus를 권장합니다.
<button type="button" onClick={onClose} aria-label="닫기" + autoFocus style={{ background: "transparent", border: "none", cursor: "pointer", }} >
3-8: 언어 타입을 리터럴 유니온으로 한정string 전체보다 "ko" | "en"으로 좁히면 오입력 방지 및 타입 안전성이 올라갑니다.
interface SettingsPanelProps { langId: string; - language: string; - setLanguage: (lang: string) => void; + language: "ko" | "en"; + setLanguage: (lang: "ko" | "en") => void; onClose: () => void; }src/App.tsx (3)
13-13: 언어 상태를 리터럴 유니온으로 제한상태를 "ko" | "en"으로 한정하면 SettingsPanel과 타입 일관성이 생깁니다.
- const [language, setLanguage] = useState("ko"); + const [language, setLanguage] = useState<"ko" | "en">("ko");
414-436: 설정 버튼 ARIA 보강토글 상태 전달과 다이얼로그 호출 표기를 추가하세요.
<button type="button" aria-label="설정" onClick={toggleSettings} + aria-pressed={showSettings} + aria-haspopup="dialog" style={{ position: "fixed", top: 12, right: 12, zIndex: 10000,
437-444: 오버레이 추가로 외부 클릭 닫기 + 배경 상호작용 차단패널 뒤에 반투명 오버레이를 렌더링해 외부 클릭으로 닫고 배경 상호작용을 막는 것을 권장합니다. 패널 z-index는 10001로 상향(위 코멘트 반영).
- {showSettings ? ( - <SettingsPanel - langId={langId} - language={language} - setLanguage={setLanguage} - onClose={toggleSettings} - /> - ) : null} + {showSettings ? ( + <> + <div + onClick={toggleSettings} + aria-hidden="true" + style={{ + position: "fixed", + inset: 0, + background: "rgba(0,0,0,0.3)", + zIndex: 10000, + }} + /> + <SettingsPanel + langId={langId} + language={language} + setLanguage={setLanguage} + onClose={toggleSettings} + /> + </> + ) : null}추가 권장(선택):
- showSettings 변경 시 document.body.style.overflow = "hidden" 토글로 배경 스크롤 잠금.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/App.tsx(2 hunks)src/components/SettingsPanel.tsx(1 hunks)src/components/ui/use-toast.tsx(1 hunks)
🔇 Additional comments (3)
src/components/ui/use-toast.tsx (1)
91-91: 개행 추가만: 기능 영향 없음파일 끝 개행 추가 변경만 있습니다. 머지해도 무방합니다.
src/components/SettingsPanel.tsx (1)
98-105: 외부 링크 자리표시자 교체 필요현재 구글폼/노션 링크가 플레이스홀더입니다. 릴리스 전 실제 URL로 교체해 주세요.
Also applies to: 118-126
src/App.tsx (1)
1-2: lucide-react 의존성 확인빌드 실패 방지를 위해 lucide-react가 package.json에 추가되어 있는지 확인해 주세요.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/App.tsx (4)
2-2: SettingsPanel 지연 로딩으로 초기 번들 축소 제안설정 패널은 비가시 영역 기능이므로 lazy import로 초기 JS 페이로드를 줄이는 것을 권장합니다. Suspense로 감싸면 동작 동일합니다.
-import { useCallback, useEffect, useId, useState } from "react"; +import { lazy, Suspense, useCallback, useEffect, useId, useState } from "react"; @@ -import SettingsPanel from "./components/SettingsPanel"; +const SettingsPanel = lazy(() => import("./components/SettingsPanel")); @@ - {showSettings ? ( - <SettingsPanel - langId={langId} - language={language} - setLanguage={setLanguage} - onClose={toggleSettings} - /> - ) : null} + {showSettings ? ( + <Suspense fallback={null}> + <SettingsPanel + langId={langId} + language={language} + setLanguage={setLanguage} + onClose={toggleSettings} + /> + </Suspense> + ) : null}Also applies to: 5-5, 437-444
12-16: 언어 설정 영속화(localStorage) 권장앱 재방문 시 선택 언어가 유지되도록 클라이언트 저장을 권장합니다. SSR 고려가 없다면 아래처럼 간단히 적용 가능합니다.
// 초기화 시 로컬 저장값 우선 const [language, setLanguage] = useState( () => localStorage.getItem("wtb:lang") ?? "ko" ); // 변경 시 반영 useEffect(() => { try { localStorage.setItem("wtb:lang", language); } catch {} }, [language]);
414-436: 접근성: 토글 버튼 상태 노출 및 아이콘 크기 통일Disclosure 역할에 맞춰 aria-expanded/haspopup을 추가하고, 아이콘 크기를 통일하면 시각적 점프를 줄일 수 있습니다.
- <button + <button type="button" aria-label="설정" + aria-haspopup="dialog" + aria-expanded={showSettings} onClick={toggleSettings} style={{ @@ - {showSettings ? <X size={18} /> : <Settings size={24} />} + {showSettings ? <X size={20} /> : <Settings size={20} />}
437-444: onClose는 토글보다 명시적 종료로 안전패널 내부에서 onClose가 중복 호출되면 토글 방식은 재오픈될 수 있습니다. idempotent하게 닫히도록 명시 종료를 권장합니다.
- onClose={toggleSettings} + onClose={() => setShowSettings(false)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/App.tsx(2 hunks)
🔇 Additional comments (1)
src/App.tsx (1)
1-2: 임포트 변경 LGTM아이콘/훅 임포트 적절하며 불필요 임포트 없음.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/App.tsx (5)
14-18: 초기 언어 상태(localStorage) 접근에 SSR/WebView 안전장치가 없습니다.서버 렌더링(또는 일부 WebView) 환경에서
localStorage접근 시 ReferenceError가 날 수 있습니다. 초기화 시 try/catch와typeof window가드를 권장합니다.다음 변경을 제안합니다:
- const [language, setLanguage] = useState( - () => localStorage.getItem("wtb:lang") ?? "ko" - ); + const [language, setLanguage] = useState(() => { + try { + return typeof window !== "undefined" && window.localStorage + ? localStorage.getItem("wtb:lang") ?? "ko" + : "ko"; + } catch { + return "ko"; + } + });
23-30: 로컬스토리지 중복 쓰기 방지로 자잘한 비용을 줄일 수 있습니다.값이 변하지 않았을 때는
setItem을 스킵하세요.useEffect(() => { try { - localStorage.setItem("wtb:lang", language); + if (localStorage.getItem("wtb:lang") !== language) { + localStorage.setItem("wtb:lang", language); + } } catch { /* ignore */ } }, [language]);
428-452: 설정 버튼 a11y 보완(aria 사용) 및 프리페치로 UX 향상 권장.
- 대화상자 트리거에는
aria-expanded대신aria-pressed(토글 버튼) 또는aria-controls와 함께 쓰는 패턴이 더 일관됩니다. 현재는role="dialog"컨트롤을 시사하므로aria-controls추가를 권장합니다.- 호버 시 지연 로드 프리페치를 붙이면 첫 열림 지연을 줄일 수 있습니다.
아래처럼 제안합니다(설정 패널 루트에
id="settings-panel"이 존재해야 합니다. 없으면 SettingsPanel에 추가 필요):<button type="button" aria-label="설정" - aria-haspopup="dialog" - aria-expanded={showSettings} + aria-haspopup="dialog" + aria-pressed={showSettings} + aria-controls="settings-panel" onClick={toggleSettings} + onMouseEnter={() => import("./components/SettingsPanel")} style={{검증: SettingsPanel 루트 엘리먼트에
id="settings-panel"이 있는지 확인 부탁드립니다. 없다면 추가해 주세요.
453-462: Suspense fallback을 스크린리더 친화적으로.지금은
null이라 초기에 공백입니다. 시각적 잡음 없이도aria-live로 로딩을 알릴 수 있습니다.- <Suspense fallback={null}> + <Suspense + fallback={ + <span className="sr-only" role="status" aria-live="polite"> + 설정 패널 로딩 중… + </span> + } + >
483-483: 말풍선 토글에 참조 동일성 비교는 취약합니다.
prev === stop는 동일 객체 참조일 때만 참입니다. 동일 정류장을 새 객체로 전달하면 토글이 깨질 수 있습니다. 구조 동등성(또는 id) 비교로 바꿔주세요.- setBubbleStop((prev) => (prev === stop ? undefined : stop)); + setBubbleStop((prev) => { + if (!prev || !stop) return stop; + const same = + prev.lat === stop.lat && + prev.lng === stop.lng && + prev.name === stop.name; + return same ? undefined : stop; + });대안:
stop.id가 있다면 id 기반 비교가 가장 안전합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/App.tsx(3 hunks)src/components/SettingsPanel.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/SettingsPanel.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/App.tsx (1)
src/components/ui/use-toast.tsx (1)
useToast(83-89)
🔇 Additional comments (2)
src/App.tsx (2)
1-2: 아이콘/React API 임포트 적절합니다.트리셰이킹되는 임포트이며 불필요한 전역 임포트가 없습니다.
20-21: 설정 열림 토글 핸들러 깔끔합니다.불필요한 재생성을 피하는
useCallback사용이 적절합니다.
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Chores