# 2026-03-30 작업일지

## 오늘 작업

- Ant Design 기반 프론트엔드 프로젝트 초기 구조 생성
- `docs/worklogs`, `docs/features` 문서 폴더 구성
- 기본 대시보드 스타일의 시작 화면 작성
- React 19.2.4, Vite 8.0.3 최신 안정 버전으로 업데이트
- 컴포넌트 샘플 구조를 `plugins/`, `samples/`, `types/`, `xxxUI.tsx` 형태로 정리
- 공통 플러그인 제네릭과 `plugins<T>(props, pluginList)` 합성 유틸 추가
- `status-badge` 컴포넌트 샘플과 컴포넌트 문서 작성
- `InputUI.tsx` 단일 컴포넌트 구조와 validation plugin 기반 입력 샘플 추가
- 컴포넌트 샘플과 위젯 샘플을 별도 registry로 분리
- `WidgetShell`, `ApiSampleCardWidget`, 위젯 샘플 레이아웃 추가
- 컴포넌트 샘플 레이아웃을 좌측 내비게이션 + 우측 상세 카드 구조로 개편
- 입력 컴포넌트 구조를 `primitives / specialized / composite` 계층으로 재정리
- Git 저장소 초기화, `main` 브랜치 생성, 원격 `origin` 연결, 초기 커밋 생성

## 이슈 및 메모

- 초기 스택은 `React + Vite + TypeScript + Ant Design`으로 결정
- `antd` 포함 번들 특성상 빌드 시 청크 크기 경고가 발생함
- 원격 저장소 `push`는 HTTPS 인증 정보 부재로 실패
- 샘플 목록은 `samples/Sample.tsx` 기본형과 `samples/*.tsx` 확장형을 구분해 관리하기로 함

## 결정 사항

- 작업일지는 날짜별 Markdown 파일로 관리
- 기능 문서는 기능 단위 Markdown 파일로 관리
- 컴포넌트 문서는 `docs/components` 아래에서 관리
- 컴포넌트 샘플은 `samples/Sample.tsx`를 대표 샘플로 사용
- 입력 컴포넌트는 `InputUI.tsx` 하나만 두고 기능은 plugin으로 확장
- 입력 패키지는 `primitives`, `specialized`, `composite` 역할 기준으로 분리
- 플러그인은 기본적으로 공통 제네릭 타입을 사용하고, 필요 시 커링/팩토리 형태로 확장
- 여러 props 후처리 플러그인은 `plugins<T>(props, pluginList)` 형태로 합성
- 샘플 목록은 같은 컴포넌트 기준으로 묶고 `base -> plugin -> feature` 순서로 정렬

## 상세 작업 내역

- 프로젝트 부트스트랩 이후 문서 폴더와 샘플 레지스트리를 함께 정리해 이후 확장 기준을 먼저 마련
- `status-badge`, `InputUI`를 기준 컴포넌트로 삼아 plugin 합성 구조와 샘플 표시 구조를 동시에 검증
- 컴포넌트/위젯 샘플을 분리해 API 성격의 문서 화면으로 확장할 수 있는 기본 형태를 준비
- 원격 저장소 연결까지 완료했지만 인증 이슈로 `push`는 보류 상태로 남음

## 스크린샷

![input](../assets/worklogs/2026-03-30/input.png)
![status-badge](../assets/worklogs/2026-03-30/status-badge.png)

## 소스

- `src/components/status-badge/StatusBadgeUI.tsx`, `src/components/status-badge/plugins/status-badge.plugin.ts`: 상태 배지 기본 UI와 플러그인 합성 구조를 잡아 샘플 갤러리의 기준 컴포넌트로 삼았습니다.
- `src/components/inputs/input/InputUI.tsx`: validation plugin 기반 입력 컴포넌트 초안을 잡아 이후 `primitives / specialized / composite` 확장의 출발점으로 사용했습니다.
- `src/widgets/core/WidgetShell.tsx`: 위젯 본문을 단순 문단이 아니라 자유 레이아웃 컨테이너로 바꿔 카드형 샘플과 대시보드 위젯을 수용하게 했습니다.
- `docs/templates/worklog-template.md`: 작업일지 템플릿에 상세 내역, 스크린샷, 소스, 실행 커맨드, 변경 파일 섹션을 추가해 증적 기록 형식을 고정했습니다.

```diff
diff --git a/src/widgets/core/WidgetShell.tsx b/src/widgets/core/WidgetShell.tsx
-const { Paragraph, Title } = Typography;
+const { Title } = Typography;
...
-        <Paragraph className="widget-shell__content">{children}</Paragraph>
+        <div className="widget-shell__content">{children}</div>

diff --git a/docs/templates/worklog-template.md b/docs/templates/worklog-template.md
+## 상세 작업 내역
+## 스크린샷
+## 소스
+

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

- A .gitignore
- A README.md
- A docs/README.md
- A docs/components/status-badge.md
- A docs/features/project-setup.md
- A docs/templates/feature-template.md
- A docs/templates/worklog-template.md
- A docs/worklogs/2026-03-30.md
- A index.html
- A package-lock.json
- A package.json
- A src/App.tsx
- A src/components/status-badge/StatusBadgeUI.tsx
- A src/components/status-badge/index.ts
- A src/components/status-badge/plugins/index.ts
- A src/components/status-badge/plugins/status-badge.plugin.ts
- A src/components/status-badge/samples/Sample.tsx
- A src/components/status-badge/types/index.ts
- A src/components/status-badge/types/status-badge.ts
- A src/main.tsx
- A src/styles.css
- A src/types/component-plugin.ts
- A tsconfig.app.json
- A tsconfig.json
- A tsconfig.node.json
- A vite.config.ts

## 실행 커맨드
+## 변경 파일
```

## 실행 커맨드

```bash
npm install
npm run build
git init
git checkout -b main
git add .
git commit -m "feat: initialize antd app and component plugin structure"
```

## 변경 파일

- `README.md`
- `docs/worklogs/2026-03-30.md`
- `src/App.tsx`
- `src/components/status-badge/StatusBadgeUI.tsx`
- `src/components/status-badge/plugins/status-badge.plugin.ts`
- `src/components/inputs/input/InputUI.tsx`
- `src/widgets/core/WidgetShell.tsx`
- `src/styles.css`
- `package.json`
- `vite.config.ts`