fix: [절곡] 폼 이미지 영역 Tooltip 전환 + 확대 모달 개선

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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}

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}