Header 컴포넌트 디자인 시스템 기준 재설계 및 홈/로그인페이지 UI 변경 by ongheong · Pull Request #34 · moddo-kr/moddo-frontend

ongheong · 2026-04-19T08:13:57Z

Summary

Header 컴포넌트를 디자인 시스템 기준 default | 1depth 두 가지 type으로 재설계
Discriminated union props 패턴으로 type별 props 분리, 기존 FIXME 레거시 props 제거
18개 페이지 사용처 전체 마이그레이션 완료
S.IconButton → Button variant="text" 로 교체하여 디자인 시스템 일관성 확보

변경 내용

default type: 서브 페이지용 (heading 영역 + 중앙 타이틀 + trailing)
1depth type: 최상위 페이지용 (좌측 큰 타이틀/로고 + trailing)
기존 TitleLeft, TitleCenter type 및 showIcon, handleBackButtonClick 등 레거시 props 삭제
type 미지정 시 default로 동작

Test plan

홈페이지 헤더 (1depth + 로고 + Bell/Menu 아이콘) 정상 렌더링 확인
마이페이지 헤더 (1depth + 텍스트 타이틀 + Menu 아이콘) 정상 렌더링 확인
서브 페이지 헤더 (default + ArrowLeft/Close 아이콘 + 뒤로가기) 정상 동작 확인
각 페이지 trailing 아이콘 클릭 핸들러 정상 동작 확인
npx tsc --noEmit 에러 없음
npm run build 성공

🤖 Generated with Claude Code

기존 TitleLeft/TitleCenter 타입을 default/1depth로 변경하고, heading/trailing 영역을 분리한 새로운 Header API로 재작성. 스타일과 Storybook 스토리도 함께 업데이트. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…type Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ult type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ling icons Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-04-19T08:14:04Z

Warning

Rate limit exceeded

@ongheong has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 48 minutes and 15 seconds before requesting another review.

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 48 minutes and 15 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f287a89a-7c14-4f6a-92ce-ab92430a5cf8

📥 Commits

Reviewing files that changed from the base of the PR and between 0d48d19 and 129f928.

📒 Files selected for processing (29)

.claude/settings.local.json
src/features/home/api/useGetSettlementList.ts
src/features/user-profile/ui/MyProfile/index.tsx
src/pages/addAccountStep/AddAccountStepPage.tsx
src/pages/addExpenseStep/AddExpenseStepPage.tsx
src/pages/characterShare/CharacterSharePage.tsx
src/pages/confirmStep/ConfirmStepPage.tsx
src/pages/createExpenseStep/CreateExpenseStepPage.tsx
src/pages/editExpenseStep/EditExpenseStepPage.tsx
src/pages/expenseDetail/ExpenseDetailPage.tsx
src/pages/groupNameSetup/GroupNameSetupPage.tsx
src/pages/home/ui/HomePageSection/index.tsx
src/pages/join/JoinPage.tsx
src/pages/login/LoginEntranceView.styles.tsx
src/pages/login/LoginEntranceView.tsx
src/pages/login/LoginPage.styles.ts
src/pages/login/LoginPage.tsx
src/pages/memberSetup/MemberSetupPage.tsx
src/pages/my-edit/MyEditPage.tsx
src/pages/my/MyPage.tsx
src/pages/myLinks/MyLinksPage.tsx
src/pages/passwordSetup/PasswordSetupPage.tsx
src/pages/paymentManagement/PaymentManagementPage.tsx
src/pages/qrStep/QrStepPage.tsx
src/pages/selectGroup/SelectGroupPage.tsx
src/pages/shareStep/ShareStepPage.tsx
src/shared/ui/Header/index.stories.tsx
src/shared/ui/Header/index.styles.ts
src/shared/ui/Header/index.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/MD-8

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.}

github-actions · 2026-04-19T08:14:05Z

📝 관련 이슈

MD-8

cloudflare-workers-and-pages · 2026-04-19T08:14:35Z

Deploying moddo-frontend with Cloudflare Pages

Latest commit:	`129f928`
Status:	✅ Deploy successful!
Preview URL:	https://3a57a44a.moddo-frontend.pages.dev
Branch Preview URL:	https://feat-md-8.moddo-frontend.pages.dev

View logs

# Conflicts: # src/features/user-profile/ui/MyProfile/index.tsx

github-actions · 2026-04-19T08:19:56Z

✨ Storybook
👉 https://6867dc9b2bbd1b3d76b92f4a-mwqpehssgf.chromatic.com/

