@stn-uiux/pub-ui 0.1.57 → 0.1.59

package/dist/chunk-2WKT7X65.js

@@ -0,0 +1,407 @@
+// src/data/stnAlertCenter.ts
+var STN_ALERT_CENTER_INTRO = "GNB \uD558\uB2E8 \uC575\uCEE4\uC5D0\uC11C \uB808\uC774\uC5B4\uB85C \uD45C\uCD9C\uB418\uB294 \uC54C\uB9BC\uC13C\uD130 \uD328\uD134\uC785\uB2C8\uB2E4. \uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uC54C\uB9BC, \uC791\uC5C5 \uD56D\uBAA9, \uBC30\uD3EC \uD604\uD669 \uD0ED \uBC0F \uAC1C\uBCC4 \uD56D\uBAA9 \uC0C1\uC138 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC5F0\uB3D9\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4.";
+var STN_ALERT_CENTER_TAB_IDS = {
+  error: "gnb-alert-tab-error",
+  work: "gnb-alert-tab-work",
+  deploy: "gnb-alert-tab-deploy"
+};
+var STN_ALERT_CENTER_TABS = [
+  { id: "error", label: "\uC7A5\uC560", listWrapClass: "alert_list_wrap" },
+  { id: "work", label: "\uC791\uC5C5", listWrapClass: "work_list_wrap" },
+  { id: "deploy", label: "\uACF5\uC0AC", listWrapClass: "deploy_list_wrap" }
+];
+var STN_ALERT_CENTER_DEMO_ALERTS = [
+  {
+    id: "alert-1",
+    grade: "critical",
+    title: "Ping \uC218\uC9D1 \uC7A5\uC560",
+    description: "101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8",
+    occurredAt: "2026-05-29 14:23",
+    time: "11\uBD84 \uC804",
+    icon: "line/alert-circle",
+    unread: true
+  },
+  {
+    id: "alert-2",
+    grade: "major",
+    title: "\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)",
+    description: "\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC548\uBCF4\uC218\uC0AC\uACFC \uC885\uD569\uC0C1\uD669\uC2E4 / \uB300\uC5ED\uD3ED \uC784\uACC4\uCE58 95% \uCD08\uACFC \uAC10\uC9C0",
+    time: "3\uC77C \uC804",
+    icon: "line/arrow-narrow-down",
+    unread: true
+  },
+  {
+    id: "alert-3",
+    grade: "warning",
+    title: "NMS\uAC00 Ping \uC73C\uB85C \uC7A5\uBE44\uC758 \uB124\uD2B8\uC6CC\uD06C \uC0C1\uD0DC\uB97C \uC8FC\uAE30\uC801\uC73C\uB85C \uAC10\uC2DC \uC911 \uD328\uD0B7 \uC9C0\uC5F0 \uBC1C\uC0DD",
+    description: "85\uAE30\uB3D9\uB300(\uC11C\uBD80)_L2#1 70.70.197.44 / 85\uAE30\uB3D9\uB300(\uB9C8\uD3EC) \uCCAD\uC0AC \uBB34\uC120 AP \uC81C\uC5B4\uB9DD \uC5F0\uB3D9 \uC9C0\uC5F0 \uC0C1\uD0DC \uC9C0\uC18D",
+    time: "15\uBD84 \uC804",
+    icon: "line/wifi",
+    unread: true
+  },
+  {
+    id: "alert-4",
+    grade: "critical",
+    title: "BGP \uC138\uC158 \uB2E4\uC6B4 (Neighbor 10.20.1.1)",
+    description: "\uBCF8\uCCAD \uBC31\uBCF8 \uB77C\uC6B0\uD130 #1 / \uC815\uBCF4\uD1B5\uC2E0\uACFC / \uC8FC\uC694 \uB300\uC5ED \uD68C\uC120 \uC21C\uB2E8",
+    occurredAt: "2026-05-29 13:50",
+    time: "44\uBD84 \uC804",
+    icon: "line/alert-circle",
+    unread: true
+  },
+  {
+    id: "alert-5",
+    grade: "major",
+    title: "\uD3EC\uD2B8 \uB9C1\uD06C \uB2E4\uC6B4 (Te1/0/24)",
+    description: "\uB0A8\uB300\uBB38\uACBD\uCC30\uC11C_\uBCF4\uC548 L2 \uC2A4\uC704\uCE58 20.12.5.3 / \uC0DD\uD65C\uC548\uC804\uACFC",
+    time: "5\uC2DC\uAC04 \uC804",
+    icon: "line/arrow-narrow-down",
+    unread: false
+  },
+  {
+    id: "alert-6",
+    grade: "warning",
+    title: "\uBB34\uC120 AP \uD1B5\uC2E0 \uC9C0\uC5F0 (\uC751\uB2F5\uC2DC\uAC04 350ms \uCD08\uACFC)",
+    description: "\uC885\uB85C\uACBD\uCC30\uC11C \uBCF8\uAD00 3\uCE35 AP-04 / \uBB34\uC120 \uB124\uD2B8\uC6CC\uD06C \uBD80\uD558 \uBC1C\uC0DD",
+    time: "1\uC77C \uC804",
+    icon: "line/wifi",
+    unread: false
+  }
+];
+var STN_ALERT_CENTER_DEMO_WORK = [
+  {
+    typeLabel: "[ \uC791\uC5C5\uC608\uC57D ]",
+    text: "2026-03-05 16:01:00 \uC815\uAE30 \uC810\uAC80 \uC548\uB0B4 - \uC791\uC5C5\uC601\uC5ED / \uC601\uD5A5\uB3C4 : \uC11C\uBE44\uC2A4 \uC21C\uB2E8 \uBC1C\uC0DD \uAC00\uB2A5 / \uC791\uC5C5\uC790 : \uD64D\uAE38\uB3D9",
+    time: "11\uB2EC\uC804"
+  },
+  {
+    typeLabel: "[ \uAE34\uAE09\uC791\uC5C5 ]",
+    text: "\uC7A5\uBE44\uBA85 \uD328\uCE58 \uBC0F \uC7AC\uBD80\uD305 \uC608\uC815 \uC11C\uBE44\uC2A4 \uC601\uD5A5 \uBC94\uC704 \uD655\uC778 \uBC0F \uBCF5\uAD6C \uC791\uC5C5 \uC9C4\uD589 \uC608\uC815",
+    time: "3\uC77C\uC804"
+  },
+  {
+    typeLabel: "[ \uC791\uC5C5\uC9C4\uD589 ]",
+    text: "\uBCF8\uCCAD \uBC29\uD654\uBCBD \uC815\uCC45 \uC815\uAE30 \uB3D9\uAE30\uD654 \uC791\uC5C5 \u2014 \uC778\uAC00 \uB300\uC5ED \uC678 \uCC28\uB2E8 \uB8F0 \uAC31\uC2E0",
+    time: "2\uC2DC\uAC04\uC804"
+  },
+  {
+    typeLabel: "[ \uC791\uC5C5\uC644\uB8CC ]",
+    text: "\uB9DD\uBD84\uB9AC \uC5F0\uACC4 \uC2A4\uC704\uCE58 \uD38C\uC6E8\uC5B4 v4.12 \uD328\uCE58 \uC644\uB8CC \uBC0F \uBB34\uC911\uB2E8 \uC808\uCCB4 \uC2DC\uD5D8",
+    time: "\uC5B4\uC81C"
+  }
+];
+var STN_ALERT_CENTER_DEMO_DEPLOY = [
+  {
+    typeLabel: "[ \uACF5\uC0AC\uC608\uC57D ]",
+    text: "2026-03-05 16:01:00 \uC815\uAE30 \uC810\uAC80 \uC548\uB0B4 - \uACF5\uC0AC\uC601\uC5ED / \uC601\uD5A5\uB3C4 : \uC11C\uBE44\uC2A4 \uC21C\uB2E8 \uBC1C\uC0DD \uAC00\uB2A5",
+    time: "11\uB2EC\uC804"
+  },
+  {
+    typeLabel: "[ \uAE34\uAE09\uACF5\uC0AC ]",
+    text: "\uC7A5\uBE44\uBA85 \uD328\uCE58 \uBC0F \uC7AC\uBD80\uD305 \uC608\uC815 \u2014 \uC2DC\uC791 : 2026-03-05 16:01:00 / \uC608\uC0C1 \uC18C\uC694\uC2DC\uAC04 : 1\uC2DC\uAC04",
+    time: "3\uC77C\uC804"
+  },
+  {
+    typeLabel: "[ \uD1B5\uC2E0\uACF5\uC0AC ]",
+    text: "\uC81C2\uBCC4\uAD00 4\uCE35 \uAD11\uCF00\uC774\uBE14 \uD3EC\uC124 \uBC0F \uB178\uD6C4 \uD328\uCE58\uD328\uB110 \uC804\uBA74 \uAD50\uCCB4 \uACF5\uC0AC",
+    time: "1\uC8FC\uC77C\uC804"
+  },
+  {
+    typeLabel: "[ \uC804\uC6D0\uACF5\uC0AC ]",
+    text: "\uC804\uC0B0\uC2E4 \uC218\uBCC0\uC804\uC124\uBE44 \uC815\uAE30 \uC548\uC804 \uC810\uAC80 \uBC0F \uBE44\uC0C1 \uBC1C\uC804\uAE30 \uAC00\uB3D9 \uC2DC\uD5D8",
+    time: "2\uC8FC\uC77C\uC804"
+  }
+];
+var STN_ALERT_CENTER_INTEGRATION_USAGE = `import {
+  StnAlertCenterPanel,
+  StnSideNavigation,
+  StnLayerShell,
+} from '@stn-uiux/pub-ui-react'
+
+export function AppChrome() {
+  const [alertOpen, setAlertOpen] = useState(false)
+
+  return (
+    <StnLayerShell
+      gnb={
+        <StnSideNavigation>
+          <StnSideNavigation.Header>
+            <StnSideNavigation.Logo />
+            <StnSideNavigation.Toggle />
+          </StnSideNavigation.Header>
+          <StnSideNavigation.Menu>
+            <StnSideNavigation.Item label="\uB300\uC2DC\uBCF4\uB4DC" active />
+          </StnSideNavigation.Menu>
+          <StnSideNavigation.Spacer />
+          <StnSideNavigation.Footer curved>
+            <StnSideNavigation.Watermark />
+            <StnSideNavigation.Item
+              label="\uC54C\uB9BC"
+              badge={12}
+              onClick={() => setAlertOpen(!alertOpen)}
+            />
+          </StnSideNavigation.Footer>
+        </StnSideNavigation>
+      }
+    >
+      <main>\u2026\uBCF8\uBB38\u2026</main>
+      {alertOpen && (
+        <StnAlertCenterPanel
+          alerts={alerts}
+          workItems={workItems}
+          deployItems={deployItems}
+          onClose={() => setAlertOpen(false)}
+        />
+      )}
+    </StnLayerShell>
+  )
+}`;
+var STN_GNB_ALERT_INTEGRATION_USAGE = STN_ALERT_CENTER_INTEGRATION_USAGE;
+var STN_ALERT_CENTER_USAGE = `import { useState } from 'react'
+import {
+  StnAlertCenterPanel,
+  StnAlertCard,
+  StnCard,
+  StnChip,
+  StnIcon,
+  StnStack,
+  type StnAlertCenterAlertItem,
+  type StnAlertCenterWorkItem,
+} from '@stn-uiux/pub-ui-react'
+
+// =================================================================
+// 1. StnCard\uB97C \uC0AC\uC6A9\uD55C \uAC1C\uBCC4 \uC54C\uB9BC \uCE74\uB4DC \uCEE4\uC2A4\uD140 (StnAlertCard \uB0B4\uBD80 \uC870\uB9BD \uAD6C\uC870)
+// =================================================================
+export function CustomAlertCard({ item }: { item: StnAlertCenterAlertItem }) {
+  return (
+    <StnCard
+      variant="elevated"
+      radius="md"
+      padding="md"
+      interactive
+      className="stn-alert-card"
+      onClick={() => console.log('\uCE74\uB4DC \uD074\uB9AD:', item)}
+    >
+      <div className="stn-alert-card__row">
+        {/* \uC2EC\uAC01\uB3C4 \uC544\uC774\uCF58 */}
+        <StnIcon
+          name={item.icon || 'line/alert-circle'}
+          size={24}
+          color={\`var(--stn-grade-\${item.grade}, var(--stn-primary))\`}
+          className="stn-alert-card__icon"
+        />
+
+        {/* \uBCF8\uBB38: \uB4F1\uAE09 \uBC30\uC9C0 + \uC81C\uBAA9 + \uC124\uBA85 + \uBC1C\uC0DD\uC2DC\uAC04 */}
+        <div className="stn-alert-card__body">
+          <StnStack direction="row" alignItems="center" spacing={1} className="stn-alert-card__header-line">
+            <StnChip shape="pill" size="sm" variant="filled" color={item.grade}>
+              {item.grade === 'critical' ? 'CR' : item.grade === 'major' ? 'MJ' : 'WR'}
+            </StnChip>
+            <h4 className="stn-alert-card__title ellipsis" title={item.title}>
+              <span className="stn-alert-card__text-inner">{item.title}</span>
+            </h4>
+          </StnStack>
+
+          <StnStack direction="row" alignItems="center" spacing={2} wrap="wrap" className="stn-alert-card__desc-line">
+            <p className="stn-alert-card__desc marquee" title={item.description}>
+              <span className="stn-alert-card__text-inner">{item.description}</span>
+            </p>
+            {item.occurredAt && (
+              <StnChip shape="pill" size="sm" variant="subtle" color="critical" className="stn-alert-card__time-chip">
+                \uBC1C\uC0DD\uC2DC\uAC04: {item.occurredAt}
+              </StnChip>
+            )}
+          </StnStack>
+        </div>
+
+        {/* \uC218\uC2E0 \uC2DC\uAC04 & \uC77D\uC9C0 \uC54A\uC74C \uB2F7 */}
+        <div className="stn-alert-card__meta">
+          <span className="stn-alert-card__time">{item.time}</span>
+          {item.unread && (
+            <span
+              className={\`stn-alert-card__dot stn-alert-card__dot--\${item.grade}\`}
+              aria-label="\uC77D\uC9C0 \uC54A\uC74C"
+            />
+          )}
+        </div>
+      </div>
+    </StnCard>
+  )
+}
+
+// =================================================================
+// 2. \uC644\uC131\uD615 \uC54C\uB9BC\uC13C\uD130 \uD328\uB110 (StnAlertCenterPanel \uC804\uCCB4 \uB80C\uB354\uB9C1)
+// =================================================================
+export function AlertCenterDemo() {
+  const [open, setOpen] = useState(true)
+
+  const alerts: StnAlertCenterAlertItem[] = [
+    {
+      id: 'alert-1',
+      grade: 'critical',
+      title: 'Ping \uC218\uC9D1 \uC7A5\uC560',
+      description: '101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8',
+      occurredAt: '2026-05-29 14:23',
+      time: '11\uBD84 \uC804',
+      unread: true,
+    },
+    {
+      id: 'alert-2',
+      grade: 'major',
+      title: '\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)',
+      description: '\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC885\uD569\uC0C1\uD669\uC2E4',
+      time: '3\uC77C \uC804',
+      unread: true,
+    },
+  ]
+
+  const workItems: StnAlertCenterWorkItem[] = [
+    {
+      id: 'work-1',
+      typeLabel: '\uC815\uAE30\uC810\uAC80',
+      text: 'DB \uC11C\uBC84 \uBC31\uC5C5 \uBC0F \uC778\uB371\uC2A4 \uC7AC\uAD6C\uC131 \uC791\uC5C5 \uC9C4\uD589 (02:00 ~ 04:00)',
+      time: '\uC624\uB298 02:00',
+    },
+  ]
+
+  const deployItems: StnAlertCenterWorkItem[] = [
+    {
+      id: 'deploy-1',
+      typeLabel: '\uD68C\uC120\uACF5\uC0AC',
+      text: '\uC11C\uCD08 IDC \uAD11\uCF00\uC774\uBE14 \uC778\uC785 \uBC0F \uC120\uB85C \uC774\uC911\uD654 \uACF5\uC0AC',
+      time: '\uB0B4\uC77C 09:00',
+    },
+  ]
+
+  if (!open) return null
+
+  return (
+    <StnAlertCenterPanel
+      size="md"
+      defaultTab="error"
+      titleOverflow="ellipsis"  // \uC81C\uBAA9: \uB9D0\uC904\uC784\uD45C (...)
+      descOverflow="marquee"    // \uB0B4\uC6A9: \uC804\uAD11\uD310 \uD758\uB7EC\uAC00\uAE30
+      alerts={alerts}
+      workItems={workItems}
+      deployItems={deployItems}
+      onClose={() => setOpen(false)}
+      onMarkAllAsRead={() => console.log('\uBAA8\uB450 \uC77D\uC74C')}
+      onManageSettings={() => console.log('\uC124\uC815 \uD398\uC774\uC9C0 \uC774\uB3D9')}
+      onItemClick={(item) => console.log('\uC54C\uB9BC \uC0C1\uC138 \uD074\uB9AD:', item)}
+    />
+  )
+}`;
+var STN_ALERT_CENTER_USAGE_HTML = `<!-- STN Alert Center \u2014 \uD328\uB110 \uD06C\uAE30(md) + \uD0C0\uC774\uD2C0(ellipsis) + \uB0B4\uC6A9(marquee) -->
+<aside class="stn-alert-center md title-ellipsis desc-marquee" data-stn-alert-center>
+  <!-- 1. Header (\uD0C0\uC774\uD2C0 \xB7 \uC54C\uB9BC \uCE74\uC6B4\uD2B8 \xB7 \uD0ED \uC138\uADF8\uBA3C\uD2B8 \xB7 \uC81C\uC5B4 \uBC84\uD2BC) -->
+  <header class="stn-alert-center__header">
+    <div class="stn-alert-center__header-left">
+      <span class="stn-icon stn-icon--bell" aria-hidden="true"></span>
+      <h2 class="stn-alert-center__title">\uC54C\uB9BC\uC13C\uD130</h2>
+      <span class="stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--primary">6</span>
+    </div>
+
+    <!-- \uD0ED \uC804\uD658 \uC138\uADF8\uBA3C\uD2B8 \uBC84\uD2BC -->
+    <nav class="stn-segmented md" aria-label="\uC54C\uB9BC \uAD6C\uBD84">
+      <div class="stn-segmented__list" role="tablist">
+        <button type="button" role="tab" aria-selected="true" class="stn-segmented__item is-selected">\uC7A5\uC560</button>
+        <button type="button" role="tab" aria-selected="false" class="stn-segmented__item">\uC791\uC5C5</button>
+        <button type="button" role="tab" aria-selected="false" class="stn-segmented__item">\uACF5\uC0AC</button>
+      </div>
+    </nav>
+
+    <!-- \uC6B0\uCE21 \uC81C\uC5B4 \uC561\uC158 -->
+    <div class="stn-alert-center__header-right">
+      <button type="button" class="stn-btn stn-btn--text sm">
+        <span class="stn-icon stn-icon--check-circle" aria-hidden="true"></span>
+        <span>\uBAA8\uB450 \uC77D\uC74C</span>
+      </button>
+      <div class="stn-alert-center__divider" aria-hidden="true"></div>
+      <button type="button" class="stn-btn stn-btn--text sm stn-btn--icon-only" aria-label="\uB2EB\uAE30">
+        <span class="stn-icon stn-icon--x" aria-hidden="true"></span>
+      </button>
+    </div>
+  </header>
+
+  <!-- 2. Notification List (\uC2A4\uD06C\uB864 \uC601\uC5ED) -->
+  <div class="stn-alert-center__list-wrap">
+    <ul class="stn-alert-center__list">
+      <!-- \uC54C\uB9BC \uCE74\uB4DC 1 (Critical \uB4F1\uAE09 / \uBBF8\uD655\uC778) -->
+      <li>
+        <article class="stn-card elevated md interactive stn-alert-card">
+          <div class="stn-alert-card__row">
+            <span class="stn-icon stn-alert-card__icon" style="color: var(--stn-grade-critical, var(--stn-primary));"></span>
+            <div class="stn-alert-card__body">
+              <div class="stn-alert-card__header-line">
+                <span class="stn-chip stn-chip--pill sm stn-chip--filled stn-chip--critical">CR</span>
+                <span class="stn-alert-card__title ellipsis" title="Ping \uC218\uC9D1 \uC7A5\uC560">
+                  <span class="stn-alert-card__text-inner">Ping \uC218\uC9D1 \uC7A5\uC560</span>
+                </span>
+              </div>
+              <div class="stn-alert-card__desc-line">
+                <span class="stn-alert-card__desc marquee" title="101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8">
+                  <span class="stn-alert-card__text-inner">101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8</span>
+                </span>
+                <span class="stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--critical stn-alert-card__time-chip">
+                  \uBC1C\uC0DD\uC2DC\uAC04: 2026-05-29 14:23
+                </span>
+              </div>
+            </div>
+            <div class="stn-alert-card__meta">
+              <time class="stn-alert-card__time">11\uBD84 \uC804</time>
+              <span class="stn-alert-card__dot stn-alert-card__dot--critical" aria-label="\uC77D\uC9C0 \uC54A\uC74C"></span>
+            </div>
+          </div>
+        </article>
+      </li>
+
+      <!-- \uC54C\uB9BC \uCE74\uB4DC 2 (Major \uB4F1\uAE09 / \uAE34 \uD14D\uC2A4\uD2B8 \uC624\uBC84\uD50C\uB85C\uC6B0 \uC0D8\uD50C) -->
+      <li>
+        <article class="stn-card elevated md interactive stn-alert-card">
+          <div class="stn-alert-card__row">
+            <span class="stn-icon stn-alert-card__icon" style="color: var(--stn-grade-major, var(--stn-primary));"></span>
+            <div class="stn-alert-card__body">
+              <div class="stn-alert-card__header-line">
+                <span class="stn-chip stn-chip--pill sm stn-chip--filled stn-chip--major">MJ</span>
+                <span class="stn-alert-card__title ellipsis" title="\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)">
+                  <span class="stn-alert-card__text-inner">\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)</span>
+                </span>
+              </div>
+              <div class="stn-alert-card__desc-line">
+                <span class="stn-alert-card__desc marquee" title="\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC548\uBCF4\uC218\uC0AC\uACFC \uC885\uD569\uC0C1\uD669\uC2E4 / \uB300\uC5ED\uD3ED \uC784\uACC4\uCE58 95% \uCD08\uACFC \uAC10\uC9C0">
+                  <span class="stn-alert-card__text-inner">\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC548\uBCF4\uC218\uC0AC\uACFC \uC885\uD569\uC0C1\uD669\uC2E4 / \uB300\uC5ED\uD3ED \uC784\uACC4\uCE58 95% \uCD08\uACFC \uAC10\uC9C0</span>
+                </span>
+              </div>
+            </div>
+            <div class="stn-alert-card__meta">
+              <time class="stn-alert-card__time">3\uC77C \uC804</time>
+              <span class="stn-alert-card__dot stn-alert-card__dot--major" aria-label="\uC77D\uC9C0 \uC54A\uC74C"></span>
+            </div>
+          </div>
+        </article>
+      </li>
+    </ul>
+  </div>
+
+  <!-- 3. Footer (\uD558\uB2E8 \uC124\uC815 \uAD00\uB9AC \uB9C1\uD06C) -->
+  <footer class="stn-alert-center__footer">
+    <button type="button" class="stn-alert-center__footer-link">
+      <span>\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC</span>
+      <span class="stn-icon stn-icon--chevron-right" aria-hidden="true"></span>
+    </button>
+  </footer>
+</aside>`;
+
+export {
+  STN_ALERT_CENTER_INTRO,
+  STN_ALERT_CENTER_TAB_IDS,
+  STN_ALERT_CENTER_TABS,
+  STN_ALERT_CENTER_DEMO_ALERTS,
+  STN_ALERT_CENTER_DEMO_WORK,
+  STN_ALERT_CENTER_DEMO_DEPLOY,
+  STN_ALERT_CENTER_INTEGRATION_USAGE,
+  STN_GNB_ALERT_INTEGRATION_USAGE,
+  STN_ALERT_CENTER_USAGE,
+  STN_ALERT_CENTER_USAGE_HTML
+};
+//# sourceMappingURL=chunk-2WKT7X65.js.map

