Feat/25: 메인 화면 스캔 이력 카드 탐색 및 결과 이동 구현#26
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 9 minutes and 33 seconds. ⌛ 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. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Walkthrough최근 스캔 항목 탐색 UI/로직과 스타일이 추가되었습니다. 스캔 히스토리를 훅으로 로드·관리하며 이전/다음 순환 네비게이션을 제공하고, 항목 클릭 시 상태별( Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant QRScanPage as QRScanPage
participant Hook as useQRScanPage
participant Router as Router
participant Result as ResultPage
User->>QRScanPage: 페이지 진입
QRScanPage->>Hook: 훅 초기화/데이터 요청
Hook->>Hook: getInitialScanListPageData (동기 초기값)
Hook->>Hook: fetchScanListPageData (비동기 최신화)
Hook-->>QRScanPage: recentScanItem 및 canNavigateHistory 반환
User->>QRScanPage: 이전/다음 버튼 클릭
QRScanPage->>Hook: handleShowPreviousHistoryItem / handleShowNextHistoryItem
Hook->>Hook: currentHistoryIndex 업데이트
Hook-->>QRScanPage: 업데이트된 recentScanItem
User->>QRScanPage: 최근 항목 클릭
QRScanPage->>Router: navigate('/result/{status}')
Router->>Result: 결과 페이지 로드
Result-->>User: 결과 표시
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![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 (2)
src/pages/ScanList/ScanListPage.tsx (1)
11-18:resultRouteByStatus매핑이QRScanPage.tsx와 중복됩니다.
src/pages/QRScan/QRScanPage.tsx의 82-89 라인에 동일한 매핑이 존재합니다. 공유 유틸리티나 상수 파일로 추출하여 중복을 제거하고 유지보수성을 높이는 것을 권장합니다.♻️ 공유 상수로 추출 제안
src/shared/constants/routes.ts파일을 생성하여 공통 매핑을 관리할 수 있습니다:import type { ScanListStatus } from '@/pages/ScanList/types/scanListPage.types'; export const resultRouteByStatus: Record< ScanListStatus, '/result/safe' | '/result/warning' | '/result/critical' > = { safe: '/result/safe', warning: '/result/warning', critical: '/result/critical', };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/ScanList/ScanListPage.tsx` around lines 11 - 18, Extract the duplicate resultRouteByStatus mapping into a shared constant and import it from both ScanListPage and QRScanPage; create a new constant (e.g., resultRouteByStatus) in a shared module (suggested name: src/shared/constants/routes.ts) typed with ScanListStatus and the union '/result/safe'|' /result/warning'|' /result/critical', then replace the local definitions in ScanListPage (resultRouteByStatus) and in QRScanPage with imports from the new module so both components reference the single shared mapping.src/pages/QRScan/QRScanPage.tsx (1)
91-95:statusLabelByTone매핑도ScanListPage.tsx와 중복됩니다.
ScanListPage.tsx의 20-24 라인에 동일한 매핑이 존재합니다.resultRouteByStatus와 함께 공유 상수로 추출하는 것을 권장합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/QRScan/QRScanPage.tsx` around lines 91 - 95, Duplicate mapping statusLabelByTone (and resultRouteByStatus) appears in QRScanPage.tsx and ScanListPage.tsx; extract these shared constants into a single exported module (e.g., create a new constants file) and replace local definitions by importing the shared constants. Update references to the exported symbol names (statusLabelByTone and resultRouteByStatus) in QRScanPage.tsx and ScanListPage.tsx so both files import the same source of truth, and ensure the new module exports the same types (Record<ScanListStatus, string>) so TypeScript types continue to work.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/QRScan/QRScanPage.tsx`:
- Around line 255-296: The article currently uses role="button" and contains
real <button> controls (the nav buttons), causing nested interactive controls
and an accessibility issue; fix by removing the button role/tabIndex/onKeyDown
from the article and instead create a single dedicated interactive element for
opening the recent scan (e.g., an internal focusable element that calls
handleOpenRecentScanResult and uses the accessible label from
statusLabelByTone[recentScanItem.status]) while leaving the previous/next
controls (handleShowPreviousHistoryItem, historyNavButton classes,
HistoryPrevIcon) as plain buttons outside that interactive element or visually
separate them from the clickable card area so buttons are not nested inside a
role="button" container.
---
Nitpick comments:
In `@src/pages/QRScan/QRScanPage.tsx`:
- Around line 91-95: Duplicate mapping statusLabelByTone (and
resultRouteByStatus) appears in QRScanPage.tsx and ScanListPage.tsx; extract
these shared constants into a single exported module (e.g., create a new
constants file) and replace local definitions by importing the shared constants.
Update references to the exported symbol names (statusLabelByTone and
resultRouteByStatus) in QRScanPage.tsx and ScanListPage.tsx so both files import
the same source of truth, and ensure the new module exports the same types
(Record<ScanListStatus, string>) so TypeScript types continue to work.
In `@src/pages/ScanList/ScanListPage.tsx`:
- Around line 11-18: Extract the duplicate resultRouteByStatus mapping into a
shared constant and import it from both ScanListPage and QRScanPage; create a
new constant (e.g., resultRouteByStatus) in a shared module (suggested name:
src/shared/constants/routes.ts) typed with ScanListStatus and the union
'/result/safe'|' /result/warning'|' /result/critical', then replace the local
definitions in ScanListPage (resultRouteByStatus) and in QRScanPage with imports
from the new module so both components reference the single shared mapping.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: b6fc135e-3426-438f-b089-61cecec268c3
📒 Files selected for processing (5)
src/pages/QRScan/QRScanPage.tsxsrc/pages/QRScan/hooks/useQRScanPage.tssrc/pages/QRScan/styles/qrScanPage.css.tssrc/pages/ScanList/ScanListPage.tsxsrc/pages/ScanList/styles/scanListPage.css.ts
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/QRScan/QRScanPage.tsx`:
- Around line 269-273: The current button uses aria-label which overrides the
visible card text (recentScanItem details) and hides it from assistive tech;
update the button (the element with classNames
styles.historyOpenButton/styles.historyCardInteractive and onClick handler
handleOpenRecentScanResult) by removing the aria-label and either leaving the
visible content as the accessible name or replace aria-label with
aria-labelledby/aria-describedby that references the card text nodes (e.g., IDs
for the scan time/URL/status rendered from recentScanItem and the
statusLabelByTone mapping) so screen readers announce the card content plus a
short auxiliary “결과 페이지로 이동” hint.
In `@src/pages/QRScan/styles/qrScanPage.css.ts`:
- Around line 415-418: The center column and the historyHeadline text can
overflow when long URLs are rendered; update the grid/element styles for the
middle column and the historyHeadline container (the rule that uses
gridTemplateColumns: '40px minmax(0, 1fr) 40px' and the other similar block at
the second occurrence) to allow shrinking and text clipping: ensure the middle
column has min-width: 0 (or use minmax(0, 1fr)) and add overflow: hidden,
text-overflow: ellipsis and white-space: nowrap to the historyHeadline element
so long URLs are truncated instead of overflowing or overlapping the navigation
buttons; apply the same changes to the second occurrence (lines ~499-506) as
well.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: be3875e8-f96d-4106-9515-bbbdc30a5634
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
package.jsonsrc/pages/QRScan/QRScanPage.tsxsrc/pages/QRScan/styles/qrScanPage.css.tssrc/shared/component/safeSiteCard/safeSiteCard.css.ts
✅ Files skipped from review due to trivial changes (2)
- package.json
- src/shared/component/safeSiteCard/safeSiteCard.css.ts
Comment on lines
+269
to
+273
| <button | ||
| aria-label={`${statusLabelByTone[recentScanItem.status]} 결과 페이지로 이동`} | ||
| className={`${styles.historyOpenButton} ${styles.historyCardInteractive}`} | ||
| onClick={handleOpenRecentScanResult} | ||
| type="button" |
There was a problem hiding this comment.
aria-label 때문에 카드 본문 정보가 보조기기에서 사라질 수 있습니다.
Line 270의 aria-label이 버튼 안의 가시 텍스트(스캔 시각, URL, 상태 설명)를 accessible name으로 덮어써서, 스크린리더 사용자는 어떤 기록을 여는지 알기 어렵습니다. 이 버튼은 aria-label을 제거해 본문을 그대로 읽히게 하거나, aria-labelledby/aria-describedby로 “결과 페이지로 이동”만 보조 설명으로 붙이는 편이 안전합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/QRScan/QRScanPage.tsx` around lines 269 - 273, The current button
uses aria-label which overrides the visible card text (recentScanItem details)
and hides it from assistive tech; update the button (the element with classNames
styles.historyOpenButton/styles.historyCardInteractive and onClick handler
handleOpenRecentScanResult) by removing the aria-label and either leaving the
visible content as the accessible name or replace aria-label with
aria-labelledby/aria-describedby that references the card text nodes (e.g., IDs
for the scan time/URL/status rendered from recentScanItem and the
statusLabelByTone mapping) so screen readers announce the card content plus a
short auxiliary “결과 페이지로 이동” hint.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/QRScan/styles/qrScanPage.css.ts`:
- Around line 499-506: The right padding in the historyContent style
(paddingRight: '70px') is smaller than the badge minWidth ('86px'), which can
let text overlap the absolutely positioned badge; update historyContent to use a
right inset at least equal to the badge width (e.g., paddingRight: '86px' or
preferably a shared constant/vars like vars.badgeWidth) and apply the same fix
to the other similar style blocks around lines 509-514 so all insets are >= the
badge minWidth used in QRScanPage badge layout.
- Around line 464-480: The disabled state currently still shows hover colors
because &:hover and &:disabled can both match; update the disabled selector (the
object containing '&:disabled') to explicitly reset visual styles by either
adding backgroundColor and color (e.g., backgroundColor: vars.colors.disabledBg,
color: vars.colors.disabledText) or combine selectors as '&:disabled,
&:disabled:hover' and set opacity/cursor/backgroundColor/color/transform so the
disabled button cannot appear hover-active; modify the selectors around
'&:hover' and '&:disabled' in the same style block to ensure disabled styles
take precedence.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 36e29d66-997a-474a-b4ad-e49d9a3a97f0
📒 Files selected for processing (1)
src/pages/QRScan/styles/qrScanPage.css.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
새로운 기능
UI/UX 개선
Task
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
Chores