feat(gyeol): Q4Step (비용 라디오 6) + Q5Step (도구 라디오 8 + 만족도 1-5)
- Q4: 라디오 패턴 재사용 (Q2와 동일 스타일) - Q5: 두 입력 한 화면 — 도구 라디오 + 만족도 1-5 버튼 그리드 - 둘 다 선택 시 다음 활성 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
55
app/gyeol/components/Q4Step.tsx
Normal file
55
app/gyeol/components/Q4Step.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user