package/dist/chunk-2WKT7X65.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnAlertCenter.ts"],"sourcesContent":["import type { StnChipGrade } from './stnChip'\n\nexport const STN_ALERT_CENTER_INTRO =\n  'GNB 하단 앵커에서 레이어로 표출되는 알림센터 패턴입니다. 실시간 장애 알림, 작업 항목, 배포 현황 탭 및 개별 항목 상세 다이얼로그 연동을 제공합니다.'\n\nexport type StnAlertCenterTab = 'error' | 'work' | 'deploy'\nexport type StnAlertCenterSize = 'sm' | 'md' | 'lg'\nexport type StnAlertCenterTextOverflow = 'wrap' | 'ellipsis' | 'marquee'\n\n/** Pub CSS `:has(#gnb-alert-tab-*)` 와 호환 — 페이지당 1패널이면 기본값 사용 */\nexport const STN_ALERT_CENTER_TAB_IDS: Record<StnAlertCenterTab, string> = {\n  error: 'gnb-alert-tab-error',\n  work: 'gnb-alert-tab-work',\n  deploy: 'gnb-alert-tab-deploy',\n}\n\nexport const STN_ALERT_CENTER_TABS: readonly {\n  id: StnAlertCenterTab\n  label: string\n  listWrapClass: string\n}[] = [\n  { id: 'error', label: '장애', listWrapClass: 'alert_list_wrap' },\n  { id: 'work', label: '작업', listWrapClass: 'work_list_wrap' },\n  { id: 'deploy', label: '공사', listWrapClass: 'deploy_list_wrap' },\n]\n\nexport type StnAlertCenterAlertItem = {\n  id?: string\n  grade: StnChipGrade\n  title: string\n  description: string\n  time: string\n  icon?: string\n  occurredAt?: string\n  unread?: boolean\n}\n\nexport type StnAlertCenterWorkItem = {\n  id?: string\n  typeLabel: string\n  text: string\n  time: string\n}\n\nexport const STN_ALERT_CENTER_DEMO_ALERTS: StnAlertCenterAlertItem[] = [\n  {\n    id: 'alert-1',\n    grade: 'critical',\n    title: 'Ping 수집 장애',\n    description: '101경비단_UPS 10.15.71.161 / 101경비단',\n    occurredAt: '2026-05-29 14:23',\n    time: '11분 전',\n    icon: 'line/alert-circle',\n    unread: true,\n  },\n  {\n    id: 'alert-2',\n    grade: 'major',\n    title: '인터페이스 OperStatus 다운 (포트 Te1/0/24 링크 순단 및 자동 우회 경로 절체 실패)',\n    description: '수사지원청사_업무망 L3(Stack)#2 50.52.41.2 / 안보수사과 종합상황실 / 대역폭 임계치 95% 초과 감지',\n    time: '3일 전',\n    icon: 'line/arrow-narrow-down',\n    unread: true,\n  },\n  {\n    id: 'alert-3',\n    grade: 'warning',\n    title: 'NMS가 Ping 으로 장비의 네트워크 상태를 주기적으로 감시 중 패킷 지연 발생',\n    description: '85기동대(서부)_L2#1 70.70.197.44 / 85기동대(마포) 청사 무선 AP 제어망 연동 지연 상태 지속',\n    time: '15분 전',\n    icon: 'line/wifi',\n    unread: true,\n  },\n  {\n    id: 'alert-4',\n    grade: 'critical',\n    title: 'BGP 세션 다운 (Neighbor 10.20.1.1)',\n    description: '본청 백본 라우터 #1 / 정보통신과 / 주요 대역 회선 순단',\n    occurredAt: '2026-05-29 13:50',\n    time: '44분 전',\n    icon: 'line/alert-circle',\n    unread: true,\n  },\n  {\n    id: 'alert-5',\n    grade: 'major',\n    title: '포트 링크 다운 (Te1/0/24)',\n    description: '남대문경찰서_보안 L2 스위치 20.12.5.3 / 생활안전과',\n    time: '5시간 전',\n    icon: 'line/arrow-narrow-down',\n    unread: false,\n  },\n  {\n    id: 'alert-6',\n    grade: 'warning',\n    title: '무선 AP 통신 지연 (응답시간 350ms 초과)',\n    description: '종로경찰서 본관 3층 AP-04 / 무선 네트워크 부하 발생',\n    time: '1일 전',\n    icon: 'line/wifi',\n    unread: false,\n  },\n]\n\nexport const STN_ALERT_CENTER_DEMO_WORK: StnAlertCenterWorkItem[] = [\n  {\n    typeLabel: '[ 작업예약 ]',\n    text: '2026-03-05 16:01:00 정기 점검 안내 - 작업영역 / 영향도 : 서비스 순단 발생 가능 / 작업자 : 홍길동',\n    time: '11달전',\n  },\n  {\n    typeLabel: '[ 긴급작업 ]',\n    text: '장비명 패치 및 재부팅 예정 서비스 영향 범위 확인 및 복구 작업 진행 예정',\n    time: '3일전',\n  },\n  {\n    typeLabel: '[ 작업진행 ]',\n    text: '본청 방화벽 정책 정기 동기화 작업 — 인가 대역 외 차단 룰 갱신',\n    time: '2시간전',\n  },\n  {\n    typeLabel: '[ 작업완료 ]',\n    text: '망분리 연계 스위치 펌웨어 v4.12 패치 완료 및 무중단 절체 시험',\n    time: '어제',\n  },\n]\n\nexport const STN_ALERT_CENTER_DEMO_DEPLOY: StnAlertCenterWorkItem[] = [\n  {\n    typeLabel: '[ 공사예약 ]',\n    text: '2026-03-05 16:01:00 정기 점검 안내 - 공사영역 / 영향도 : 서비스 순단 발생 가능',\n    time: '11달전',\n  },\n  {\n    typeLabel: '[ 긴급공사 ]',\n    text: '장비명 패치 및 재부팅 예정 — 시작 : 2026-03-05 16:01:00 / 예상 소요시간 : 1시간',\n    time: '3일전',\n  },\n  {\n    typeLabel: '[ 통신공사 ]',\n    text: '제2별관 4층 광케이블 포설 및 노후 패치패널 전면 교체 공사',\n    time: '1주일전',\n  },\n  {\n    typeLabel: '[ 전원공사 ]',\n    text: '전산실 수변전설비 정기 안전 점검 및 비상 발전기 가동 시험',\n    time: '2주일전',\n  },\n]\n\nexport const STN_ALERT_CENTER_INTEGRATION_USAGE = `import {\n  StnAlertCenterPanel,\n  StnSideNavigation,\n  StnLayerShell,\n} from '@stn-uiux/pub-ui-react'\n\nexport function AppChrome() {\n  const [alertOpen, setAlertOpen] = useState(false)\n\n  return (\n    <StnLayerShell\n      gnb={\n        <StnSideNavigation>\n          <StnSideNavigation.Header>\n            <StnSideNavigation.Logo />\n            <StnSideNavigation.Toggle />\n          </StnSideNavigation.Header>\n          <StnSideNavigation.Menu>\n            <StnSideNavigation.Item label=\"대시보드\" active />\n          </StnSideNavigation.Menu>\n          <StnSideNavigation.Spacer />\n          <StnSideNavigation.Footer curved>\n            <StnSideNavigation.Watermark />\n            <StnSideNavigation.Item\n              label=\"알림\"\n              badge={12}\n              onClick={() => setAlertOpen(!alertOpen)}\n            />\n          </StnSideNavigation.Footer>\n        </StnSideNavigation>\n      }\n    >\n      <main>…본문…</main>\n      {alertOpen && (\n        <StnAlertCenterPanel\n          alerts={alerts}\n          workItems={workItems}\n          deployItems={deployItems}\n          onClose={() => setAlertOpen(false)}\n        />\n      )}\n    </StnLayerShell>\n  )\n}`\n\nexport const STN_GNB_ALERT_INTEGRATION_USAGE = STN_ALERT_CENTER_INTEGRATION_USAGE\n\nexport const STN_ALERT_CENTER_USAGE = `import { useState } from 'react'\nimport {\n  StnAlertCenterPanel,\n  StnAlertCard,\n  StnCard,\n  StnChip,\n  StnIcon,\n  StnStack,\n  type StnAlertCenterAlertItem,\n  type StnAlertCenterWorkItem,\n} from '@stn-uiux/pub-ui-react'\n\n// =================================================================\n// 1. StnCard를 사용한 개별 알림 카드 커스텀 (StnAlertCard 내부 조립 구조)\n// =================================================================\nexport function CustomAlertCard({ item }: { item: StnAlertCenterAlertItem }) {\n  return (\n    <StnCard\n      variant=\"elevated\"\n      radius=\"md\"\n      padding=\"md\"\n      interactive\n      className=\"stn-alert-card\"\n      onClick={() => console.log('카드 클릭:', item)}\n    >\n      <div className=\"stn-alert-card__row\">\n        {/* 심각도 아이콘 */}\n        <StnIcon\n          name={item.icon || 'line/alert-circle'}\n          size={24}\n          color={\\`var(--stn-grade-\\${item.grade}, var(--stn-primary))\\`}\n          className=\"stn-alert-card__icon\"\n        />\n\n        {/* 본문: 등급 배지 + 제목 + 설명 + 발생시간 */}\n        <div className=\"stn-alert-card__body\">\n          <StnStack direction=\"row\" alignItems=\"center\" spacing={1} className=\"stn-alert-card__header-line\">\n            <StnChip shape=\"pill\" size=\"sm\" variant=\"filled\" color={item.grade}>\n              {item.grade === 'critical' ? 'CR' : item.grade === 'major' ? 'MJ' : 'WR'}\n            </StnChip>\n            <h4 className=\"stn-alert-card__title ellipsis\" title={item.title}>\n              <span className=\"stn-alert-card__text-inner\">{item.title}</span>\n            </h4>\n          </StnStack>\n\n          <StnStack direction=\"row\" alignItems=\"center\" spacing={2} wrap=\"wrap\" className=\"stn-alert-card__desc-line\">\n            <p className=\"stn-alert-card__desc marquee\" title={item.description}>\n              <span className=\"stn-alert-card__text-inner\">{item.description}</span>\n            </p>\n            {item.occurredAt && (\n              <StnChip shape=\"pill\" size=\"sm\" variant=\"subtle\" color=\"critical\" className=\"stn-alert-card__time-chip\">\n                발생시간: {item.occurredAt}\n              </StnChip>\n            )}\n          </StnStack>\n        </div>\n\n        {/* 수신 시간 & 읽지 않음 닷 */}\n        <div className=\"stn-alert-card__meta\">\n          <span className=\"stn-alert-card__time\">{item.time}</span>\n          {item.unread && (\n            <span\n              className={\\`stn-alert-card__dot stn-alert-card__dot--\\${item.grade}\\`}\n              aria-label=\"읽지 않음\"\n            />\n          )}\n        </div>\n      </div>\n    </StnCard>\n  )\n}\n\n// =================================================================\n// 2. 완성형 알림센터 패널 (StnAlertCenterPanel 전체 렌더링)\n// =================================================================\nexport function AlertCenterDemo() {\n  const [open, setOpen] = useState(true)\n\n  const alerts: StnAlertCenterAlertItem[] = [\n    {\n      id: 'alert-1',\n      grade: 'critical',\n      title: 'Ping 수집 장애',\n      description: '101경비단_UPS 10.15.71.161 / 101경비단',\n      occurredAt: '2026-05-29 14:23',\n      time: '11분 전',\n      unread: true,\n    },\n    {\n      id: 'alert-2',\n      grade: 'major',\n      title: '인터페이스 OperStatus 다운 (포트 Te1/0/24 링크 순단 및 자동 우회 경로 절체 실패)',\n      description: '수사지원청사_업무망 L3(Stack)#2 50.52.41.2 / 종합상황실',\n      time: '3일 전',\n      unread: true,\n    },\n  ]\n\n  const workItems: StnAlertCenterWorkItem[] = [\n    {\n      id: 'work-1',\n      typeLabel: '정기점검',\n      text: 'DB 서버 백업 및 인덱스 재구성 작업 진행 (02:00 ~ 04:00)',\n      time: '오늘 02:00',\n    },\n  ]\n\n  const deployItems: StnAlertCenterWorkItem[] = [\n    {\n      id: 'deploy-1',\n      typeLabel: '회선공사',\n      text: '서초 IDC 광케이블 인입 및 선로 이중화 공사',\n      time: '내일 09:00',\n    },\n  ]\n\n  if (!open) return null\n\n  return (\n    <StnAlertCenterPanel\n      size=\"md\"\n      defaultTab=\"error\"\n      titleOverflow=\"ellipsis\"  // 제목: 말줄임표 (...)\n      descOverflow=\"marquee\"    // 내용: 전광판 흘러가기\n      alerts={alerts}\n      workItems={workItems}\n      deployItems={deployItems}\n      onClose={() => setOpen(false)}\n      onMarkAllAsRead={() => console.log('모두 읽음')}\n      onManageSettings={() => console.log('설정 페이지 이동')}\n      onItemClick={(item) => console.log('알림 상세 클릭:', item)}\n    />\n  )\n}`\n\nexport const STN_ALERT_CENTER_USAGE_HTML = `<!-- STN Alert Center — 패널 크기(md) + 타이틀(ellipsis) + 내용(marquee) -->\n<aside class=\"stn-alert-center md title-ellipsis desc-marquee\" data-stn-alert-center>\n  <!-- 1. Header (타이틀 · 알림 카운트 · 탭 세그먼트 · 제어 버튼) -->\n  <header class=\"stn-alert-center__header\">\n    <div class=\"stn-alert-center__header-left\">\n      <span class=\"stn-icon stn-icon--bell\" aria-hidden=\"true\"></span>\n      <h2 class=\"stn-alert-center__title\">알림센터</h2>\n      <span class=\"stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--primary\">6</span>\n    </div>\n\n    <!-- 탭 전환 세그먼트 버튼 -->\n    <nav class=\"stn-segmented md\" aria-label=\"알림 구분\">\n      <div class=\"stn-segmented__list\" role=\"tablist\">\n        <button type=\"button\" role=\"tab\" aria-selected=\"true\" class=\"stn-segmented__item is-selected\">장애</button>\n        <button type=\"button\" role=\"tab\" aria-selected=\"false\" class=\"stn-segmented__item\">작업</button>\n        <button type=\"button\" role=\"tab\" aria-selected=\"false\" class=\"stn-segmented__item\">공사</button>\n      </div>\n    </nav>\n\n    <!-- 우측 제어 액션 -->\n    <div class=\"stn-alert-center__header-right\">\n      <button type=\"button\" class=\"stn-btn stn-btn--text sm\">\n        <span class=\"stn-icon stn-icon--check-circle\" aria-hidden=\"true\"></span>\n        <span>모두 읽음</span>\n      </button>\n      <div class=\"stn-alert-center__divider\" aria-hidden=\"true\"></div>\n      <button type=\"button\" class=\"stn-btn stn-btn--text sm stn-btn--icon-only\" aria-label=\"닫기\">\n        <span class=\"stn-icon stn-icon--x\" aria-hidden=\"true\"></span>\n      </button>\n    </div>\n  </header>\n\n  <!-- 2. Notification List (스크롤 영역) -->\n  <div class=\"stn-alert-center__list-wrap\">\n    <ul class=\"stn-alert-center__list\">\n      <!-- 알림 카드 1 (Critical 등급 / 미확인) -->\n      <li>\n        <article class=\"stn-card elevated md interactive stn-alert-card\">\n          <div class=\"stn-alert-card__row\">\n            <span class=\"stn-icon stn-alert-card__icon\" style=\"color: var(--stn-grade-critical, var(--stn-primary));\"></span>\n            <div class=\"stn-alert-card__body\">\n              <div class=\"stn-alert-card__header-line\">\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--filled stn-chip--critical\">CR</span>\n                <span class=\"stn-alert-card__title ellipsis\" title=\"Ping 수집 장애\">\n                  <span class=\"stn-alert-card__text-inner\">Ping 수집 장애</span>\n                </span>\n              </div>\n              <div class=\"stn-alert-card__desc-line\">\n                <span class=\"stn-alert-card__desc marquee\" title=\"101경비단_UPS 10.15.71.161 / 101경비단\">\n                  <span class=\"stn-alert-card__text-inner\">101경비단_UPS 10.15.71.161 / 101경비단</span>\n                </span>\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--critical stn-alert-card__time-chip\">\n                  발생시간: 2026-05-29 14:23\n                </span>\n              </div>\n            </div>\n            <div class=\"stn-alert-card__meta\">\n              <time class=\"stn-alert-card__time\">11분 전</time>\n              <span class=\"stn-alert-card__dot stn-alert-card__dot--critical\" aria-label=\"읽지 않음\"></span>\n            </div>\n          </div>\n        </article>\n      </li>\n\n      <!-- 알림 카드 2 (Major 등급 / 긴 텍스트 오버플로우 샘플) -->\n      <li>\n        <article class=\"stn-card elevated md interactive stn-alert-card\">\n          <div class=\"stn-alert-card__row\">\n            <span class=\"stn-icon stn-alert-card__icon\" style=\"color: var(--stn-grade-major, var(--stn-primary));\"></span>\n            <div class=\"stn-alert-card__body\">\n              <div class=\"stn-alert-card__header-line\">\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--filled stn-chip--major\">MJ</span>\n                <span class=\"stn-alert-card__title ellipsis\" title=\"인터페이스 OperStatus 다운 (포트 Te1/0/24 링크 순단 및 자동 우회 경로 절체 실패)\">\n                  <span class=\"stn-alert-card__text-inner\">인터페이스 OperStatus 다운 (포트 Te1/0/24 링크 순단 및 자동 우회 경로 절체 실패)</span>\n                </span>\n              </div>\n              <div class=\"stn-alert-card__desc-line\">\n                <span class=\"stn-alert-card__desc marquee\" title=\"수사지원청사_업무망 L3(Stack)#2 50.52.41.2 / 안보수사과 종합상황실 / 대역폭 임계치 95% 초과 감지\">\n                  <span class=\"stn-alert-card__text-inner\">수사지원청사_업무망 L3(Stack)#2 50.52.41.2 / 안보수사과 종합상황실 / 대역폭 임계치 95% 초과 감지</span>\n                </span>\n              </div>\n            </div>\n            <div class=\"stn-alert-card__meta\">\n              <time class=\"stn-alert-card__time\">3일 전</time>\n              <span class=\"stn-alert-card__dot stn-alert-card__dot--major\" aria-label=\"읽지 않음\"></span>\n            </div>\n          </div>\n        </article>\n      </li>\n    </ul>\n  </div>\n\n  <!-- 3. Footer (하단 설정 관리 링크) -->\n  <footer class=\"stn-alert-center__footer\">\n    <button type=\"button\" class=\"stn-alert-center__footer-link\">\n      <span>알림 설정 관리</span>\n      <span class=\"stn-icon stn-icon--chevron-right\" aria-hidden=\"true\"></span>\n    </button>\n  </footer>\n</aside>`\n"],"mappings":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuI/B,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-7ASY5YJ6.js → chunk-36BAGMYT.js}

