diff --git a/src/components/production/bending/BendingBaseForm.tsx b/src/components/production/bending/BendingBaseForm.tsx index 44a1767f..cedea42e 100644 --- a/src/components/production/bending/BendingBaseForm.tsx +++ b/src/components/production/bending/BendingBaseForm.tsx @@ -84,6 +84,15 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) { const isView = mode === 'view'; const isEdit = mode === 'edit'; + // sticky를 위해
를 일시적으로 visible로 변경 + useEffect(() => { + const main = document.querySelector('main'); + if (!main) return; + const prev = main.style.overflow; + main.style.overflow = 'visible'; + return () => { main.style.overflow = prev; }; + }, []); + const [formData, setFormData] = useState(INITIAL_FORM); const [bendingData, setBendingData] = useState(INITIAL_FORM.bendingData); const [filters, setFilters] = useState(null); @@ -94,6 +103,7 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) { const [isDrawingOpen, setIsDrawingOpen] = useState(false); const [drawingImage, setDrawingImage] = useState(null); const [isHistoryOpen, setIsHistoryOpen] = useState(false); + const [isImageZoomOpen, setIsImageZoomOpen] = useState(false); const [originalItem, setOriginalItem] = useState(null); const fileInputRef = useRef(null); @@ -465,13 +475,17 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) { - {/* 우측: 이미지 + 비고 + 저장 */} -
+ {/* 우측: 이미지 + 비고 (sticky) */} +
{/* 형상 이미지 */}

형상 이미지

-
+
drawingImage && setIsImageZoomOpen(true)} + title={drawingImage ? '클릭하여 확대' : undefined} + > {drawingImage ? ( 형상 이미지 ) : ( @@ -611,6 +625,18 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) { description="절곡 부품의 형상을 그리거나 편집합니다." /> + {/* 이미지 확대 */} + + + + 형상 이미지 + + {drawingImage && ( + 형상 이미지 확대 + )} + + + {/* 삭제 확인 */} state.sidebarCollapsed); + // sticky를 위해
를 일시적으로 visible로 변경 + useEffect(() => { + const main = document.querySelector('main'); + if (!main) return; + const prev = main.style.overflow; + main.style.overflow = 'visible'; + return () => { main.style.overflow = prev; }; + }, []); + const [form, setForm] = useState(INITIAL_STATE); const [components, setComponents] = useState([]); const [isLoading, setIsLoading] = useState(!isNew); @@ -179,6 +188,7 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps) const [isWorkOrderOpen, setIsWorkOrderOpen] = useState(false); const [originalModel, setOriginalModel] = useState(null); const [isDrawingOpen, setIsDrawingOpen] = useState(false); + const [isImageZoomOpen, setIsImageZoomOpen] = useState(false); const [drawingImage, setDrawingImage] = useState(null); const fileInputRef = useRef(null); @@ -480,12 +490,16 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps)
- {/* 우측: 이미지 + 저장 */} -
+ {/* 우측: 이미지 (sticky) */} +

결합형태 이미지

-
+
drawingImage && setIsImageZoomOpen(true)} + title={drawingImage ? '클릭하여 확대' : undefined} + > {drawingImage ? ( 결합형태 이미지 ) : ( @@ -734,6 +748,18 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps) description="조립도 형상을 그리거나 편집합니다." /> + {/* 이미지 확대 */} + + + + 결합형태 이미지 + + {drawingImage && ( + 결합형태 이미지 확대 + )} + + + {/* 삭제 확인 */}