feat(react): `Header` by junghyeonsu · Pull Request #1375 · daangn/seed-design

junghyeonsu · 2026-03-20T03:02:16Z

Summary

웹 전용 Header 컨테이너 컴포넌트 추가 (Root / Left / Center / Right 3-slot compound component)
Rootage 없이 글로벌 디자인 토큰 직접 참조하는 recipe 패턴 사용 (pull-to-refresh 선례)
Variants: tone (layer | transparent), divider (boolean)

Test plan

bun qvism:generate — CSS 생성 확인
bun packages:build — 빌드 성공
bun test:all — 585 pass, 0 fail

🤖 Generated with Claude Code

coderabbitai · 2026-03-20T03:02:22Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b2a4eab9-3d72-486d-b9e5-653c6f974401

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch junghyeonsu/header-component

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

changeset-bot · 2026-03-20T03:02:24Z

⚠️ No Changeset found

Latest commit: ef87fc4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-03-20T03:12:13Z

Alpha Preview (Docs)

Branch Preview URL: https://junghyeonsu-header-component.seed-design.pages.dev
Preview URL: https://cc69408d.seed-design.pages.dev
Commit: 6da77ee

github-actions · 2026-03-20T06:05:53Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://junghyeonsu-header-component.seed-design-stackflow-spa.pages.dev
Preview URL: https://9b792c26.seed-design-stackflow-spa.pages.dev
Commit: 6da77ee

github-actions · 2026-03-20T06:06:11Z

Alpha Preview (Storybook)

Branch Preview URL: https://junghyeonsu-header-component.seed-design-storybook.pages.dev
Preview URL: https://17a3aed0.seed-design-storybook.pages.dev
Commit: 6da77ee

malangcat · 2026-03-23T17:07:25Z

데스크톱 컴포넌트를 같은 층위에 밀어넣는게 좋은 선택같지는 않네요. stackflow처럼 패키지라도 분리하는게 어떨까 싶긴 합니다.

junghyeonsu · 2026-03-24T06:48:59Z

@malangcat action-button과 같이 데스크탑에서도 사용되고, 모바일에서도 사용되는 컴포넌트는 그대로 두되,
데스크탑에서만 사용되는 컴포넌트는 최소한 패키지 분리를 하라는 의견이신거죠?

아마 애셔가 얘기해주신 부분이 최소한의 맥락 분리라고 예상하긴한데, (stackflow를 언급해주신 부분에서 그런 생각이 들었습니다.)

@seed-design/stackflow 은 "모바일"을 내포하고 있다고 생각했고
@seed-design/something (분리될 패키지)는 "데스크탑"
@seed-design/react 는 react 의 이름을 갖고 있으니 모바일, 데스크탑 공용의 느낌을 내포하는 것
으로 얘기해주신 게 맞을까요?

같은 패키지에 두는 건 왜 좋은 선택이 아닌지에 대한 의견이 더 궁금해요 애셔

malangcat · 2026-03-24T09:13:04Z

음... 처음 빌드할때 프로젝트의 목표 자체가 웹뷰에 들어갈 모바일 제품만을 위한 것이였어서, react라는 패키지명을 사용했는데 데스크톱 관심사를 포함하게 되면 패키지명이 애매해지긴 하네요.

저라면 rootage 스펙부터 전부 따로 구성할 것 같긴 합니다. 결국 데스크톱 관심사에서는 typography부터 컴포넌트들의 사이즈 요구사항들이 전부 달라지게 될 가능성이 커서요.

ecosystem은 어떤 시스템을 만들더라도 공유될 수 있는 영역, packages는 모바일 제품, 즉 당근 앱을 위한 영역인 것이 의도였습니다.

junghyeonsu · 2026-03-24T15:23:20Z

@malangcat 웹 디자인시스템 rootage - recipe - react의 레이어를 따로 구성하는건 동의해요.
결국 typography와 같은 rootage가 따로 나오면 그 위로 올라와서 Text와 같은 Primitive도 따로 쓰여야 해서..
아예 다른 맥락이라고 이해를 하는게 더 쉬울수도 있겠군요..

저는 문서 페이지 때문에 한 레포에 다 담아야 관리가 쉬울 것 같은데, 근데 현재의 모노레포 구조도 조금 애매하네요.

packages는 모바일 제품 이라는 건 현재 packages에서는 웹 제품에 대한 관심사는 아예 들어가지 않는걸 생각하신걸까요?
packages 안에서 mobile, desktop(desktop? or web? web이 조금 더 맞는거같네요.)으로 나뉘어서 각각 rootage, recipe, react, css가 있는 방식은 어떤가요?
패키지명이 또 고민이네요...

malangcat · 2026-03-25T02:24:00Z

