diff --git a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx index 0a6c133b..c116c595 100644 --- a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx +++ b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx @@ -9,7 +9,6 @@ import React, { useState, useEffect } from "react"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; import { Checkbox } from "@/components/ui/checkbox"; import { tableTypeApi } from "@/lib/api/screen"; @@ -32,23 +31,18 @@ export const V2BizConfigPanel: React.FC = ({ config, onChange, }) => { - // 테이블 목록 const [tables, setTables] = useState([]); const [loadingTables, setLoadingTables] = useState(false); - - // 컬럼 목록 (소스/대상/관련 테이블용) const [sourceColumns, setSourceColumns] = useState([]); const [targetColumns, setTargetColumns] = useState([]); const [relatedColumns, setRelatedColumns] = useState([]); const [categoryColumns, setCategoryColumns] = useState([]); const [loadingColumns, setLoadingColumns] = useState(false); - // 설정 업데이트 핸들러 const updateConfig = (field: string, value: any) => { onChange({ ...config, [field]: value }); }; - // 테이블 목록 로드 useEffect(() => { const loadTables = async () => { setLoadingTables(true); @@ -67,13 +61,9 @@ export const V2BizConfigPanel: React.FC = ({ loadTables(); }, []); - // 소스 테이블 선택 시 컬럼 목록 로드 useEffect(() => { const loadColumns = async () => { - if (!config.sourceTable) { - setSourceColumns([]); - return; - } + if (!config.sourceTable) { setSourceColumns([]); return; } try { const data = await tableTypeApi.getColumns(config.sourceTable); setSourceColumns(data.map((c: any) => ({ @@ -87,13 +77,9 @@ export const V2BizConfigPanel: React.FC = ({ loadColumns(); }, [config.sourceTable]); - // 대상 테이블 선택 시 컬럼 목록 로드 useEffect(() => { const loadColumns = async () => { - if (!config.targetTable) { - setTargetColumns([]); - return; - } + if (!config.targetTable) { setTargetColumns([]); return; } try { const data = await tableTypeApi.getColumns(config.targetTable); setTargetColumns(data.map((c: any) => ({ @@ -107,13 +93,9 @@ export const V2BizConfigPanel: React.FC = ({ loadColumns(); }, [config.targetTable]); - // 관련 테이블 선택 시 컬럼 목록 로드 useEffect(() => { const loadColumns = async () => { - if (!config.relatedTable) { - setRelatedColumns([]); - return; - } + if (!config.relatedTable) { setRelatedColumns([]); return; } try { const data = await tableTypeApi.getColumns(config.relatedTable); setRelatedColumns(data.map((c: any) => ({ @@ -127,13 +109,9 @@ export const V2BizConfigPanel: React.FC = ({ loadColumns(); }, [config.relatedTable]); - // 카테고리 테이블 선택 시 컬럼 목록 로드 useEffect(() => { const loadColumns = async () => { - if (!config.tableName) { - setCategoryColumns([]); - return; - } + if (!config.tableName) { setCategoryColumns([]); return; } setLoadingColumns(true); try { const data = await tableTypeApi.getColumns(config.tableName); @@ -151,74 +129,73 @@ export const V2BizConfigPanel: React.FC = ({ }, [config.tableName]); return ( -
- {/* 비즈니스 타입 */} -
- - +
+ {/* BUSINESS TYPE 섹션 */} +
+

BUSINESS TYPE

+
+ 비즈니스 타입 +
+ +
+
- - - {/* 플로우 설정 */} + {/* FLOW SETTINGS 섹션 */} {config.bizType === "flow" && ( -
- - -
- - updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)} - placeholder="플로우 ID" - className="h-8 text-xs" - /> +
+

FLOW SETTINGS

+
+ 플로우 ID +
+ updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)} + placeholder="플로우 ID" + className="h-7 text-xs" + /> +
- -
+
+ 편집 가능 updateConfig("editable", checked)} /> -
- -
+
+ 미니맵 표시 updateConfig("showMinimap", checked)} /> -
)} - {/* 랙 구조 설정 */} + {/* RACK SETTINGS 섹션 */} {config.bizType === "rack" && ( -
- - -
-
+
+

RACK SETTINGS

+
+
= ({ onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)} placeholder="5" min="1" - className="h-8 text-xs" + className="h-7 text-xs" />
-
+
= ({ onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)} placeholder="10" min="1" - className="h-8 text-xs" + className="h-7 text-xs" />
- -
+
+ 라벨 표시 updateConfig("showLabels", checked)} /> -
)} - {/* 채번 규칙 설정 */} + {/* NUMBERING SETTINGS 섹션 */} {config.bizType === "numbering" && ( -
- - -
- - updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)} - placeholder="규칙 ID" - className="h-8 text-xs" - /> +
+

