Files
ai-code-app/docs/worklogs/2026-04-01.md
2026-04-21 03:33:23 +09:00

13 KiB
Executable File

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 check-combo-input dashboard-multi-progress dashboard-progress main-content-fullscreen-toggle popup-input select-input

소스

  • 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 --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' ? (
+        <div className="app-main-panel">
+          <Card title={`Docs / ${selectedDocsMenu}`} ...>
+            {selectedDocs.map((document) => (
+              <MarkdownPreviewCard document={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

실행 커맨드

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