From 1a82c8ea9414e7ad433a112c56e30c25b08fdf54 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Tue, 18 Nov 2025 11:50:13 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20ScreenModal=EC=97=90=20TableOptionsProvi?=
 =?UTF-8?q?der=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20TableSearchWidget?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- 거래처별 품목 정보 등 모달 화면에서 TableSearchWidget 사용 시 에러 발생
- Error: useTableOptions must be used within TableOptionsProvider

원인:
- ScreenModal에서 화면을 렌더링할 때 필수 Context Provider 누락
- TableSearchWidget은 TableOptionsContext를 필수로 사용하는데 모달 환경에서 제공되지 않음

해결:
- ScreenModal에 TableOptionsProvider와 TableSearchWidgetHeightProvider 추가
- 모달 내부 화면 컴포넌트들이 정상적으로 Context를 사용할 수 있도록 수정

영향:
- 거래처별 품목 정보 화면의 '품목 추가' 버튼 정상 작동
- 모든 모달 화면에서 TableSearchWidget 사용 가능
- 기존 화면 페이지(/screens/[screenId])는 이미 Provider가 있어 영향 없음
---
 frontend/components/common/ScreenModal.tsx | 110 +++++++++++----------
 1 file changed, 58 insertions(+), 52 deletions(-)

diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 3cb55fc1..c076fe5b 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -15,6 +15,8 @@ import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
+import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -394,60 +396,64 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               </div>
             </div>
           ) : screenData ? (
-            <div
-              className="relative bg-white mx-auto"
-              style={{
-                width: `${screenDimensions?.width || 800}px`,
-                height: `${screenDimensions?.height || 600}px`,
-                transformOrigin: "center center",
-              }}
-            >
-              {screenData.components.map((component) => {
-                // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
-                const offsetX = screenDimensions?.offsetX || 0;
-                const offsetY = screenDimensions?.offsetY || 0;
+            <TableOptionsProvider>
+              <TableSearchWidgetHeightProvider>
+                <div
+                  className="relative bg-white mx-auto"
+                  style={{
+                    width: `${screenDimensions?.width || 800}px`,
+                    height: `${screenDimensions?.height || 600}px`,
+                    transformOrigin: "center center",
+                  }}
+                >
+                  {screenData.components.map((component) => {
+                    // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
+                    const offsetX = screenDimensions?.offsetX || 0;
+                    const offsetY = screenDimensions?.offsetY || 0;
 
-                // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
-                const adjustedComponent = (offsetX === 0 && offsetY === 0) ? component : {
-                  ...component,
-                  position: {
-                    ...component.position,
-                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
-                  },
-                };
+                    // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
+                    const adjustedComponent = (offsetX === 0 && offsetY === 0) ? component : {
+                      ...component,
+                      position: {
+                        ...component.position,
+                        x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                        y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                      },
+                    };
 
-                return (
-                  <InteractiveScreenViewerDynamic
-                    key={component.id}
-                    component={adjustedComponent}
-                    allComponents={screenData.components}
-                    formData={formData}
-                    onFormDataChange={(fieldName, value) => {
-                      // console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                      // console.log("📋 현재 formData:", formData);
-                      setFormData((prev) => {
-                        const newFormData = {
-                          ...prev,
-                          [fieldName]: value,
-                        };
-                        // console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
-                        return newFormData;
-                      });
-                    }}
-                    onRefresh={() => {
-                      // 부모 화면의 테이블 새로고침 이벤트 발송
-                      console.log("🔄 모달에서 부모 화면 테이블 새로고침 이벤트 발송");
-                      window.dispatchEvent(new CustomEvent("refreshTable"));
-                    }}
-                    screenInfo={{
-                      id: modalState.screenId!,
-                      tableName: screenData.screenInfo?.tableName,
-                    }}
-                  />
-                );
-              })}
-            </div>
+                    return (
+                      <InteractiveScreenViewerDynamic
+                        key={component.id}
+                        component={adjustedComponent}
+                        allComponents={screenData.components}
+                        formData={formData}
+                        onFormDataChange={(fieldName, value) => {
+                          // console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
+                          // console.log("📋 현재 formData:", formData);
+                          setFormData((prev) => {
+                            const newFormData = {
+                              ...prev,
+                              [fieldName]: value,
+                            };
+                            // console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
+                            return newFormData;
+                          });
+                        }}
+                        onRefresh={() => {
+                          // 부모 화면의 테이블 새로고침 이벤트 발송
+                          console.log("🔄 모달에서 부모 화면 테이블 새로고침 이벤트 발송");
+                          window.dispatchEvent(new CustomEvent("refreshTable"));
+                        }}
+                        screenInfo={{
+                          id: modalState.screenId!,
+                          tableName: screenData.screenInfo?.tableName,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </TableSearchWidgetHeightProvider>
+            </TableOptionsProvider>
           ) : (
             <div className="flex h-full items-center justify-center">
               <p className="text-muted-foreground">화면 데이터가 없습니다.</p>