From d622dafcce93e0d6b854a4d567328df55aa56777 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 05:27:56 +0900
Subject: [PATCH] =?UTF-8?q?feat(gyeol):=20Q4Step=20(=EB=B9=84=EC=9A=A9=20?=
 =?UTF-8?q?=EB=9D=BC=EB=94=94=EC=98=A4=206)=20+=20Q5Step=20(=EB=8F=84?=
 =?UTF-8?q?=EA=B5=AC=20=EB=9D=BC=EB=94=94=EC=98=A4=208=20+=20=EB=A7=8C?=
 =?UTF-8?q?=EC=A1=B1=EB=8F=84=201-5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Q4: 라디오 패턴 재사용 (Q2와 동일 스타일)
- Q5: 두 입력 한 화면 — 도구 라디오 + 만족도 1-5 버튼 그리드
- 둘 다 선택 시 다음 활성

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gyeol/components/Q4Step.tsx | 55 ++++++++++++++++++++++
 app/gyeol/components/Q5Step.tsx | 83 +++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 app/gyeol/components/Q4Step.tsx
 create mode 100644 app/gyeol/components/Q5Step.tsx

diff --git a/app/gyeol/components/Q4Step.tsx b/app/gyeol/components/Q4Step.tsx
new file mode 100644
index 0000000..4679b51
--- /dev/null
+++ b/app/gyeol/components/Q4Step.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { COST_RANGES } from '@/lib/survey/questions';
+import type { SurveyResponse } from '@/lib/survey/types';
+import QuestionLayout from './QuestionLayout';
+
+interface Props {
+  initial: Partial<SurveyResponse>;
+  onPrev: () => void;
+  onNext: (partial: Partial<SurveyResponse>) => void;
+}
+
+export default function Q4Step({ initial, onPrev, onNext }: Props) {
+  const [value, setValue] = useState(initial.cost_range ?? '');
+
+  return (
+    <QuestionLayout
+      step="q4"
+      onPrev={onPrev}
+      onNext={() => onNext({ cost_range: value })}
+      nextDisabled={!value}
+    >
+      <div className="space-y-2">
+        {COST_RANGES.map((option) => (
+          <label
+            key={option}
+            className={`flex items-center gap-3 px-4 py-3.5 rounded-xl border cursor-pointer transition ${
+              value === option
+                ? 'border-violet-400 bg-violet-400/10'
+                : 'border-white/15 bg-white/[0.02] hover:border-white/30'
+            }`}
+          >
+            <input
+              type="radio"
+              name="cost_range"
+              value={option}
+              checked={value === option}
+              onChange={() => setValue(option)}
+              className="sr-only"
+            />
+            <span
+              className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
+                value === option ? 'border-violet-400' : 'border-white/30'
+              }`}
+            >
+              {value === option && <span className="w-2 h-2 rounded-full bg-violet-400" />}
+            </span>
+            <span className="text-sm text-white">{option}</span>
+          </label>
+        ))}
+      </div>
+    </QuestionLayout>
+  );
+}
diff --git a/app/gyeol/components/Q5Step.tsx b/app/gyeol/components/Q5Step.tsx
new file mode 100644
index 0000000..23256f5
--- /dev/null
+++ b/app/gyeol/components/Q5Step.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+import { BEST_TOOLS, SATISFY_SCALE } from '@/lib/survey/questions';
+import type { SurveyResponse } from '@/lib/survey/types';
+import QuestionLayout from './QuestionLayout';
+
+interface Props {
+  initial: Partial<SurveyResponse>;
+  onPrev: () => void;
+  onNext: (partial: Partial<SurveyResponse>) => void;
+}
+
+export default function Q5Step({ initial, onPrev, onNext }: Props) {
+  const [tool, setTool] = useState(initial.best_tool ?? '');
+  const [satisfy, setSatisfy] = useState<number | null>(initial.best_satisfy ?? null);
+
+  const valid = tool && satisfy !== null;
+
+  return (
+    <QuestionLayout
+      step="q5"
+      onPrev={onPrev}
+      onNext={() => onNext({ best_tool: tool, best_satisfy: satisfy ?? undefined })}
+      nextDisabled={!valid}
+    >
+      <div className="space-y-6">
+        <div>
+          <p className="text-xs text-white/60 mb-2 font-mono tracking-widest uppercase">가장 도움 됐던 거</p>
+          <div className="space-y-2">
+            {BEST_TOOLS.map((option) => (
+              <label
+                key={option}
+                className={`flex items-center gap-3 px-4 py-3 rounded-xl border cursor-pointer transition ${
+                  tool === option
+                    ? 'border-violet-400 bg-violet-400/10'
+                    : 'border-white/15 bg-white/[0.02] hover:border-white/30'
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="best_tool"
+                  value={option}
+                  checked={tool === option}
+                  onChange={() => setTool(option)}
+                  className="sr-only"
+                />
+                <span
+                  className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
+                    tool === option ? 'border-violet-400' : 'border-white/30'
+                  }`}
+                >
+                  {tool === option && <span className="w-2 h-2 rounded-full bg-violet-400" />}
+                </span>
+                <span className="text-sm text-white">{option}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <p className="text-xs text-white/60 mb-2 font-mono tracking-widest uppercase">만족도 (5점 만점)</p>
+          <div className="flex gap-2">
+            {SATISFY_SCALE.map((n) => (
+              <button
+                key={n}
+                type="button"
+                onClick={() => setSatisfy(n)}
+                className={`flex-1 py-3 rounded-xl border text-sm font-bold transition ${
+                  satisfy === n
+                    ? 'border-violet-400 bg-violet-400/10 text-white'
+                    : 'border-white/15 bg-white/[0.02] text-white/60 hover:border-white/30'
+                }`}
+              >
+                {n}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </QuestionLayout>
+  );
+}