From 5001477656ff658a46065654b858f5bb43c4a1b8 Mon Sep 17 00:00:00 2001
From: Hyein <hikim2@samaneng.com>
Date: Wed, 24 Jun 2026 09:38:04 +0900
Subject: [PATCH] Add step visibility indicators

---
 src/App.jsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 10d3f20..a307b6b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -542,7 +542,7 @@ function FlowRow({
   };
 
   const renderStepCard = (step, index, className) => (
-    <div className={`relative z-10 flex flex-col gap-2 ${className}`}>
+    <div className={`relative z-10 flex min-h-[258px] flex-col gap-2 ${className}`}>
       <FlowCard
         step={step}
         index={index}
@@ -693,7 +693,7 @@ function FlowRow({
           )}
         </div>
       </div>
-      <div className="relative overflow-hidden rounded-[24px] bg-white/25 px-9 py-1 ring-1 ring-white/70">
+      <div className="relative overflow-hidden rounded-[24px] bg-white/25 px-9 pb-5 pt-1 ring-1 ring-white/70">
         {steps.length > maxVisibleSteps && (
           <>
             <button
@@ -734,7 +734,7 @@ function FlowRow({
           {Array.from({ length: placeholderCount }).map((_, index) => (
             <div
               key={`placeholder-${index}`}
-              className="hidden min-h-[220px] rounded-2xl border border-dashed border-transparent xl:block"
+              className="hidden min-h-[258px] rounded-2xl border border-dashed border-transparent xl:block"
             />
           ))}
           {visibleStepItems.slice(0, -1).map((item, index) => (
@@ -745,6 +745,29 @@ function FlowRow({
             />
           ))}
         </div>
+        {steps.length > 1 && (
+          <div className="mt-3 flex items-center justify-center gap-1.5">
+            {steps.map((step, index) => {
+              const isVisible = index >= stepWindowStart && index < stepWindowStart + maxVisibleSteps;
+              return (
+                <button
+                  key={`${step.id}-dot`}
+                  type="button"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setStepWindowStart(Math.min(maxWindowStart, Math.max(0, Math.min(index, steps.length - maxVisibleSteps))));
+                  }}
+                  className={`h-2.5 w-2.5 rounded-full transition ${
+                    isVisible
+                      ? `${accent.iconText} bg-current shadow-sm`
+                      : 'bg-slate-200 hover:bg-slate-300'
+                  }`}
+                  aria-label={`${index + 1}번째 스텝 보기`}
+                />
+              );
+            })}
+          </div>
+        )}
       </div>
     </section>
   );