kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

코드 정리 및 불필요한 공백 제거: 여러 파일에서 불필요한 공백을 제거하고, 코드 가독성을 향상시켰습니다. 또한, 다국어 지원 및 테이블 설정 현황 문서에 새로운 내용을 추가하여 현재 사용 가능한 컴포넌트의 기능을 반영했습니다.

This commit is contained in:
kjs 2026-01-16 11:10:50 +09:00
parent ee1ea4190d
commit 7ea49cfc9e
17 changed files with 48 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend-node/src/routes/cascadingAutoFillRoutes.ts
View File

@ -57,3 +57,4 @@ export default router;

1
backend-node/src/routes/cascadingConditionRoutes.ts
View File

@ -53,3 +53,4 @@ export default router;

1
backend-node/src/routes/cascadingHierarchyRoutes.ts
View File

@ -69,3 +69,4 @@ export default router;

1
backend-node/src/routes/cascadingMutualExclusionRoutes.ts
View File

@ -57,3 +57,4 @@ export default router;

1
docs/노드플로우_개선사항.md
View File

@ -589,3 +589,4 @@ const result = await executeNodeFlow(flowId, {

1
docs/다국어_관리_시스템_개선_계획서.md
View File

@ -595,3 +595,4 @@ POST /multilang/keys/123/override
| 1.0 | 2026-01-13 | AI | 최초 작성 |

1
docs/메일발송_기능_사용_가이드.md
View File

@ -362,3 +362,4 @@

1
docs/즉시저장_버튼_액션_구현_계획서.md
View File

@ -348,3 +348,4 @@ const getComponentValue = (componentId: string) => {

160
docs/컴포넌트_기능_현황.md
View File

@ -1,160 +0,0 @@
# 컴포넌트 기능 현황
> 작성일: 2026-01-16
> 현재 사용 가능한 17개 컴포넌트의 다국어 지원 및 테이블 설정 기능 현황
---
## 요약
| 기능 | 적용 완료 | 미적용 | 해당없음 |
| -------------------------- | --------- | ------ | -------- |
| **다국어 지원** | 4개 | 9개 | 4개 |
| **컴포넌트별 테이블 설정** | 7개 | 4개 | 6개 |
---
## 컴포넌트별 상세 현황
### 데이터 표시 (Display) - 4개
| 컴포넌트 | 다국어 지원 | 테이블 설정 | 비고 |
| ------------------- | :---------: | :---------: | --------------------------------------------- |
| **테이블 리스트** | ✅ 적용 | ✅ 적용 | `customTableName`, `useCustomTable` 지원 |
| **카드 디스플레이** | ➖ 해당없음 | ✅ 적용 | DB 데이터 표시용, 버튼은 시스템 다국어로 처리 |
| **텍스트 표시** | ❌ 미적용 | ➖ 해당없음 | 정적 텍스트 표시용 |
| **피벗 그리드** | ❌ 미적용 | ⚠️ 부분 | `tableName` 설정 가능하나 Combobox UI 없음 |
---
### 데이터 입력 (Data) - 2개
| 컴포넌트 | 다국어 지원 | 테이블 설정 | 비고 |
| -------------------- | :---------: | :---------: | ---------------------------------------------------------- |
| **통합 반복 데이터** | ❌ 미적용 | ✅ 적용 | `mainTableName`, `foreignKeyColumn` 지원, Combobox UI 적용 |
| **반복 화면 모달** | ❌ 미적용 | ⚠️ 부분 | `tableName` 설정 가능하나 Combobox UI 없음 |
---
### 액션 (Action) - 1개
| 컴포넌트 | 다국어 지원 | 테이블 설정 | 비고 |
| ------------- | :---------: | :---------: | --------------------------- |
| **기본 버튼** | ✅ 적용 | ➖ 해당없음 | `langKeyId`, `langKey` 지원 |
---
### 레이아웃 (Layout) - 5개
| 컴포넌트 | 다국어 지원 | 테이블 설정 | 비고 |
| ----------------- | :---------: | :---------: | ----------------------------------------------------- |
| **분할 패널** | ✅ 적용 | ✅ 적용 | 다국어 지원, 좌우 패널 각각 Combobox UI로 테이블 선택 |
| **탭 컴포넌트** | ❌ 미적용 | ➖ 해당없음 | 화면 전환용 컨테이너 |
| **Section Card** | ❌ 미적용 | ➖ 해당없음 | 그룹화 컨테이너 |
| **Section Paper** | ❌ 미적용 | ➖ 해당없음 | 그룹화 컨테이너 |
| **구분선** | ❌ 미적용 | ➖ 해당없음 | 시각적 구분용 |
---
### 유틸리티 (Utility) - 5개
| 컴포넌트 | 다국어 지원 | 테이블 설정 | 비고 |
| ---------------------- | :---------: | :---------: | --------------------------------------------------------- |
| **집계 위젯** | ✅ 적용 | ✅ 적용 | `customTableName` 지원, 항목별 `labelLangKey` 다국어 지원 |
| **코드 채번 규칙** | ❌ 미적용 | ➖ 해당없음 | 채번 규칙 관리 전용 |
| **렉 구조 설정** | ❌ 미적용 | ➖ 해당없음 | 창고 렉 설정 전용 |
| **출발지/도착지 선택** | ❌ 미적용 | ⚠️ 부분 | `customTableName` 지원하나 Combobox UI 없음 |
| **검색 필터** | ❌ 미적용 | ⚠️ 부분 | `screenTableName` 자동 감지 |
---
## 상세 설명
### 다국어 지원 (`langKeyId`, `langKey`)
다국어 지원이란 컴포넌트의 라벨, 플레이스홀더 등 텍스트 속성에 다국어 키를 연결하여 언어별로 다른 텍스트를 표시하는 기능입니다.
**적용 완료 (4개)**
- `table-list`: 컬럼 라벨 다국어 지원
- `button-primary`: 버튼 텍스트 다국어 지원
- `split-panel-layout`: 패널 제목 다국어 지원
- `aggregation-widget`: 집계 항목별 표시 라벨 다국어 지원
**해당없음 (4개)**
- `card-display`: DB 데이터 표시용, 버튼 라벨은 시스템 다국어로 처리
- `text-display`: 정적 텍스트 표시용
- `divider-line`: 시각적 구분용
- `구분선`: 시각적 구분용
**미적용 (9개)**
- `pivot-grid`
- `unified-repeater`, `repeat-screen-modal`
- `tabs`, `section-card`, `section-paper`
- `numbering-rule`, `rack-structure`, `location-swap-selector`, `table-search-widget`
---
### 컴포넌트별 테이블 설정 (`customTableName`, `useCustomTable`)
컴포넌트별 테이블 설정이란 화면의 메인 테이블과 별개로 컴포넌트가 자체적으로 사용할 테이블을 지정할 수 있는 기능입니다.
**완전 적용 (6개)**
| 컴포넌트 | 적용 방식 |
| -------------------- | --------------------------------------------------------------------------------- |
| `table-list` | Combobox UI로 테이블 선택, `customTableName`, `useCustomTable`, `isReadOnly` 지원 |
| `unified-repeater` | Combobox UI로 테이블 선택, `mainTableName`, `foreignKeyColumn` 지원, FK 자동 연결 |
| `unified-list` | `TableListConfigPanel` 래핑하여 동일 기능 제공 |
| `card-display` | Combobox UI로 테이블 선택, `customTableName`, `useCustomTable` 지원 |
| `split-panel-layout` | 좌우 패널 각각 Combobox UI로 테이블 선택, 다국어 지원 |
| `aggregation-widget` | Combobox UI로 테이블 선택, `customTableName`, `useCustomTable` 지원 |
**부분 적용 (4개)**
| 컴포넌트 | 현재 상태 | 필요 작업 |
| ------------------------ | --------------------------- | --------------------- |
| `pivot-grid` | `tableName` 설정 가능 | Combobox UI 추가 필요 |
| `repeat-screen-modal` | `tableName` 설정 가능 | Combobox UI 추가 필요 |
| `location-swap-selector` | `customTableName` 지원 | Combobox UI 추가 필요 |
| `table-search-widget` | `screenTableName` 자동 감지 | 현재 방식 유지 가능 |
**해당없음 (6개)**
- `text-display`, `divider-line`: 정적 컴포넌트
- `tabs`, `section-card`, `section-paper`: 레이아웃 컨테이너
- `numbering-rule`, `rack-structure`: 특수 목적 컴포넌트
---
## 우선순위 작업 목록
### 1순위: 데이터 컴포넌트 테이블 설정 UI 통일
| 컴포넌트 | 작업 내용 | 상태 |
| --------------------- | ---------------------------------------- | ------- |
| `card-display` | Combobox UI 추가, `customTableName` 지원 | ✅ 완료 |
| `pivot-grid` | Combobox UI 추가 | 대기 |
| `repeat-screen-modal` | Combobox UI 추가 | 대기 |
### 2순위: 다국어 지원 확대
| 컴포넌트 | 작업 내용 | 상태 |
| ------------------ | -------------------------- | ----------- |
| `card-display` | 버튼 라벨 시스템 다국어 | ➖ 해당없음 |
| `unified-repeater` | 컬럼 라벨 `langKeyId` 지원 | 대기 |
| `tabs` | 탭 이름 `langKeyId` 지원 | 대기 |
| `section-card` | 제목 `langKeyId` 지원 | 대기 |
---
## 범례
| 기호 | 의미 |
| ---- | --------------------------------- |
| ✅ | 완전 적용 |
| ⚠️ | 부분 적용 (기능은 있으나 UI 미비) |
| ❌ | 미적용 |
| ➖ | 해당없음 (기능 불필요) |

21
frontend/app/(main)/screens/[screenId]/page.tsx
View File

@ -23,8 +23,11 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
<<<<<<< HEAD
import { evaluateConditional } from "@/lib/utils/conditionalEvaluator"; // 조건부 표시 평가
=======
import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
>>>>>>> 435eb90763a3f89b76d0d810d8b78c27c0bb6802
function ScreenViewPage() {
const params = useParams();
@ -34,7 +37,7 @@ function ScreenViewPage() {
// URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
// URL 쿼리에서 프리뷰용 company_code 가져오기
const previewCompanyCode = searchParams.get("company_code");
@ -115,7 +118,7 @@ function ScreenViewPage() {
// 편집 모달 이벤트 리스너 등록
useEffect(() => {
const handleOpenEditModal = (event: CustomEvent) => {
console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
// console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
setEditModalConfig({
screenId: event.detail.screenId,
@ -327,8 +330,8 @@ function ScreenViewPage() {
newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
} else {
// 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
const MARGIN_X = 32;
const availableWidth = containerWidth - MARGIN_X;
const MARGIN_X = 32;
const availableWidth = containerWidth - MARGIN_X;
newScale = availableWidth / designWidth;
}
@ -408,9 +411,10 @@ function ScreenViewPage() {
{/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
{layoutReady && layout && layout.components.length > 0 ? (
<div
className="bg-background relative"
style={{
<ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
<div
className="bg-background relative"
style={{
width: `${screenWidth}px`,
height: `${screenHeight}px`,
minWidth: `${screenWidth}px`,
@ -853,7 +857,8 @@ function ScreenViewPage() {
</>
);
})()}
</div>
</div>
</ScreenMultiLangProvider>
) : (
// 빈 화면일 때
<div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>

8
frontend/components/screen/InteractiveScreenViewer.tsx
View File

@ -1923,11 +1923,19 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
return applyStyles(
<button
onClick={handleButtonClick}
<<<<<<< HEAD
disabled={isReadonly}
className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${
hasCustomColors
? ""
: "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
=======
disabled={readonly}
className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
hasCustomColors
? ''
: 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
>>>>>>> ac0f4618321df78939e833f90768ae5404646fec
}`}
style={{
height: "100%",

1
frontend/contexts/ActiveTabContext.tsx
View File

@ -142,3 +142,4 @@ export const useActiveTabOptional = () => {

1
frontend/hooks/useAutoFill.ts
View File

@ -199,3 +199,4 @@ export function applyAutoFillToFormData(

14
frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
View File

@ -390,6 +390,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
}
}
// 디버깅 로그
console.log("🔍 [ButtonPrimary] 행 선택 체크:", component.label, {
rowSelectionSource,
hasSelection,
selectionCount,
selectionSource,
hasSplitPanelContext: !!splitPanelContext,
trackedSelectedLeftData: trackedSelectedLeftData,
selectedRowsData: selectedRowsData?.length,
selectedRows: selectedRows?.length,
flowSelectedData: flowSelectedData?.length,
modalStoreDataKeys: Object.keys(modalStoreData),
});
// 선택된 데이터가 없으면 비활성화
if (!hasSelection) {
return true;

1
화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
View File

@ -1691,3 +1691,4 @@ const 출고등록_설정: ScreenSplitPanel = {

1
화면_임베딩_시스템_Phase1-4_구현_완료.md
View File

@ -538,3 +538,4 @@ const { data: config } = await getScreenSplitPanel(screenId);

1
화면_임베딩_시스템_충돌_분석_보고서.md
View File

@ -525,3 +525,4 @@ function ScreenViewPage() {