@loword/loword-design-system 0.1.0 → 0.1.2

package/README.md

@@ -11,7 +11,7 @@
 
 - **React 19** / **React DOM 19** (peer dependency)
 - **Tailwind CSS v4** — `theme.css` 경로로 쓸 때만 필요합니다. 완성된 `styles.css`만 쓴다면 없어도 됩니다.
-- **Next.js 15** (optional) — `LDTanstackTable`·`LDCollapsibleTanstackTable`·`TableField`는 `next/navigation`을 무조건 호출하므로 Next 환경에서만 돕니다.
+- **Next.js 15** (optional) — `LDTanstackTable`·`LDCollapsibleTanstackTable`은 내부에서 `next/navigation`을 무조건 호출하므로 Next 환경에서만 돕니다.
 
 ## 설치
 
@@ -21,7 +21,7 @@ npm install @loword/loword-design-system
 pnpm add @loword/loword-design-system
 ```
 
-Editor·Carousel·Drawer·Table·Select·DatePicker 같은 일부 컴포넌트는 뒤에 깔린 라이브러리를 **optional peer dependency**로 둡니다. 해당 컴포넌트를 쓸 때만 같이 설치하면 됩니다 — `@tiptap/*`(Editor), `embla-carousel-react`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Accordion/Modal/Popover/Tabs/Tooltip), `@tanstack/react-table`(Table), `react-day-picker`·`dayjs`(DatePicker), `react-hot-toast`(Toast).
+Editor·Carousel·Drawer·Table·Chart·DatePicker 같은 일부 컴포넌트는 뒤에 깔린 라이브러리를 **optional peer dependency**로 둡니다. 해당 컴포넌트를 쓸 때만 같이 설치하면 됩니다 — `@tiptap/*`(Editor), `embla-carousel*`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Accordion/Modal/Popover/Tabs/Tooltip), `@tanstack/react-table`·`next`(Table), `chart.js`·`react-chartjs-2`(Chart), `react-day-picker`·`dayjs`(DatePicker/Calendar), `react-hot-toast`(Toast), `react-daum-postcode`(DaumPostButton).
 
 ## 설정
 
@@ -81,28 +81,45 @@ import LDButton from '@loword/loword-design-system/components/LDButton/LDButton'
 
 **레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDEmpty` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDProgressBar` · `LDScrollArea` · `LDAccordion` · `LDTeamHistory`
 
-**내비게이션**: `LDBreadCrumb` · `LDMenuBar` · `LDTabs` · `LDSectionNav` · `LDPagination` · `LDLNB` · `LDLNBBase`
+**내비게이션**: `LDBreadCrumb` · `LDMenuBar` · `LDTabs` · `LDSectionNav` · `LDPagination` · `LDLNB`
 
 **오버레이/피드백**: `LDModal` · `LDModalView` · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster` · `LDNotification`
 
-**콘텐츠/데이터**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDChart` · `LDTable` · `LDTanstackTable` · `LDCollapsibleTanstackTable` · `TableField`
+**콘텐츠/데이터**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDChart` · `LDTable` · `LDTanstackTable` · `LDCollapsibleTanstackTable`
 
 **폼 연동**: `LDForm` · `LDNativeForm` · `LDFormField` · `LDFormErrorMessage` · `LDFormInput` · `LDFormTextarea` · `LDFormSelect` · `LDFormMultiSelect` · `LDFormCheckbox` · `LDFormCheckboxGroup` · `LDFormRadioGroup` · `LDFormDatePicker` · `LDFormDateRangePicker` · `LDFormTimePicker` · `LDFormToggleButton` · `LDFormOTPInput` · `LDFormRate`
 
-> barrel의 값 export는 `TableField`(TanStack Table 연동 래퍼) · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` 셋 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
+**유틸**: `Show` — 조건부 렌더링 컴포넌트. `when`이 truthy면 `children`, falsy면 `fallback`을 렌더링하고, `children`을 함수로 넘기면 `NonNullable`로 좁혀진 값을 인자로 받습니다.
+
+```tsx
+<Show when={user} fallback={<LDSpinner />}>
+  {(result) => <span>{result.name}</span>}
+</Show>
+```
+
+> barrel의 값 export는 `Show` · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` 셋 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
 
 ## 빠른 시작 (개발)
 
 ```bash
 pnpm install          # 의존성 설치
+pnpm switch -c <브랜치>  # 열려 있는 release/* 위에 작업 브랜치 생성
 pnpm storybook        # Storybook 개발 서버 (port 6006)
 pnpm build            # 프로덕션 빌드
 pnpm check-types      # 타입 체크
 pnpm lint             # ESLint (--fix 포함, src + .storybook)
 pnpm prettier         # Prettier
 pnpm test             # vitest (utils 유닛 + 스토리 브라우저 실행 + a11y)
+pnpm test:coverage    # 커버리지 (utils / components 분리 측정)
+pnpm changeset        # .changes/{브랜치명}.md 생성
 ```
 
+## 변경 기록 (기여)
+
+코드를 고쳤으면 `pnpm changeset`으로 **`.changes/{브랜치명}.md`** 를 만들어 같은 PR에 포함합니다. 이 디렉토리가 변경 기록의 유일한 원본이고, `docs/CHANGELOG.md`와 `docs/releases/vX.Y.Z.md`는 배포 시점에 여기서 생성되므로 직접 편집하지 않습니다.
+
+작업 브랜치는 `main`이 아니라 열려 있는 `release/*`에서 분기하고 PR base도 거기로 잡습니다(`pnpm switch -c <브랜치>`가 자동으로 처리합니다). 모든 PR은 merge commit으로 머지합니다(squash 금지). 자세한 규칙은 [docs/release-process.md](./docs/release-process.md).
+
 ## 문서
 
 - **아키텍처와 상세 가이드**: [docs/architecture.md](./docs/architecture.md)
@@ -114,7 +131,8 @@ pnpm test             # vitest (utils 유닛 + 스토리 브라우저 실행 + a
 - **프리셋 스타일 작성 규칙**: [docs/style-conventions.md](./docs/style-conventions.md)
 - **CSS 캐스케이드 레이어**: [docs/css-layers.md](./docs/css-layers.md) — 컴포넌트 스타일이 왜 이기고 지는지, className override가 안 먹을 때의 진단 순서
 - **타입 컨벤션**: [docs/type-conventions.md](./docs/type-conventions.md)
-- **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md)
+- **릴리즈/브랜치 운영**: [docs/release-process.md](./docs/release-process.md) — changeset 작성법, `release/*` 브랜치 흐름, 배포 자동화
+- **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md) (생성물) · 버전별 릴리즈 노트는 [docs/releases/](./docs/releases/)
 
 ## 라이선스
 

package/dist/index.css

@@ -1247,6 +1247,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1941,6 +1944,9 @@
   .grid-cols-\[64px_repeat\(3\,180px\)\] {
     grid-template-columns: 64px repeat(3,180px);
   }
+  .grid-cols-\[auto_1fr\] {
+    grid-template-columns: auto 1fr;
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -2058,6 +2064,9 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .divide-x {
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
@@ -2883,6 +2892,9 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .break-all {
+    word-break: break-all;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -2937,12 +2949,18 @@
   .text-mono500 {
     color: var(--color-mono500);
   }
+  .text-mono600 {
+    color: var(--color-mono600);
+  }
   .text-mono700 {
     color: var(--color-mono700);
   }
   .text-mono800 {
     color: var(--color-mono800);
   }
+  .text-mono900 {
+    color: var(--color-mono900);
+  }
   .text-neutral100 {
     color: var(--color-neutral100);
   }
@@ -2979,6 +2997,9 @@
   .text-red500 {
     color: var(--color-red500);
   }
+  .text-success600 {
+    color: var(--color-success600);
+  }
   .text-transparent {
     color: transparent;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -281,6 +281,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:stop": "lsof -ti tcp:6006 -sTCP:LISTEN | xargs -r kill",
     "build-storybook": "storybook build",
-    "generate-story": "npx tsx scripts/generate-story.ts"
+    "generate-story": "npx tsx scripts/generate-story.ts",
+    "switch": "sh scripts/switch.sh"
   }
 }