From a7274cbc160642f5a66ce3222a5320f0b5975c56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Mon, 23 Mar 2026 13:41:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[=EC=A0=88=EA=B3=A1]=20=ED=8F=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=98=81=EC=97=AD=20Tooltip=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=98=20+=20=ED=99=95=EB=8C=80=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../production/bending/BendingBaseForm.tsx    | 41 ++++++++-----------
 .../production/bending/BendingModelForm.tsx   | 41 ++++++++-----------
 2 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/components/production/bending/BendingBaseForm.tsx b/src/components/production/bending/BendingBaseForm.tsx
index cedea42e..bed927bd 100644
--- a/src/components/production/bending/BendingBaseForm.tsx
+++ b/src/components/production/bending/BendingBaseForm.tsx
@@ -11,6 +11,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { X, Save, Trash2, Loader2, Pencil, History } from 'lucide-react';
 import { DrawingCanvas } from '@/components/items/DrawingCanvas';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -103,7 +104,6 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) {
   const [isDrawingOpen, setIsDrawingOpen] = useState(false);
   const [drawingImage, setDrawingImage] = useState<string | null>(null);
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
-  const [isImageZoomOpen, setIsImageZoomOpen] = useState(false);
   const [originalItem, setOriginalItem] = useState<BendingItem | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -481,17 +481,24 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) {
           <Card>
             <CardContent className="pt-6">
               <h3 className="text-sm font-semibold mb-3">형상 이미지</h3>
-              <div
-                className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3 overflow-hidden cursor-pointer"
-                onClick={() => drawingImage && setIsImageZoomOpen(true)}
-                title={drawingImage ? '클릭하여 확대' : undefined}
-              >
-                {drawingImage ? (
-                  <img src={drawingImage} alt="형상 이미지" className="w-full h-full object-contain" />
-                ) : (
+              {drawingImage ? (
+                <TooltipProvider delayDuration={200}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3 overflow-hidden cursor-pointer">
+                        <img src={drawingImage} alt="형상 이미지" className="w-full h-full object-contain" />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="left" className="p-1 max-w-none">
+                      <img src={drawingImage} alt="형상 이미지 확대" className="w-80 h-80 object-contain" />
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <div className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3">
                   <span className="text-sm text-muted-foreground">이미지 없음</span>
-                )}
-              </div>
+                </div>
+              )}
               {!disabled && (
                 <div className="space-y-2">
                   <div className="flex gap-2">
@@ -625,18 +632,6 @@ export function BendingBaseForm({ id, mode }: BendingBaseFormProps) {
         description="절곡 부품의 형상을 그리거나 편집합니다."
       />
 
-      {/* 이미지 확대 */}
-      <Dialog open={isImageZoomOpen} onOpenChange={setIsImageZoomOpen}>
-        <DialogContent className="max-w-3xl max-h-[90vh] p-2">
-          <DialogHeader>
-            <DialogTitle className="text-sm">형상 이미지</DialogTitle>
-          </DialogHeader>
-          {drawingImage && (
-            <img src={drawingImage} alt="형상 이미지 확대" className="w-full h-auto object-contain" />
-          )}
-        </DialogContent>
-      </Dialog>
-
       {/* 삭제 확인 */}
       <DeleteConfirmDialog
         open={isDeleteOpen}
diff --git a/src/components/production/bending/BendingModelForm.tsx b/src/components/production/bending/BendingModelForm.tsx
index 229b2bcb..4b91e852 100644
--- a/src/components/production/bending/BendingModelForm.tsx
+++ b/src/components/production/bending/BendingModelForm.tsx
@@ -12,6 +12,7 @@ import { useRouter } from 'next/navigation';
 import { X, Save, Trash2, Loader2, FileText, Pencil, History } from 'lucide-react';
 import { DrawingCanvas } from '@/components/items/DrawingCanvas';
 import { DocumentViewer } from '@/components/document-system/viewer/DocumentViewer';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -188,7 +189,6 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps)
   const [isWorkOrderOpen, setIsWorkOrderOpen] = useState(false);
   const [originalModel, setOriginalModel] = useState<GuiderailModelDetail | null>(null);
   const [isDrawingOpen, setIsDrawingOpen] = useState(false);
-  const [isImageZoomOpen, setIsImageZoomOpen] = useState(false);
   const [drawingImage, setDrawingImage] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -495,17 +495,24 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps)
           <Card>
             <CardContent className="pt-6">
               <h3 className="text-sm font-semibold mb-3">결합형태 이미지</h3>
-              <div
-                className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3 overflow-hidden cursor-pointer"
-                onClick={() => drawingImage && setIsImageZoomOpen(true)}
-                title={drawingImage ? '클릭하여 확대' : undefined}
-              >
-                {drawingImage ? (
-                  <img src={drawingImage} alt="결합형태 이미지" className="w-full h-full object-contain" />
-                ) : (
+              {drawingImage ? (
+                <TooltipProvider delayDuration={200}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3 overflow-hidden cursor-pointer">
+                        <img src={drawingImage} alt="결합형태 이미지" className="w-full h-full object-contain" />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="left" className="p-1 max-w-none">
+                      <img src={drawingImage} alt="결합형태 이미지 확대" className="w-80 h-80 object-contain" />
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <div className="w-full aspect-square bg-muted/30 border-2 border-dashed rounded-lg flex items-center justify-center mb-3">
                   <span className="text-sm text-muted-foreground">이미지 없음</span>
-                )}
-              </div>
+                </div>
+              )}
               {!disabled && (
                 <div className="space-y-2">
                   <div className="flex gap-2">
@@ -748,18 +755,6 @@ export function BendingModelForm({ id, mode, category }: BendingModelFormProps)
         description="조립도 형상을 그리거나 편집합니다."
       />
 
-      {/* 이미지 확대 */}
-      <Dialog open={isImageZoomOpen} onOpenChange={setIsImageZoomOpen}>
-        <DialogContent className="max-w-3xl max-h-[90vh] p-2">
-          <DialogHeader>
-            <DialogTitle className="text-sm">결합형태 이미지</DialogTitle>
-          </DialogHeader>
-          {drawingImage && (
-            <img src={drawingImage} alt="결합형태 이미지 확대" className="w-full h-auto object-contain" />
-          )}
-        </DialogContent>
-      </Dialog>
-
       {/* 삭제 확인 */}
       <DeleteConfirmDialog
         open={isDeleteOpen}