NUMBERING SETTINGS

+
+ 채번 규칙 ID +
+ updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)} + placeholder="규칙 ID" + className="h-7 text-xs" + /> +
- -
- - updateConfig("prefix", e.target.value)} - placeholder="예: INV-" - className="h-8 text-xs" - /> +
+ 접두사 +
+ updateConfig("prefix", e.target.value)} + placeholder="예: INV-" + className="h-7 text-xs" + /> +
- -
+
+ 자동 생성 updateConfig("autoGenerate", checked)} /> -
)} - {/* 카테고리 설정 */} + {/* CATEGORY SETTINGS 섹션 */} {config.bizType === "category" && ( -
- - -
- - +
+

CATEGORY SETTINGS

+
+ 카테고리 테이블 +
+ +
- {config.tableName && ( -
- - +
+ 컬럼 +
+ +
)}
)} - {/* 데이터 매핑 설정 */} + {/* DATA MAPPING 섹션 */} {config.bizType === "data-mapping" && ( -
- - -
- - -
- -
- - -
-
- )} - - {/* 관련 데이터 설정 */} - {config.bizType === "related-data" && ( -
- - -
- - -
- - {config.relatedTable && ( -
- +
+

DATA MAPPING

+
+ 소스 테이블 +
- )} +
+
+ 대상 테이블 +
+ +
+
+
+ )} -
- - updateConfig("buttonText", e.target.value)} - placeholder="관련 데이터 보기" - className="h-8 text-xs" - /> + {/* RELATED DATA 섹션 */} + {config.bizType === "related-data" && ( +
+

RELATED DATA

+
+ 관련 테이블 +
+ +
+
+ {config.relatedTable && ( +
+ 연결 컬럼 +
+ +
+
+ )} +
+ 버튼 텍스트 +
+ updateConfig("buttonText", e.target.value)} + placeholder="관련 데이터 보기" + className="h-7 text-xs" + /> +
)} diff --git a/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx b/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx index d160e3fb..22a79b21 100644 --- a/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx +++ b/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx @@ -9,7 +9,6 @@ import React from "react"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; import { Checkbox } from "@/components/ui/checkbox"; interface V2LayoutConfigPanelProps { @@ -21,57 +20,56 @@ export const V2LayoutConfigPanel: React.FC = ({ config, onChange, }) => { - // 설정 업데이트 핸들러 const updateConfig = (field: string, value: any) => { onChange({ ...config, [field]: value }); }; return ( -
- {/* 레이아웃 타입 */} -
- - +
+ {/* LAYOUT TYPE 섹션 */} +
+

LAYOUT TYPE

+
+ 레이아웃 타입 +
+ +
+
- - - {/* 그리드 설정 */} + {/* GRID SETTINGS 섹션 */} {(config.layoutType === "grid" || !config.layoutType) && ( -
- - -
+
+

GRID SETTINGS

+
+ 12컬럼 그리드 사용 updateConfig("use12Column", checked)} /> -
- -
-
+
+
-
+
updateConfig("gap", e.target.value)} placeholder="16" - className="h-8 text-xs" + className="h-7 text-xs" />
)} - {/* 분할 패널 설정 */} + {/* SPLIT SETTINGS 섹션 */} {config.layoutType === "split" && ( -
- - -
- - +
+

SPLIT SETTINGS

+
+ 분할 방향 +
+ +
- -
- -
+
+
+ = ({ placeholder="50" min="10" max="90" - className="h-8 text-xs" + className="h-7 text-xs" /> +
+
+
- -
+
+ 크기 조절 가능 updateConfig("resizable", checked)} /> -
)} - {/* 플렉스 설정 */} + {/* FLEX SETTINGS 섹션 */} {config.layoutType === "flex" && ( -
- - -
- - +
+

FLEX SETTINGS

+
+ 방향 +
+ +
- -
-
+
+
-
+
- -
- - updateConfig("gap", e.target.value)} - placeholder="16" - className="h-8 text-xs" - /> +
+ 간격 (px) +
+ updateConfig("gap", e.target.value)} + placeholder="16" + className="h-7 text-xs" + /> +
- -
+
+ 줄바꿈 허용 updateConfig("wrap", checked)} /> -
)} - {/* 화면 임베드 설정 */} + {/* SCREEN EMBED 섹션 */} {config.layoutType === "screen-embed" && ( -
- - updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)} - placeholder="화면 ID" - className="h-8 text-xs" - /> +
+

