@lawkit/ui 0.1.55 → 0.1.57

package/CLAUDE.md

@@ -104,6 +104,35 @@ import { Badge } from "@lds/ui-v3";
 <Badge iconOnly leadingIcon={<MyIcon />} aria-label="알림" />
 ```
 
+## Breadcrumb
+
+```tsx
+import { Breadcrumb } from "@lds/ui-v3";
+
+// 기본 — 마지막 항목이 현재 페이지 (aria-current="page")
+<Breadcrumb
+  items={[
+    { label: "홈", href: "/" },
+    { label: "계약", href: "/contracts" },
+    { label: "계약 상세" },
+  ]}
+/>
+
+// 구분자 커스텀 (chevron 등)
+<Breadcrumb items={items} separator=">" />
+
+// 라우터 연동 (onClick)
+<Breadcrumb
+  items={[
+    { label: "홈", href: "/", onClick: (e) => { e.preventDefault(); router.push("/"); } },
+    { label: "현재 페이지" },
+  ]}
+/>
+
+// 작은 사이즈
+<Breadcrumb items={items} size="small" />
+```
+
 ## Button
 
 ```tsx
@@ -467,6 +496,52 @@ function MyPage() {
 }
 ```
 
+## Drawer
+
+```tsx
+import { useState } from "react";
+import { Drawer, Button } from "@lds/ui-v3";
+
+function MyPage() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>계약 상세 열기</Button>
+
+      {/* 기본 — 오른쪽에서 슬라이드 인, dim + 클릭/Escape 닫기 */}
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="계약 상세"
+        footer={
+          <>
+            <Button variant="outline" color="secondary" onClick={() => setOpen(false)}>취소</Button>
+            <Button onClick={() => setOpen(false)}>저장</Button>
+          </>
+        }
+      >
+        <p>계약 상세 콘텐츠</p>
+      </Drawer>
+
+      {/* 왼쪽 + 작은 사이즈 (필터 패널) */}
+      <Drawer open={open} onClose={() => setOpen(false)} side="left" size="small" title="필터">
+        <p>필터 콘텐츠</p>
+      </Drawer>
+
+      {/* 비차단 — dim 없이 페이지 조작 가능 */}
+      <Drawer open={open} onClose={() => setOpen(false)} backdrop={false} title="메모">
+        <p>페이지를 계속 조작할 수 있어요.</p>
+      </Drawer>
+
+      {/* Escape 닫기 비활성 */}
+      <Drawer open={open} onClose={() => setOpen(false)} title="작성 중" closeOnEscape={false}>
+        <p>실수로 닫히지 않도록 Escape를 막습니다.</p>
+      </Drawer>
+    </>
+  );
+}
+```
+
 ## Dropdown
 
 ```tsx
@@ -546,6 +621,85 @@ const [files, setFiles] = useState([]);
 <FileAttachBadge filename="report.pdf" onRemove={() => {}} />
 ```
 
+## FloatingModal
+
+```tsx
+import { useState } from "react";
+import { FloatingModal, Button } from "@lds/ui-v3";
+
+function MyPage() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>플로팅 모달 열기</Button>
+
+      {/* 우하단 고정, backdrop 없음 — 페이지 조작 가능 */}
+      <FloatingModal
+        open={open}
+        onClose={() => setOpen(false)}
+        title="파일 업로드"
+        collapsible
+        footer={<Button onClick={() => setOpen(false)}>완료</Button>}
+      >
+        <p>계약서_최종.pdf 업로드 중… (75%)</p>
+      </FloatingModal>
+
+      {/* 좌하단 + Escape 닫기 */}
+      <FloatingModal
+        open={open}
+        onClose={() => setOpen(false)}
+        title="메모"
+        position="bottom-left"
+        closeOnEscape
+      >
+        <p>작성 중인 메모</p>
+      </FloatingModal>
+    </>
+  );
+}
+```
+
+## FullScreenModal
+
+```tsx
+import { useState } from "react";
+import { FullScreenModal, Button } from "@lds/ui-v3";
+
+function MyPage() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>전체화면 모달 열기</Button>
+
+      {/* 상단 고정 헤더 + 스크롤 바디 + 하단 푸터 */}
+      <FullScreenModal
+        open={open}
+        onClose={() => setOpen(false)}
+        title="계약서 편집"
+        footer={
+          <>
+            <Button variant="outline" color="secondary" onClick={() => setOpen(false)}>취소</Button>
+            <Button onClick={() => setOpen(false)}>저장</Button>
+          </>
+        }
+      >
+        <p>전체화면 본문 콘텐츠</p>
+      </FullScreenModal>
+
+      {/* Escape 닫기 비활성 */}
+      <FullScreenModal
+        open={open}
+        onClose={() => setOpen(false)}
+        title="문서 작성"
+        disableEscapeClose
+      >
+        <p>작성 중 실수로 닫히지 않도록 Escape를 막습니다.</p>
+      </FullScreenModal>
+    </>
+  );
+}
+```
+
 ## IconButtonGroup
 
 ```tsx
