# 2026-04-01 작업일지 ## 오늘 작업 - 대시보드 카드 위젯과 샘플 구성을 보강 - WMS/TMS 대시보드 콘텐츠 배치와 차트 표현을 조정 - 대시보드 공통 표현 컴포넌트 `progress`, `multiProgress` 구조를 정리 - `src/data` 아래로 대시보드 프리셋 데이터를 분리 - 메인 화면을 좌측 메뉴 기반 API 스타일 구조로 정리 - `popup` 입력 컴포넌트를 추가하고 UI 스타일을 보강 - `select` 입력 컴포넌트를 추가 - `checkCombo` 입력 컴포넌트를 추가 - `package.json`에 Nexus `publishConfig` 추가 - 버전을 `0.1.0-alpha.0`로 조정하고 publish용 `private` 설정을 해제 - 메인 화면을 `src/views/main` 아래로 임시 분리 - Nexus 인증 방식을 `username / _password(base64)` 형식으로 재구성 - Nexus에 `ai-code-app@0.1.0-alpha.0` 배포 성공 - 메인 화면 구조를 `src/app/main` 기준으로 다시 정리하고 export 경로를 보강 - 콘텐츠 영역 바깥 여백을 줄여 카드 중심 레이아웃으로 정리 - 버튼 클릭 시에만 편집 가능한 `buttonEditableInput` 컴포넌트를 추가 - `buttonEditableInput`의 readonly 음영과 확인 버튼 편집 완료 동작을 보정 ## 이슈 및 메모 - `npm publish`는 alpha 버전 배포 시 `--tag alpha`가 필요 - Nexus는 토큰 방식보다 `username / _password(base64)` 방식에서 인증이 정상 동작함 - popup 입력은 스타일 보강 과정에서 입력/버튼/readonly 영역의 경계와 톤을 반복 조정 - 대시보드 카드 높이와 콘텐츠 간격 조정은 과도한 고정값을 피하고 점진적으로 조정하는 편이 안정적 - 버튼 기반 편집 입력은 blur, Enter, 버튼 클릭 확정 타이밍을 함께 맞춰야 UX가 안정적 ## 결정 사항 - 재사용 가능한 샘플/프리셋 데이터는 `src/data`에서 관리 - 대시보드 공통 표현은 `src/components/dashboard`, 카드 조합은 `src/widgets/dashboard-report-card`로 분리 - 신규 입력 컴포넌트도 `UI / plugins / samples / types` 구조를 동일하게 적용 - 메인 화면은 임시로 `views/main` 아래에 `header / sidebar / content` 단위로 분리 - 배포는 `npm publish --tag alpha` 기준으로 진행 - 메인 화면 엔트리는 `src/app/main` 기준으로 정리하고 패키지 루트 export를 함께 관리 - 버튼 편집 입력은 기본 readonly 상태를 유지하고 검증 실패 시 이전 값으로 복원 ## 상세 작업 내역 - 대시보드 위젯, 입력 컴포넌트, 메인 화면 구조 변경이 동시에 진행되며 앱 성격이 샘플 갤러리 중심으로 이동 - Nexus 배포 설정과 인증 방식을 실사용 기준으로 정리해 alpha 배포 경로를 실제로 검증 - `popup`, `select`, `checkCombo`, `buttonEditableInput`을 추가하며 입력 UI 패키지 확장 패턴을 구체화 - 메인 화면을 `src/app/main`으로 재정리하면서 이후 헤더/사이드바/콘텐츠 분리 작업의 기반을 마련 ## 스크린샷 ![button-editable-input](../assets/worklogs/2026-04-01/button-editable-input.png) ![check-combo-input](../assets/worklogs/2026-04-01/check-combo-input.png) ![dashboard-multi-progress](../assets/worklogs/2026-04-01/dashboard-multi-progress.png) ![dashboard-progress](../assets/worklogs/2026-04-01/dashboard-progress.png) ![main-content-fullscreen-toggle](../assets/worklogs/2026-04-01/main-content-fullscreen-toggle.png) ![popup-input](../assets/worklogs/2026-04-01/popup-input.png) ![select-input](../assets/worklogs/2026-04-01/select-input.png) ## 소스 - `src/components/dashboard/progress/ProgressUI.tsx`, `src/components/dashboard/multiProgress/MultiProgressUI.tsx`: 대시보드 진행률 표현을 컴포넌트화해 카드/샘플/위젯에서 공통으로 쓰게 정리했습니다. - `src/components/inputs/popup/PopupUI.tsx`, `src/components/inputs/select/SelectUI.tsx`, `src/components/inputs/checkCombo/CheckComboUI.tsx`: 신규 입력군을 같은 패키지 규칙으로 추가해 선택형 입력 범위를 넓혔습니다. - `src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx`: readonly 상태와 편집 확정 버튼을 가진 클릭 편집 입력을 도입했습니다. - `src/app/main/MainContent.tsx`: 메인 콘텐츠를 `Docs / APIs` 기준 카드 레이아웃으로 나눠 현재 앱 성격에 맞는 메인 화면으로 재정리했습니다. ```diff diff --git a/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx + const [isEditing, setIsEditing] = useState(false); ... + readOnly={!isEditing} + commitPlugins={mergedCommitPlugins} ... + {isEditing ? confirmButtonLabel : editButtonLabel} diff --git a/src/app/main/MainContent.tsx b/src/app/main/MainContent.tsx + {activeTopMenu === 'docs' ? ( +
+ + {selectedDocs.map((document) => ( + + ))} ``` ## 변경 파일 (전체, 중복 제거, KST 기준) - A app-dist/assets/2026-03-30-C4SD1FRx.js - A app-dist/assets/2026-03-31-DwLJWvh2.js - A app-dist/assets/2026-04-01-D5gI7Q4h.js - A app-dist/assets/AntdIcon-Byo_R91X.js - A app-dist/assets/CloseOutlined-B6nrJF3-.js - A app-dist/assets/InputUI-DAmC5DJh.js - A app-dist/assets/MultiProgressUI--uB5kqTr.js - A app-dist/assets/ProgressUI-C91UL-oJ.js - A app-dist/assets/README-CI9EVrw_.js - A app-dist/assets/README-O9_O-4tf2.js - A app-dist/assets/Sample-6Ml90fMj.js - A app-dist/assets/Sample-BJxnglT1.js - A app-dist/assets/Sample-BPCdH5hH.js - A app-dist/assets/Sample-CLup9Uwo.js - A app-dist/assets/Sample-CeT4nPqx.js - A app-dist/assets/Sample-DKoCtyPX.js - A app-dist/assets/Sample-DMEGMJwT.js - A app-dist/assets/Sample-Dyso1eHr.js - A app-dist/assets/Sample-E6V4D3Du.js - A app-dist/assets/Sample-LB0lRdor.js - A app-dist/assets/Sample-xgRr-oUd.js - A app-dist/assets/SearchOutlined-Civ7xtmP.js - A app-dist/assets/TmsDeliveryFlowSample-BHeS93-n.js - A app-dist/assets/TmsDeliveryMetricsSample-BQV5az65.js - A app-dist/assets/ValidInputSample-C9pl9si5.js - A app-dist/assets/WidgetShell-DhXCYrC8.js - A app-dist/assets/WmsInboundOutboundSample-BZCM3_0V.js - A app-dist/assets/WmsInventoryTrendSample-DvxPBjgx.js - A app-dist/assets/card-BpKFEf6A.js - A app-dist/assets/check-combo-Bz7kGmN1.js - A app-dist/assets/clsx-CzIxj0DI.js - A app-dist/assets/component-plugin-BjxKibxS.js - A app-dist/assets/dashboard-report-presets-Bh8duNGL.js - A app-dist/assets/feature-template-D3D0o1kc.js - A app-dist/assets/index-BQsYfbAI.js - A app-dist/assets/index-CaXbpawn.css - A app-dist/assets/input-B6oA1SZJ.js - A app-dist/assets/input.plugin-ulF_zEvq.js - A app-dist/assets/jsx-runtime-CNArSbpp.js - A app-dist/assets/overview-DgYaz2rW.js - A app-dist/assets/popup-BGFdvx2z.js - A app-dist/assets/project-setup-jU8Nv-E8.js - A app-dist/assets/select-DYfkmyn8.js - A app-dist/assets/select-kIZVYgkF.js - A app-dist/assets/status-badge-1fx0opaz.js - A app-dist/assets/wave-DQjt-ubw.js - A app-dist/assets/worklog-template-DE_f72dx.js - A app-dist/index.html - A docker-compose.yml - M docs/worklogs/2026-04-01.md - M package-lock.json - M package.json - M src/App.tsx - A src/app/main/MainContent.tsx - A src/app/main/MainHeader.tsx - R src/views/main/MainSidebar.tsx -> src/app/main/MainSidebar.tsx - R src/views/main/MainView.tsx -> src/app/main/MainView.tsx - R src/views/main/index.ts -> src/app/main/index.ts - R src/views/main/types.ts -> src/app/main/types.ts - A src/app/manifests/docs.manifest.ts - A src/app/manifests/samples.manifest.ts - M src/components/inputs/primitives/input/index.ts - A src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.css - A src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx - A src/components/inputs/specialized/buttonEditableInput/index.ts - A src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx - M src/components/markdownPreview/MarkdownPreviewList.tsx - M src/components/markdownPreview/index.ts - M src/components/markdownPreview/registry.ts - M src/components/status-badge/index.ts - M src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx - M src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx - M src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx - M src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx - M src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx - A src/index.ts - M src/samples/registry.ts - M src/styles.css - M src/views/main/MainContent.tsx - D src/views/main/MainHeader.tsx - A tsconfig.lib.json - M README.md - M docs/README.md - M docs/features/project-setup.md - A src/views/main/MainContent.tsx - A src/views/main/MainHeader.tsx - A src/views/main/MainSidebar.tsx - A src/views/main/MainView.tsx - A src/views/main/index.ts - A src/views/main/types.ts - A docs/components/check-combo.md - A docs/components/popup.md - A docs/components/select.md - A docs/worklogs/2026-04-01.md - A src/components/dashboard/multiProgress/MultiProgressUI.tsx - A src/components/dashboard/multiProgress/index.ts - A src/components/dashboard/multiProgress/plugins/index.ts - A src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts - A src/components/dashboard/multiProgress/samples/Sample.tsx - A src/components/dashboard/multiProgress/types/index.ts - A src/components/dashboard/multiProgress/types/multi-progress.ts - A src/components/dashboard/progress/ProgressUI.tsx - A src/components/dashboard/progress/index.ts - A src/components/dashboard/progress/plugins/index.ts - A src/components/dashboard/progress/plugins/progress.plugin.ts - A src/components/dashboard/progress/samples/Sample.tsx - A src/components/dashboard/progress/types/index.ts - A src/components/dashboard/progress/types/progress.ts - A src/components/inputs/checkCombo/CheckComboUI.tsx - A src/components/inputs/checkCombo/index.ts - A src/components/inputs/checkCombo/plugins/check-combo.plugin.ts - A src/components/inputs/checkCombo/plugins/index.ts - A src/components/inputs/checkCombo/samples/Sample.tsx - A src/components/inputs/checkCombo/types/check-combo.ts - A src/components/inputs/checkCombo/types/index.ts - A src/components/inputs/popup/PopupUI.tsx - A src/components/inputs/popup/index.ts - A src/components/inputs/popup/plugins/index.ts - A src/components/inputs/popup/plugins/popup.plugin.ts - A src/components/inputs/popup/samples/Sample.tsx - A src/components/inputs/popup/types/index.ts - A src/components/inputs/popup/types/popup.ts - A src/components/inputs/select/SelectUI.tsx - A src/components/inputs/select/index.ts - A src/components/inputs/select/plugins/index.ts - A src/components/inputs/select/plugins/select.plugin.ts - A src/components/inputs/select/samples/Sample.tsx - A src/components/inputs/select/types/index.ts - A src/components/inputs/select/types/select.ts - A src/components/navigation/SectionMenuLayout.tsx - M src/components/navigation/index.ts - A src/data/dashboard-report-presets.ts - A src/features/dashboard/TmsDashboardFeatureSamples.tsx - A src/features/dashboard/WmsDashboardFeatureSamples.tsx - A src/features/layout/dashboard-feature-gallery/DashboardFeatureGalleryLayout.tsx - A src/features/layout/dashboard-feature-gallery/index.ts - A src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx - A src/features/layout/dashboard-report-gallery/index.ts - M src/widgets/core/WidgetShell.tsx - A src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx - A src/widgets/dashboard-report-card/index.ts - A src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx - A src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx - A src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx - A src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx - M src/widgets/registry.ts ## 실행 커맨드 ```bash npm run build npm publish --tag alpha npm run capture:component -- --date 2026-04-01 --name check-combo-input npm run capture:component -- --date 2026-04-01 --name select-input npm run capture:component -- --date 2026-04-01 --name popup-input npm run capture:fullscreen -- --date 2026-04-01 ``` ## 변경 파일 - `docs/worklogs/2026-04-01.md` - `package.json` - `src/components/dashboard/progress/ProgressUI.tsx` - `src/components/dashboard/multiProgress/MultiProgressUI.tsx` - `src/components/inputs/popup/PopupUI.tsx` - `src/components/inputs/select/SelectUI.tsx` - `src/components/inputs/checkCombo/CheckComboUI.tsx` - `src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx` - `src/app/main/MainContent.tsx` - `src/styles.css`