shindonghyeo-ui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +31 -13
  2. package/dist/components/AccentText/AccentText.d.ts +5 -0
  3. package/dist/components/{GradientText/GradientText.js → AccentText/AccentText.js} +5 -4
  4. package/dist/components/AccentText/AccentText.module.js +3 -0
  5. package/dist/components/Banner/Banner.d.ts +1 -1
  6. package/dist/components/PostList/PostList.d.ts +1 -1
  7. package/dist/components/SectionTitle/SectionTitle.d.ts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +18 -18
  10. package/dist/styles.css +1 -1
  11. package/package.json +19 -2
  12. package/dist/components/GradientText/GradientText.d.ts +0 -2
  13. package/dist/components/GradientText/GradientText.module.js +0 -3
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  - **디자인 토큰:** 색, 글꼴, 모서리 둥글기, 레이아웃 폭을 CSS 변수(`--sd-*`)로 정의하고, 라이트/다크 모드를 지원합니다.
6
6
  - **React 컴포넌트:** CSS Modules로 스타일을 입혀서 런타임 비용이 없고, Next.js·Astro·Vite 어디서나 동작합니다.
7
+ **컴포넌트 미리보기:** https://shindonghyeo.github.io/shindonghyeo-ui/ (Storybook)
8
+
7
9
  - **서버 렌더링 대응:** 상호작용이 필요한 컴포넌트(`ThemeToggle`, `Toc`, `ReadingProgress`)에만 `'use client'`가 붙어 있습니다.
8
10
 
9
11
  ## 설치
@@ -18,11 +20,11 @@ npm install shindonghyeo-ui
18
20
 
19
21
  ```tsx
20
22
  import 'shindonghyeo-ui/styles.css';
21
- import { Banner, Button, GradientText } from 'shindonghyeo-ui';
23
+ import { AccentText, Banner, Button } from 'shindonghyeo-ui';
22
24
 
23
25
  export function Hero() {
24
26
  return (
25
- <Banner eyebrow="Dev Log" title={<>안녕하세요, <GradientText>신동혁</GradientText>입니다.</>}>
27
+ <Banner eyebrow="Dev Log" title={<>안녕하세요, <AccentText>신동혁</AccentText>입니다.</>}>
26
28
  <Button variant="primary" href="/blog">글 둘러보기 →</Button>
27
29
  </Banner>
28
30
  );
@@ -78,15 +80,15 @@ import Link from 'next/link';
78
80
  | 컴포넌트 | 설명 |
79
81
  | --- | --- |
80
82
  | `Container` | 본문 폭(680px) 또는 넓은 폭(`wide`, 980px)으로 내용을 가운데 정렬 |
81
- | `Navbar` | 화면 위에 붙어 있는 반투명 메뉴바. 현재 메뉴는 알약 모양으로 강조 |
82
- | `Banner` | 그라데이션과 점 패턴 배경의 페이지 상단 배너 |
83
- | `Logo` | 그라데이션 정사각형 로고 마크 |
84
- | `Button` | `primary`(그라데이션) / `secondary` 버튼. `href`가 있으면 링크로 렌더링 |
83
+ | `Navbar` | 화면 위에 붙어 있는 반투명 메뉴바. 현재 메뉴는 포인트 색 글자로 강조 |
84
+ | `Banner` | 제목, 설명, 메타 정보를 담는 페이지 상단 머리말 |
85
+ | `Logo` | 포인트 색 정사각형 로고 마크 |
86
+ | `Button` | `primary`(포인트 색) / `secondary` 버튼. `href`가 있으면 링크로 렌더링 |
85
87
  | `IconButton` | 아이콘만 있는 버튼 |
86
88
  | `Chip` | 날짜, 읽는 시간 같은 작은 정보 표시 |
87
- | `GradientText` | 그라데이션 글자 |
88
- | `SectionTitle` | 왼쪽에 그라데이션 막대가 붙은 섹션 제목 |
89
- | `PostList` | 마우스를 올리면 카드처럼 떠오르는 글 목록 |
89
+ | `AccentText` | 포인트 색 글자 (`GradientText`는 옛 이름으로 남아 있습니다) |
90
+ | `SectionTitle` | 제목과 오른쪽 링크가 한 줄에 놓인 섹션 제목 |
91
+ | `PostList` | 마우스를 올리면 옅은 배경이 깔리는 글 목록 |
90
92
  | `Prose` | 마크다운에서 나온 HTML(제목, 목록, 표, 인용문, 코드)을 꾸미는 본문 영역 |
91
93
  | `Toc` | 현재 읽는 제목을 강조하는 목차 (`sidebar` / `inline`) |
92
94
  | `ReadingProgress` | 스크롤한 만큼 차오르는 진행 바 |
@@ -97,16 +99,15 @@ import Link from 'next/link';
97
99
 
98
100
  ## 테마 바꾸기
99
101
 
100
- 포인트 색은 두 값만 덮어쓰면 그라데이션, 강조색, 옅은 배경색까지 모두 따라 바뀝니다.
102
+ 포인트 색은 `--sd-accent` 하나만 덮어쓰면 링크, 버튼, 옅은 배경색까지 모두 따라 바뀝니다. 버튼 글자색이 잘 보이지 않으면 `--sd-on-accent`도 함께 바꿉니다.
101
103
 
102
104
  ```css
103
105
  :root {
104
106
  --sd-accent: #7c3aed;
105
- --sd-accent-2: #db2777;
106
107
  }
107
108
  :root[data-theme='dark'] {
108
109
  --sd-accent: #a78bfa;
109
- --sd-accent-2: #f472b6;
110
+ --sd-on-accent: #160b2e;
110
111
  }
111
112
  ```
112
113
 
@@ -116,11 +117,28 @@ import Link from 'next/link';
116
117
 
117
118
  ```bash
118
119
  npm install
119
- npm run dev # 플레이그라운드(playground/)에서 컴포넌트 확인
120
+ npm run storybook # Storybook에서 컴포넌트별로 확인 (http://localhost:6006)
121
+ npm run dev # 플레이그라운드(playground/)에서 한 화면으로 확인
120
122
  npm run typecheck
121
123
  npm run build # dist/에 JS, 타입, styles.css 생성
