Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into lhj

frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
-import { createPortal } from "react-dom";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
 import { cn } from "@/lib/registry/components/common/inputStyles";
@@ -66,8 +65,6 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   });
 
   const [isOpen, setIsOpen] = useState(false);
-  // 드롭다운 위치 (Portal 렌더링용)
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
 
   // webTypeConfig 또는 componentConfig 사용 (DynamicWebTypeRenderer 호환성)
   const config = (props as any).webTypeConfig || componentConfig || {};
@@ -329,26 +326,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   }, [selectedValue, codeOptions, config.options]);
 
   // 클릭 이벤트 핸들러 (React Query로 간소화)
-  // 드롭다운 위치 계산 함수
-  const updateDropdownPosition = () => {
-    if (selectRef.current) {
-      const rect = selectRef.current.getBoundingClientRect();
-      setDropdownPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  };
-
   const handleToggle = () => {
     if (isDesignMode) return;
 
-    // 드롭다운 열기 전에 위치 계산
-    if (!isOpen) {
-      updateDropdownPosition();
-    }
-
     // React Query가 자동으로 캐시 관리하므로 수동 새로고침 불필요
     setIsOpen(!isOpen);
   };
@@ -470,13 +450,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             value={searchQuery || selectedLabel}
             onChange={(e) => {
               setSearchQuery(e.target.value);
-              updateDropdownPosition();
-              setIsOpen(true);
-            }}
-            onFocus={() => {
-              updateDropdownPosition();
               setIsOpen(true);
             }}
+            onFocus={() => setIsOpen(true)}
             placeholder="코드 또는 코드명 입력..."
             className={cn(
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
@@ -485,16 +461,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             )}
             readOnly={isDesignMode}
           />
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && filteredOptions.length > 0 && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
@@ -510,8 +478,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   </div>
                 </div>
               ))}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -541,16 +508,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {isLoadingCodes ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
@@ -566,8 +525,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               ) : (
                 <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
               )}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -632,13 +590,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
-              updateDropdownPosition();
-              setIsOpen(true);
-            }}
-            onFocus={() => {
-              updateDropdownPosition();
               setIsOpen(true);
             }}
+            onFocus={() => setIsOpen(true)}
             placeholder={placeholder}
             className={cn(
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
@@ -647,16 +601,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             )}
             readOnly={isDesignMode}
           />
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && filteredOptions.length > 0 && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
@@ -674,8 +620,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   {option.label}
                 </div>
               ))}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -705,16 +650,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-gray-300 bg-white shadow-lg">
               <input
                 type="text"
                 value={searchQuery}
@@ -739,8 +676,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                     </div>
                   ))}
               </div>
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -757,12 +693,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               !isDesignMode && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
             )}
-            onClick={() => {
-              if (!isDesignMode) {
-                updateDropdownPosition();
-                setIsOpen(true);
-              }
-            }}
+            onClick={() => !isDesignMode && setIsOpen(true)}
             style={{ 
               pointerEvents: isDesignMode ? "none" : "auto",
               height: "100%"
@@ -795,30 +726,22 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <span className="text-gray-500">{placeholder}</span>
             )}
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {(isLoadingCodes || isLoadingCategories) ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 allOptions.map((option, index) => {
-                  const isOptionSelected = selectedValues.includes(option.value);
+                  const isSelected = selectedValues.includes(option.value);
                   return (
                     <div
                       key={`${option.value}-${index}`}
                       className={cn(
                         "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                        isOptionSelected && "bg-blue-50 font-medium"
+                        isSelected && "bg-blue-50 font-medium"
                       )}
                       onClick={() => {
-                        const newVals = isOptionSelected
+                        const newVals = isSelected
                           ? selectedValues.filter((v) => v !== option.value)
                           : [...selectedValues, option.value];
                         setSelectedValues(newVals);
@@ -831,7 +754,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                       <div className="flex items-center gap-2">
                         <input
                           type="checkbox"
-                          checked={isOptionSelected}
+                          checked={isSelected}
                           onChange={() => {}}
                           className="h-4 w-4"
                         />
@@ -843,8 +766,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               ) : (
                 <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
               )}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -873,16 +795,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </div>
-        {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-        {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-          <div 
-            className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-            style={{
-              top: dropdownPosition.top,
-              left: dropdownPosition.left,
-              width: dropdownPosition.width,
-            }}
-          >
+        {isOpen && !isDesignMode && (
+          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
             {isLoadingCodes ? (
               <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
             ) : allOptions.length > 0 ? (
@@ -898,8 +812,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             ) : (
               <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
             )}
-          </div>,
-          document.body
+          </div>
         )}
       </div>
     );