# 2026-03-31 작업일지

## 오늘 작업

- 입력 컴포넌트 구조를 `primitives / specialized / composite` 계층으로 재정리
- 기본 입력을 `src/components/inputs/primitives/input` 아래로 이동
- 이메일 입력을 `src/components/inputs/specialized/emailInput` 구조로 정리
- 3분할 입력을 `src/components/inputs/composite/multiInput` 구조로 정리
- 샘플 및 문서 경로를 새 입력 계층 구조에 맞게 갱신
- 프로젝트 종속 레이아웃을 `src/features/layout` 아래로 이동
- `basePath` 기반 공통 markdown preview 컴포넌트와 리스트 구성 추가
- `docs/**/*.md`까지 읽을 수 있도록 markdown registry 범위 확장
- `docs` 문서를 좌측 폴더/문서 트리 + 우측 markdown 카드 목록 구조로 구성
- 좌측 문서 바로가기를 공통 `FolderTreeNav` 기반 접기/펼치기 트리로 정리
- 구조 변경 내용을 커밋하고 원격 `main` 브랜치로 푸시

## 이슈 및 메모

- 입력 컴포넌트 이름과 패키지명 기준이 중간에 몇 차례 조정됨
- 샘플 레이아웃과 문서 경로는 구조 변경 시 함께 관리해야 함
- `src` 기준 glob만 사용하면 프로젝트 루트 `docs/`는 읽히지 않음
- 빌드는 정상 통과했지만 `antd` 포함 번들로 인해 청크 크기 경고는 계속 발생

## 결정 사항

- 입력 컴포넌트는 역할 기준으로 `primitives`, `specialized`, `composite`로 분리
- `InputUI`는 primitive로 관리
- `EmailInputUI`는 specialized 입력으로 관리
- `MultiInputUI`는 여러 입력을 조합한 composite 입력으로 관리
- 프로젝트 종속적인 레이아웃은 `src/features/layout` 아래에서 관리
- markdown preview는 공통 컴포넌트가 `basePath`를 받아 재사용 가능하게 구성
- 작업일지는 날짜별 파일로 계속 누적 기록

## 상세 작업 내역

- 입력 계층 재정리와 동시에 샘플/문서 경로도 같이 옮겨 구조 변경 시 누락 포인트를 줄임
- `docs` 트리와 markdown preview를 공통화하면서 프로젝트 루트 문서도 읽을 수 있게 범위를 확장
- 좌측 폴더 트리와 우측 카드 목록 구성을 도입해 문서 탐색 화면의 기본 틀을 완성
- 구조 개편 후 빌드와 원격 푸시까지 마쳐 문서 기반 화면을 기준선으로 고정

## 스크린샷

![email-input](../assets/worklogs/2026-03-31/email-input.png)
![multi-input](../assets/worklogs/2026-03-31/multi-input.png)

## 소스

- `src/components/inputs/primitives/input/InputUI.tsx`: 기본 입력을 primitive 계층으로 고정하고 commit plugin 검증 흐름을 공통 엔트리로 정리했습니다.
- `src/components/inputs/specialized/emailInput/EmailInputUI.tsx`: 이메일 전용 입력을 primitive 위에 얹어 specialized 계층 규칙을 검증했습니다.
- `src/components/inputs/composite/multiInput/MultiInputUI.tsx`: 전화번호형 3분할 입력을 추가해 composite 계층과 세그먼트 이동 UX를 구현했습니다.
- `src/components/markdownPreview/MarkdownPreviewCard.tsx`, `src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx`: 루트 `docs/` 문서를 카드와 폴더 트리로 탐색하는 Docs 미리보기 레이아웃을 추가했습니다.

```diff
diff --git a/src/components/inputs/composite/multiInput/MultiInputUI.tsx b/src/components/inputs/composite/multiInput/MultiInputUI.tsx
+function splitValue(value?: string): MultiInputParts {
+  const digits = (value ?? '').replace(/\D/g, '').slice(0, 11);
+  return [digits.slice(0, 3), digits.slice(3, 7), digits.slice(7, 11)];
+}
...
+          if (event.target.value.length === 3) {
+            secondRef.current?.focus();
+          }

diff --git a/src/components/inputs/specialized/emailInput/EmailInputUI.tsx b/src/components/inputs/specialized/emailInput/EmailInputUI.tsx
+      inputMode={inputMode}
+      placeholder={placeholder}
+      autoComplete={autoComplete}
+      commitPlugins={[createEmailValidatorPlugin(), ...commitPlugins]}
```

## 변경 파일 (전체, 중복 제거, KST 기준)

