WDS DS & UI Dev

WDS UI 가이드 컴포넌트/스타일을 정리하고, 배포 가능한 패키지 형태로 운영하기 위한 프로젝트입니다.

프로젝트 목적

• 디자인 시스템 토큰을 KRDS/글로벌 기준에 맞춰 퍼블리싱 업무에 적용
• React + Next.js + Tailwind CSS + TypeScript 기반 UI 가이드 운영
• 컴포넌트 중심 제작/검증/배포 프로세스 정립
• 일관된 코드 스타일과 품질 기준으로 생산성 향상

수행 범위

• 컴포넌트 제작: Basic, Common, UI
• 접근성/시맨틱 마크업 준수
• 프로젝트 규칙(.cursor/rules) 및 반복 패턴(skills) 기반 작업
• 패키지 제작 및 배포 검증

패키지 개요

• 패키지명: wds-lab
• 현재 버전: 0.0.4
• 목적: UI 가이드 레퍼런스 및 공통 컴포넌트/스타일 전달
• 배포 채널: npm (public)
• 설명 문구(샘플): WDS UI Guide 컴포넌트/스타일 참조 패키지

패키지 사용 방법 (소비 프로젝트)

패키지 컴포넌트는 루트 엔트리에서 import하고, 스타일은 앱 루트 레이아웃(또는 앱 시작점)에서 1회만 import합니다.

import 'wds-lab/styles.css'
import { InputText, InputCheck, InputCheckBox } from 'wds-lab'

• 컴포넌트 import: wds-lab
• 스타일 import: wds-lab/styles.css (앱 전체에서 1회)
• wds-lab/src/... 같은 deep import는 배포 구조 변경 시 깨질 수 있어 권장하지 않습니다.

패키지 빌드 방식 (dist)

패키지 배포 파일은 dist/를 기준으로 자동 생성합니다.

npm run build:package

• 수동 복사/이동 없이 매번 dist/를 clean 후 재생성합니다.
• 컴포넌트 엔트리: dist/index.js, dist/index.d.ts
• 스타일 엔트리: dist/styles.css (내부에서 dist/assets/styles/globals.css 참조)

로컬 설치 및 실행

npm install
npm run dev

• 개발 서버: http://localhost:5000
• UI 가이드 경로: /uiguide

배포 전 체크리스트

아래 명령이 모두 성공해야 배포 가능합니다.

npm run lint
npm run typecheck
npm run build:package
npm run pack:check

• lint: 코드 규칙 점검
• typecheck: 타입 오류 점검
• build:package: 배포용 dist 산출물 생성
• pack:check: 실제 배포 tarball 포함 파일 사전 검증

배포 절차 (A안: npm 패키지)

1. package.json 버전 갱신 (version)
2. 패키지 내용 사전 점검

   npm run pack:check

3. 로그인/권한 확인

   npm whoami

4. 배포 실행

   npm publish

포함/제외 파일 정책

• 포함 기준
  • dist/**
  • README.md
  • CHANGELOG.md
• 제외 기준
  • .next/**, node_modules/**, IDE 설정, 로컬 규칙/캐시, 테스트 산출물
  • 상세 제외 목록은 .npmignore 참고

배포 메타데이터 입력 가이드

실제 배포 전 아래 항목을 반드시 교체합니다.

• author: [TODO: 팀/담당자명 입력]
• repository.url: [TODO: org/user 및 저장소 URL 입력]
• bugs.url: [TODO: 이슈 트래커 URL 입력]
• homepage: [TODO: 문서/README URL 입력]

향후 목표

• Vue.js, HTML, Java 환경에서도 활용 가능한 산출물 체계 확대
• 코드 품질과 배포 자동화 수준 지속 개선