@stn-uiux/pub-ui 0.1.56 → 0.1.58

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-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":[]}

package/dist/{chunk-Q3W7QA7N.js → chunk-75GHU6VI.js}

@@ -97,47 +97,30 @@ var STN_POPUP_SIZES = [
     token: "--stn-pop-width-xl",
     usage: "\uB300\uD615 \uB370\uC774\uD130 \uD14C\uC774\uBE14 \xB7 \uB2E4\uC5F4 \uD504\uB85C\uBE44\uC800\uB2DD \uD3FC \xB7 \uB300\uD615 \uC0C1\uC138"
   },
-  {
-    id: "xxl",
-    label: "XXL",
-    className: "stn-pop--xxl",
-    width: "1440px",
-    token: "--stn-pop-width-xxl",
-    usage: "\uB300\uC2DC\uBCF4\uB4DC \uCD95\uC57D \uBDF0 \xB7 \uB300\uD615 \uBAA8\uB2C8\uD130\uB9C1/\uAD00\uC81C \uD31D\uC5C5"
-  },
-  {
-    id: "2xl",
-    label: "2XL",
-    className: "stn-pop--2xl",
-    width: "1600px",
-    token: "--stn-pop-width-2xl",
-    usage: "\uC2E4\uC2DC\uAC04 \uAD00\uC81C \uC0C1\uC138 \xB7 \uB300\uADDC\uBAA8 \uD1A0\uD3F4\uB85C\uC9C0 \uB9E4\uD551 \uD31D\uC5C5"
-  },
   {
     id: "full",
-    label: "Full bleed",
+    label: "Full",
     className: "stn-pop--full",
     width: "calc(100vw \u2212 40px)",
     token: "(viewport \u2212 gutter)",
-    usage: "\uBC30\uCE58 \uC7A5\uBE44\xB7\uC804\uCCB4 \uD654\uBA74 \uD14C\uC774\uBE14 (1780px \uB4F1 \u2192 full \uAD8C\uC7A5)"
+    usage: "\uC804\uCCB4 \uD654\uBA74 \uB300\uC2DC\uBCF4\uB4DC \uC124\uC815 \uBC0F \uD1A0\uD3F4\uB85C\uC9C0 \uB9E4\uD551"
   }
 ];
 function resolveStnPopupSizeFromWidth(px) {
-  if (px <= 360) return "sm";
-  if (px <= 480) return "md";
-  if (px <= 640) return "lg";
-  if (px <= 934) return "xl";
-  if (px <= 1200) return "xxl";
-  if (px <= 1500) return "2xl";
+  if (px <= 400) return "xs";
+  if (px <= 480) return "sm";
+  if (px <= 640) return "md";
+  if (px <= 960) return "lg";
+  if (px <= 1200) return "xl";
   return "full";
 }
 var STN_POPUP_LEGACY_WIDTH_SAMPLES = [
   { popClass: "batch_equip_pop", widthPx: 1780, suggested: "full" },
-  { popClass: "template_history_pop", widthPx: 1565, suggested: "2xl" },
-  { popClass: "real_time_view_pop", widthPx: 1500, suggested: "2xl" },
-  { popClass: "select_equip_pop", widthPx: 1412, suggested: "2xl" },
-  { popClass: "equip_regist_pop", widthPx: 1070, suggested: "xxl" },
-  { popClass: "fail_measure_pop", widthPx: 1100, suggested: "xxl" }
+  { popClass: "template_history_pop", widthPx: 1565, suggested: "full" },
+  { popClass: "real_time_view_pop", widthPx: 1500, suggested: "full" },
+  { popClass: "select_equip_pop", widthPx: 1412, suggested: "xl" },
+  { popClass: "equip_regist_pop", widthPx: 1070, suggested: "xl" },
+  { popClass: "fail_measure_pop", widthPx: 1100, suggested: "xl" }
 ];
 var STN_POPUP_PARTS = [
   { part: "Stack", selector: ".stn-pop-stack", note: "Dim + Modal \uB798\uD37C \xB7 StnLayer.Modal (L2)" },
@@ -147,38 +130,36 @@ var STN_POPUP_PARTS = [
   {
     part: "Panel",
     selector: ".stn-pop__panel",
-    note: "gray.850 \xB7 gray.700 border \xB7 radius 10 \xB7 shadow \xB7 overflow"
+    note: "surface \xB7 border \xB7 radius 8 \xB7 shadow \xB7 overflow"
   },
   {
     part: "Header",
     selector: ".stn-pop__head",
-    note: "48px \xB7 h4 18 SemiBold \xB7 theme title token"
+    note: "56px \xB7 h4 16 SemiBold \xB7 theme title token"
   },
   {
     part: "Close",
     selector: ".stn-pop__close",
-    note: 'StnButton icon="line/x" size=xsmall (16) \xB7 top 10 / right 8'
+    note: 'StnButton icon="line/x" size=sm \xB7 top 14 / right 16'
   },
-  { part: "Body", selector: ".stn-pop__body", note: "padding 0 8px \xB7 overflow auto \xB7 \uD654\uBA74\uBCC4 \uC2AC\uB86F" },
+  { part: "Body", selector: ".stn-pop__body", note: "padding 20px \xB7 overflow auto \xB7 \uD654\uBA74\uBCC4 \uC2AC\uB86F" },
   {
     part: "Actions",
     selector: ".stn-pop__actions",
-    note: "64px \xB7 center \xB7 gap 8 \xB7 StnButton primary\u2192secondary"
+    note: "56px \xB7 right/center \xB7 gap 8 \xB7 StnButton"
   }
 ];
 var STN_POPUP_TOKEN_ROWS = [
   { token: "--stn-pop-gutter", resolvesTo: "20px", usage: "\uC88C\uC6B0\xB7portal padding" },
   { token: "--stn-pop-width-xs", resolvesTo: "400px", usage: ".stn-pop--xs \xB7 \uB2E8\uC21C \uD655\uC778/\uC5BC\uB7FF" },
-  { token: "--stn-pop-width-sm", resolvesTo: "520px", usage: ".stn-pop--sm \xB7 1~2\uAC1C \uC785\uB825 \uD3FC" },
-  { token: "--stn-pop-width-md", resolvesTo: "680px", usage: ".stn-pop--md \xB7 \uAE30\uBCF8 \uD45C\uC900" },
-  { token: "--stn-pop-width-lg", resolvesTo: "920px", usage: ".stn-pop--lg \xB7 2\uC5F4 \uD3FC/\uC0C1\uC138" },
+  { token: "--stn-pop-width-sm", resolvesTo: "480px", usage: ".stn-pop--sm \xB7 1~2\uAC1C \uC785\uB825 \uD3FC" },
+  { token: "--stn-pop-width-md", resolvesTo: "640px", usage: ".stn-pop--md \xB7 \uAE30\uBCF8 \uD45C\uC900" },
+  { token: "--stn-pop-width-lg", resolvesTo: "960px", usage: ".stn-pop--lg \xB7 2\uB2E8 \uBD84\uD560/\uC0C1\uC138" },
   { token: "--stn-pop-width-xl", resolvesTo: "1200px", usage: ".stn-pop--xl \xB7 \uB300\uD615 \uD14C\uC774\uBE14/\uADF8\uB9AC\uB4DC" },
-  { token: "--stn-pop-width-xxl", resolvesTo: "1440px", usage: ".stn-pop--xxl \xB7 \uB300\uC2DC\uBCF4\uB4DC/\uAD00\uC81C" },
-  { token: "--stn-pop-width-2xl", resolvesTo: "1600px", usage: ".stn-pop--2xl \xB7 \uCD08\uB300\uD615 \uD1A0\uD3F4\uB85C\uC9C0" },
-  { token: ".stn-pop--full", resolvesTo: "100vw \u2212 gutter\xD72", usage: "full-bleed \xB7 alias --full-bleed" },
+  { token: ".stn-pop--full", resolvesTo: "100vw \u2212 gutter\xD72", usage: "\uC804\uCCB4\uD654\uBA74 \uBAA8\uB2EC" },
   { token: "--stn-pop-max-height", resolvesTo: "min(85dvh, \u2026)", usage: ".stn-pop \uBCF8\uBB38 \uC2A4\uD06C\uB864" },
-  { token: "--stn-pop-header-height", resolvesTo: "48px", usage: ".stn-pop__head min-height" },
-  { token: "--stn-pop-footer-height", resolvesTo: "64px", usage: ".stn-pop__actions" },
+  { token: "--stn-pop-header-height", resolvesTo: "56px", usage: ".stn-pop__head min-height" },
+  { token: "--stn-pop-footer-height", resolvesTo: "56px", usage: ".stn-pop__actions" },
   { token: "--stn-pop-close-size", resolvesTo: "icon-size.xsmall (16px)", usage: ".stn-pop__close hit" },
   { token: "--stn-pop-close-icon", resolvesTo: "icon-size.xsmall (16px)", usage: ".stn-pop__close glyph" },
   { token: "--stn-pop-surface", resolvesTo: "gray.850 (dark) \xB7 white (light)", usage: ".stn-pop__panel background" },
@@ -239,4 +220,4 @@ export {
   STN_POPUP_TOKEN_ROWS,
   STN_POPUP_INVENTORY_ROWS
 };
-//# sourceMappingURL=chunk-Q3W7QA7N.js.map
+//# sourceMappingURL=chunk-75GHU6VI.js.map