From 66d02cda0a2254c7e90ba443ceaac16a1e0adfd7 Mon Sep 17 00:00:00 2001
From: swcho <swcho@mind-one.co.kr>
Date: Tue, 5 Aug 2025 18:17:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=A8=EC=88=98=EC=8B=AC=20=EB=B2=94?=
 =?UTF-8?q?=EB=A1=80=EC=97=90=20=EC=A7=84=ED=96=89=EB=B0=94(Progress=20Bar?=
 =?UTF-8?q?)=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../map/waterDepth/waterDepth.tsx             | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
index 91ec47009..f039d7ad5 100644
--- a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
+++ b/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">