- M README.md
- M docs/README.md
- M docs/features/project-setup.md
- A docs/worklogs/2026-03-31.md
- M src/App.tsx
- A src/components/markdownPreview/MarkdownPreviewCard.tsx
- A src/components/markdownPreview/MarkdownPreviewContent.tsx
- A src/components/markdownPreview/MarkdownPreviewList.tsx
- A src/components/markdownPreview/index.ts
- A src/components/markdownPreview/markdown-document.ts
- A src/components/markdownPreview/registry.ts
- A src/components/navigation/folder-tree-nav.tsx
- A src/components/navigation/index.ts
- A src/features/layout/README.md
- R src/layouts/component-sample-gallery/ComponentSamplesLayout.tsx -> src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
- R src/layouts/component-sample-gallery/index.ts -> src/features/layout/component-sample-gallery/index.ts
- A src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx
- A src/features/layout/docs-markdown-preview/index.ts
- A src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx
- A src/features/layout/feature-markdown-preview/index.ts
- R src/layouts/widget-registry-gallery/WidgetRegistryLayout.tsx -> src/features/layout/widget-registry-gallery/WidgetRegistryLayout.tsx
- R src/layouts/widget-registry-gallery/index.ts -> src/features/layout/widget-registry-gallery/index.ts
- R src/layouts/widget-sample-gallery/SampleWidgetsLayout.tsx -> src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
- R src/layouts/widget-sample-gallery/index.ts -> src/features/layout/widget-sample-gallery/index.ts
- A src/features/markdownPreview/FeatureMarkdownPreviewCard.tsx
- A src/features/markdownPreview/index.ts
- A src/features/overview.md
- M src/styles.css
- M docs/components/input.md
- M docs/worklogs/2026-03-30.md
- A src/components/inputs/composite/multiInput/MultiInputUI.tsx
- A src/components/inputs/composite/multiInput/index.ts
- A src/components/inputs/composite/multiInput/plugins/index.ts
- A src/components/inputs/composite/multiInput/plugins/multi-input.plugin.ts
- A src/components/inputs/composite/multiInput/samples/Sample.tsx
- A src/components/inputs/composite/multiInput/types/index.ts
- A src/components/inputs/composite/multiInput/types/multi-input.ts
- R src/components/inputs/input/InputUI.tsx -> src/components/inputs/primitives/input/InputUI.tsx
- R src/components/inputs/input/index.ts -> src/components/inputs/primitives/input/index.ts
- R src/components/inputs/input/plugins/index.ts -> src/components/inputs/primitives/input/plugins/index.ts
- R src/components/inputs/input/plugins/input.plugin.ts -> src/components/inputs/primitives/input/plugins/input.plugin.ts
- R src/components/inputs/input/samples/Sample.tsx -> src/components/inputs/primitives/input/samples/Sample.tsx
- R src/components/inputs/input/samples/ValidInputSample.tsx -> src/components/inputs/primitives/input/samples/ValidInputSample.tsx
- R src/components/inputs/input/types/index.ts -> src/components/inputs/primitives/input/types/index.ts
- R src/components/inputs/input/types/input.ts -> src/components/inputs/primitives/input/types/input.ts
- A src/components/inputs/specialized/emailInput/EmailInputUI.tsx
- A src/components/inputs/specialized/emailInput/index.ts
- A src/components/inputs/specialized/emailInput/plugins/email-input.plugin.ts
- A src/components/inputs/specialized/emailInput/plugins/index.ts
- A src/components/inputs/specialized/emailInput/samples/Sample.tsx
- A src/components/inputs/specialized/emailInput/types/email-input.ts
- A src/components/inputs/specialized/emailInput/types/index.ts
- A docs/components/input.md
- A src/components/inputs/input/InputUI.tsx
- A src/components/inputs/input/index.ts
- A src/components/inputs/input/plugins/index.ts
- A src/components/inputs/input/plugins/input.plugin.ts
- A src/components/inputs/input/samples/Sample.tsx
- A src/components/inputs/input/samples/ValidInputSample.tsx
- A src/components/inputs/input/types/index.ts
- A src/components/inputs/input/types/input.ts
- M src/components/status-badge/samples/Sample.tsx
- A src/layouts/component-sample-gallery/ComponentSamplesLayout.tsx
- A src/layouts/component-sample-gallery/index.ts
- A src/layouts/widget-registry-gallery/WidgetRegistryLayout.tsx
- A src/layouts/widget-registry-gallery/index.ts
- A src/layouts/widget-sample-gallery/SampleWidgetsLayout.tsx
- A src/layouts/widget-sample-gallery/index.ts
- A src/samples/registry.ts
- A src/vite-env.d.ts
- A src/widgets/api-sample-card/ApiSampleCardWidget.tsx
- A src/widgets/api-sample-card/index.ts
- A src/widgets/api-sample-card/samples/Sample.tsx
- A src/widgets/core/WidgetShell.tsx
- A src/widgets/core/index.ts
- A src/widgets/core/registry/widget-features.ts
- A src/widgets/core/types/widget.ts
- A src/widgets/registry.ts

## 실행 커맨드

```bash
npm run build
git add .
git commit -m "입력 컴포넌트 구조 정리"
git commit -m "문서 미리보기와 레이아웃 정리"
git push origin main
```

## 변경 파일

- `docs/worklogs/2026-03-31.md`
- `src/components/inputs/primitives/input/InputUI.tsx`
- `src/components/inputs/specialized/emailInput/EmailInputUI.tsx`
- `src/components/inputs/composite/multiInput/MultiInputUI.tsx`
- `src/components/markdownPreview/MarkdownPreviewCard.tsx`
- `src/components/markdownPreview/MarkdownPreviewContent.tsx`
- `src/components/markdownPreview/MarkdownPreviewList.tsx`
- `src/components/navigation/folder-tree-nav.tsx`
- `src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx`
- `src/styles.css`