@@ -1031,6 +1185,60 @@ const [on, setOn] = useState(false);
 <Switch label="Disabled On" checked disabled />
 ```
 
+## TableTree
+
+```tsx
+import { TableTree } from "@lds/ui-v3";
+import type { TableTreeColumn, TableTreeRow } from "@lds/ui-v3";
+
+const columns: TableTreeColumn[] = [
+  { key: "code", header: "관리번호", width: 180 },
+  { key: "title", header: "계약명" },
+  { key: "date", header: "체결일", width: 120, align: "right" },
+];
+
+const rows: TableTreeRow[] = [
+  {
+    id: "1",
+    cells: { code: "C20190301", title: "법무관리시스템 구축 계약", date: "2019-01-03" },
+    children: [
+      {
+        id: "1-1",
+        cells: { code: "C20190301-01", title: "유지보수 계약", date: "2020-01-03" },
+      },
+    ],
+  },
+  {
+    id: "2",
+    cells: { code: "C20221108", title: "Law.ai 공급 계약", date: "2022-11-08" },
+  },
+];
+
+// 기본 — 자식 행은 부모 확장 시에만 렌더
+<TableTree columns={columns} rows={rows} />
+
+// 초기 펼침 + 행 클릭/선택
+<TableTree
+  columns={columns}
+  rows={rows}
+  defaultExpandedIds={["1"]}
+  selectedId={selectedId}
+  onRowClick={(row) => setSelectedId(row.id)}
+/>
+
+// Controlled 펼침 상태
+const [expandedIds, setExpandedIds] = useState<string[]>(["1"]);
+<TableTree
+  columns={columns}
+  rows={rows}
+  expandedIds={expandedIds}
+  onExpandedChange={setExpandedIds}
+/>
+
+// 세로 구분선 + 들여쓰기 조절 + 빈 상태 메시지
+<TableTree columns={columns} rows={rows} bordered indentSize={28} emptyText="조회된 계약이 없습니다." />
+```
+
 ## Tabs
 
 ```tsx
@@ -1096,6 +1304,34 @@ const [value, setValue] = useState<string[]>([]);
 />
 ```
 
+## Textarea
+
+```tsx
+import { Textarea, InputGroup } from "@lds/ui-v3";
+
+// 기본
+<Textarea placeholder="내용을 입력하세요" />
+
+// 사이즈 / 줄 수
+<Textarea textareaSize="small" rows={3} />
+<Textarea textareaSize="large" rows={6} />
+
+// 상태
+<Textarea state="warning" defaultValue="필수 항목입니다" />
+<Textarea state="disabled" placeholder="비활성화" />
+
+// 리사이즈 잠금
+<Textarea resize="none" />
+
+// 글자수 표시
+<Textarea maxLength={200} showCount placeholder="200자 이내로 입력" />
+
+// InputGroup과 함께 (라벨 + 도움말)
+<InputGroup label="비고" helperText="선택 입력 항목입니다">
+  <Textarea placeholder="비고를 입력하세요" />
+</InputGroup>
+```
+
 ## Toast
 
 ```tsx