Skip to content

[Feat/#54] 사장님 메인 페이지 생성#70

Merged
skyblue1232 merged 2 commits intodevelopfrom
feat/#54/owner-home-page
Mar 27, 2026
Merged

[Feat/#54] 사장님 메인 페이지 생성#70
skyblue1232 merged 2 commits intodevelopfrom
feat/#54/owner-home-page

Conversation

@skyblue1232
Copy link
Copy Markdown
Contributor

@skyblue1232 skyblue1232 commented Mar 27, 2026

✅ 작업 내용

📝 Description

  • 사장님 메인 페이지 UI를 구현했습니다.
  • 상단 인사 영역, 오늘의 주문 목록, 오늘의 적립 카드 영역을 분리하여 구성했습니다.
  • 목데이터 기반으로 주문 리스트와 적립 현황이 화면에 표시되도록 연결했습니다.

작업한 내용을 체크해주세요.

  • 사장님 메인 페이지 레이아웃 구현
  • 상단 인사 영역 UI 구현
  • 오늘의 주문 카드 리스트 구현
  • 오늘의 적립 카드 2종 구현
  • 컴포넌트 / 타입 / 목데이터 분리

🚀 설계 의도 및 개선점

  • 페이지 파일은 조립 역할만 하도록 두고, 상단 인사 영역 / 주문 영역 / 적립 영역을 각각 분리해 관심사를 나눴습니다.
  • 추후 API 연동 시 page.tsx에서 데이터만 주입하면 되도록 구조를 단순화했습니다.
  • 주문 카드에서는 닉네임, 상품명, 금액 영역의 역할을 분리해 길이에 따라 레이아웃이 무너지지 않도록 구성했습니다.

📸 스크린샷 (선택)

  • 사장님 메인 페이지 UI
image

📎 기타 참고사항

  • 현재 주문/적립 데이터는 목데이터 기반입니다.
  • 실제 아이콘 및 API 연동은 후속 작업에서 반영 예정입니다.

Fixes #54

Summary by CodeRabbit

새로운 기능 및 업데이트

  • 새로운 기능

    • 카페 소유자용 홈 페이지에 하단 탭 네비게이션 추가 (홈, 주문, 마이페이지)
    • 카페 소개 섹션 표시 기능 추가
    • 오늘의 주문 목록 표시 기능 추가
    • 오늘의 적립 현황(쿠폰 사용, 도장 적립) 표시 기능 추가
  • 스타일

    • 앱 레이아웃 최대 너비 조정

@skyblue1232 skyblue1232 self-assigned this Mar 27, 2026
@skyblue1232 skyblue1232 added feat 기능 구현 및 생성 style 스타일 관련 적용 labels Mar 27, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
compasser-customer Ready Ready Preview, Comment Mar 27, 2026 4:23am
compasser-owner Ready Ready Preview, Comment Mar 27, 2026 4:23am

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 27, 2026

📝 Walkthrough

Walkthrough

Owner 앱의 탭 기반 네비게이션 레이아웃과 메인 페이지를 구현합니다. TabsLayout 컴포넌트는 하단 탭 바를 통해 라우팅을 처리하고, 메인 페이지는 카페 소개, 오늘의 주문, 오늘의 적립 정보를 표시하는 여러 컴포넌트로 구성됩니다. 디자인 시스템 CSS도 레이아웃 제약조건을 업데이트합니다.

Changes

Cohort / File(s) Summary
Tab Navigation Layout
apps/owner/src/app/(tabs)/layout.tsx
패스명 기반으로 활성 탭을 결정하고 BottomTabBar 컴포넌트를 통해 라우트 네비게이션(/main, /order, /mypage)을 처리하는 클라이언트 레이아웃 구성요소를 추가합니다.
Main Page Components
apps/owner/src/app/(tabs)/main/_components/CafeIntro.tsx, TodayOrders.tsx, TodayRewards.tsx, apps/owner/src/app/(tabs)/main/page.tsx
카페 소개, 오늘의 주문 목록(최대 3개), 오늘의 적립 정보(쿠폰/도장)를 표시하는 3개 프레젠테이션 컴포넌트와 이들을 조합하는 메인 페이지를 추가합니다.
Type Definitions & Mock Data
apps/owner/src/app/(tabs)/main/_types/main.types.ts, apps/owner/src/app/(tabs)/main/_constants/mock.ts
OrderItem 타입 정의와 카페 이름, 주문 정보, 적립 요약에 대한 모의 데이터를 추가합니다.
Layout Styling
packages/design-system/src/style.css
.app-wrappermax-width를 390px에서 425px로 증가시킵니다.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Poem

🐰 탭을 누르면 길을 찾아,
주문과 적립이 반짝반짝,
카페 소개 글귀 예쁜데,
하단 바는 든든하구나! 🎫✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed 제목은 PR의 주요 변경사항을 명확하게 요약합니다. 사장님 메인 페이지 생성이라는 핵심 기능 추가를 정확히 나타냅니다.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/#54/owner-home-page

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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의 truncate CSS 클래스도 말줄임을 적용합니다. 두 로직이 동시에 작동할 가능성은 낮지만, 하나로 통일하면 더 명확해집니다.

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 패턴을 통일하면 좋습니다.

homeorder 케이스는 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

📥 Commits

Reviewing files that changed from the base of the PR and between 79c1b18 and 2ab955e.

⛔ Files ignored due to path filters (3)
  • packages/design-system/src/icons/generated/iconNames.ts is excluded by !**/generated/**
  • packages/design-system/src/icons/generated/spriteSymbols.ts is excluded by !**/generated/**
  • packages/design-system/src/icons/source/Stamp.svg is excluded by !**/*.svg
📒 Files selected for processing (8)
  • apps/owner/src/app/(tabs)/layout.tsx
  • apps/owner/src/app/(tabs)/main/_components/CafeIntro.tsx
  • apps/owner/src/app/(tabs)/main/_components/TodayOrders.tsx
  • apps/owner/src/app/(tabs)/main/_components/TodayRewards.tsx
  • apps/owner/src/app/(tabs)/main/_constants/mock.ts
  • apps/owner/src/app/(tabs)/main/_types/main.types.ts
  • apps/owner/src/app/(tabs)/main/page.tsx
  • packages/design-system/src/style.css

@skyblue1232 skyblue1232 merged commit a17e592 into develop Mar 27, 2026
6 checks passed
@skyblue1232 skyblue1232 deleted the feat/#54/owner-home-page branch March 29, 2026 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat 기능 구현 및 생성 style 스타일 관련 적용

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 사장님 메인 페이지 생성

1 participant