Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughOwner 앱의 탭 기반 네비게이션 레이아웃과 메인 페이지를 구현합니다. TabsLayout 컴포넌트는 하단 탭 바를 통해 라우팅을 처리하고, 메인 페이지는 카페 소개, 오늘의 주문, 오늘의 적립 정보를 표시하는 여러 컴포넌트로 구성됩니다. 디자인 시스템 CSS도 레이아웃 제약조건을 업데이트합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant BottomTabBar as BottomTabBar
participant TabsLayout as TabsLayout
participant Router as Next.js Router
participant Page as Main Page
User->>BottomTabBar: 탭 선택 (예: order)
activate BottomTabBar
BottomTabBar->>TabsLayout: 탭 변경 핸들러 호출
deactivate BottomTabBar
activate TabsLayout
alt 선택된 탭
rect rgba(100, 150, 255, 0.5)
note over TabsLayout: home 선택
TabsLayout->>Router: push('/main')
end
rect rgba(100, 150, 255, 0.5)
note over TabsLayout: order 선택
TabsLayout->>Router: push('/order')
end
rect rgba(100, 150, 255, 0.5)
note over TabsLayout: my 선택
TabsLayout->>Router: push('/mypage')
end
end
deactivate TabsLayout
activate Router
Router->>Page: 라우트 변경 (pathname 업데이트)
deactivate Router
activate Page
Page->>TabsLayout: children 리렌더링
TabsLayout->>BottomTabBar: activeKey 업데이트
deactivate Page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 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. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
There was a problem hiding this comment.
🧹 Nitpick comments (4)
apps/owner/src/app/(tabs)/main/_components/TodayOrders.tsx (2)
20-20: 금액 포맷팅에 천 단위 구분자 추가를 권장합니다.현재
formatPrice는 단순 문자열 연결을 사용하고 있어 10000원이 "10000원"으로 표시됩니다. 가독성 향상을 위해toLocaleString()을 사용하여 "10,000원"으로 표시하는 것을 권장합니다.♻️ 권장 수정안
-const formatPrice = (price: number) => `${price}원`; +const formatPrice = (price: number) => `${price.toLocaleString()}원`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/main/_components/TodayOrders.tsx at line 20, The formatPrice function currently concatenates the numeric price directly and should format numbers with thousand separators; update the formatPrice function to call price.toLocaleString() (or equivalent locale-aware formatting) and append "원" so values like 10000 render as "10,000원" (refer to the formatPrice constant in TodayOrders.tsx).
15-18: JS와 CSS에서 이중 truncate 로직이 있습니다.
formatRandomBoxName에서 11자 초과 시 JS로 말줄임 처리를 하고, Line 39의truncateCSS 클래스도 말줄임을 적용합니다. 두 로직이 동시에 작동할 가능성은 낮지만, 하나로 통일하면 더 명확해집니다.Also applies to: 39-41
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/main/_components/TodayOrders.tsx around lines 15 - 18, The component currently applies truncation in both JS (formatRandomBoxName) and CSS (the "truncate" class); remove the duplicate by eliminating the slicing logic inside formatRandomBoxName and return the full name (or remove calls to formatRandomBoxName and pass the original name through), and rely on the existing "truncate" CSS class on the rendered element to handle ellipsis; update any usages of formatRandomBoxName in TodayOrders.tsx so they use the unmodified name and keep the "truncate" class on the text element.apps/owner/src/app/(tabs)/layout.tsx (1)
29-43:handleTabChange의 early return 패턴을 통일하면 좋습니다.
home과order케이스는return으로 조기 종료하지만,my케이스는return이 없습니다. 동작에는 문제가 없지만, 일관성을 위해 통일하거나 switch 문으로 리팩토링하는 것을 고려해 보세요.♻️ 권장 수정안 (switch 문 사용)
const handleTabChange = (key: string) => { - if (key === "home") { - router.push("/main"); - return; - } - - if (key === "order") { - router.push("/order"); - return; - } - - if (key === "my") { - router.push("/mypage"); - } + switch (key) { + case "home": + router.push("/main"); + break; + case "order": + router.push("/order"); + break; + case "my": + router.push("/mypage"); + break; + } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/layout.tsx around lines 29 - 43, handleTabChange uses inconsistent early returns: "home" and "order" cases return after router.push but "my" does not; update handleTabChange to be consistent by either adding a return after router.push("/mypage") or refactor the whole function to a switch statement handling "home", "order", and "my" and returning after each router.push call (use the existing handleTabChange and router.push calls as identifiers when making the change).apps/owner/src/app/(tabs)/main/_components/TodayRewards.tsx (1)
40-41: 파일 끝에 개행 문자가 없습니다.POSIX 표준 및 대부분의 린터 규칙에 따라 파일 끝에 개행 문자를 추가하는 것이 좋습니다.
♻️ 권장 수정안
); } +🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/main/_components/TodayRewards.tsx around lines 40 - 41, Add a trailing newline at the end of the file (after the closing brace of the TodayRewards component) so the file ends with a newline character to satisfy POSIX and linter expectations; locate the TodayRewards function/closing "}" in TodayRewards.tsx and ensure there is a final newline character after the last line.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/owner/src/app/`(tabs)/layout.tsx:
- Around line 29-43: handleTabChange uses inconsistent early returns: "home" and
"order" cases return after router.push but "my" does not; update handleTabChange
to be consistent by either adding a return after router.push("/mypage") or
refactor the whole function to a switch statement handling "home", "order", and
"my" and returning after each router.push call (use the existing handleTabChange
and router.push calls as identifiers when making the change).
In `@apps/owner/src/app/`(tabs)/main/_components/TodayOrders.tsx:
- Line 20: The formatPrice function currently concatenates the numeric price
directly and should format numbers with thousand separators; update the
formatPrice function to call price.toLocaleString() (or equivalent locale-aware
formatting) and append "원" so values like 10000 render as "10,000원" (refer to
the formatPrice constant in TodayOrders.tsx).
- Around line 15-18: The component currently applies truncation in both JS
(formatRandomBoxName) and CSS (the "truncate" class); remove the duplicate by
eliminating the slicing logic inside formatRandomBoxName and return the full
name (or remove calls to formatRandomBoxName and pass the original name
through), and rely on the existing "truncate" CSS class on the rendered element
to handle ellipsis; update any usages of formatRandomBoxName in TodayOrders.tsx
so they use the unmodified name and keep the "truncate" class on the text
element.
In `@apps/owner/src/app/`(tabs)/main/_components/TodayRewards.tsx:
- Around line 40-41: Add a trailing newline at the end of the file (after the
closing brace of the TodayRewards component) so the file ends with a newline
character to satisfy POSIX and linter expectations; locate the TodayRewards
function/closing "}" in TodayRewards.tsx and ensure there is a final newline
character after the last line.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e47c0032-1641-4079-8f2b-d1df9b2c8afd
⛔ Files ignored due to path filters (3)
packages/design-system/src/icons/generated/iconNames.tsis excluded by!**/generated/**packages/design-system/src/icons/generated/spriteSymbols.tsis excluded by!**/generated/**packages/design-system/src/icons/source/Stamp.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
apps/owner/src/app/(tabs)/layout.tsxapps/owner/src/app/(tabs)/main/_components/CafeIntro.tsxapps/owner/src/app/(tabs)/main/_components/TodayOrders.tsxapps/owner/src/app/(tabs)/main/_components/TodayRewards.tsxapps/owner/src/app/(tabs)/main/_constants/mock.tsapps/owner/src/app/(tabs)/main/_types/main.types.tsapps/owner/src/app/(tabs)/main/page.tsxpackages/design-system/src/style.css
✅ 작업 내용
📝 Description
🚀 설계 의도 및 개선점
page.tsx에서 데이터만 주입하면 되도록 구조를 단순화했습니다.📸 스크린샷 (선택)
📎 기타 참고사항
Fixes #54
Summary by CodeRabbit
새로운 기능 및 업데이트
새로운 기능
스타일