From cc901ccfdabdd550efe4a12f5863f2f69b15a13a Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Sat, 11 Jul 2026 12:10:55 +0900
Subject: [PATCH] =?UTF-8?q?feat(fe):=20push=20=EC=95=A1=ED=8B=B0=EB=B9=84?=
 =?UTF-8?q?=ED=8B=B0=20=EB=A1=9C=EB=94=A9=EC=9D=84=20shimmer=20=EC=8A=A4?=
 =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=EC=9C=BC=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

pending 동안 '불러오는 중…' 텍스트 하나만 그려서 라이트 테마에선
push 전환 내내 흰 화면이 슬라이드되어 보였다. 실제 레이아웃을 흉내 낸
스켈레톤을 깔아 로딩 중임이 보이게 한다.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/ui/skeleton.tsx       | 16 ++++++
 .../activities/event-detail-activity.tsx      | 32 +++++++++--
 .../activities/person-edit-activity.tsx       | 36 ++++++++++++-
 .../activities/person/person-profile-view.tsx | 53 ++++++++++++++++++-
 .../person/person-timeline-view.tsx           | 34 ++++++++++--
 .../stackflow/activities/record-activity.tsx  | 27 ++++++++--
 frontend/src/styles.css                       | 13 +++++
 7 files changed, 198 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ui/skeleton.tsx

diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..b53577f
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+
+// push 전환 동안 pending 화면이 빈 배경(라이트 테마 = 흰 화면)으로 슬라이드되어
+// 보이지 않도록, 실제 레이아웃의 자리를 흉내 내는 shimmer 플레이스홀더 조각.
+// 화면별 스켈레톤을 감싸는 쪽에서 role="status" aria-label="불러오는 중"을 달고,
+// 조각 자체는 보조기기에 노출하지 않는다.
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div
+      aria-hidden
+      className={cn('relative overflow-hidden rounded-md bg-muted', className)}
+    >
+      <div className="absolute inset-0 animate-skeleton-shimmer bg-gradient-to-r from-transparent via-foreground/8 to-transparent" />
+    </div>
+  )
+}
diff --git a/frontend/src/stackflow/activities/event-detail-activity.tsx b/frontend/src/stackflow/activities/event-detail-activity.tsx
index e6d9abb..e746368 100644
--- a/frontend/src/stackflow/activities/event-detail-activity.tsx
+++ b/frontend/src/stackflow/activities/event-detail-activity.tsx
@@ -3,6 +3,7 @@ import { useFlow } from '@stackflow/react'
 import type { ActivityComponentType } from '@stackflow/react'
 import { ActivityShell } from '@/stackflow/components/activity-shell'
 import { MonogramAvatar } from '@/components/ui/monogram-avatar'
+import { Skeleton } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 import { fetchEvent } from '@/lib/api/events'
 import { fetchPersons } from '@/lib/api/persons'
@@ -47,9 +48,34 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
   if (eventQuery.isPending) {
     return (
       <ActivityShell>
-        <p className="py-20 text-center text-sm text-muted-foreground">
-          불러오는 중…
-        </p>
+        <header className="grid shrink-0 grid-cols-3 items-center py-1">
+          <button
+            type="button"
+            onClick={() => pop()}
+            className="text-left text-lg font-extrabold text-muted-foreground"
+            aria-label="뒤로 가기"
+          >
+            ‹
+          </button>
+          <h1 className="text-center text-base font-extrabold">몽글 상세</h1>
+          <span aria-hidden className="text-right" />
+        </header>
+        <div role="status" aria-label="불러오는 중" className="mt-6">
+          <div className="flex items-start justify-between gap-2">
+            <Skeleton className="h-7 w-3/5" />
+            <Skeleton className="h-7 w-16 rounded-full" />
+          </div>
+          <Skeleton className="mt-3 h-4 w-32" />
+          <div className="mt-4 flex gap-2">
+            <Skeleton className="h-8 w-24 rounded-full" />
+            <Skeleton className="h-8 w-20 rounded-full" />
+          </div>
+          <div className="mt-5 space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-11/12" />
+            <Skeleton className="h-4 w-2/3" />
+          </div>
+        </div>
       </ActivityShell>
     )
   }
diff --git a/frontend/src/stackflow/activities/person-edit-activity.tsx b/frontend/src/stackflow/activities/person-edit-activity.tsx
index 469e9d5..f9febeb 100644
--- a/frontend/src/stackflow/activities/person-edit-activity.tsx
+++ b/frontend/src/stackflow/activities/person-edit-activity.tsx
@@ -6,6 +6,7 @@ import { ActivityShell } from '@/stackflow/components/activity-shell'
 import { FormPageHeader } from '@/components/layout/form-page-header'
 import { PersonForm, personToFormValues } from '@/components/person/person-form'
 import { ConfirmPopup } from '@/components/ui/confirm-popup'
