Initial commit: HMDesignSystem baseline

src/center/center-facility.stories.tsx

@@ -0,0 +1,78 @@
+import type { ComponentType } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { TunnelFacility } from "@hm-design/center-graphic"
+import {
+  BridgeReferenceDemo,
+  IntersectionReferenceDemo,
+  InterchangeReferenceDemo,
+  JunctionReferenceDemo,
+  LinkedFacilityReferenceDemo,
+  RoadsideReferenceDemo,
+  TunnelReferenceDemo,
+} from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owners: ui-viz docs/visualization/facility.md and facility-assets.md (128 approved SVG references, shipped unchanged).
+// The display scale (Q2b) is HOLD and Facility has no Selected / Hover state.
+const meta = {
+  title: "Center Graphic/Facility",
+  component: TunnelFacility,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof TunnelFacility>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+const page = (name: string, Demo: ComponentType): Story => ({
+  name,
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title={name}
+        description="CENTER 시설물 그래픽입니다. 승인 SVG Reference를 위치도(Position Map)와 실사화(Actual / Detail)로 표시합니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => <Demo />)}
+      </StorySection>
+    </StoryPage>
+  ),
+})
+
+export const Tunnel: Story = page("터널", TunnelReferenceDemo)
+export const Bridge: Story = page("교량", BridgeReferenceDemo)
+export const Intersection: Story = page("교차로", IntersectionReferenceDemo)
+export const Junction: Story = page("분기점", JunctionReferenceDemo)
+export const Interchange: Story = page("나들목", InterchangeReferenceDemo)
+export const Roadside: Story = page("휴게소 · 졸음쉼터", RoadsideReferenceDemo)
+// Linked facilities are a standalone section heading followed by item cards.
+// Keep the reference data/artwork and road-class grouping owned by the package.
+export const Linked: Story = {
+  ...page("연계 시설물", LinkedFacilityReferenceDemo),
+  render: () => (
+    <StoryPage className="sb-center-linked-page">
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="연계 시설물"
+        description={
+          <>
+            CENTER 시설물 그래픽입니다. 승인 SVG Reference를 위치도(Position Map)와 실사화(Actual / Detail)로 표시합니다.
+            <br />
+            {CENTER_BOUNDARY}
+          </>
+        }
+      />
+      {withRepresentation(() => <LinkedFacilityReferenceDemo />)}
+    </StoryPage>
+  ),
+}
+
+export const TunnelPlayground: Story = {
+  tags: ["verification"],
+  name: "직접 테스트 (터널)",
+  decorators: [withRepresentation],
+  args: { name: "대산2터널", secondaryText: "L=750m", variant: "positionMap", separated: false },
+  argTypes: { variant: { control: "inline-radio", options: ["positionMap", "actualDetail"] } },
+}