@malangcat 웹 디자인시스템 rootage - recipe - react의 레이어를 따로 구성하는건 동의해요.

결국 typography와 같은 rootage가 따로 나오면 그 위로 올라와서 Text와 같은 Primitive도 따로 쓰여야 해서..

아예 다른 맥락이라고 이해를 하는게 더 쉬울수도 있겠군요..

저는 문서 페이지 때문에 한 레포에 다 담아야 관리가 쉬울 것 같은데, 근데 현재의 모노레포 구조도 조금 애매하네요.

packages는 모바일 제품 이라는 건 현재 packages에서는 웹 제품에 대한 관심사는 아예 들어가지 않는걸 생각하신걸까요?

packages 안에서 mobile, desktop(desktop? or web? web이 조금 더 맞는거같네요.)으로 나뉘어서 각각 rootage, recipe, react, css가 있는 방식은 어떤가요?

패키지명이 또 고민이네요...

packages/ 안에서 다시 mobile, desktop으로 분류하거나... 패키지명은 저도 모르겠네요 완전히 모바일만을 전제로 했던 네이밍이라 ㅋㅋㅋㅋ

junghyeonsu · 2026-03-25T03:02:47Z

@malangcat ㅋㅋ 그래도 같이 얘기해주셔서 감사합니다. 그래도 어느정도 감이 잡히긴 했어요

…d block examples - Add Header slot recipe (root/left/center/right) with size, transparent, divider variants - Add HeaderActionButton and HeaderToggleButton as independent qvism preset recipes - Add React components: Header.Root, Header.Left, Header.Center, Header.Right, Header.ActionButton, Header.ToggleButton - Add 4 block examples: 3 generic company headers + 1 Daangn-branded header - Register header recipes in qvism-preset and generate CSS outputs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

- header-05: responsive nav with desktop links + mobile BottomSheet menu - header-06: transparent header with scroll-driven background transition Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…av, section) Primitive.header was undefined, causing Header component to throw TypeError during Next.js static export pre-rendering, which resulted in all header block pages being baked with 404. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…omponent # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

Move Menu dropdown examples (Platform, Features) into header-03 and remove the separate header-05 responsive block. Fix MenuContentProps missing children type in menu registry UI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

junghyeonsu self-assigned this Mar 20, 2026

junghyeonsu changed the title ~~feat(react): add Header web container component~~ feat(react): Header Mar 20, 2026

junghyeonsu changed the title ~~feat(react): Header~~ feat(react): Header Mar 20, 2026

junghyeonsu force-pushed the junghyeonsu/header-component branch from 10641ed to 9513f74 Compare March 23, 2026 07:44

junghyeonsu force-pushed the junghyeonsu/header-component branch from 856568e to f3458b7 Compare March 24, 2026 02:56

junghyeonsu changed the base branch from dev to alpha March 26, 2026 08:54

junghyeonsu force-pushed the junghyeonsu/header-component branch 2 times, most recently from 91c7cbd to 9b3802f Compare March 27, 2026 02:32

te6-in force-pushed the alpha branch 3 times, most recently from f7abd57 to 6f2415a Compare April 7, 2026 09:50

junghyeonsu force-pushed the junghyeonsu/header-component branch from f50849a to 3636cba Compare April 8, 2026 05:59

junghyeonsu and others added 5 commits April 8, 2026 18:37

fix(docs): register header in blocks meta.json with spread pages

0b52424

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

feat(docs): add responsive header block examples (header-05, header-06)

59fd867

- header-05: responsive nav with desktop links + mobile BottomSheet menu - header-06: transparent header with scroll-driven background transition Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/alpha' into junghyeonsu/header-c…

ef87fc4

…omponent # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): `Header`#1375

feat(react): `Header`#1375
junghyeonsu wants to merge 6 commits intoalphafrom
junghyeonsu/header-component

junghyeonsu commented Mar 20, 2026

Uh oh!

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

Review skipped

Uh oh!

changeset-bot bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 23, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 24, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 25, 2026

Uh oh!

junghyeonsu commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

junghyeonsu commented Mar 20, 2026

Summary

Test plan

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

changeset-bot bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

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

Uh oh!

Alpha Preview (Docs)

Uh oh!

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

Uh oh!

Alpha Preview (Stackflow SPA)

Uh oh!

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

Uh oh!

Alpha Preview (Storybook)

Uh oh!

malangcat commented Mar 23, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

malangcat commented Mar 24, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

malangcat commented Mar 25, 2026

Uh oh!

junghyeonsu commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

changeset-bot bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

junghyeonsu commented Mar 24, 2026 •

edited

Loading

junghyeonsu commented Mar 24, 2026 •

edited

Loading