@@ -88,8 +88,8 @@ export function InterfaceListPage() {
         footerCenter={<StnPagination page={1} count={8} />}
         footerRight={
           <>
-            <StnButton size="M">\uB4F1\uB85D</StnButton>
-            <StnButton size="M" variant="ghost">\uC218\uC815</StnButton>
+            <StnButton size="md">\uB4F1\uB85D</StnButton>
+            <StnButton size="md" variant="ghost">\uC218\uC815</StnButton>
           </>
         }
       >
@@ -459,4 +459,4 @@ export {
   STN_LAYER_SHELL_USAGE,
   STN_LAYOUT_SHELL_USAGE
 };
-//# sourceMappingURL=chunk-7ASY5YJ6.js.map
+//# sourceMappingURL=chunk-36BAGMYT.js.map

package/dist/chunk-36BAGMYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLayout.ts"],"sourcesContent":["/**\n * Pub page layout — `.stn-wrap` · `.stn-container` · `.stn-content-area` · 대시보드 region\n * @see layout.css · StnLayerShell (@stn-uiux/pub-ui-react)\n */\n\nexport const STN_LAYOUT_INTRO = ''\n\n/** 라이브 예제 탭 — shell 종류 + 대표 화면 레시피 */\nexport const STN_LAYOUT_PLAYGROUND_TABS: readonly {\n  id: 'list' | 'dashboard' | 'alert-center'\n  label: string\n  screen: string\n  shellProps: string\n  assemble: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list.html · syslog_status.html',\n    shellProps: \"contentModifiers={['has_lnb', 'has_sch']}\",\n    assemble: 'ListPageScaffold shell=\"layer\" — gnb · header · lnb · search · table',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html · dashboard_map …',\n    shellProps: \"bodyWrapper='none'\",\n    assemble: 'DashboardPageScaffold · MapPlaceholder + dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    screen: 'basic/alert_center.html',\n    shellProps: \"bodyWrapper='none' · network_topology_header · GNB 알림패널\",\n    assemble: 'AlertCenterPageScaffold (맵 placeholder + 우측 4위젯)',\n  },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_INTRO =\n  'List view는 배경 · Side Navigation·페이지 헤더 · 트리 LNB · 검색 · 표로 구성됩니다. `ListPageScaffold`에 gnb · header · lnb · search · children(표) 슬롯만 넘기면 됩니다. Playground에서 옵션을 고른 뒤 생성된 React/HTML 코드를 복사하세요.'\n\n/** 라이브러리 내부 조립 참고 — 제품 화면은 `STN_LAYOUT_LIST_VIEW_USAGE`(`ListPageScaffold`)만 사용 */\nexport const STN_LAYOUT_LIST_VIEW_BARE_USAGE = `import {\n  StnLayerShell,\n  StnListViewLayout,\n  StnSideNavigation,\n  StnHeader,\n  StnSearchRequirementBar,\n  StnSectionSide,\n  StnTable,\n} from '@stn-uiux/pub-ui-react'\n\n/** StnLayerShell 안 — L1 listview 그리드만 (이중 L0/L2 없음) */\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      lnbSide=\"left\"\n    >\n      <StnListViewLayout\n        bare\n        sidebar={<StnSectionSide>{/* StnTree */}</StnSectionSide>}\n        search={\n          <StnSearchRequirementBar>{/* Fields · SearchButton */}</StnSearchRequirementBar>\n        }\n      >\n        <StnTable summary=\"목록\" />\n      </StnListViewLayout>\n    </StnLayerShell>\n  )\n}`\n\n/** List view 문서 탭 */\nexport type StnLayoutListLayerTabId = 'live' | 'l0' | 'l1' | 'l2'\n\nexport const STN_LAYOUT_LIST_LAYER_TABS: {\n  id: StnLayoutListLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_USAGE = `import {\n  ListPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <ListPageScaffold\n      shell=\"layer\"\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      search={\n        <StnSearchRequirementBar>{/* Fields · SearchButton */}</StnSearchRequirementBar>\n      }\n    >\n      <StnTable\n        summary=\"총 128개 (1 to 20)\"\n        footerCenter={<StnPagination page={1} count={8} />}\n        footerRight={\n          <>\n            <StnButton size=\"md\">등록</StnButton>\n            <StnButton size=\"md\" variant=\"ghost\">수정</StnButton>\n          </>\n        }\n      >\n        <StnTable.Grid>{/* … */}</StnTable.Grid>\n      </StnTable>\n    </ListPageScaffold>\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_INTRO =\n  '대시보드는 L0 배경 · L1(header 크롬 + content 본문 단 하나) · L2 모달입니다. 본문은 `layer1` 슬롯이 아니라 `left`/`right`/`children`으로 조립합니다. `DashboardPageScaffold` (type=\"map\" | \"topology\" | \"widget-grid\").'\n\n/** Map / Dashboard 문서 탭 — List view와 동일 층 모델 */\nexport type StnLayoutMapLayerTabId = StnLayoutListLayerTabId\n\nexport const STN_LAYOUT_MAP_LAYER_TABS: {\n  id: StnLayoutMapLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_MAP_DASHBOARD_USAGE = `import { DashboardPageScaffold, StnLayer0Background, StnSideNavigation, StnHeader } from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"map\"\n      shell=\"layer\"\n      gnbSide=\"left\"\n      layer0={<StnLayer0Background variant=\"map-light\" />}\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"dashboard\" />}\n    />\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_HEADER_USAGE = `import {\n  DashboardPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n} from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"topology\"\n      shell=\"layer\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"widget\" />}\n      mapMessage=\"토폴로지 맵\"\n    />\n  )\n}`\n\n/** 경우의 수 — 무엇을 쓸지 */\nexport const STN_LAYOUT_WHEN_TO_USE: readonly {\n  situation: string\n  use: string\n  export: string\n}[] = [\n  {\n    situation: '표준 3단계 층위 기반 페이지 구성',\n    use: 'StnLayerShell — L0 Background · L1 Main UI · L2 Modal',\n    export: 'StnLayerShell · lnbSide left|right',\n  },\n  {\n    situation: '구역 라벨만 빠르게 (lnb, search, 맵 빈칸)',\n    use: 'Shell + StnPageScaffold.Region / MapPlaceholder',\n    export: 'StnPageScaffold.*',\n  },\n  {\n    situation: '대표 HTML 한 장을 1단계로 (interface_list, alert_center)',\n    use: '화면별 레시피 (내부에서 Shell 이미 포함)',\n    export: 'ListPageScaffold · DashboardPageScaffold · AlertCenterPageScaffold',\n  },\n  {\n    situation: 'L3 팝업 본문 자리만 표시',\n    use: 'StnLayer + StnPageScaffold.Layer',\n    export: 'StnPageScaffold.Layer',\n  },\n  {\n    situation: '위젯·테이블 본문이 API 로딩 중',\n    use: 'Components — Loading skeleton (Layout 아님)',\n    export: 'StnLoadingSkeleton',\n  },\n]\n\nexport type StnLayoutScreenKind =\n  | 'list'\n  | 'dashboard-map'\n  | 'alert-center'\n  | 'converged-dashboard'\n  | 'popup-overlay'\n  | 'widget-board'\n  | 'standard'\n\n/** @deprecated StnLayoutScreenKind */\nexport type StnPageScaffoldKind = StnLayoutScreenKind\n\nexport const STN_LAYOUT_SCREEN_RECIPES: readonly {\n  id: StnLayoutScreenKind\n  label: string\n  pubExamples: string\n  reactRecipe: string\n  layoutTab: 'list' | 'dashboard'\n  note: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    pubExamples: 'interface_list.html · syslog_status.html',\n    reactRecipe: 'ListPageScaffold',\n    layoutTab: 'list',\n    note: 'L0 wrap · L1 .stn-container · L2 GNB',\n  },\n  {\n    id: 'dashboard-map',\n    label: '맵·대시보드',\n    pubExamples: 'basic/map.html · dashboard_map …',\n    reactRecipe: 'DashboardPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'map(z50) · dashboard_left / dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    pubExamples: 'basic/alert_center.html',\n    reactRecipe: 'AlertCenterPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'GNB 알림 · 맵 placeholder · 우측 4위젯',\n  },\n  {\n    id: 'converged-dashboard',\n    label: '융합망 대시',\n    pubExamples: 'converged/dashboard_map.html',\n    reactRecipe: 'DashboardPageScaffold (converged_header)',\n    layoutTab: 'dashboard',\n    note: 'wrap-converged',\n  },\n  {\n    id: 'popup-overlay',\n    label: '팝·딤',\n    pubExamples: 'regist_pop.html · widget_dim.html',\n    reactRecipe: 'StnPageScaffold.Layer + StnPopup',\n    layoutTab: 'list',\n    note: 'L3/L4',\n  },\n  {\n    id: 'widget-board',\n    label: '위젯보드',\n    pubExamples: 'widgetboard/widget*.html',\n    reactRecipe: 'StnWidget shell=board',\n    layoutTab: 'dashboard',\n    note: 'board-item',\n  },\n  {\n    id: 'standard',\n    label: '일반 콘텐츠',\n    pubExamples: 'CCTV · node tools …',\n    reactRecipe: 'StnLayerShell + Region',\n    layoutTab: 'list',\n    note: 'head_area · stn-content-area',\n  },\n]\n\n/** @deprecated STN_LAYOUT_SCREEN_RECIPES */\nexport const STN_PAGE_SCAFFOLD_KINDS = STN_LAYOUT_SCREEN_RECIPES\n\nexport const STN_LAYOUT_SLOT_USAGE = `import { StnPageScaffold, StnLayer, StnPopup } from '@stn-uiux/pub-ui-react'\n\n/** Shell children 안 — 구역 라벨 */\n<StnLayerShell gnb={<StnSideNavigation />} contentModifiers={['has_lnb', 'has_sch']} header={…}>\n  <StnPageScaffold.Region label=\"lnb_box\" hint=\"LNB 트리\" />\n  <StnPageScaffold.Region label=\"search_area\" />\n</StnLayerShell>\n\n/** 맵 빈 칸 */\n<StnPageScaffold.MapPlaceholder message=\"맵은 추후 연동\" />\n\n/** 맵 빈 본문 — L0만 보이는 캔버스 (위젯·placeholder 없음) */\n<DashboardPageScaffold bodyEmpty shell=\"layer\" gnb={gnb} layer0={layer0} />\n\n/** L3 팝업 슬롯 */\n<StnLayer level={3} surface=\"transparent\">\n  <StnPageScaffold.Layer level={3} label=\"팝업 본문\">\n    <StnPopup open>…</StnPopup>\n  </StnPageScaffold.Layer>\n</StnLayer>`\n\nexport const STN_LAYOUT_ALERT_CENTER_USAGE = `import { AlertCenterPageScaffold } from '@stn-uiux/pub-ui-react'\n\n<AlertCenterPageScaffold mapMessage=\"맵은 추후 연동\" showFaultPanelPlaceholder />`\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_COMPOUND_USAGE = STN_LAYOUT_SLOT_USAGE\n\n/** @deprecated */\nexport const STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE = STN_LAYOUT_ALERT_CENTER_USAGE\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_INTRO = STN_LAYOUT_INTRO\n\nexport const STN_LAYOUT_RECIPES: readonly {\n  id: 'list' | 'dashboard'\n  label: string\n  screen: string\n  shellProps: string\n  childrenHint: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list, syslog_status …',\n    shellProps: 'contentModifiers={[\\'has_lnb\\', \\'has_sch\\']} · header=<StnLayoutHeader>',\n    childrenHint: 'lnb_box · search_area · stn-table (+ StnTable, StnButton)',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html, dashboard_map …',\n    shellProps: 'bodyWrapper=\"none\" · chrome=\"network_topology_header\"',\n    childrenHint: '.dashboard · .dashboard_left · StnLayoutRegion(region=\"map\")',\n  },\n]\n\n/** Pub `.stn-content-area` modifier */\nexport type StnContentAreaModifier =\n  | 'has_lnb'\n  | 'has_lnb2'\n  | 'has_lnb_right'\n  | 'has_lnb_right2'\n  | 'has_sch'\n  | 'has_sch_row2'\n  | 'flexible'\n\n/** LNB·트리 열 위치 — `has_lnb*` modifier 와 조합 */\nexport type StnLnbSide = 'left' | 'right'\n\n\n\n/** 대시보드·맵 화면 내 고정 슬롯 */\nexport type StnLayoutRegion =\n  | 'top_right'\n  | 'dashboard'\n  | 'dashboard_left'\n  | 'dashboard_right'\n  | 'dashboard_body'\n  | 'wrap_topology'\n  | 'map'\n  | 'dash_canvas'\n\nexport const STN_LAYOUT_PAGE_TREE = `.stn-wrap (legacy v1: #wrap)\n├── .stn-side-nav           (absolute overlay · StnSideNavigation)\n└── .stn-layer-1            (L1 · 네비 제외 영역)\n    ├── .stn-layer-1__header     (Header)\n    └── .stn-content-area / .stn-stack\n        └── .stn-stack …` as const\n\nexport const STN_LAYOUT_LAYER_PAGE_TREE = `.stn-wrap                         (Root Shell · data-stn-layer-mode=\"v2\")\n├── StnLayer.Background           (L0 · layer0-bg)\n├── .stn-side-nav / StnSideNavigation  (absolute overlay · wrap 직속)\n├── [data-stn-layer-role=\"utility\"]  (toast · audio)\n└── StnLayer.Content (.stn-layer-1) (L1 — 하나)\n    ├── .stn-layer-1__header\n    └── .stn-content-area / .stn-stack\n        └── lnb_box | content_box | .stn-stack` as const\n\nexport const STN_LAYOUT_CONTENT_ROWS: {\n  modifier: StnContentAreaModifier\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  {\n    modifier: 'has_lnb',\n    pubClass: '.stn-content-area.has_lnb',\n    label: 'LNB 1열',\n    note: 'padding-left: 268px · head_area 동기화',\n  },\n  {\n    modifier: 'has_lnb2',\n    pubClass: '.stn-content-area.has_lnb2',\n    label: 'LNB 2열 (좌)',\n    note: 'padding-left: 536px',\n  },\n  {\n    modifier: 'has_lnb_right',\n    pubClass: '.stn-content-area.has_lnb_right',\n    label: 'LNB 1열 (우)',\n    note: 'padding-right: 268px · lnb_box_right',\n  },\n  {\n    modifier: 'has_lnb_right2',\n    pubClass: '.stn-content-area.has_lnb_right2',\n    label: 'LNB 2열 (우)',\n    note: 'padding-right: 536px',\n  },\n  {\n    modifier: 'has_sch',\n    pubClass: '.stn-content-area.has_sch',\n    label: '검색 영역',\n    note: 'flex column · search_area + content_box',\n  },\n  {\n    modifier: 'has_sch_row2',\n    pubClass: '.stn-content-area.has_sch_row2',\n    label: '검색 2줄',\n    note: 'padding-top: 94px',\n  },\n  {\n    modifier: 'flexible',\n    pubClass: '.stn-content-area.flexible',\n    label: '가변 높이 테이블',\n    note: 'stn-table flex fill',\n  },\n]\n\n\nexport const STN_LAYOUT_REGION_ROWS: {\n  region: StnLayoutRegion\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  { region: 'top_right', pubClass: '.dash-top-right-widget', label: '우상단 위젯', note: '시스템 감시·테마·시계' },\n  { region: 'dashboard', pubClass: '.dashboard', label: '대시보드 루트', note: '맵·위젯 본문' },\n  { region: 'dashboard_left', pubClass: '.dashboard_left', label: '좌측 열', note: '토폴로지·맵' },\n  { region: 'dashboard_right', pubClass: '.dashboard_right', label: '우측 열', note: '장애·위젯 패널' },\n  { region: 'dashboard_body', pubClass: '.dashboard_body', label: '융합망 본문', note: 'converged 레이아웃' },\n  { region: 'wrap_topology', pubClass: '.wrap_topology', label: '토폴로지 래퍼', note: 'stn-elev-map' },\n  { region: 'map', pubClass: '.map', label: '맵 영역', note: '' },\n  { region: 'dash_canvas', pubClass: '.stn-widget.shell-canvas', label: '캔버스', note: '토폴로지/맵 위젯 (variant=\"canvas\")' },\n]\n\nconst CONTENT_CLASS: Record<StnContentAreaModifier, string> = {\n  has_lnb: 'has_lnb',\n  has_lnb2: 'has_lnb2',\n  has_lnb_right: 'has_lnb_right',\n  has_lnb_right2: 'has_lnb_right2',\n  has_sch: 'has_sch',\n  has_sch_row2: 'has_sch_row2',\n  flexible: 'flexible',\n}\n\nconst REGION_CLASS: Record<StnLayoutRegion, string> = {\n  top_right: 'dash-top-right-widget',\n  dashboard: 'dashboard',\n  dashboard_left: 'dashboard_left',\n  dashboard_right: 'dashboard_right',\n  dashboard_body: 'dashboard_body',\n  wrap_topology: 'wrap_topology',\n  map: 'map',\n  dash_canvas: 'stn-widget shell-canvas',\n}\n\nfunction normalizeList<T>(value?: T | T[]): T[] {\n  if (value == null) return []\n  return Array.isArray(value) ? value : [value]\n}\n\nexport function pubContentAreaClasses(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n): string[] {\n  return normalizeList(modifiers).map((m) => CONTENT_CLASS[m])\n}\n\nexport function pubLayoutRegionClass(region: StnLayoutRegion): string {\n  return REGION_CLASS[region]\n}\n\n/** `lnbSide` — `has_lnb` / `has_lnb2` 를 좌·우 modifier 로 치환 */\nexport function applyLnbSideToModifiers(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n  lnbSide: StnLnbSide = 'left',\n): StnContentAreaModifier[] {\n  const list = normalizeList(modifiers)\n  if (lnbSide === 'left') return list\n  return list.map((m) => {\n    if (m === 'has_lnb') return 'has_lnb_right'\n    if (m === 'has_lnb2') return 'has_lnb_right2'\n    return m\n  })\n}\n\nexport const STN_LAYER_SHELL_USAGE = `import { StnSideNavigation, StnLayerShell } from '@stn-uiux/pub-ui-react'\n\n/** StnLayer role 페이지 셸 — 컨테이너(.stn-container)를 StnLayer.Content 가 겸함 */\nexport function ListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      lnbSide=\"left\"\n      contentModifiers={['has_lnb', 'has_sch']}\n      header={\n        <StnLayoutHeader>\n          <h3 className=\"title\">{title}</h3>\n        </StnLayoutHeader>\n      }\n    >\n      <aside className=\"lnb_box\">…트리·LNB…</aside>\n      <div className=\"content_box\">{children}</div>\n    </StnLayerShell>\n  )\n}\n\n/** 데이터 구조(트리)를 오른쪽에 */\n<StnLayerShell lnbSide=\"right\" contentModifiers={['has_lnb', 'has_sch']} …>\n  <div className=\"content_box\">…</div>\n  <aside className=\"lnb_box_right\">…</aside>\n</StnLayerShell>`\n\nexport const STN_LAYOUT_SHELL_USAGE = `import '@stn-uiux/pub-ui/styles.css'\n\nimport { StnSideNavigation, StnHeader, StnLayerShell, StnStack } from '@stn-uiux/pub-ui-react'\n\n/** interface_list 골격 */\nexport function InterfaceListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      header={\n        <StnHeader variant=\"page\">\n          <StnHeader.Left>\n            <h3 className=\"title\">{title}</h3>\n          </StnHeader.Left>\n        </StnHeader>\n      }\n    >\n      {children}\n    </StnLayerShell>\n  )\n}\n\n/** 대시보드 골격 */\nexport function MapDashboardPage({ gnb, header, children }) {\n  return (\n    <StnLayerShell gnb={gnb} header={header}>\n      <StnStack direction=\"column\">\n        {children}\n      </StnStack>\n    </StnLayerShell>\n  )\n}`\n"],"mappings":"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","names":[]}

