feat: 침수심 범례에 진행바(Progress Bar) 추가

apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx

@@ -22,12 +22,16 @@ interface WaterDepthProps {
   onClose?: () => void;
   isPlaying: boolean;
   setIsPlaying: (isPlaying: boolean) => void;
+  totalSteps?: number;
+  currentStep?: number;
 }
 
 export function WaterDepth({
   onClose,
   isPlaying,
   setIsPlaying,
+  totalSteps = 0,
+  currentStep = 0,
 }: WaterDepthProps) {
 
   useEffect(() => {
@@ -38,10 +42,14 @@ export function WaterDepth({
     setIsPlaying(!isPlaying);
   };
 
+  // 진행률 계산 (0-100%)
+  const progressPercentage = totalSteps > 0 ? (currentStep / totalSteps) * 100 : 100;
+
+
   return (
     <>
       <div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
-        <div className="card-header flex items-center justify-between">
+        <div className="flex items-center justify-between mx-2 my-4">
           <Label className="text-3xl text-gray-900 font-bold">침수심 범례</Label>
           <button type="button" className="ml-2" onClick={handlePlayToggle}>
             {isPlaying ? (
@@ -51,7 +59,14 @@ export function WaterDepth({
             )}
           </button>
         </div>
-        <div className="border-b border-gray-300 mb-2" />
+        <div className="mb-3">
+          <div className="w-full bg-gray-200 rounded-full h-1">
+            <div
+              className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out"
+              style={{ width: `${progressPercentage}%` }}
+            />
+          </div>
+        </div>
         <div className="w-[140px] mx-auto flex flex-col items-center">
           <div className="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">침 수 심</div>
           <div className="space-y-1 w-full">