From d0db9236c8905665991a297a7ac36b7ba8addc65 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 05:21:44 +0900
Subject: [PATCH] =?UTF-8?q?feat(gyeol):=20ProgressBar=20=E2=80=94=20?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EB=A5=A0=20(=EB=B3=B4=EB=9D=BC/=EC=8B=9C?=
 =?UTF-8?q?=EC=95=88=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

intro/thanks step에서는 미렌더. q1~q7만 표시.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gyeol/components/ProgressBar.tsx | 34 ++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 app/gyeol/components/ProgressBar.tsx

diff --git a/app/gyeol/components/ProgressBar.tsx b/app/gyeol/components/ProgressBar.tsx
new file mode 100644
index 0000000..df574ea
--- /dev/null
+++ b/app/gyeol/components/ProgressBar.tsx
@@ -0,0 +1,34 @@
+import { QUESTION_STEPS, TOTAL_QUESTIONS, type SurveyStep } from '@/lib/survey/types';
+
+interface Props {
+  step: SurveyStep;
+}
+
+/**
+ * 상단 진행률 바.
+ * intro/thanks에서는 렌더링 안 됨 (질문 step 만 표시).
+ */
+export default function ProgressBar({ step }: Props) {
+  const idx = QUESTION_STEPS.indexOf(step as 'q1');
+  if (idx < 0) return null;
+
+  const current = idx + 1;
+  const percent = (current / TOTAL_QUESTIONS) * 100;
+
+  return (
+    <div className="w-full max-w-md mx-auto mb-8">
+      <div className="flex items-center justify-between mb-2 text-white/60 text-xs font-mono tracking-widest">
+        <span>{current}/{TOTAL_QUESTIONS}</span>
+      </div>
+      <div className="h-[2px] bg-white/10 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all duration-500 ease-out"
+          style={{
+            width: `${percent}%`,
+            background: 'linear-gradient(90deg, #cc97ff 0%, #53ddfc 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}