design(header): 헤더 검색창을 오른쪽 정렬하고 좁은 화면 경로를 바텀시트로 접는다

[junye0l]

무엇을 구현했나

최상단 헤더에서 창을 좁히면 왼쪽 경로(브레드크럼) 위로 검색창이 올라타 겹치던 문제를 고쳤다.

원인 — 검색창이 absolute inset-x-0 justify-center 로 화면 중앙에 고정돼 있고 브레드크럼은 shrink-0 이라, 둘 다 상대방의 폭을 모른 채 같은 자리를 차지했다. 중앙 고정은 "브레드크럼 길이에 따라 검색창이 흔들리는 것"을 막으려던 것인데, 오른쪽 그룹에 붙이면 같은 효과를 얻으면서 겹침은 구조적으로 불가능해진다. 그래서 absolute 를 지웠다.

1. 검색창을 오른쪽 정렬 (ddcefd0)

• 검색창을 ml-auto 로 Feedback · 프로필 앞에 붙이고 사이에 구분선을 둔다. max-w 는 556 → 320px (556은 중앙 배치라 성립했던 폭)
• 브레드크럼은 숨기지 않고 말줄임한다. 레포 이름만 shrink-0 으로 온전히 남는다
• 검색창도 같이 줄어든다(md:min-w-40). shrink-0 이면 줄어드는 압력을 브레드크럼이 혼자 다 받아 라벨이 말줄임을 건너뛰고 0까지 찌그러진다
• md 아래에서는 검색창이 돋보기 아이콘(28px)이 되고, 포커스하면 헤더 폭 전체로 펼쳐진다. 기존 open 상태를 그대로 써서 모달 · 포커스 트랩이 필요 없다
• / 로 어디서든 검색창에 포커스. 플레이스홀더를 Type [/] to search 안내로 교체 (placeholder 속성은 마크업을 못 담아 겹쳐 그림)

2. 좁은 화면 경로를 바텀시트로 (6a04eb0)

좁은 화면에서는 팀 / 조직 / 레포 세 단계를 나란히 놓을 자리가 없어 라벨이 전부 뭉개진다. Supabase 모바일 헤더처럼 경로를 버튼 하나로 접었다.

• SwitcherList 를 header-switcher 에서 추출 — 데스크톱 팝오버와 모바일 시트가 같은 목록을 쓴다
• PathSheet 신규: Drawer(아래로 스와이프해 닫기) + Tabs 3개. 트리거는 2줄 버튼(조직 / 레포)
• 시트 높이는 h-[70dvh] 고정 — max-h 로 두면 탭마다 항목 수가 달라 시트가 들썩인다
• 창을 md 이상으로 넓히면 시트를 닫는다 (트리거가 md:hidden 이라 시트만 떠 있게 된다)
• app-header 가 경로를 levels 배열 한 벌로 만들어 브레드크럼과 시트가 공유한다

참고사항

• 새 npm 패키지 없음. Drawer · Tabs 는 @base-ui/react@1.8.0 에 이미 들어있다
• app-header 가 TeamSwitcher 대신 switchTeam 을 직접 쓴다 — 팀도 시트의 한 탭이어야 해서 세 단계를 같은 모양(PathLevel)으로 맞췄다. TeamSwitcher 는 /projects · 팀 설정 헤더에서 계속 쓰인다
• header-switcher.tsx 의 라벨 min-w-[4ch] 는 말줄임이 보일 최소 자리다. 이게 없으면 flex 가 0 까지 줄여 라벨이 그냥 사라진다
• 검토 후 뺀 것: 2행 헤더 — 정보 손실이 0 이라 매력적이지만 헤더 높이 47px 이 레이아웃 · 사이드바 · 본문 높이 계산에 10곳 넘게 상수로 박혀 있어(h-[calc(100svh-47px)]) 전부 CSS 변수로 바꿔야 한다

체크리스트

• 로컬에서 pnpm lint && pnpm typecheck 통과 — pnpm build 는 DB 에 붙어서 로컬 실행 대신 CI 로 확인
• 새 npm 패키지 추가 안 함
• 1 PR = 1 목적 — 헤더 반응형 한 가지

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
dante-web	Ready	Preview	Sep 20, 2026 10:39am UTC