# 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`