Interactive kit · grounded in code

Web app — desktop layout

Recommended pathW1 — Navigation grows with the window

1Today every width gets the phone column: a 480px strip with a bottom tab bar, and only (tabs)/* routes have it.

2Under 600 the bottom bar stays. From 600 a navigation rail (80px, icon + short label). From 1200 a labeled sidebar (240px) with the same five destinations.

3일정 만들기 becomes the sidebar’s primary button (the FAB’s job), 알림 and 메시지 sit in the foot, the account at the bottom.

Owner's word needed → Bottom bar → rail → sidebar by window size — yes?

Compact <600bottom tab bar + FAB (today)

Medium 600–839navigation rail, one pane

Expanded 840–1199rail + two-pane layouts

Large ≥1200labeled sidebar + supporting pane

twomore.app/home

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

홈

Content fills the rest, max ~1200.

Large 1440: the labeled sidebar

twomore.app/home

홈

클럽

경기

기록

프로필

김

홈

9월 19일 (토)내일

대치유수지체육공원 테니스장

⏰19:00~21:00

🎾복식

🎯

3.0–4.0

8,000원원

마감 임박

6/8

올림픽공원 테니스장

⏰09:00~11:00

🎾복식

🎯

3.0–4.0

무료원

모집 중

4/8

Medium 768: the rail

Recommended pathW2 — Tab roots keep the reading column on a wide window; session rows stay one column per day

1All five tab roots (홈, 클럽, 경기, 기록, 프로필) stop at the 680px reading column and centre; the ground still paints edge to edge.

2홈 keeps its day grouping; each day’s sessions are rows in that one column (no two-column packing), the same SessionCardV2 anatomy as on the phone. The 이번 주 pane is not built.

Owner's word needed → One reading column, day-sectioned rows — built

twomore.app/home

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

홈

9월 19일 (토)내일

대치유수지체육공원 테니스장

⏰19:00~21:00

🎾복식 번개

🎯

3.0–4.0

8,000원원

마감 임박

6/8

올림픽공원 테니스장

⏰09:00~11:00

🎾복식

🎯

3.0–4.0

무료원

모집 중

4/8

양재 시민의숲

⏰14:00~16:00

🎾단식

🎯

3.0–4.0

10,000원원

모집 중

2/4

마마테니스 역삼점

⏰20:00~22:00

🎾복식

🎯

3.0–4.0

12,000원원

예비 접수

8/8

9월 20일 (일)

경기고등학교 테니스장

⏰08:00~10:00

🎾복식

🎯

3.0–4.0

무료원

모집 중

5/8

잠실 종합운동장 테니스장

⏰16:00~18:00

🎾남복

🎯

3.0–4.0

8,000원원

모집 중

3/8

홈 at 1440: day-grouped rows in the reading column

Recommended pathW3 — Detail pages get a supporting pane; the CTA band becomes the pane’s action

1Session detail: main column (~680px: hero, fact rows, 참석 roster) and a sticky ~340px pane with the fee, capacity ring and 참석하기.

2The BottomCtaBand is a phone pattern: on desktop its action lives in the pane; the phone keeps the band.

Owner's word needed → Sticky action pane on detail pages — yes?

twomore.app/sessions/…

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

강남 테니스 클럽

대치유수지체육공원 테니스장

📅9월 19일 (토) 19:00~21:00🎾복식 │ 번개

정보

📍장소

서울 강남구 대치동

🎯실력대

NTRP 3.0–4.0

👤호스트

김민준

참석6/8

김

김민준

호스트

이

이서준

참석

박

박지훈

참석

최

최유나

참석

참가비8,000원

모집 현황

6/8

참석하기

Session detail at 1440 — on the phone, 참석하기 stays in the pinned bottom band

Recommended pathW4 — List-detail: 메시지 shows the list and the open thread side by side

1A ~360px conversation list and the open thread with its compose bar; selecting a row swaps the right pane, no navigation.

2The same pattern applies to club 멤버 and 회비 lists (list left, member or dues detail right).

Owner's word needed → List-detail for messages, then club lists — yes?

twomore.app/messages/…

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

메시지

강

강남 테니스 클럽방금

토요일 코트 예약했어요2

이

이서준오후 2:10

내일 몇 시에 봬요?

박

박지훈어제

네, 확인했습니다

복

복식 번개 모임월요일

최유나: 참석할게요

강

강남 테니스 클럽

박

박지훈

토요일 오전에 한 게임 하실 분 계신가요?

오전 9:12

이

이서준

저 갈게요! 코트는 어디예요?

오전 9:14

대치유수지 테니스장이에요. 코트 예약했어요

읽음 · 오전 9:20

박

박지훈

토요일 코트 예약했어요

방금

메시지 입력…

↑

메시지 at 1440

Recommended pathW5 — Wizards stay a centred column; settings gets a left sub-nav

1Wizards are one task per screen: a centred ~640px column, with the bottom CTA aligned to the column, not the viewport.

2Settings lists its sections in a ~240px left sub-nav; the selected section’s rows show on the right.

Owner's word needed → Centred wizard column and settings sub-nav — yes?

twomore.app/create-session

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

언제 열리나요?

날짜

9월 19일 (토)

시작

19:00

종료

21:00

일정 만들기 wizard at 1440

twomore.app/settings

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

설정

알림

개인정보

차단한 사용자

동의 관리

계정

알림

일정 알림

메시지 알림

입금 알림

설정 at 1440

Spec — breakpoints, shared vs web-only, density, staged plan

Class	Width (dp)	Layout
Compact	<600	bottom tab bar, FAB, one pane (today)
Medium	600–839	navigation rail, one pane, content max width
Expanded	840–1199	rail + two-pane layouts (list-detail, supporting pane)
Large	≥1200	labeled sidebar + supporting pane, content max ~1200

Classes follow Material 3 window size classes (compact / medium / expanded), with large added at 1200 for the sidebar.

Shared: the @twomore/ui shells gain a max width and an optional side pane; media breakpoints are declared in both tamagui configs. Web-only: the sidebar and rail, the route-group layout, hover and keyboard behaviour.

Density: hover dims inside the element (no press band); focus rings stay; text line length stays at or under about 70ch.

Media breakpoints and a fluid frame
Sidebar and rail shell
Container-width fixes: hero band, album banner, CTA band and static maps use the column width, not the window
Feed grids
Detail supporting pane
List-detail for messages, then the settings sub-nav
Hover, focus and keyboard, plus blueprints

Spec (grounding, anatomy)

Decided 2026-09-30 and built. Now: the create button is 번개 만들기; 설정 uses the 메시지 list-detail instead of a sub-nav; the 홈 summary pane is not built (its counts need their own question).

route ·

apps/web/app/{layout.tsx,(tabs)/layout.tsx,globals.css} · packages/ui/src/{main-tab-shell,detail-shell,bottom-cta-band}.tsx

grounded in 15 source file(s)

apps/web/app/layout.tsxapps/web/app/(tabs)/layout.tsxapps/web/app/globals.csspackages/ui/src/main-tab-shell.tsxpackages/ui/src/detail-shell.tsxpackages/ui/src/bottom-cta-band.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/features/sessions/src/session-detail-screen.tsxpackages/features/messaging/src/dm-inbox-screen.tsxpackages/features/messaging/src/dm-thread-screen.tsxpackages/features/profile/src/settings-screen.tsxapps/web/components/app-nav.tsxapps/web/components/list-detail-layout.tsxpackages/ui/src/supporting-pane.tsxpackages/ui/src/window-size.ts