패널 정리중

2025-10-28 18:41:45 +09:00
parent 743ae6dbf1
commit eeae338cd4
5 changed files with 457 additions and 892 deletions
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -61,6 +61,24 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
  const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
  const [displayColumnSearch, setDisplayColumnSearch] = useState("");

+  // 🎯 플로우 위젯이 화면에 있는지 확인
+  const hasFlowWidget = useMemo(() => {
+    const found = allComponents.some((comp: any) => {
+      // ScreenDesigner에서 저장하는 componentType 속성 확인!
+      const compType = comp.componentType || comp.widgetType || "";
+
+      // "flow-widget" 체크
+      const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow");
+
+      if (isFlow) {
+        console.log("✅ 플로우 위젯 발견!", { id: comp.id, componentType: comp.componentType });
+      }
+      return isFlow;
+    });
+    console.log("🎯 플로우 위젯 존재 여부:", found);
+    return found;
+  }, [allComponents]);
+
  // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
  useEffect(() => {
    const latestConfig = component.componentConfig || {};
@@ -298,7 +316,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
@@ -372,7 +391,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
@@ -526,7 +546,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                  variant="outline"
                  role="combobox"
                  aria-expanded={displayColumnOpen}
-                  className="mt-2 h-8 w-full justify-between text-xs" style={{ fontSize: "12px" }}
+                  className="mt-2 h-8 w-full justify-between text-xs"
+                  style={{ fontSize: "12px" }}
                  disabled={columnsLoading || tableColumns.length === 0}
                >
                  {columnsLoading
@@ -543,7 +564,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                <Command>
                  <CommandInput placeholder="컬럼 검색..." className="text-xs" style={{ fontSize: "12px" }} />
                  <CommandList>
-                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>
+                      컬럼을 찾을 수 없습니다.
+                    </CommandEmpty>
                    <CommandGroup>
                      {tableColumns.map((column) => (
                        <CommandItem
@@ -553,7 +576,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                            onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
                            setDisplayColumnOpen(false);
                          }}
-                          className="text-xs" style={{ fontSize: "12px" }}
+                          className="text-xs"
+                          style={{ fontSize: "12px" }}
                        >
                          <Check
                            className={cn(
@@ -586,7 +610,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                  variant="outline"
                  role="combobox"
                  aria-expanded={navScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
@@ -659,7 +684,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
                onUpdateProperty("componentConfig.action.targetUrl", newValue);
              }}
-              className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
            />
            <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
          </div>
@@ -671,14 +697,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
        <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
      </div>

-      {/* 🆕 플로우 단계별 표시 제어 섹션 */}
-      <div className="mt-8 border-t border-gray-200 pt-6">
-        <FlowVisibilityConfigPanel
-          component={component}
-          allComponents={allComponents}
-          onUpdateProperty={onUpdateProperty}
-        />
-      </div>
+      {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
+      {hasFlowWidget && (
+        <div className="mt-8 border-t border-gray-200 pt-6">
+          <FlowVisibilityConfigPanel
+            component={component}
+            allComponents={allComponents}
+            onUpdateProperty={onUpdateProperty}
+          />
+        </div>
+      )}
    </div>
  );
 };
--- a/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
@@ -9,6 +9,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Input } from "@/components/ui/input";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
 import { Workflow, Info, CheckCircle, XCircle, Loader2, ArrowRight, ArrowDown } from "lucide-react";
 import { ComponentData } from "@/types/screen";
 import { FlowVisibilityConfig } from "@/types/control-management";
@@ -344,7 +345,11 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                              checked={isChecked}
                              onCheckedChange={() => toggleStep(step.id)}
                            />
-                            <Label htmlFor={`step-${step.id}`} className="flex flex-1 items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
+                            <Label
+                              htmlFor={`step-${step.id}`}
+                              className="flex flex-1 items-center gap-2 text-xs"
+                              style={{ fontSize: "12px" }}
+                            >
                              <Badge variant="outline" className="text-xs">
                                Step {step.stepOrder}
                              </Badge>
@@ -403,7 +408,8 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                        value={groupId}
                        onChange={(e) => setGroupId(e.target.value)}
                        placeholder="group-1"
-                        className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}
+                        className="h-6 text-xs sm:h-9 sm:text-xs"
+                        style={{ fontSize: "12px" }}
                      />
                      <p className="text-muted-foreground text-[10px]">
                        같은 그룹 ID를 가진 버튼들이 하나의 그룹으로 묶입니다
@@ -453,7 +459,8 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                            setGroupGap(Number(e.target.value));
                            setTimeout(() => applyConfig(), 0);
                          }}
-                          className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}
+                          className="h-6 text-xs sm:h-9 sm:text-xs"
+                          style={{ fontSize: "12px" }}
                        />
                        <Badge variant="outline" className="text-xs">
                          {groupGap}px
@@ -473,7 +480,11 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                          setTimeout(() => applyConfig(), 0);
                        }}
                      >
-                        <SelectTrigger id="group-align" className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}>
+                        <SelectTrigger
+                          id="group-align"
+                          className="h-6 text-xs sm:h-9 sm:text-xs"
+                          style={{ fontSize: "12px" }}
+                        >
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>