@conscience-technology/ctds 0.4.5 → 0.4.6
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.
|
@@ -858,7 +858,7 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
|
|
|
858
858
|
sliders: { regular: SoSlidersL, fill: SoSlidersB },
|
|
859
859
|
trash: { regular: SoTrashL, fill: SoTrashB },
|
|
860
860
|
"arrow-right": { regular: SoArrowRightL, fill: SoArrowRightB },
|
|
861
|
-
x: { regular:
|
|
861
|
+
x: { regular: PhX, fill: PhX },
|
|
862
862
|
sun: { regular: SoSunL, fill: SoSunB },
|
|
863
863
|
moon: { regular: SoMoonL, fill: SoMoonB },
|
|
864
864
|
"caret-down": { regular: SoCaretDownL, fill: SoCaretDownB },
|
|
@@ -214,6 +214,7 @@ page (gap: space-10) ← 그룹 사이 넓게
|
|
|
214
214
|
조립할 때 사람·AI 모두 자주 미끄러지는 자리. 안티패턴 메모리와 쌍을 이룬다.
|
|
215
215
|
|
|
216
216
|
- **"페이지 맨 위에 Tabs만"** — Tabs 위에 PageHeader(h1/breadcrumb)가 먼저 와야 한다 ([antipattern-tabs-without-title])
|
|
217
|
+
- **"브라우저·노션처럼 다중 탭" 요청에 Tabs로 조립** — Tabs는 섹션 전환 전용(한 화면 안 뷰 토글). "열려있는 문서 N개 중 하나 선택"(각 탭 = 라우트, 추가/닫기)은 전부 [[components/tab-strip]]. Chrome·Figma·VSCode·노션 탭 UI 요청은 즉시 TabStrip으로. 수제 조립·Tabs 변형 금지
|
|
217
218
|
- **"워크스페이스 스위처를 수제 Button+Dropdown으로 조립"** — 전용 IdentityButton + DropdownMenu 사용 ([antipattern-workspace-switcher])
|
|
218
219
|
- **"Topbar leading에만 요소 몰림"** — leading/center/trailing 3구역 균형. leading·trailing 짝 필수 ([[components/topbar]])
|
|
219
220
|
- **"Sidebar 2단 쉘을 SidebarSplit으로"** — 바깥 flex로 Rail+Sidebar 직접 조립 ([feedback-sidebar-scroll])
|
|
@@ -7,6 +7,19 @@
|
|
|
7
7
|
|
|
8
8
|
활성 표시는 **pill·underline이 아니라 bg-muted 배경 상시 유지** — hover 색(bg-muted)이 활성 탭에서 lock된 꼴. "hover되는 자리가 현재 자리"라는 직관.
|
|
9
9
|
|
|
10
|
+
### 발동 트리거 — 다중 탭 UI를 원할 때
|
|
11
|
+
사용자가 **"브라우저처럼 탭 열기"**, **"노션처럼 다중 탭"**, **"Figma/VSCode처럼 파일 탭"**, **"Chrome 탭 UI"**, **"탭으로 여러 문서/페이지 열기"** 등을 요구하면 **TabStrip이 정답**. 수제 조립·`<Tabs>` 전용화 하지 말 것. 신호 체크:
|
|
12
|
+
- 사용자가 **"열어두기"**·**"탭 추가"**·**"X 버튼으로 닫기"** 언급 → TabStrip (각 탭 = 열린 문서)
|
|
13
|
+
- 사용자가 **"섹션 전환"**·**"뷰 바꾸기"**·**"필터 토글"** 언급 → [[components/tabs]] (한 화면 안 뷰 전환)
|
|
14
|
+
- 둘 다 필요하면 **TabStrip(상단, 문서 탭) → PageHeader → Tabs(그 안 섹션)** 순으로 중첩. 한 화면에 TabStrip도 되고 Tabs도 되는 자리면 **TabStrip이 바깥**.
|
|
15
|
+
|
|
16
|
+
소비처 세팅은 보통 **라우팅 상태 + 열린 문서 배열**:
|
|
17
|
+
```tsx
|
|
18
|
+
const [docs, setDocs] = useState<Doc[]>(openDocs);
|
|
19
|
+
const [activeId, setActiveId] = useState<string>(openDocs[0].id);
|
|
20
|
+
// closeDoc, addDoc 핸들러는 소비처가 관리 (TabStrip은 상태 안 가짐).
|
|
21
|
+
```
|
|
22
|
+
|
|
10
23
|
### Do
|
|
11
24
|
- **각 탭 = 독립 문서/라우트**. 라우팅이나 외부 상태 저장소에 반영 (`?doc=portfolio` 또는 workspace store).
|
|
12
25
|
- **leadingIcon에 자유롭게** — [[components/icon]], `<img>`(파일 썸네일), `<svg>`(브랜드 로고) 전부 ReactNode로 받는다. Figma 파일 탭의 작은 썸네일, VSCode 파일 아이콘 패턴.
|
|
@@ -33,6 +33,8 @@ description: CTDS 페이지·대시보드·레이아웃을 조합할 때 발동.
|
|
|
33
33
|
| 메타 라벨 가로 나열 | `prompts/recipes/meta-line.md` |
|
|
34
34
|
| 폼·모달 하단 액션 | `prompts/recipes/form-footer.md` |
|
|
35
35
|
| 페이지 폭 안내 바 | `prompts/recipes/page-banner.md` |
|
|
36
|
+
| 다중 탭 UI (브라우저·노션·Figma·VSCode식, 각 탭 = 열린 문서/라우트, 추가·닫기) | `prompts/components/tab-strip.md` — Tabs 아님 |
|
|
37
|
+
| 섹션/뷰 전환 탭 (한 화면 안에서 뷰만 토글, URL `?tab=…`) | `prompts/components/tabs.md` — TabStrip 아님 |
|
|
36
38
|
| 리스트 | `prompts/components/list-item.md` |
|
|
37
39
|
| 테이블 | `prompts/components/{table-row,table-row-edit,table-row-select,table-header}.md` |
|
|
38
40
|
| 폼 | `prompts/components/{form-field,input,select,checkbox,radio,switch}.md` |
|