SCREEN EMBED

+
+ 화면 ID +
+ updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)} + placeholder="화면 ID" + className="h-7 text-xs" + /> +
+
)}
@@ -252,5 +255,3 @@ export const V2LayoutConfigPanel: React.FC = ({ V2LayoutConfigPanel.displayName = "V2LayoutConfigPanel"; export default V2LayoutConfigPanel; - - diff --git a/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx b/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx index ee63803c..eaf643ce 100644 --- a/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx +++ b/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx @@ -9,7 +9,6 @@ import React from "react"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; import { Checkbox } from "@/components/ui/checkbox"; interface V2MediaConfigPanelProps { @@ -21,185 +20,166 @@ export const V2MediaConfigPanel: React.FC = ({ config, onChange, }) => { - // 설정 업데이트 핸들러 const updateConfig = (field: string, value: any) => { onChange({ ...config, [field]: value }); }; return ( -
- {/* 미디어 타입 */} -
- - +
+ {/* MEDIA TYPE 섹션 */} +
+

MEDIA TYPE

+
+ 미디어 타입 +
+ +
+
- - - {/* 허용 파일 형식 */} -
- - updateConfig("accept", e.target.value)} - placeholder="예: .jpg,.png,.pdf" - className="h-8 text-xs" - /> -

- 쉼표로 구분. 예: .jpg,.png,.gif 또는 image/* -

+ {/* FILE SETTINGS 섹션 */} +
+

FILE SETTINGS

+
+ 허용 파일 형식 +
+ updateConfig("accept", e.target.value)} + placeholder=".jpg,.png,.pdf" + className="h-7 text-xs" + /> +
+
+
+ 최대 크기 (MB) +
+ updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)} + placeholder="10" + min="1" + className="h-7 text-xs" + /> +
+
+
+ 최대 파일 수 +
+ updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)} + placeholder="제한 없음" + min="1" + className="h-7 text-xs" + /> +
+
- {/* 최대 파일 크기 */} -
- - updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)} - placeholder="10" - min="1" - className="h-8 text-xs" - /> -
- - {/* 최대 파일 수 */} -
- - updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)} - placeholder="제한 없음" - min="1" - className="h-8 text-xs" - /> -
- - - - {/* 옵션 */} -
- - -
+ {/* OPTIONS 섹션 */} +
+

OPTIONS

+
+ 다중 파일 업로드 updateConfig("multiple", checked)} /> -
- -
+
+ 미리보기 표시 updateConfig("preview", checked)} /> -
- -
+
+ 드래그 앤 드롭 updateConfig("dragDrop", checked)} /> -
- {/* 이미지 전용 설정 */} + {/* IMAGE SETTINGS 섹션 - 이미지 타입 전용 */} {config.mediaType === "image" && ( - <> - -
- - -
-
- - updateConfig("maxWidth", e.target.value ? Number(e.target.value) : undefined)} - placeholder="자동" - className="h-8 text-xs" - /> -
-
- - updateConfig("maxHeight", e.target.value ? Number(e.target.value) : undefined)} - placeholder="자동" - className="h-8 text-xs" - /> -
-
- -
- updateConfig("crop", checked)} +
+

IMAGE SETTINGS

+
+
+ + updateConfig("maxWidth", e.target.value ? Number(e.target.value) : undefined)} + placeholder="자동" + className="h-7 text-xs" + /> +
+
+ + updateConfig("maxHeight", e.target.value ? Number(e.target.value) : undefined)} + placeholder="자동" + className="h-7 text-xs" /> -
- +
+ 자르기 기능 + updateConfig("crop", checked)} + /> +
+
)} - {/* 비디오/오디오 전용 설정 */} + {/* PLAYER SETTINGS 섹션 - 비디오/오디오 전용 */} {(config.mediaType === "video" || config.mediaType === "audio") && ( - <> - -
- - -
- updateConfig("autoplay", checked)} - /> - -
- -
- updateConfig("controls", checked)} - /> - -
- -
- updateConfig("loop", checked)} - /> - -
+
+

PLAYER SETTINGS

+
+ 자동 재생 + updateConfig("autoplay", checked)} + />
- +
+ 컨트롤 표시 + updateConfig("controls", checked)} + /> +
+
+ 반복 재생 + updateConfig("loop", checked)} + /> +
+
)}
); @@ -208,5 +188,3 @@ export const V2MediaConfigPanel: React.FC = ({ V2MediaConfigPanel.displayName = "V2MediaConfigPanel"; export default V2MediaConfigPanel; - -