127 lines
5.4 KiB
Markdown
Executable File
127 lines
5.4 KiB
Markdown
Executable File
# 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`는 보류 상태로 남음
|
|
|
|
## 스크린샷
|
|
|
|
|
|
|
|
|
|
## 소스
|
|
|
|
- `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`
|