package/dist/{chunk-THCCTVUM.js → chunk-5F63CMM7.js}

@@ -36,6 +36,16 @@ var STN_DATE_RANGE_FIELD_SIZE_ROWS = [
     iconSize: "16px",
     pubClass: "stn-date-range-field lg",
     usedIn: "\uAC15\uC870 \uAC80\uC0C9"
+  },
+  {
+    size: "xl",
+    height: "56px",
+    radius: "6px",
+    fontSize: "14px",
+    paddingX: "16px",
+    iconSize: "20px",
+    pubClass: "stn-date-range-field xl",
+    usedIn: "\uB85C\uADF8\uC778/\uB300\uD615 \uD3FC \uC804\uC6A9"
   }
 ];
 var STN_DATE_RANGE_FIELD_USAGE = `import { StnDateRangeField } from '@stn-uiux/pub-ui-react'
@@ -89,4 +99,4 @@ export {
   formatStnDateRangeFieldValue,
   parseStnDateRangeFieldValue
 };
-//# sourceMappingURL=chunk-THCCTVUM.js.map
+//# sourceMappingURL=chunk-5F63CMM7.js.map

package/dist/chunk-5F63CMM7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnDateRangeField.ts"],"sourcesContent":["/**\n * Pub datetime range field — Infomap `input` (Figma 40000042:186907)\n * @see common.css `.date_box` · Ant Design RangePicker\n */\n\nexport type StnDateRangeFieldSize = 'sm' | 'md' | 'lg' | 'xl' | 'S' | 'M' | 'L'\n\nexport const STN_DATE_RANGE_FIELD_FIGMA = '40000042:186907'\n\n/** DS·Figma 영문명 — Date range field (datetime 포함 시 DateTime range field) */\nexport const STN_DATE_RANGE_FIELD_NAME = 'Date range field'\n\nexport const STN_DATE_RANGE_FIELD_INTRO =\n  '검색·로그 필터용 **기간 선택**입니다. 트리거는 `StnDateRangeField` · 팝업 달력은 `StnDateRangePicker` / 통합 `StnDateRangePickerField`. Pub HTML `.date_box` · `ant-picker-dropdown` · `--calendar-*` 토큰.'\n\nexport const STN_DATE_RANGE_FIELD_DEMO = {\n  start: '2024-02-07 09:22:34',\n  end: '2024-03-07 09:22:34',\n} as const\n\nexport const STN_DATE_RANGE_FIELD_SIZE_ROWS: readonly {\n  size: StnDateRangeFieldSize\n  height: string\n  radius: string\n  fontSize: string\n  paddingX: string\n  iconSize: string\n  pubClass: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px',\n    radius: '4px',\n    fontSize: '13px',\n    paddingX: '10px',\n    iconSize: '14px',\n    pubClass: 'stn-date-range-field sm',\n    usedIn: '좁은 검색줄',\n  },\n  {\n    size: 'md',\n    height: '32px',\n    radius: '4px',\n    fontSize: '13px',\n    paddingX: '12px',\n    iconSize: '16px',\n    pubClass: 'stn-date-range-field md',\n    usedIn: '검색영역 기간 (Figma)',\n  },\n  {\n    size: 'lg',\n    height: '40px',\n    radius: '6px',\n    fontSize: '14px',\n    paddingX: '12px',\n    iconSize: '16px',\n    pubClass: 'stn-date-range-field lg',\n    usedIn: '강조 검색',\n  },\n  {\n    size: 'xl',\n    height: '56px',\n    radius: '6px',\n    fontSize: '14px',\n    paddingX: '16px',\n    iconSize: '20px',\n    pubClass: 'stn-date-range-field xl',\n    usedIn: '로그인/대형 폼 전용',\n  },\n] as const\n\nexport const STN_DATE_RANGE_FIELD_USAGE = `import { StnDateRangeField } from '@stn-uiux/pub-ui-react'\n\n<StnDateRangeField\n  size=\"md\"\n  start={new Date('2024-02-07T09:22:34')}\n  end={new Date('2024-03-07T09:22:34')}\n  onClick={() => openRangePicker()}\n  aria-label=\"Search period\"\n/>`\n\nexport const STN_DATE_RANGE_FIELD_HTML = `<button\n  type=\"button\"\n  class=\"stn-date-range-field md\"\n  aria-label=\"Search period\"\n>\n  <span class=\"stn-date-range-field__inner\">\n    <span class=\"stn-date-range-field__text\">\n      <span class=\"stn-date-range-field__value\">2024-02-07 09:22:34</span>\n      <span class=\"stn-date-range-field__sep\" aria-hidden=\"true\">~</span>\n      <span class=\"stn-date-range-field__value\">2024-03-07 09:22:34</span>\n    </span>\n    <span class=\"stn-date-range-field__icon\" aria-hidden=\"true\"></span>\n  </span>\n</button>`\n\nexport function formatStnDateRangeFieldValue(date: Date): string {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  const h = String(date.getHours()).padStart(2, '0')\n  const min = String(date.getMinutes()).padStart(2, '0')\n  const s = String(date.getSeconds()).padStart(2, '0')\n  return `${y}-${m}-${d} ${h}:${min}:${s}`\n}\n\nexport function parseStnDateRangeFieldValue(value: string): Date | null {\n  const trimmed = value.trim()\n  if (!trimmed) return null\n  const normalized = trimmed.replace(' ', 'T')\n  const parsed = new Date(normalized)\n  return Number.isNaN(parsed.getTime()) ? null : parsed\n}\n"],"mappings":";AAOO,IAAM,6BAA6B;AAGnC,IAAM,4BAA4B;AAElC,IAAM,6BACX;AAEK,IAAM,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,KAAK;AACP;AAEO,IAAM,iCASP;AAAA,EACJ;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;AAEO,IAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnC,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAelC,SAAS,6BAA6B,MAAoB;AAC/D,QAAM,IAAI,KAAK,YAAY;AAC3B,QAAM,IAAI,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACrD,QAAM,IAAI,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AAChD,QAAM,IAAI,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,MAAM,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACrD,QAAM,IAAI,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACnD,SAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACxC;AAEO,SAAS,4BAA4B,OAA4B;AACtE,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,aAAa,QAAQ,QAAQ,KAAK,GAAG;AAC3C,QAAM,SAAS,IAAI,KAAK,UAAU;AAClC,SAAO,OAAO,MAAM,OAAO,QAAQ,CAAC,IAAI,OAAO;AACjD;","names":[]}