📸 변경된 스냅샷
👉 https://www.chromatic.com/build?appId=6867dc9b2bbd1b3d76b92f4a&number=35

github-actions · 2026-04-19T08:20:14Z

✨ Storybook
👉 https://6867dc9b2bbd1b3d76b92f4a-hwxwpowdwm.chromatic.com/

📸 변경된 스냅샷
👉 https://www.chromatic.com/build?appId=6867dc9b2bbd1b3d76b92f4a&number=36

github-actions · 2026-04-19T08:25:09Z

✨ Storybook
👉 https://6867dc9b2bbd1b3d76b92f4a-qbeojhhooj.chromatic.com/

📸 변경된 스냅샷
👉 https://www.chromatic.com/build?appId=6867dc9b2bbd1b3d76b92f4a&number=37

github-actions · 2026-04-19T08:30:58Z

✨ Storybook
👉 https://6867dc9b2bbd1b3d76b92f4a-jkkbgbcroy.chromatic.com/

📸 변경된 스냅샷
👉 https://www.chromatic.com/build?appId=6867dc9b2bbd1b3d76b92f4a&number=38

yeoeun-ex and others added 12 commits April 19, 2026 15:28

refactor(Header): migrate HomePage, MyPage to 1depth type

384dddf

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor(Header): migrate 6 pages with back+label pattern to default …

e4a0d14

…type Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor(Header): migrate 4 pages with ArrowLeft-only pattern to defa…

2cd0f2a

…ult type

refactor(Header): migrate 6 pages with special patterns to default type

7b66862

fix(Header): migrate remaining PaymentManagementPage Header instance

4abb025

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor(Header): remove Button wrapper from HomePage MainHeader trai…

68352f6

…ling icons Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor(Header): remove Button wrapper from MyPage trailing icons

0d2397d

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

chore: 스타일 변경된 부분들 반영

768f4f2

chore: 초기 입장 페이지 디자인에 맞게 수정

c6589c9

chore: 로그인 페이지 디자인에 맞게 수정

1b7cd54

fix: Button 컴포넌트 사용하도록 변경, 타입별로 컴포넌트 분리

9834f53

github-actions bot assigned ongheong Apr 19, 2026

github-actions bot requested a review from yoouyeon April 19, 2026 08:14

ongheong changed the title ~~refactor: Header 컴포넌트 디자인 시스템 기준 재설계 (default/1depth)~~ Header 컴포넌트 디자인 시스템 기준 재설계 및 홈, 로그인페이지 UI 변경 Apr 19, 2026

ongheong changed the title ~~Header 컴포넌트 디자인 시스템 기준 재설계 및 홈, 로그인페이지 UI 변경~~ Header 컴포넌트 디자인 시스템 기준 재설계 및 홈/로그인페이지 UI 변경 Apr 19, 2026

ongheong changed the base branch from main to develop April 19, 2026 08:15

yeoeun-ex added 2 commits April 19, 2026 17:17

Merge remote-tracking branch 'origin/develop' into feat/MD-8

7f8eb56

# Conflicts: # src/features/user-profile/ui/MyProfile/index.tsx

chore: 마이페이지 UI 수정

feec1ed

ongheong added the 🎨 Design 디자인 관련 작업 label Apr 19, 2026

chore: 빌드 에러 해결

f9dc8af

chore: 잘못 올라간 파일 제거, 로그인페이지 높이 수정

129f928

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Header 컴포넌트 디자인 시스템 기준 재설계 및 홈/로그인페이지 UI 변경#34

Header 컴포넌트 디자인 시스템 기준 재설계 및 홈/로그인페이지 UI 변경#34
ongheong wants to merge 16 commits intodevelopfrom
feat/MD-8

ongheong commented Apr 19, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 19, 2026 •

edited

Loading

Rate limit exceeded

Uh oh!

github-actions bot commented Apr 19, 2026 •

edited by atlassian bot

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Apr 19, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ongheong commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

변경 내용

Test plan

Uh oh!

coderabbitai bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Uh oh!

github-actions bot commented Apr 19, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 관련 이슈

Uh oh!

cloudflare-workers-and-pages bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying moddo-frontend with Cloudflare Pages

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

github-actions bot commented Apr 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ongheong commented Apr 19, 2026 •

edited

Loading

coderabbitai bot commented Apr 19, 2026 •

edited

Loading

github-actions bot commented Apr 19, 2026 •

edited by atlassian bot

Loading

cloudflare-workers-and-pages bot commented Apr 19, 2026 •

edited

Loading