From bc7d707f1fe6ba30373bbab196ab322d1959cb1a Mon Sep 17 00:00:00 2001 From: Seongbin Kim Date: Mon, 13 Jul 2026 19:58:18 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20PC=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/docs/mustpass/stack-navigation.md | 7 +- .../components/home/relation-force-map.tsx | 2 +- .../timeline/timeline-event-card.tsx | 2 +- .../src/components/timeline/timeline-feed.tsx | 7 +- .../timeline/timeline-filter-drawer.tsx | 2 +- frontend/src/main.tsx | 2 +- frontend/src/stackflow/README.md | 9 +- .../activities/event-detail-activity.tsx | 2 +- .../stackflow/activities/main-activity.tsx | 14 +- .../activities/person-edit-activity.tsx | 2 +- .../activities/person-new-activity.tsx | 2 +- .../stackflow/activities/record-activity.tsx | 2 +- .../stackflow/components/activity-shell.tsx | 2 +- .../stackflow/components/stack-tab-bar.tsx | 58 ++++++- .../stackflow/components/stack-viewport.tsx | 24 ++- .../src/stackflow/components/tab-shell.tsx | 4 +- frontend/src/stackflow/tabs/home-tab.tsx | 58 +++---- frontend/src/stackflow/tabs/people-tab.tsx | 14 +- frontend/src/stackflow/tabs/settings-tab.tsx | 8 +- frontend/src/stackflow/tabs/timeline-tab.tsx | 142 +++++++++--------- frontend/src/styles.css | 6 + 21 files changed, 233 insertions(+), 136 deletions(-) diff --git a/frontend/docs/mustpass/stack-navigation.md b/frontend/docs/mustpass/stack-navigation.md index 36c61de..8b0f923 100644 --- a/frontend/docs/mustpass/stack-navigation.md +++ b/frontend/docs/mustpass/stack-navigation.md @@ -78,4 +78,9 @@ ## 데스크톱 -- [ ] PC 뷰포트에서도 화면·슬라이드 전환이 가운데 `max-w-md`(448px) 컨테이너 안에서만 일어난다. +- [ ] `lg` 미만에서는 가운데 `max-w-md`(448px) 캔버스와 하단 5슬롯 내비게이션이 유지된다. +- [ ] `lg` 이상에서는 앱 캔버스가 최대 1440px까지 확장되고, 홈·몽글라인·사람·설정과 + 기록 작성 슬롯이 같은 순서의 좌측 내비게이션으로 표시된다. +- [ ] PC의 홈은 소개/기간과 관계 지도가 2열로, 몽글라인은 활동 흐름/필터와 피드가 2열로 + 표시되며 가로 넘침 없이 각각 스크롤·조작할 수 있다. +- [ ] 상세·설정·기록 작성·사람 등록 화면은 넓은 캔버스에서도 읽기 좋은 중앙 폭을 유지한다. diff --git a/frontend/src/components/home/relation-force-map.tsx b/frontend/src/components/home/relation-force-map.tsx index 86bf8dd..1e72ce4 100644 --- a/frontend/src/components/home/relation-force-map.tsx +++ b/frontend/src/components/home/relation-force-map.tsx @@ -152,7 +152,7 @@ export function RelationForceMap({ return (
{ if (event.button !== 0) return if (isPersonNodeTarget(event.target)) return diff --git a/frontend/src/components/timeline/timeline-event-card.tsx b/frontend/src/components/timeline/timeline-event-card.tsx index 8421ad2..9d146e8 100644 --- a/frontend/src/components/timeline/timeline-event-card.tsx +++ b/frontend/src/components/timeline/timeline-event-card.tsx @@ -94,7 +94,7 @@ export function TimelineEventCard({ item }: { item: TimelineEventCardItem }) { + ) + } + + const Icon = item.icon + const isActive = activeTab === item.tab + + return ( + + ) + })} +
+ ) } diff --git a/frontend/src/stackflow/components/stack-viewport.tsx b/frontend/src/stackflow/components/stack-viewport.tsx index 75391ec..6e3f0cc 100644 --- a/frontend/src/stackflow/components/stack-viewport.tsx +++ b/frontend/src/stackflow/components/stack-viewport.tsx @@ -1,9 +1,23 @@ -// PC에서도 모바일 폭(max-w-md) 안에서만 화면이 그려지고 슬라이드되도록 -// 스택 전체를 가운데 정렬된 컨테이너에 가둔다. -// (basic-ui 화면은 fixed가 아니라 가장 가까운 positioned 조상 기준 absolute) -export function StackViewport({ children }: { children: React.ReactNode }) { +import { cn } from '@/lib/utils' + +// basic-ui 화면은 fixed가 아니라 가장 가까운 positioned 조상 기준 absolute다. +// 모바일은 기존 448px 앱 캔버스를 유지하고, PC에서는 넓은 앱 캔버스 안에서 +// 좌측 내비게이션과 각 화면의 데스크톱 레이아웃을 함께 그린다. +export function StackViewport({ + children, + desktop = false, +}: { + children: React.ReactNode + desktop?: boolean +}) { return ( -
+
{children}
-
- -

