feat(web): performance + design + UX polish (preconnect, unrated cards, insufficient-balance)#18
Merged
Merged
Conversation
The Pretendard font CSS loads from cdn.jsdelivr.net with no preconnect, so the browser pays a fresh DNS+TLS round-trip mid-paint. Add a preconnect alongside the existing Google Fonts ones to start that handshake earlier.
New listings have no reviews, so every Browse-grid card rendered five hollow stars + (0) — false precision that read as broken controls and flattened the grid into identical rows. When reviewCount is 0, show a quiet localized "no reviews yet" label (volt accent) instead; rated cards keep the star rating unchanged. Honest empty state per PRODUCT.md, existing tokens only. Adds ListingCard tests for both states; common.listing.unrated in ko/en.
A logged-in user who can't afford a paid listing previously got no signal until after clicking Buy, then an English-only server error with no recovery path. Now the client compares wallet balance to price: it pre-empts the doomed request with a localized toast and shows an inline "short by $X / Top up" hint (linking to the wallet) under the buy button. Uses data already in scope; no new deps. Adds ListingDetailPage tests (hint shows when short, hidden when affordable); detail.purchase.* in ko/en.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
변경 사항 요약상품 카드에서 미평가 상태를 i18n 번역으로 표시하고, 구매 전 지갑 잔액을 검증해 부족 시 토스트 알림과 충전 링크를 제공하는 기능을 추가했습니다. 변경 사항잔액 검증 및 미평가 상품 UI
🎯 3 (Moderate) | ⏱️ ~25 분 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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.
🧹 Nitpick comments (1)
apps/web/src/pages/ListingDetail/ListingDetailPage.test.tsx (1)
148-151: 💤 Low value부족 금액 표기까지 단언하면 회귀 방지에 도움이 됩니다.
현재는 링크 존재/
href만 확인합니다. PR이 제공하는 "short by $X" 힌트 금액(여기서는 $3.99)도 함께 단언하면 금액 계산 회귀를 잡을 수 있습니다.♻️ 부족 금액 단언 추가 예시
const topUp = screen.getByRole('link', { name: /충전하기|Top up/i }) expect(topUp.getAttribute('href')).toBe('/dashboard') + expect(screen.getByText(/\$3\.99/)).toBeTruthy()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/pages/ListingDetail/ListingDetailPage.test.tsx` around lines 148 - 151, The test currently renders the page with renderPage(), finds the top-up link via screen.getByRole (assigned to topUp) and asserts only its href; add an assertion that the link's visible text contains the expected shortfall amount string (e.g., "short by $3.99" or the localized "충전하기" label plus the amount) to catch regressions in the shortfall calculation; locate the topUp variable (result of screen.getByRole('link', { name: /충전하기|Top up/i })) and add a contains/text match assertion against the expected amount/phrase so the test verifies both the link target and the displayed shortfall.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/web/src/pages/ListingDetail/ListingDetailPage.test.tsx`:
- Around line 148-151: The test currently renders the page with renderPage(),
finds the top-up link via screen.getByRole (assigned to topUp) and asserts only
its href; add an assertion that the link's visible text contains the expected
shortfall amount string (e.g., "short by $3.99" or the localized "충전하기" label
plus the amount) to catch regressions in the shortfall calculation; locate the
topUp variable (result of screen.getByRole('link', { name: /충전하기|Top up/i }))
and add a contains/text match assertion against the expected amount/phrase so
the test verifies both the link target and the displayed shortfall.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e542e8c8-32f0-43e0-9672-1afd274a8a55
📒 Files selected for processing (9)
apps/web/index.htmlapps/web/src/components/ListingCard.test.tsxapps/web/src/components/ListingCard.tsxapps/web/src/i18n/locales/en/common.jsonapps/web/src/i18n/locales/en/detail.jsonapps/web/src/i18n/locales/ko/common.jsonapps/web/src/i18n/locales/ko/detail.jsonapps/web/src/pages/ListingDetail/ListingDetailPage.test.tsxapps/web/src/pages/ListingDetail/ListingDetailPage.tsx
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
1 participant
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.
Tackles all three follow-up directions in one pass — each is a bounded, low-risk, tested improvement grounded in a parallel audit.
1. Performance
index.html: add apreconnecttocdn.jsdelivr.net(the Pretendard font CDN had none), starting the DNS+TLS handshake earlier on first paint.2. Design polish
ListingCard: new listings rendered five hollow stars +(0)— false precision that read as broken controls and flattened the Browse grid into identical rows. WhenreviewCountis 0, show a quiet localized "no reviews yet" label (volt accent) instead; rated cards keep the star rating. Honest empty state, existing tokens only.3. UX
Verification
common.listing.unrated,detail.purchase.*) added in ko+en; the locale-parity test enforces both.Summary by CodeRabbit
릴리스 노트
New Features
Tests
Refactor
Chores