122
124
  ```
123
125
 
126
+ ## 배포
127
+
128
+ main 브랜치에 반영되면 GitHub Actions([`release.yml`](.github/workflows/release.yml))가 타입 검사와 빌드를 하고, `package.json`의 버전이 npm에 아직 없을 때만 자동으로 배포한 뒤 `v버전` 태그를 올립니다. 버전을 올리지 않은 변경은 배포되지 않습니다.
129
+
130
+ 새 버전을 내려면 버전만 올려서 main에 반영하면 됩니다.
131
+
132
+ ```bash
133
+ npm version patch --no-git-tag-version # 0.1.0 → 0.1.1 (기능 추가는 minor, 호환이 깨지는 변경은 major)
134
+ git commit -am "0.1.1"
135
+ git push
136
+ ```
137
+
138
+ Storybook은 main에 반영될 때마다 [`storybook.yml`](.github/workflows/storybook.yml)이 GitHub Pages에 다시 올립니다. 새 컴포넌트를 만들면 `stories/`에 스토리 파일도 함께 추가해 주세요.
139
+
140
+ npm 인증은 [Trusted Publishing](https://docs.npmjs.com/trusted-publishers)을 써서 저장해 둔 토큰이 없습니다.
141
+
124
142
  ## 라이선스
125
143
 
126
144
  MIT
package/dist/components/AccentText/AccentText.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ /** 포인트 색 글자 */
3
+ export declare function AccentText({ className, ...props }: ComponentPropsWithoutRef<'span'>): import('react').JSX.Element;
4
+ /** @deprecated 그라데이션을 없앴습니다. AccentText를 쓰세요. */
5
+ export declare const GradientText: typeof AccentText;
package/dist/components/{GradientText/GradientText.js → AccentText/AccentText.js} RENAMED
@@ -1,11 +1,12 @@
1
1
  import { cx as e } from "../../utils/cx.js";
2
- import t from "./GradientText.module.js";
2
+ import t from "./AccentText.module.js";
3
3
  import { jsx as n } from "react/jsx-runtime";
4
- // src/components/GradientText/GradientText.tsx
4
+ // src/components/AccentText/AccentText.tsx
5
5
  function r({ className: r, ...i }) {
6
6
  return /* @__PURE__ */ n("span", {
7
- className: e(t.gradientText, r),
7
+ className: e(t.accentText, r),
8
8
  ...i
9
9
  });
10
10
  }
11
- export { r as GradientText };
11
+ var i = r;
12
+ export { r as AccentText, i as GradientText };
package/dist/components/AccentText/AccentText.module.js ADDED
@@ -0,0 +1,3 @@
1
+ // src/components/AccentText/AccentText.module.css
2
+ var e = "sd-accentText-yA-3B", t = { accentText: e };
3
+ export { e as accentText, t as default };
package/dist/components/Banner/Banner.d.ts CHANGED
@@ -11,5 +11,5 @@ export interface BannerProps {
11
11
  /** 제목 아래에 들어갈 내용 (버튼, 메타 정보 등) */
12
12
  children?: ReactNode;
13
13
  }
14
- /** 그라데이션과 점 패턴 배경이 깔린 페이지 상단 배너 */
14
+ /** 제목, 설명, 메타 정보를 담는 페이지 상단 머리말 */
15
15
  export declare function Banner({ eyebrow, title, description, wide, size, className, children }: BannerProps): import('react').JSX.Element;
package/dist/components/PostList/PostList.d.ts CHANGED
@@ -12,5 +12,5 @@ export interface PostListProps {
12
12
  linkAs?: ElementType;
13
13
  className?: string;
14
14
  }
15
- /** 마우스를 올리면 카드처럼 떠오르는 글 목록 */
15
+ /** 마우스를 올리면 옅은 배경이 깔리는 글 목록 */
16
16
  export declare function PostList({ items, linkAs: Link, className }: PostListProps): import('react').JSX.Element;
package/dist/components/SectionTitle/SectionTitle.d.ts CHANGED
@@ -6,5 +6,5 @@ export interface SectionTitleProps {
6
6
  className?: string;
7
7
  children: ReactNode;
8
8
  }
9
- /** 왼쪽에 그라데이션 막대가 붙은 섹션 제목 */
9
+ /** 제목과 오른쪽 링크가 한 줄에 놓인 섹션 제목 */
10
10
  export declare function SectionTitle({ as: Heading, action, className, children }: SectionTitleProps): import('react').JSX.Element;
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
+ export { AccentText, GradientText } from './components/AccentText/AccentText';
1
2
  export { Banner, type BannerProps } from './components/Banner/Banner';
2
3
  export { Button, type ButtonProps } from './components/Button/Button';
3
4
  export { Chip, type ChipProps } from './components/Chip/Chip';
4
5
  export { Container, type ContainerProps } from './components/Container/Container';
5
6
  export { Footer, type FooterLink, type FooterProps } from './components/Footer/Footer';
6
- export { GradientText } from './components/GradientText/GradientText';
7
7
  export { IconButton, type IconButtonProps } from './components/IconButton/IconButton';
8
8
  export { CalendarIcon, ClockIcon, GitHubIcon, MoonIcon, SunIcon } from './components/icons/icons';
9
9
  export { Logo, type LogoProps } from './components/Logo/Logo';
package/dist/index.js CHANGED
@@ -1,21 +1,21 @@
1
1
  /* empty css */
2
2
  /* empty css */
3
3
  import { cx as e } from "./utils/cx.js";
4
- import { Container as t } from "./components/Container/Container.js";
5
- import { Banner as n } from "./components/Banner/Banner.js";
6
- import { Button as r } from "./components/Button/Button.js";
7
- import { Chip as i } from "./components/Chip/Chip.js";
8
- import { Footer as a } from "./components/Footer/Footer.js";
9
- import { GradientText as o } from "./components/GradientText/GradientText.js";
10
- import { IconButton as s } from "./components/IconButton/IconButton.js";
11
- import { CalendarIcon as c, ClockIcon as l, GitHubIcon as u, MoonIcon as d, SunIcon as f } from "./components/icons/icons.js";
12
- import { Logo as p } from "./components/Logo/Logo.js";
13
- import { Navbar as m } from "./components/Navbar/Navbar.js";
14
- import { PostList as h } from "./components/PostList/PostList.js";
15
- import { Prose as g } from "./components/Prose/Prose.js";
16
- import { ReadingProgress as _ } from "./components/ReadingProgress/ReadingProgress.js";
17
- import { SectionTitle as v } from "./components/SectionTitle/SectionTitle.js";
18
- import { THEME_STORAGE_KEY as y, themeInitScript as b } from "./utils/theme.js";
19
- import { ThemeToggle as x } from "./components/ThemeToggle/ThemeToggle.js";
20
- import { Toc as S } from "./components/Toc/Toc.js";
21
- export { n as Banner, r as Button, c as CalendarIcon, i as Chip, l as ClockIcon, t as Container, a as Footer, u as GitHubIcon, o as GradientText, s as IconButton, p as Logo, d as MoonIcon, m as Navbar, h as PostList, g as Prose, _ as ReadingProgress, v as SectionTitle, f as SunIcon, y as THEME_STORAGE_KEY, x as ThemeToggle, S as Toc, e as cx, b as themeInitScript };
4
+ import { AccentText as t, GradientText as n } from "./components/AccentText/AccentText.js";
5
+ import { Container as r } from "./components/Container/Container.js";
6
+ import { Banner as i } from "./components/Banner/Banner.js";
7
+ import { Button as a } from "./components/Button/Button.js";
8
+ import { Chip as o } from "./components/Chip/Chip.js";
9
+ import { Footer as s } from "./components/Footer/Footer.js";
10
+ import { IconButton as c } from "./components/IconButton/IconButton.js";
11
+ import { CalendarIcon as l, ClockIcon as u, GitHubIcon as d, MoonIcon as f, SunIcon as p } from "./components/icons/icons.js";
12
+ import { Logo as m } from "./components/Logo/Logo.js";
13
+ import { Navbar as h } from "./components/Navbar/Navbar.js";
14
+ import { PostList as g } from "./components/PostList/PostList.js";
15
+ import { Prose as _ } from "./components/Prose/Prose.js";
16
+ import { ReadingProgress as v } from "./components/ReadingProgress/ReadingProgress.js";
17
+ import { SectionTitle as y } from "./components/SectionTitle/SectionTitle.js";
18
+ import { THEME_STORAGE_KEY as b, themeInitScript as x } from "./utils/theme.js";
19
+ import { ThemeToggle as S } from "./components/ThemeToggle/ThemeToggle.js";
20
+ import { Toc as C } from "./components/Toc/Toc.js";
21
+ export { t as AccentText, i as Banner, a as Button, l as CalendarIcon, o as Chip, u as ClockIcon, r as Container, s as Footer, d as GitHubIcon, n as GradientText, c as IconButton, m as Logo, f as MoonIcon, h as Navbar, g as PostList, _ as Prose, v as ReadingProgress, y as SectionTitle, p as SunIcon, b as THEME_STORAGE_KEY, S as ThemeToggle, C as Toc, e as cx, x as themeInitScript };
package/dist/styles.css CHANGED
@@ -1,2 +1,2 @@
1
- :root{--sd-bg:#fff;--sd-bg-subtle:#f6f8fa;--sd-bg-elevated:#fff;--sd-text:#2b3138;--sd-text-strong:#0d1117;--sd-text-muted:#6b7280;--sd-border:#e6e8eb;--sd-accent:#0d9488;--sd-accent-2:#2563eb;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 10%, transparent);--sd-accent-2-soft:color-mix(in srgb, var(--sd-accent-2) 8%, transparent);--sd-gradient:linear-gradient(120deg, var(--sd-accent), var(--sd-accent-2));--sd-code-bg:#f1f3f5;--sd-dot:#0d111714;--sd-shadow:0 1px 2px #0d11170a, 0 8px 24px #0d11170f;--sd-selection:color-mix(in srgb, var(--sd-accent) 18%, transparent);--sd-font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--sd-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sd-radius-sm:8px;--sd-radius-md:12px;--sd-radius-lg:14px;--sd-radius-full:999px;--sd-content-width:680px;--sd-wide-width:980px;--sd-header-height:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--sd-bg:#0e1013;--sd-bg-subtle:#15181c;--sd-bg-elevated:#1a1e23;--sd-text:#cfd4da;--sd-text-strong:#f3f4f6;--sd-text-muted:#8b929b;--sd-border:#262a30;--sd-accent:#2dd4bf;--sd-accent-2:#60a5fa;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 12%, transparent);--sd-accent-2-soft:color-mix(in srgb, var(--sd-accent-2) 10%, transparent);--sd-code-bg:#1d2126;--sd-dot:#ffffff0f;--sd-shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--sd-selection:color-mix(in srgb, var(--sd-accent) 25%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--sd-header-height) + 24px)}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--sd-bg);color:var(--sd-text);font-family:var(--sd-font-sans);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.8}::selection{background:var(--sd-selection)}h1,h2,h3,h4,h5,h6{color:var(--sd-text-strong);letter-spacing:-.025em;margin:0;font-weight:700;line-height:1.35}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}code,pre{font-family:var(--sd-font-mono)}@media (width<=640px){body{font-size:16px}}.sd-container-JMoiT{width:100%;max-width:calc(var(--sd-content-width) + 48px);margin:0 auto;padding-left:24px;padding-right:24px}@media (width>=1024px){.sd-wide-LxoRm{max-width:calc(var(--sd-wide-width) + 48px)}}@media (width<=640px){.sd-container-JMoiT{padding-left:20px;padding-right:20px}}.sd-banner-oyoWE{background:radial-gradient(ellipse 60% 120% at 10% 0%, var(--sd-accent-soft), transparent 70%), radial-gradient(ellipse 50% 100% at 95% 10%, var(--sd-accent-2-soft), transparent 70%), var(--sd-bg-subtle);border-bottom:1px solid var(--sd-border);position:relative;overflow:hidden}.sd-banner-oyoWE:before{content:"";background-image:radial-gradient(var(--sd-dot) 1px, transparent 1px);pointer-events:none;background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 90%);mask-image:linear-gradient(#000,#0000 90%)}.sd-banner-oyoWE>*{position:relative}.sd-inner-G1vOq{max-width:var(--sd-content-width);padding:64px 0 52px}.sd-lg-j2ruH{padding:72px 0 60px}.sd-eyebrow-Rf8QJ{color:var(--sd-accent);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:6px;margin:0 0 14px;font-size:.8rem;font-weight:700;display:flex}.sd-eyebrow-Rf8QJ a{transition:opacity .15s}.sd-eyebrow-Rf8QJ a:hover{opacity:.75}.sd-title-AeTHT{letter-spacing:-.04em;font-size:2.4rem;line-height:1.28}.sd-lg-j2ruH .sd-title-AeTHT{letter-spacing:-.045em;font-size:2.6rem;line-height:1.25}.sd-description-nbyf-{color:var(--sd-text-muted);margin:16px 0 0;font-size:1.08rem;line-height:1.65}@media (width<=640px){.sd-inner-G1vOq,.sd-lg-j2ruH{padding:44px 0 36px}.sd-title-AeTHT,.sd-lg-j2ruH .sd-title-AeTHT{font-size:1.75rem}.sd-description-nbyf-{font-size:1rem}}.sd-button-2ZuB7{border:1px solid var(--sd-border);background:var(--sd-bg-elevated);height:42px;color:var(--sd-text-strong);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:0 18px;font-size:.92rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:inline-flex}.sd-button-2ZuB7:hover{box-shadow:var(--sd-shadow);transform:translateY(-1px)}.sd-button-2ZuB7:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-primary-s1sM6{background:var(--sd-gradient);color:#fff;border-color:#0000}.sd-chip-0nys-{border-radius:var(--sd-radius-full);align-items:center;gap:6px;padding:5px 12px;font-size:.84rem;line-height:1.4;display:inline-flex}.sd-outline-s240C{border:1px solid var(--sd-border);background:var(--sd-bg-elevated);color:var(--sd-text-muted)}.sd-accent-wWCCB{background:var(--sd-accent-soft);color:var(--sd-accent);padding:1px 9px;font-size:.78rem;font-weight:700}.sd-footer-A76NF{border-top:1px solid var(--sd-border);background:var(--sd-bg-subtle);color:var(--sd-text-muted);font-size:.875rem}.sd-top-oMBPr{border-bottom:1px solid var(--sd-border);justify-content:space-between;gap:32px;padding:40px 0 28px;display:flex}.sd-brand-EmGiM{color:var(--sd-text-strong);letter-spacing:-.03em;align-items:center;gap:10px;font-size:1rem;font-weight:800;display:inline-flex}.sd-description-gSSA8{margin:8px 0 0}.sd-links-yNuwL{flex-wrap:wrap;align-content:flex-start;gap:8px 24px;display:flex}.sd-footer-A76NF a{transition:color .15s}.sd-footer-A76NF a:hover{color:var(--sd-accent)}.sd-bottom-np3Xe{justify-content:space-between;gap:16px;padding:20px 0 40px;font-size:.82rem;display:flex}@media (width<=640px){.sd-top-oMBPr{flex-direction:column;gap:20px}}.sd-gradientText-CxkVn{background:var(--sd-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.sd-iconButton-JAF-a{width:36px;height:36px;color:var(--sd-text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.sd-iconButton-JAF-a:hover{background:var(--sd-bg-subtle);color:var(--sd-text-strong)}.sd-iconButton-JAF-a:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-logo-p5tMH{width:var(--size);height:var(--size);border-radius:calc(var(--size) * .3);background:var(--sd-gradient);color:#fff;font-size:calc(var(--size) * .5);letter-spacing:0;box-shadow:0 2px 8px var(--sd-accent-soft);flex-shrink:0;justify-content:center;align-items:center;font-weight:800;line-height:1;display:inline-flex}.sd-header-aqSzZ{z-index:20;background:color-mix(in srgb, var(--sd-bg) 80%, transparent);-webkit-backdrop-filter:saturate(180%)blur(14px);border-bottom:1px solid var(--sd-border);position:sticky;top:0}.sd-nav-0oisE{height:var(--sd-header-height);justify-content:space-between;align-items:center;gap:16px;display:flex}.sd-brand-P5uLt{color:var(--sd-text-strong);letter-spacing:-.035em;white-space:nowrap;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;display:flex}.sd-right-64OWF{align-items:center;gap:2px;display:flex}.sd-link-UwJZv{border-radius:var(--sd-radius-full);color:var(--sd-text-muted);padding:6px 14px;font-size:.93rem;font-weight:500;line-height:1.6;transition:background-color .15s,color .15s;display:inline-block}.sd-link-UwJZv:hover{color:var(--sd-text-strong)}.sd-active-Rf9bv,.sd-active-Rf9bv:hover{background:var(--sd-accent-soft);color:var(--sd-accent);font-weight:700}.sd-divider-ZjuJB{background:var(--sd-border);width:1px;height:18px;margin:0 8px}.sd-actions-8BNWJ{align-items:center;gap:2px;display:flex}@media (width<=640px){.sd-link-UwJZv{padding:6px 11px}.sd-divider-ZjuJB{display:none}}.sd-list-6ceM4{flex-direction:column;gap:4px;margin:0 -20px;padding:0;list-style:none;display:flex}.sd-item-OoBbo{border-radius:var(--sd-radius-lg);border:1px solid #0000;align-items:center;gap:24px;padding:22px 20px;transition:background-color .2s,border-color .2s,box-shadow .2s;display:flex}.sd-item-OoBbo:hover{border-color:var(--sd-border);background:var(--sd-bg-elevated);box-shadow:var(--sd-shadow)}.sd-body-WN59Q{flex:1;min-width:0}.sd-title-wv5Et{font-size:1.22rem;transition:color .15s}.sd-item-OoBbo:hover .sd-title-wv5Et{color:var(--sd-accent)}.sd-description--Ndtf{color:var(--sd-text);margin:6px 0 0;font-size:.97rem;line-height:1.65}.sd-meta-91tNg{color:var(--sd-text-muted);flex-wrap:wrap;margin-top:12px;font-size:.84rem;display:flex}.sd-meta-91tNg>:not(:first-child):before{content:"·";margin:0 8px}.sd-arrow-cVFi9{color:var(--sd-accent);opacity:0;font-size:1.2rem;transition:opacity .2s,transform .2s;transform:translate(-8px)}.sd-item-OoBbo:hover .sd-arrow-cVFi9{opacity:1;transform:none}@media (width<=640px){.sd-list-6ceM4{margin:0 -12px}.sd-item-OoBbo{padding:18px 12px}.sd-arrow-cVFi9{display:none}}.sd-prose-Obc4t{min-width:0;color:var(--sd-text)}.sd-prose-Obc4t>:first-child{margin-top:0}.sd-prose-Obc4t p{margin:0 0 1.4em}.sd-prose-Obc4t h2{margin:2.8em 0 .9em;padding-left:16px;font-size:1.5rem;position:relative}.sd-prose-Obc4t h2:before{content:"";background:var(--sd-gradient);border-radius:4px;width:4px;position:absolute;top:.2em;bottom:.2em;left:0}.sd-prose-Obc4t h3{margin:2em 0 .7em;font-size:1.22rem}.sd-prose-Obc4t h4{margin:1.6em 0 .6em;font-size:1.05rem}.sd-prose-Obc4t a{color:var(--sd-accent);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-underline-offset:3px;transition:text-decoration-color .15s}.sd-prose-Obc4t a:hover{-webkit-text-decoration-color:var(--sd-accent);text-decoration-color:var(--sd-accent)}.sd-prose-Obc4t strong{color:var(--sd-text-strong);font-weight:700}.sd-prose-Obc4t ul,.sd-prose-Obc4t ol{margin:0 0 1.4em;padding-left:1.4em}.sd-prose-Obc4t li{margin:.35em 0;padding-left:.2em}.sd-prose-Obc4t ul>li::marker{color:var(--sd-accent)}.sd-prose-Obc4t ol>li::marker{color:var(--sd-accent);font-variant-numeric:tabular-nums;font-weight:700}.sd-prose-Obc4t img{border-radius:var(--sd-radius-md);margin:2em auto;display:block}.sd-prose-Obc4t blockquote{border-left:4px solid var(--sd-accent);background:var(--sd-accent-soft);color:var(--sd-text);border-radius:0 10px 10px 0;margin:1.8em 0;padding:1em 1.25em}.sd-prose-Obc4t blockquote>:last-child{margin-bottom:0}.sd-prose-Obc4t hr{border:none;border-top:1px solid var(--sd-border);margin:2.5em 0}.sd-prose-Obc4t table{border:1px solid var(--sd-border);border-collapse:separate;border-spacing:0;border-radius:10px;width:100%;max-width:100%;margin:1.8em 0;font-size:.92em;line-height:1.6;display:block;overflow-x:auto}.sd-prose-Obc4t th,.sd-prose-Obc4t td{border-bottom:1px solid var(--sd-border);text-align:left;vertical-align:top;padding:.7em 1em}.sd-prose-Obc4t tr:last-child td{border-bottom:none}.sd-prose-Obc4t th{background:var(--sd-bg-subtle);color:var(--sd-text-strong);white-space:nowrap;font-weight:600}.sd-prose-Obc4t td:first-child{white-space:nowrap;font-weight:500}.sd-prose-Obc4t :not(pre)>code{background:var(--sd-code-bg);color:var(--sd-text-strong);word-break:break-word;border-radius:5px;padding:.15em .4em;font-size:.86em}.sd-prose-Obc4t pre{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);margin:1.8em 0;padding:1.1em 1.3em;font-size:.86rem;line-height:1.65;overflow-x:auto}:root:not([data-theme=dark]) .sd-prose-Obc4t :is(.shiki,.astro-code){background-color:var(--sd-bg-subtle)!important}:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code),:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code) span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}@media (width<=640px){.sd-prose-Obc4t h2{font-size:1.32rem}}.sd-progress-52KzL{background:var(--sd-gradient);width:100%;height:3px;transform:scaleX(var(--progress,0));transform-origin:0;pointer-events:none;left:0}.sd-attached-n7Ovo{position:absolute;bottom:-1px}.sd-fixed-GqraP{z-index:30;position:fixed;top:0}.sd-head-tgU0N{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.sd-title-Uxtii{font-variant-numeric:tabular-nums;align-items:center;gap:10px;font-size:1.3rem;display:flex}.sd-title-Uxtii:before{content:"";background:var(--sd-gradient);border-radius:4px;width:4px;height:1.1em}.sd-action-Vs6N5{color:var(--sd-text-muted);font-size:.88rem;font-weight:500}.sd-action-Vs6N5 a{transition:color .15s}.sd-action-Vs6N5 a:hover{color:var(--sd-accent)}:root[data-theme=dark] .sd-sun-7vHKu,:root:not([data-theme=dark]) .sd-moon-sqz-D{display:none}.sd-list-ntSgl{margin:0;padding:0;list-style:none}.sd-sidebar-Oo6GJ{top:calc(var(--sd-header-height) + 32px);max-height:calc(100vh - var(--sd-header-height) - 64px);align-self:start;font-size:.86rem;line-height:1.5;position:sticky;overflow-y:auto}.sd-title-sn1aR{color:var(--sd-text-strong);letter-spacing:.08em;margin:0 0 12px;font-size:.78rem;font-weight:700}.sd-sidebar-Oo6GJ .sd-list-ntSgl{border-left:2px solid var(--sd-border)}.sd-sidebar-Oo6GJ .sd-link-1iE3P{color:var(--sd-text-muted);border-left:2px solid #0000;margin-left:-2px;padding:6px 0 6px 14px;transition:color .15s,border-color .15s;display:block}.sd-sidebar-Oo6GJ .sd-sub-zhWRq .sd-link-1iE3P{padding-left:28px;font-size:.82rem}.sd-sidebar-Oo6GJ .sd-link-1iE3P:hover{color:var(--sd-text-strong)}.sd-sidebar-Oo6GJ .sd-active-2X5eC,.sd-sidebar-Oo6GJ .sd-active-2X5eC:hover{border-left-color:var(--sd-accent);color:var(--sd-accent);font-weight:600}.sd-inline-oyv0J{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);font-size:.92rem}.sd-inline-oyv0J summary{color:var(--sd-text-strong);cursor:pointer;padding:12px 18px;font-weight:700}.sd-inline-oyv0J .sd-list-ntSgl{padding:0 18px 14px}.sd-inline-oyv0J li{padding:4px 0}.sd-inline-oyv0J .sd-sub-zhWRq{padding-left:16px}.sd-inline-oyv0J .sd-link-1iE3P{color:var(--sd-text-muted)}.sd-inline-oyv0J .sd-link-1iE3P:hover{color:var(--sd-accent)}
1
+ :root{--sd-bg:#fff;--sd-bg-subtle:#f6f7f8;--sd-bg-elevated:#fff;--sd-text:#2f353c;--sd-text-strong:#12161b;--sd-text-muted:#6b7280;--sd-border:#e6e8eb;--sd-accent:#15803d;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 9%, transparent);--sd-code-bg:#f1f3f5;--sd-shadow:0 1px 2px #12161b0a, 0 8px 24px #12161b0f;--sd-selection:color-mix(in srgb, var(--sd-accent) 18%, transparent);--sd-on-accent:#fff;--sd-font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--sd-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sd-text-xs:.8125rem;--sd-text-sm:.875rem;--sd-text-md:.9375rem;--sd-text-base:1rem;--sd-text-body:1.0625rem;--sd-text-lg:1.125rem;--sd-text-xl:1.25rem;--sd-text-2xl:1.5rem;--sd-text-3xl:1.75rem;--sd-text-4xl:2.5rem;--sd-weight-medium:500;--sd-weight-semibold:600;--sd-weight-bold:700;--sd-weight-heavy:800;--sd-leading-tight:1.25;--sd-leading-snug:1.4;--sd-leading-normal:1.6;--sd-leading-relaxed:1.8;--sd-tracking-display:-.04em;--sd-tracking-tight:-.025em;--sd-tracking-body:-.01em;--sd-tracking-wide:.08em;--sd-space-0-5:2px;--sd-space-1:4px;--sd-space-1-5:6px;--sd-space-2:8px;--sd-space-3:12px;--sd-space-4:16px;--sd-space-5:20px;--sd-space-6:24px;--sd-space-8:32px;--sd-space-10:40px;--sd-space-12:48px;--sd-space-16:64px;--sd-space-20:80px;--sd-space-24:96px;--sd-radius-xs:4px;--sd-radius-sm:8px;--sd-radius-md:12px;--sd-radius-lg:16px;--sd-radius-full:999px;--sd-duration-fast:.15s;--sd-duration-base:.2s;--sd-ease:ease;--sd-z-header:20;--sd-z-overlay:30;--sd-content-width:680px;--sd-wide-width:980px;--sd-header-height:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--sd-bg:#0f1113;--sd-bg-subtle:#16191c;--sd-bg-elevated:#1a1e22;--sd-text:#cdd2d8;--sd-text-strong:#f2f4f6;--sd-text-muted:#8a919a;--sd-border:#24282d;--sd-accent:#4ccb7a;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 12%, transparent);--sd-on-accent:#06200f;--sd-code-bg:#1d2126;--sd-shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--sd-selection:color-mix(in srgb, var(--sd-accent) 25%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--sd-header-height) + var(--sd-space-6))}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--sd-bg);color:var(--sd-text);font-family:var(--sd-font-sans);font-size:var(--sd-text-body);line-height:var(--sd-leading-relaxed);letter-spacing:var(--sd-tracking-body);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;margin:0}::selection{background:var(--sd-selection)}h1,h2,h3,h4,h5,h6{color:var(--sd-text-strong);line-height:var(--sd-leading-snug);letter-spacing:var(--sd-tracking-tight);font-weight:var(--sd-weight-bold);margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}code,pre{font-family:var(--sd-font-mono)}@media (width<=640px){body{font-size:var(--sd-text-base)}}.sd-accentText-yA-3B{color:var(--sd-accent)}.sd-container-JMoiT{width:100%;max-width:calc(var(--sd-content-width) + var(--sd-space-6) * 2);padding-left:var(--sd-space-6);padding-right:var(--sd-space-6);margin:0 auto}@media (width>=1024px){.sd-wide-LxoRm{max-width:calc(var(--sd-wide-width) + var(--sd-space-6) * 2)}}@media (width<=640px){.sd-container-JMoiT{padding-left:var(--sd-space-5);padding-right:var(--sd-space-5)}}.sd-banner-oyoWE{background:var(--sd-bg);border-bottom:1px solid var(--sd-border)}.sd-inner-G1vOq{max-width:var(--sd-content-width);padding:var(--sd-space-16) 0 var(--sd-space-12)}.sd-lg-j2ruH{padding:var(--sd-space-20) 0 var(--sd-space-16)}.sd-eyebrow-Rf8QJ{align-items:center;gap:var(--sd-space-1-5);margin:0 0 var(--sd-space-3);color:var(--sd-accent);font-size:var(--sd-text-xs);font-weight:var(--sd-weight-bold);letter-spacing:var(--sd-tracking-wide);text-transform:uppercase;display:flex}.sd-eyebrow-Rf8QJ a{transition:opacity var(--sd-duration-fast) var(--sd-ease)}.sd-eyebrow-Rf8QJ a:hover{opacity:.75}.sd-title-AeTHT{font-size:var(--sd-text-4xl);line-height:var(--sd-leading-tight);letter-spacing:var(--sd-tracking-display)}.sd-description-nbyf-{margin:var(--sd-space-4) 0 0;color:var(--sd-text-muted);font-size:var(--sd-text-lg);line-height:var(--sd-leading-normal)}@media (width<=640px){.sd-inner-G1vOq,.sd-lg-j2ruH{padding:var(--sd-space-12) 0 var(--sd-space-10)}.sd-title-AeTHT{font-size:var(--sd-text-3xl)}.sd-description-nbyf-{font-size:var(--sd-text-base)}}.sd-button-2ZuB7{align-items:center;gap:var(--sd-space-2);height:42px;padding:0 var(--sd-space-5);border:1px solid var(--sd-border);border-radius:var(--sd-radius-sm);background:var(--sd-bg-elevated);color:var(--sd-text-strong);font:inherit;font-size:var(--sd-text-md);font-weight:var(--sd-weight-semibold);cursor:pointer;transition:background-color var(--sd-duration-fast) var(--sd-ease), border-color var(--sd-duration-fast) var(--sd-ease);text-decoration:none;display:inline-flex}.sd-button-2ZuB7:hover{background:var(--sd-bg-subtle)}.sd-button-2ZuB7:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-primary-s1sM6{background:var(--sd-accent);color:var(--sd-on-accent);border-color:#0000}.sd-primary-s1sM6:hover{background:color-mix(in srgb, var(--sd-accent) 85%, var(--sd-text-strong))}.sd-chip-0nys-{align-items:center;gap:var(--sd-space-1-5);padding:var(--sd-space-1) var(--sd-space-3);border-radius:var(--sd-radius-full);font-size:var(--sd-text-sm);line-height:var(--sd-leading-snug);display:inline-flex}.sd-outline-s240C{border:1px solid var(--sd-border);background:var(--sd-bg-elevated);color:var(--sd-text-muted)}.sd-accent-wWCCB{padding:1px var(--sd-space-2);background:var(--sd-accent-soft);color:var(--sd-accent);font-size:var(--sd-text-xs);font-weight:var(--sd-weight-bold)}.sd-footer-A76NF{border-top:1px solid var(--sd-border);background:var(--sd-bg-subtle);color:var(--sd-text-muted);font-size:var(--sd-text-sm)}.sd-top-oMBPr{justify-content:space-between;gap:var(--sd-space-8);padding:var(--sd-space-10) 0 var(--sd-space-8);border-bottom:1px solid var(--sd-border);display:flex}.sd-brand-EmGiM{align-items:center;gap:var(--sd-space-2);color:var(--sd-text-strong);font-size:var(--sd-text-base);font-weight:var(--sd-weight-heavy);letter-spacing:var(--sd-tracking-tight);display:inline-flex}.sd-description-gSSA8{margin:var(--sd-space-2) 0 0}.sd-links-yNuwL{gap:var(--sd-space-2) var(--sd-space-6);flex-wrap:wrap;align-content:flex-start;display:flex}.sd-footer-A76NF a{transition:color var(--sd-duration-fast) var(--sd-ease)}.sd-footer-A76NF a:hover{color:var(--sd-accent)}.sd-bottom-np3Xe{justify-content:space-between;gap:var(--sd-space-4);padding:var(--sd-space-5) 0 var(--sd-space-10);font-size:var(--sd-text-xs);display:flex}@media (width<=640px){.sd-top-oMBPr{gap:var(--sd-space-5);flex-direction:column}}.sd-iconButton-JAF-a{border-radius:var(--sd-radius-sm);width:36px;height:36px;color:var(--sd-text-muted);cursor:pointer;transition:background-color var(--sd-duration-fast) var(--sd-ease), color var(--sd-duration-fast) var(--sd-ease);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.sd-iconButton-JAF-a:hover{background:var(--sd-bg-subtle);color:var(--sd-text-strong)}.sd-iconButton-JAF-a:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-logo-p5tMH{width:var(--size);height:var(--size);border-radius:calc(var(--size) * .3);background:var(--sd-accent);color:var(--sd-on-accent);font-size:calc(var(--size) * .5);font-weight:var(--sd-weight-heavy);letter-spacing:0;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}.sd-header-aqSzZ{z-index:var(--sd-z-header);background:color-mix(in srgb, var(--sd-bg) 80%, transparent);-webkit-backdrop-filter:saturate(180%)blur(14px);border-bottom:1px solid var(--sd-border);position:sticky;top:0}.sd-nav-0oisE{justify-content:space-between;align-items:center;gap:var(--sd-space-4);height:var(--sd-header-height);display:flex}.sd-brand-P5uLt{align-items:center;gap:var(--sd-space-2);color:var(--sd-text-strong);font-size:var(--sd-text-lg);font-weight:var(--sd-weight-heavy);letter-spacing:var(--sd-tracking-tight);white-space:nowrap;display:flex}.sd-right-64OWF{align-items:center;gap:var(--sd-space-0-5);display:flex}.sd-link-UwJZv{padding:var(--sd-space-1-5) var(--sd-space-3);border-radius:var(--sd-radius-full);color:var(--sd-text-muted);font-size:var(--sd-text-md);font-weight:var(--sd-weight-medium);line-height:var(--sd-leading-normal);transition:color var(--sd-duration-fast) var(--sd-ease);display:inline-block}.sd-link-UwJZv:hover{color:var(--sd-text-strong)}.sd-link-UwJZv:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-active-Rf9bv,.sd-active-Rf9bv:hover{color:var(--sd-accent);font-weight:var(--sd-weight-bold)}.sd-divider-ZjuJB{width:1px;height:18px;margin:0 var(--sd-space-2);background:var(--sd-border)}.sd-actions-8BNWJ{align-items:center;gap:var(--sd-space-0-5);display:flex}@media (width<=640px){.sd-divider-ZjuJB{display:none}}.sd-list-6ceM4{gap:var(--sd-space-1);margin:0 calc(var(--sd-space-5) * -1);flex-direction:column;padding:0;list-style:none;display:flex}.sd-item-OoBbo{align-items:center;gap:var(--sd-space-6);padding:var(--sd-space-5);border-radius:var(--sd-radius-lg);transition:background-color var(--sd-duration-base) var(--sd-ease);display:flex}.sd-item-OoBbo:hover{background:var(--sd-bg-subtle)}.sd-item-OoBbo:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-body-WN59Q{flex:1;min-width:0}.sd-title-wv5Et{font-size:var(--sd-text-xl);transition:color var(--sd-duration-fast) var(--sd-ease)}.sd-item-OoBbo:hover .sd-title-wv5Et{color:var(--sd-accent)}.sd-description--Ndtf{margin:var(--sd-space-1-5) 0 0;color:var(--sd-text);font-size:var(--sd-text-md);line-height:var(--sd-leading-normal)}.sd-meta-91tNg{margin-top:var(--sd-space-3);color:var(--sd-text-muted);font-size:var(--sd-text-sm);flex-wrap:wrap;display:flex}.sd-meta-91tNg>:not(:first-child):before{content:"·";margin:0 var(--sd-space-2)}.sd-arrow-cVFi9{color:var(--sd-accent);font-size:var(--sd-text-xl);opacity:0;transition:opacity var(--sd-duration-base) var(--sd-ease)}.sd-item-OoBbo:hover .sd-arrow-cVFi9{opacity:1}@media (width<=640px){.sd-list-6ceM4{margin:0 calc(var(--sd-space-3) * -1)}.sd-item-OoBbo{padding:var(--sd-space-4) var(--sd-space-3)}.sd-arrow-cVFi9{display:none}}.sd-prose-Obc4t{min-width:0;color:var(--sd-text)}.sd-prose-Obc4t>:first-child{margin-top:0}.sd-prose-Obc4t p{margin:0 0 1.4em}.sd-prose-Obc4t h2{padding-bottom:var(--sd-space-2);border-bottom:1px solid var(--sd-border);font-size:var(--sd-text-2xl);margin:2.8em 0 .9em}.sd-prose-Obc4t h3{font-size:var(--sd-text-xl);margin:2em 0 .7em}.sd-prose-Obc4t h4{font-size:var(--sd-text-lg);margin:1.6em 0 .6em}.sd-prose-Obc4t a{color:var(--sd-accent);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-underline-offset:3px;transition:text-decoration-color var(--sd-duration-fast) var(--sd-ease)}.sd-prose-Obc4t a:hover{-webkit-text-decoration-color:var(--sd-accent);text-decoration-color:var(--sd-accent)}.sd-prose-Obc4t strong{color:var(--sd-text-strong);font-weight:var(--sd-weight-bold)}.sd-prose-Obc4t ul,.sd-prose-Obc4t ol{margin:0 0 1.4em;padding-left:1.4em}.sd-prose-Obc4t li{margin:.35em 0;padding-left:.2em}.sd-prose-Obc4t ul>li::marker{color:var(--sd-accent)}.sd-prose-Obc4t ol>li::marker{color:var(--sd-accent);font-weight:var(--sd-weight-bold);font-variant-numeric:tabular-nums}.sd-prose-Obc4t img{border-radius:var(--sd-radius-md);margin:2em auto;display:block}.sd-prose-Obc4t blockquote{border-left:4px solid var(--sd-accent);border-radius:0 var(--sd-radius-md) var(--sd-radius-md) 0;background:var(--sd-accent-soft);color:var(--sd-text);margin:1.8em 0;padding:1em 1.25em}.sd-prose-Obc4t blockquote>:last-child{margin-bottom:0}.sd-prose-Obc4t hr{border:none;border-top:1px solid var(--sd-border);margin:2.5em 0}.sd-prose-Obc4t table{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);border-collapse:separate;border-spacing:0;width:100%;max-width:100%;font-size:.92em;line-height:var(--sd-leading-normal);margin:1.8em 0;display:block;overflow-x:auto}.sd-prose-Obc4t th,.sd-prose-Obc4t td{border-bottom:1px solid var(--sd-border);text-align:left;vertical-align:top;padding:.7em 1em}.sd-prose-Obc4t tr:last-child td{border-bottom:none}.sd-prose-Obc4t th{background:var(--sd-bg-subtle);color:var(--sd-text-strong);font-weight:var(--sd-weight-semibold);white-space:nowrap}.sd-prose-Obc4t td:first-child{white-space:nowrap;font-weight:var(--sd-weight-medium)}.sd-prose-Obc4t :not(pre)>code{border-radius:var(--sd-radius-xs);background:var(--sd-code-bg);color:var(--sd-text-strong);word-break:break-word;padding:.15em .4em;font-size:.86em}.sd-prose-Obc4t pre{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);font-size:var(--sd-text-sm);line-height:var(--sd-leading-normal);margin:1.8em 0;padding:1.1em 1.3em;overflow-x:auto}:root:not([data-theme=dark]) .sd-prose-Obc4t :is(.shiki,.astro-code){background-color:var(--sd-bg-subtle)!important}:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code),:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code) span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}@media (width<=640px){.sd-prose-Obc4t h2{font-size:var(--sd-text-xl)}}.sd-progress-52KzL{background:var(--sd-accent);width:100%;height:3px;transform:scaleX(var(--progress,0));transform-origin:0;pointer-events:none;left:0}.sd-attached-n7Ovo{position:absolute;bottom:-1px}.sd-fixed-GqraP{z-index:var(--sd-z-overlay);position:fixed;top:0}.sd-head-tgU0N{justify-content:space-between;align-items:center;gap:var(--sd-space-4);margin-bottom:var(--sd-space-4);display:flex}.sd-title-Uxtii{font-size:var(--sd-text-xl);font-variant-numeric:tabular-nums}.sd-action-Vs6N5{color:var(--sd-text-muted);font-size:var(--sd-text-sm);font-weight:var(--sd-weight-medium)}.sd-action-Vs6N5 a{transition:color var(--sd-duration-fast) var(--sd-ease)}.sd-action-Vs6N5 a:hover{color:var(--sd-accent)}:root[data-theme=dark] .sd-sun-7vHKu,:root:not([data-theme=dark]) .sd-moon-sqz-D{display:none}.sd-list-ntSgl{margin:0;padding:0;list-style:none}.sd-sidebar-Oo6GJ{top:calc(var(--sd-header-height) + var(--sd-space-8));max-height:calc(100vh - var(--sd-header-height) - var(--sd-space-16));font-size:var(--sd-text-sm);line-height:var(--sd-leading-normal);align-self:start;position:sticky;overflow-y:auto}.sd-title-sn1aR{margin:0 0 var(--sd-space-3);color:var(--sd-text-strong);font-size:var(--sd-text-xs);font-weight:var(--sd-weight-bold);letter-spacing:var(--sd-tracking-wide)}.sd-sidebar-Oo6GJ .sd-list-ntSgl{border-left:2px solid var(--sd-border)}.sd-sidebar-Oo6GJ .sd-link-1iE3P{padding:var(--sd-space-1-5) 0 var(--sd-space-1-5) var(--sd-space-3);color:var(--sd-text-muted);transition:color var(--sd-duration-fast) var(--sd-ease), border-color var(--sd-duration-fast) var(--sd-ease);border-left:2px solid #0000;margin-left:-2px;display:block}.sd-sidebar-Oo6GJ .sd-sub-zhWRq .sd-link-1iE3P{padding-left:var(--sd-space-6);font-size:var(--sd-text-xs)}.sd-sidebar-Oo6GJ .sd-link-1iE3P:hover{color:var(--sd-text-strong)}.sd-sidebar-Oo6GJ .sd-active-2X5eC,.sd-sidebar-Oo6GJ .sd-active-2X5eC:hover{border-left-color:var(--sd-accent);color:var(--sd-accent);font-weight:var(--sd-weight-semibold)}.sd-inline-oyv0J{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);font-size:var(--sd-text-md)}.sd-inline-oyv0J summary{padding:var(--sd-space-3) var(--sd-space-4);color:var(--sd-text-strong);font-weight:var(--sd-weight-bold);cursor:pointer}.sd-inline-oyv0J .sd-list-ntSgl{padding:0 var(--sd-space-4) var(--sd-space-3)}.sd-inline-oyv0J li{padding:var(--sd-space-1) 0}.sd-inline-oyv0J .sd-sub-zhWRq{padding-left:var(--sd-space-4)}.sd-inline-oyv0J .sd-link-1iE3P{color:var(--sd-text-muted)}.sd-inline-oyv0J .sd-link-1iE3P:hover{color:var(--sd-accent)}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,9 +1,21 @@
1
1
  {
2
2
  "name": "shindonghyeo-ui",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "신동혁의 개인 React 디자인 시스템",
5
+ "keywords": [
6
+ "react",
7
+ "design-system",
8
+ "components",
9
+ "ui",
10
+ "css-modules",
11
+ "storybook"
12
+ ],
5
13
  "license": "MIT",
6
14
  "author": "Donghyeok Shin",
15
+ "homepage": "https://shindonghyeo.github.io/shindonghyeo-ui/",
16
+ "bugs": {
17
+ "url": "https://github.com/SHINDongHyeo/shindonghyeo-ui/issues"
18
+ },
7
19
  "repository": {
8
20
  "type": "git",
9
21
  "url": "git+https://github.com/SHINDongHyeo/shindonghyeo-ui.git"
@@ -28,18 +40,23 @@
28
40
  "dev": "vite",
29
41
  "build": "vite build",
30
42
  "typecheck": "tsc --noEmit",
31
- "prepare": "npm run build"
43
+ "prepare": "npm run build",
44
+ "storybook": "storybook dev -p 6006",
45
+ "build-storybook": "storybook build -o storybook-static"
32
46
  },
33
47
  "peerDependencies": {
34
48
  "react": ">=18",
35
49
  "react-dom": ">=18"
36
50
  },
37
51
  "devDependencies": {
52
+ "@storybook/addon-docs": "^10.6.5",
53
+ "@storybook/react-vite": "^10.6.5",
38
54
  "@types/react": "^19.3.0",
39
55
  "@types/react-dom": "^19.3.0",
40
56
  "@vitejs/plugin-react": "^6.1.2",
41
57
  "react": "^19.3.1",
42
58
  "react-dom": "^19.3.1",
59
+ "storybook": "^10.6.5",
43
60
  "typescript": "^6.0.3",
44
61
  "vite": "^8.3.5",
45
62
  "vite-plugin-dts": "^5.1.2"
package/dist/components/GradientText/GradientText.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { ComponentPropsWithoutRef } from 'react';
2
- export declare function GradientText({ className, ...props }: ComponentPropsWithoutRef<'span'>): import('react').JSX.Element;
package/dist/components/GradientText/GradientText.module.js DELETED
@@ -1,3 +0,0 @@
1
- // src/components/GradientText/GradientText.module.css
2
- var e = "sd-gradientText-CxkVn", t = { gradientText: e };
3
- export { t as default, e as gradientText };