- 함께한 순간,
몽글몽글 쌓이는 중 -

-
+
+
+
+ +

+ 함께한 순간,
몽글몽글 쌓이는 중 +

+
-
- -
+
+ +
+
- {mapQuery.isPending ? ( -

- 관계 지도를 불러오는 중… -

- ) : mapQuery.isError || !mapData ? ( -

- 관계 지도를 불러오지 못했어요. -

- ) : ( - - )} +
+ {mapQuery.isPending ? ( +

+ 관계 지도를 불러오는 중… +

+ ) : mapQuery.isError || !mapData ? ( +

+ 관계 지도를 불러오지 못했어요. +

+ ) : ( + + )} +
+
{throwback && !throwbackDismissed ? ( -
+
+
- +
-

+

사람

-

+

{totalCount > 0 ? `함께한 사람 ${totalCount}명` : '함께한 사람을 찾고 관리해요'} @@ -95,10 +95,10 @@ export function PeopleTab() {

-
+
- - + + +
- -

+ +

설정

-
+
+ - -

+ +

나의 몽글라인

-

+

모든 사람과의 기록을 시간순으로

} > - {allTimelineQuery.data && persons.length > 0 ? ( -
- -
- ) : null} - -
-
-

필터

- +
+ + +
+ {filteredTimelineQuery.isPending ? ( +

+ 타임라인을 불러오는 중… +

+ ) : filteredTimelineQuery.isError ? ( +

+ 타임라인을 불러오지 못했어요. +

+ ) : cards.length === 0 ? ( +
+

+ {hasFilter + ? '이 조건에 맞는 기록이 없어요.' + : persons.length === 0 + ? '먼저 함께한 사람을 추가해 주세요.' + : '아직 함께한 기록이 없어요. 첫 순간을 새겨보세요.'} +

+ +
+ ) : ( + ( + + )} + /> + )}
- - {filteredTimelineQuery.isPending ? ( -

- 타임라인을 불러오는 중… -

- ) : filteredTimelineQuery.isError ? ( -

- 타임라인을 불러오지 못했어요. -

- ) : cards.length === 0 ? ( -
-

- {hasFilter - ? '이 조건에 맞는 기록이 없어요.' - : persons.length === 0 - ? '먼저 함께한 사람을 추가해 주세요.' - : '아직 함께한 기록이 없어요. 첫 순간을 새겨보세요.'} -

- -
- ) : ( - ( - - )} - /> - )} ) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 2952566..8722685 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -141,6 +141,12 @@ scrollbar-color: oklch(0.78 0 0 / 0.45) transparent; } + @media (min-width: 64rem) { + body { + @apply bg-muted/30; + } + } + * { scrollbar-width: thin; scrollbar-color: oklch(0.78 0 0 / 0.4) transparent;