+import { Skeleton } from '@/components/ui/skeleton'
 import { fetchChips } from '@/lib/api/chips'
 import { deletePerson, fetchPerson, updatePerson } from '@/lib/api/persons'
 import { formatPersonName } from '@/lib/format'
@@ -68,16 +69,47 @@ export const PersonEditActivity: ActivityComponentType<'PersonEdit'> = ({
     )?.requestSubmit()
   }
 
-  if (!Number.isFinite(id) || personQuery.isPending) {
+  if (!Number.isFinite(id)) {
     return (
       <ActivityShell layout="fixed">
         <p className="py-20 text-center text-sm text-muted-foreground">
-          {personQuery.isPending ? '불러오는 중…' : '잘못된 경로예요.'}
+          잘못된 경로예요.
         </p>
       </ActivityShell>
     )
   }
 
+  if (personQuery.isPending) {
+    return (
+      <ActivityShell layout="fixed" className="px-0">
+        <FormPageHeader
+          onBack={() => pop()}
+          title="프로필 수정"
+          className="px-5"
+        />
+        <div
+          role="status"
+          aria-label="불러오는 중"
+          className="mt-6 space-y-6 px-5"
+        >
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-40" />
+            <Skeleton className="h-4 w-52" />
+          </div>
+          <div className="flex justify-center py-2">
+            <Skeleton className="size-24 rounded-full" />
+          </div>
+          {[0, 1, 2].map((row) => (
+            <div key={row} className="space-y-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-11 w-full rounded-lg" />
+            </div>
+          ))}
+        </div>
+      </ActivityShell>
+    )
+  }
+
   if (!person || personQuery.isError) {
     return (
       <ActivityShell layout="fixed">
diff --git a/frontend/src/stackflow/activities/person/person-profile-view.tsx b/frontend/src/stackflow/activities/person/person-profile-view.tsx
index 2b72e12..315dd3a 100644
--- a/frontend/src/stackflow/activities/person/person-profile-view.tsx
+++ b/frontend/src/stackflow/activities/person/person-profile-view.tsx
@@ -10,6 +10,7 @@ import {
   ListGroupItem,
   ListGroupLabel,
 } from '@/components/ui/list-group'
+import { Skeleton } from '@/components/ui/skeleton'
 import { coloredTagStyle, tagChipClass } from '@/components/ui/tag-chip'
 import { fetchPersonTimeline } from '@/lib/api/events'
 import { deletePerson, fetchPerson } from '@/lib/api/persons'
@@ -59,14 +60,62 @@ export function PersonProfileView({
     },
   })
 
-  if (!Number.isFinite(id) || personQuery.isPending) {
+  if (!Number.isFinite(id)) {
     return (
       <p className="py-20 text-center text-sm text-muted-foreground">
-        {personQuery.isPending ? '불러오는 중…' : '잘못된 경로예요.'}
+        잘못된 경로예요.
       </p>
     )
   }
 
+  if (personQuery.isPending) {
+    return (
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <PersonPageHeader active="profile" onSelectView={onSelectView} />
+        <div
+          role="status"
+          aria-label="불러오는 중"
+          className="min-h-0 min-w-0 flex-1 space-y-6 overflow-y-auto pb-24"
+        >
+          <ListGroup>
+            <ListGroupItem withDivider={false} className="py-4">
+              <div className="flex items-start gap-4">
+                <Skeleton className="size-20 rounded-full" />
+                <div className="min-w-0 flex-1">
+                  <Skeleton className="h-7 w-32" />
+                  <Skeleton className="mt-2 h-4 w-16" />
+                  <div className="mt-2 flex gap-1.5">
+                    <Skeleton className="h-7 w-16 rounded-full" />
+                    <Skeleton className="h-7 w-20 rounded-full" />
+                  </div>
+                </div>
+              </div>
+            </ListGroupItem>
+          </ListGroup>
+          <ListGroup>
+            <ListGroupItem withDivider={false}>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-4">
+                {[0, 1, 2, 3].map((cell) => (
+                  <div key={cell}>
+                    <Skeleton className="h-3.5 w-16" />
+                    <Skeleton className="mt-1.5 h-5 w-20" />
+                  </div>
+                ))}
+              </div>
+            </ListGroupItem>
+          </ListGroup>
+          <ListGroup>
+            {[0, 1, 2].map((row) => (
+              <ListGroupItem key={row} withDivider={row < 2} className="py-3.5">
+                <Skeleton className="h-5 w-28" />
+              </ListGroupItem>
+            ))}
+          </ListGroup>
+        </div>
+      </div>
+    )
+  }
+
   if (!person) {
     return (
       <p className="py-20 text-center text-sm text-muted-foreground">
diff --git a/frontend/src/stackflow/activities/person/person-timeline-view.tsx b/frontend/src/stackflow/activities/person/person-timeline-view.tsx
index 30cba11..2880725 100644
--- a/frontend/src/stackflow/activities/person/person-timeline-view.tsx
+++ b/frontend/src/stackflow/activities/person/person-timeline-view.tsx
@@ -16,6 +16,7 @@ import { PersonPageHeader } from '@/components/person/person-page-header'
 import { MonogramAvatar } from '@/components/ui/monogram-avatar'
 import { Button } from '@/components/ui/button'
 import { ListGroup, ListGroupItem } from '@/components/ui/list-group'
+import { Skeleton } from '@/components/ui/skeleton'
 import { fetchChips } from '@/lib/api/chips'
 import { fetchPersonTimeline } from '@/lib/api/events'
 import { fetchPerson } from '@/lib/api/persons'
@@ -133,9 +134,36 @@ export function PersonTimelineView({
           <PersonPageHeader active="timeline" onSelectView={onSelectView} />
         }
       >
-        <p className="py-12 text-center text-sm text-muted-foreground">
-          불러오는 중…
-        </p>
+        <div role="status" aria-label="불러오는 중">
+          <div className="mb-4">
+            <Skeleton className="h-7 w-32" />
+            <Skeleton className="mt-2 h-3.5 w-40" />
+          </div>
+          <ListGroup className="mb-4">
+            <ListGroupItem
+              withDivider={false}
+              className="flex items-center gap-3 py-3"
+            >
+              <Skeleton className="size-10 rounded-full" />
+              <div className="flex gap-6">
+                {[0, 1].map((stat) => (
+                  <div key={stat}>
+                    <Skeleton className="h-5 w-14" />
+                    <Skeleton className="mt-1.5 h-3 w-16" />
+                  </div>
+                ))}
+              </div>
+            </ListGroupItem>
+          </ListGroup>
+          <ListGroup>
+            {[0, 1, 2].map((row) => (
+              <ListGroupItem key={row} withDivider={row < 2} className="py-3">
+                <Skeleton className="h-4 w-3/5" />
+                <Skeleton className="mt-2 h-3 w-24" />
+              </ListGroupItem>
+            ))}
+          </ListGroup>
+        </div>
       </TimelineScrollShell>
     )
   }
diff --git a/frontend/src/stackflow/activities/record-activity.tsx b/frontend/src/stackflow/activities/record-activity.tsx
index 4e939fd..d482c2f 100644
--- a/frontend/src/stackflow/activities/record-activity.tsx
+++ b/frontend/src/stackflow/activities/record-activity.tsx
@@ -11,6 +11,7 @@ import { MonogramAvatar } from '@/components/ui/monogram-avatar'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Skeleton } from '@/components/ui/skeleton'
 import { Textarea } from '@/components/ui/textarea'
 import { tagChipBaseClass } from '@/components/ui/tag-chip'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
@@ -326,9 +327,29 @@ export const RecordActivity: ActivityComponentType<'Record'> = ({ params }) => {
     return (
       <ActivityShell layout="fixed" className="px-0" presentation="modal">
         {recordHeader}
-        <p className="px-5 py-20 text-center text-sm text-muted-foreground">
-          불러오는 중…
-        </p>
+        <div
+          role="status"
+          aria-label="불러오는 중"
+          className="mt-6 space-y-6 px-5"
+        >
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-36" />
+            <Skeleton className="h-4 w-48" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-11 w-full rounded-lg" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-28 w-full rounded-lg" />
+          </div>
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-20 rounded-full" />
+            <Skeleton className="h-9 w-24 rounded-full" />
+            <Skeleton className="h-9 w-16 rounded-full" />
+          </div>
+        </div>
       </ActivityShell>
     )
   }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index ccc9854..3a72438 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -115,6 +115,19 @@
   --font-sans: var(--font-sans);
 }
 
+@theme {
+  --animate-skeleton-shimmer: skeleton-shimmer 1.8s ease-in-out infinite;
+
+  @keyframes skeleton-shimmer {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;