@hankookilbo/weave-ui

🧱 Shadcn 원본 컴포넌트 + 자체 Composites(조합형) 컴포넌트를 제공하는 UI 패키지입니다. 스타일은 Tailwind CSS v4 (CSS only) 기반으로 제공됩니다.

📦 Requirements

npm i react react-dom tailwindcss

Tailwind v4는 CSS 전용(@theme 등) 구성을 사용합니다. 별도 설정이 없다면 전역 CSS에 본 패키지의 스타일만 import 해도 동작합니다.

🚀 Install

npm i @hankookilbo/weave-ui

🧩 Setup (CSS 한 줄)

전역 스타일에 다음 한 줄을 import하세요.

import "@hankookilbo/weave-ui/globals.css";

또는 CSS에서:

/* e.g. src/styles/globals.css */
@import "@hankookilbo/weave-ui/globals.css";

팀의 디자인 토큰(색상, radius, spacing 등)은 이 CSS에서 일괄 제어됩니다.

✨ Usage

import { Button, HelloWorld } from "@hankookilbo/weave-ui";

export default function Page() {
  return (
    <div className="p-4 space-x-2">
      <Button>Click me</Button>
      <HelloWorld />
    </div>
  );
}

🧭 Work Flow

| 단계 | 설명 | | ---- | --------------------------------------------------- | | 1️⃣ | 기능 개발 브랜치 생성 → feature/** | | 2️⃣ | head 환경에서 Storybook 완성 (npm run sb:dev) | | 3️⃣ | 버전 업데이트 및 태그 푸시 → v*.*.* | | 4️⃣ | 스냅샷 생성 (npm run snapshot) | | 5️⃣ | main 머지 및 검증 완료 |

태그명과 package.json 버전이 일치해야 패키지가 생성됩니다.

📚 Storybook 태그 운영

스토리북 배포는 단일 태그 s*.*.* 으로 관리합니다.

• 태그 이름은 s*.*.* 입니다.
• 최신 Storybook을 배포하고 싶은 커밋에서:

git tag -f s*.*.*
git push origin -f s*.*.*

• GitLab CI 동작:

  • s*.*.* 태그 → Storybook 빌드 + FTP 배포만 실행
  • v*.*.* 태그 → 패키지 빌드 + npm publish만 실행
  • 그 외 push / MR / 다른 태그 → 아무 파이프라인도 생성되지 않음

즉, storybook 태그는 “현재 브랜치 상태 기준 최신 Storybook 미리보기” 용도로만 사용됩니다. 릴리즈 버전과는 독립적으로, 언제든지 덮어써도 됩니다.

🎨 컴포넌트 Variants 규칙

1. none — 아무 클래스도 없는 기본 상태
2. home/primary — 대표 스타일 (CTA 등)

<Button variant="none">Text</Button>
<Button variant="home/primary">Call to action</Button>

🧱 Deprecation Policy

| 규칙 | 설명 | | ---- | ------------------------------------------------- | | ⏳ | 디플리케이트 후 다음 Major 출시 시 제거 가능 | | 📣 | 이유 / 대안 / 제거예정일 / 이슈 링크 필수 | | ⚠️ | Storybook, CHANGELOG, 콘솔 경고로 사용자에게 안내 |

if (process.env.NODE_ENV !== "production") {
  console.warn(
    "[@hankookilbo/weave-ui] <OldComponent> is deprecated and will be removed in v4 on 2025-05-01. Use <NewComponent> instead."
  );
}

🧩 트러블슈팅

| 증상 | 해결 방법 | | ----------------- | ------------------------------------------------------------------------ | | 스타일 적용 안 됨 | 전역 CSS에 @import "@hankookilbo/weave-ui/globals.css"; 포함 여부 확인 | | CSS 순서 문제 | Next.js 등에서는 글로벌 CSS를 앱 초기 진입 시점에 import |

🪵 변경 로그 (요약)

v0.2.0 — 2025-10-31
- Added: CalendarDialog 컴포넌트
- Changed: radius 토큰값 리뉴얼
- Fixed: Button focus outline 색상 보정

📄 License

MIT (별도 공지 없을 경우)

🔗 Related Links

• 📁 Repo: aws-gitlab.hankookilbo.com/frontend/hk/weave-ui
• 🧱 Storybook: digitest.hankookilbo.com/weave-ui-storybook
• 📦 Registry: frontend/hk Packages