Skip to content

빈 정산 카드UI 추가 및 홈 노출#64

Merged
ongheong merged 2 commits into
developfrom
feat/MD-48
Jun 7, 2026
Merged

빈 정산 카드UI 추가 및 홈 노출#64
ongheong merged 2 commits into
developfrom
feat/MD-48

Conversation

@ongheong

@ongheong ongheong commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • 지출이 없는 빈 정산(totalAmount === 0)을 표시하는 EmptySettlementCard 컴포넌트 추가
  • 홈 정산 리스트(SettlementDateSection)에서 빈 정산은 EmptySettlementCard, 그 외에는 기존 SettlementProgressCard로 분기 렌더링
  • 카드 클릭 시 지출 생성 페이지(/create-expense/{groupCode})로 이동

Details

  • Figma 디자인 기반 구현, 기존 SettlementProgressCard와 동일한 토큰/레이아웃 컨벤션 사용
  • 경고 아이콘은 SystemWarning(노란 삼각형, fg.accent-yellow.normal) + "아직 정산 내역을 입력하지 않았어요" 메시지
  • 진행바 트랙은 대응 시맨틱 토큰이 없어 Figma 지정값 #d6d6d6 사용(주석 명시)

Test plan

  • 홈에서 totalAmount === 0인 정산이 빈 정산 카드로 노출되는지 확인
  • 빈 정산 카드 클릭 시 /create-expense/{groupCode}로 이동하는지 확인
  • 지출이 있는 정산은 기존 진행 카드로 정상 노출되는지 확인
  • Figma 디자인과 시각적으로 일치하는지 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

새로운 기능

  • 정산 항목이 없을 때를 위한 새로운 빈 상태 카드 UI가 추가되었습니다. 카드에는 그룹 이름, 0원 금액 표시, 진행률 표시기, 정산 항목이 없다는 것을 알려주는 경고 메시지가 포함됩니다. 사용자는 이 카드를 통해 새로운 정산을 바로 시작할 수 있습니다.

yeoeun-ex and others added 2 commits June 7, 2026 21:28
지출이 없는 빈 정산을 표시하는 카드 컴포넌트 추가.
클릭 시 지출 생성 페이지(/create-expense/{groupCode})로 이동.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
홈 정산 리스트에서 totalAmount === 0인 빈 정산은
EmptySettlementCard로, 그 외에는 기존 SettlementProgressCard로 분기 렌더링.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

📝 관련 이슈

MD-48

@coderabbitai

coderabbitai Bot commented Jun 7, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 96493ba9-ab72-40b3-8bf5-1d676cf05c09

📥 Commits

Reviewing files that changed from the base of the PR and between 9fb4fb7 and 4cfd9dd.

📒 Files selected for processing (4)
  • src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts
  • src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx
  • src/pages/home/ui/EmptySettlementCard/index.ts
  • src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx

📝 Walkthrough

Walkthrough

비용 정산 화면에서 정산 항목이 없는 빈 상태를 표시할 새로운 EmptySettlementCard 컴포넌트를 추가했습니다. 스타일 정의, React 컴포넌트 구현, 모듈 내보내기를 완성하고, 기존 SettlementDateSection에 조건부 렌더링 로직을 통합했습니다.

Changes

EmptySettlementCard 컴포넌트 추가

Layer / File(s) Summary
스타일 컴포넌트 정의
src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.styles.ts
링크 기반 Container를 최상위 래퍼로 두고, TextGroup과 Amount로 그룹명과 금액(0원)을 표현합니다. ProgressSection/ProgressBar/ProgressTrack으로 0% 진행도를 표시하고, MessageRow와 WarningIcon, Message로 경고 상태를 표현합니다. 디자인 시스템 토큰과 타이포그래피를 전체 요소에 적용합니다.
EmptySettlementCard 컴포넌트 및 내보내기
src/pages/home/ui/EmptySettlementCard/EmptySettlementCard.tsx, src/pages/home/ui/EmptySettlementCard/index.ts
groupCode와 groupName을 받는 EmptySettlementCard 함수 컴포넌트를 정의하고, 스타일 컴포넌트와 결합하여 완전한 UI를 렌더링합니다. 컴포넌트와 Props 타입을 index.ts를 통해 재내보내기합니다.
SettlementDateSection 조건부 렌더링
src/pages/home/ui/SettlementDateSection/SettlementDateSection.tsx
items 순회 중 totalAmount가 0일 때 EmptySettlementCard를, 그 외에는 기존 SettlementProgressCard를 렌더링하도록 분기 로직을 추가합니다.

Possibly related PRs

  • moddo-kr/moddo-frontend#54: 이 PR의 WarningIcon에서 color 토큰을 적용하는 변경이 해당 PR의 SvgSystemWarning 내부 currentColor 구현과 함께 작동합니다.

Suggested labels

✨ Feature, 🎨 Design

Poem

🐰 빈 정산 카드, 노란 경고 아이콘과 함께
0원, 0% 진행도로 깔끔하게 표현되고
카드가 조건부로 화면에 나타나니
아름다운 UI의 또 다른 조각이 맞춰지는군요! 🎨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/MD-48

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.

@ongheong ongheong changed the title feat: 빈 정산 카드(EmptySettlementCard) 추가 및 홈 노출 빈 정산 카드UI 추가 및 홈 노출 Jun 7, 2026
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying moddo-frontend with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4cfd9dd
Status: ✅  Deploy successful!
Preview URL: https://b692afbc.moddo-frontend.pages.dev
Branch Preview URL: https://feat-md-48.moddo-frontend.pages.dev

View logs

@ongheong ongheong merged commit 6175ce1 into develop Jun 7, 2026
7 checks passed
@ongheong ongheong deleted the feat/MD-48 branch June 7, 2026 12:33
@yoouyeon yoouyeon added the ✨ Feature 신규 기능 추가 label Jun 7, 2026
@yoouyeon yoouyeon mentioned this pull request Jun 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 신규 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants