Initial commit: HMDesignSystem baseline

src/patterns/loading-screen.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, LoadingScreen } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
+// fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.
+
+function Fullscreen() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button appearance="outline" onClick={() => setOpen(true)}>전체화면 미리보기</Button>
+      {open ? (
+        <>
+          <LoadingScreen fullscreen>데이터를 불러오는 중</LoadingScreen>
+          <Button className="fixed top-7 right-7 z-[10000]" onClick={() => setOpen(false)}>닫기</Button>
+        </>
+      ) : null}
+    </>
+  )
+}
+
+const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// The inline specimen fills its parent inside the common page Inner.
+export const All: Story = {
+  name: "Loading Screen",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Loading Screen"
+        description="Dashboard 안에서 데이터를 불러오는 동안 표시하는 화면입니다. Inline은 부모 영역을 채우고, fullscreen은 viewport 전체를 덮습니다."
+      />
+      <StorySection title="Overview" description="Inline: 부모 영역(여기서는 공통 Inner 폭)을 채웁니다.">
+        <LoadingScreen />
+      </StorySection>
+      <StorySection title="Variants" description="사용자 문구와 좁은 부모 영역입니다.">
+        <StateBoard
+          states={[
+            { id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
+            { id: "narrow", label: "Narrow parent (240px)", children: <div style={{ width: 240 }}><LoadingScreen /></div> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="fullscreen은 viewport 전체를 덮습니다. 버튼으로 열고 오른쪽 위 닫기로 닫습니다.">
+        <Fullscreen />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }