From c5acb15df2cff75845a071fced772f4d968de2c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=ED=9B=88?= Date: Mon, 22 Jul 2024 10:52:48 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20[6]=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 33 +++++++++++++++++------ src/components/home/step-one.tsx | 11 ++++++++ src/components/home/step-two.tsx | 34 +++++++++++++++++++++++ src/components/multiple-choice.tsx | 43 ++++++++++++++++++++++++++++++ src/components/policy.tsx | 9 +++++-- src/components/select-box.tsx | 30 --------------------- src/components/short-answer.tsx | 0 src/components/single-choice.tsx | 37 +++++++++++++++++++++++++ src/components/ui/badge.tsx | 2 +- src/components/ui/check-box.tsx | 5 ++-- src/components/user-info-form.tsx | 12 ++------- 11 files changed, 163 insertions(+), 53 deletions(-) create mode 100644 src/components/home/step-one.tsx create mode 100644 src/components/home/step-two.tsx create mode 100644 src/components/multiple-choice.tsx delete mode 100644 src/components/select-box.tsx create mode 100644 src/components/short-answer.tsx create mode 100644 src/components/single-choice.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 4309dc9..929ef0a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,13 +1,30 @@ -import { Intro } from '@/components/intro'; -import { Policy } from '@/components/policy'; -import { UserInfoForm } from '@/components/user-info-form'; +import { StepOne } from '@/components/home/step-one'; +import { StepTwo } from '@/components/home/step-two'; +import { Button } from '@/components/ui/button'; +import Link from 'next/link'; +import { redirect } from 'next/navigation'; + +export default function HomePage({ + searchParams, +}: { + searchParams: { step: string }; +}) { + if (!searchParams.step) { + redirect('/?step=1'); + } -export default function HomePage() { return ( -
- - - +
+ {searchParams.step === '1' ? : null} + {searchParams.step === '2' ? : null} + + +
); } diff --git a/src/components/home/step-one.tsx b/src/components/home/step-one.tsx new file mode 100644 index 0000000..53cf878 --- /dev/null +++ b/src/components/home/step-one.tsx @@ -0,0 +1,11 @@ +import { Intro } from '@/components/intro'; +import { Policy } from '@/components/policy'; + +export function StepOne() { + return ( + <> + + + + ); +} diff --git a/src/components/home/step-two.tsx b/src/components/home/step-two.tsx new file mode 100644 index 0000000..83a4585 --- /dev/null +++ b/src/components/home/step-two.tsx @@ -0,0 +1,34 @@ +import { MultipleChoice } from '../multiple-choice'; +import { SingleChoice } from '../single-choice'; +import { Badge } from '../ui/badge'; +import { Card } from '../ui/card'; +import { UserInfoForm } from '../user-info-form'; + +const DUMMY_DATA = [ + { id: 'q1', text: '선택지 1' }, + { id: 'q2', text: '선택지 2' }, + { id: 'q3', text: '선택지 3' }, + { id: 'q4', text: '선택지 4' }, +]; + +export function StepTwo() { + return ( + <> + + + 객관식 (복수선택) +

+ 1. 어떤 음식을 먹고 싶나요? +

+ + + + 객관식 (단일선택) +

+ 2. 학교에 조리 시설이 있나요? +

+ + + + ); +} diff --git a/src/components/multiple-choice.tsx b/src/components/multiple-choice.tsx new file mode 100644 index 0000000..06f4137 --- /dev/null +++ b/src/components/multiple-choice.tsx @@ -0,0 +1,43 @@ +'use client'; + +import { useState } from 'react'; +import { Box } from './ui/box'; +import { CheckBox } from './ui/check-box'; + +type ChoiceType = { + id: string; + text: string; +}; + +type MultipleChoiceType = { + choices: ChoiceType[]; +}; + +export function MultipleChoice({ choices }: MultipleChoiceType) { + const [selected, setSelected] = useState([]); + + const toggleSelection = (id: string) => { + setSelected(prev => + prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id] + ); + }; + + return ( +
+ {choices.map(choice => ( + toggleSelection(choice.id)} + isActive={selected.includes(choice.id)} + > + + {choice.text} + + ))} +
+ ); +} diff --git a/src/components/policy.tsx b/src/components/policy.tsx index 6fcfba3..ce34fcb 100644 --- a/src/components/policy.tsx +++ b/src/components/policy.tsx @@ -1,4 +1,4 @@ -import { SelectBox } from './select-box'; +import { SingleChoice } from './single-choice'; import { Badge } from './ui/badge'; import { Card } from './ui/card'; import { Paragraph } from './ui/paragraph'; @@ -13,7 +13,12 @@ export function Policy() { praesentium debitis, fugiat cupiditate aut tempora eligendi quasi aperiam, hic nihil veniam! - + ); } diff --git a/src/components/select-box.tsx b/src/components/select-box.tsx deleted file mode 100644 index 1351e5e..0000000 --- a/src/components/select-box.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client'; - -import { useState } from 'react'; -import { Box } from './ui/box'; -import { CheckBox } from './ui/check-box'; - -export function SelectBox() { - const [select, setSelect] = useState(''); - - return ( -
- setSelect('agree')} - isActive={select === 'agree'} - > - - 네, 동의합니다. - - setSelect('disagree')} - isActive={select === 'disagree'} - > - - 아니요, 동의하지 않습니다. - -
- ); -} diff --git a/src/components/short-answer.tsx b/src/components/short-answer.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/single-choice.tsx b/src/components/single-choice.tsx new file mode 100644 index 0000000..b1a9276 --- /dev/null +++ b/src/components/single-choice.tsx @@ -0,0 +1,37 @@ +'use client'; + +import { useState } from 'react'; +import { Box } from './ui/box'; +import { CheckBox } from './ui/check-box'; + +type SingleChoiceType = { + q1: string; + q2: string; + q1Text: string; + q2Text: string; +}; + +export function SingleChoice({ q1, q2, q1Text, q2Text }: SingleChoiceType) { + const [select, setSelect] = useState(''); + + return ( +
+ setSelect(q1)} + isActive={select === q1} + > + + {q1Text} + + setSelect(q2)} + isActive={select === q2} + > + + {q2Text} + +
+ ); +} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 2b06ea2..87cee0a 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -10,7 +10,7 @@ const badgeVariants = cva( primary: 'bg-sub-2 text-primary', }, size: { - md: 'h-[2rem] w-[5.5rem]', + md: 'h-[2rem] w-fit', }, }, defaultVariants: { diff --git a/src/components/ui/check-box.tsx b/src/components/ui/check-box.tsx index 373c869..d6924f4 100644 --- a/src/components/ui/check-box.tsx +++ b/src/components/ui/check-box.tsx @@ -7,7 +7,7 @@ type CheckBoxProps = Omit, 'onClick'> & { isChecked: boolean; }; -export function CheckBox({ isChecked, ...props }: CheckBoxProps) { +export function CheckBox({ isChecked, className, ...props }: CheckBoxProps) { return (