feat: [6] 디자인 수정

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 (
-    <div className="bg-sub-2 flex min-h-screen w-full flex-col gap-2.5 p-5">
-      <Intro />
-      <Policy />
-      <UserInfoForm />
+    <div className="flex min-h-screen w-full flex-col gap-2.5 bg-sub-2 p-5">
+      {searchParams.step === '1' ? <StepOne /> : null}
+      {searchParams.step === '2' ? <StepTwo /> : null}
+      <Link href="/?step=2" className="mb-4 mt-[30px]">
+        <Button
+          variant="default"
+          className="head3 flex h-12 w-full items-center justify-center rounded-[10px] text-white hover:bg-primary hover:opacity-90"
+        >
+          {searchParams.step === '1' ? '다음으로' : '제출하기'}
+        </Button>
+      </Link>
     </div>
   );
 }

src/components/home/step-one.tsx

@@ -0,0 +1,11 @@
+import { Intro } from '@/components/intro';
+import { Policy } from '@/components/policy';
+
+export function StepOne() {
+  return (
+    <>
+      <Intro />
+      <Policy />
+    </>
+  );
+}

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 (
+    <>
+      <UserInfoForm />
+      <Card className="flex flex-col gap-5">
+        <Badge>객관식 (복수선택)</Badge>
+        <h2 className="body1 px-1.5 text-gray-600">
+          1. 어떤 음식을 먹고 싶나요?
+        </h2>
+        <MultipleChoice choices={DUMMY_DATA} />
+      </Card>
+      <Card className="flex flex-col gap-5">
+        <Badge>객관식 (단일선택)</Badge>
+        <h2 className="body1 px-1.5 text-gray-600">
+          2. 학교에 조리 시설이 있나요?
+        </h2>
+        <SingleChoice q1="y" q2="n" q1Text="네" q2Text="아니요" />
+      </Card>
+    </>
+  );
+}

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<string[]>([]);
+
+  const toggleSelection = (id: string) => {
+    setSelected(prev =>
+      prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
+    );
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      {choices.map(choice => (
+        <Box
+          key={choice.id}
+          className="flex items-center gap-3 md:w-full"
+          onClick={() => toggleSelection(choice.id)}
+          isActive={selected.includes(choice.id)}
+        >
+          <CheckBox
+            isChecked={selected.includes(choice.id)}
+            className="rounded-[5px]"
+          />
+          <span className="body3 text-[#3B404E]">{choice.text}</span>
+        </Box>
+      ))}
+    </div>
+  );
+}

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!
       </Paragraph>
-      <SelectBox />
+      <SingleChoice
+        q1="agree"
+        q2="disagree"
+        q1Text="네, 동의합니다."
+        q2Text="아니요, 동의하지 않습니다."
+      />
     </Card>
   );
 }

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<string>('');
+
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      <Box
+        className="flex items-center gap-3 md:w-full"
+        onClick={() => setSelect(q1)}
+        isActive={select === q1}
+      >
+        <CheckBox isChecked={select === q1} />
+        <span className="body3 text-[#3B404E]">{q1Text}</span>
+      </Box>
+      <Box
+        className="flex items-center gap-3 md:w-full"
+        onClick={() => setSelect(q2)}
+        isActive={select === q2}
+      >
+        <CheckBox isChecked={select === q2} />
+        <span className="body3 text-[#3B404E]">{q2Text}</span>
+      </Box>
+    </div>
+  );
+}

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: {

src/components/ui/check-box.tsx

@@ -7,7 +7,7 @@ type CheckBoxProps = Omit<ComponentProps<'button'>, 'onClick'> & {
   isChecked: boolean;
 };
 
-export function CheckBox({ isChecked, ...props }: CheckBoxProps) {
+export function CheckBox({ isChecked, className, ...props }: CheckBoxProps) {
   return (
     <Button
       variant="outline"
@@ -16,7 +16,8 @@ export function CheckBox({ isChecked, ...props }: CheckBoxProps) {
         'h-5 w-5 rounded-full transition-colors',
         isChecked
           ? 'border-none bg-primary hover:bg-primary'
-          : 'border-[#898F9F] bg-transparent hover:bg-transparent'
+          : 'border-[#898F9F] bg-transparent hover:bg-transparent',
+        className
       )}
       {...props}
     >

src/components/user-info-form.tsx

@@ -7,7 +7,6 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Badge } from './ui/badge';
-import { Button } from './ui/button';
 import { Card } from './ui/card';
 import {
   Form,
@@ -38,13 +37,13 @@ export function UserInfoForm() {
   };
 
   return (
-    <div className="flex flex-col gap-4 pb-14">
+    <div className="flex flex-col gap-4">
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(submitHandler)}
           className="flex flex-col gap-6"
         >
-          <Card className="flex flex-col gap-4 pb-14">
+          <Card className="flex flex-col gap-4 pb-6">
             <Badge>개인정보 수집</Badge>
             <div className="flex flex-col gap-2.5">
               <FormLabel className="body1 text-gray-500">
@@ -114,13 +113,6 @@ export function UserInfoForm() {
               />
             </div>
           </Card>
-          <Button
-            type="submit"
-            variant="default"
-            className="head3 flex h-12 items-center justify-center rounded-[10px] text-white hover:bg-primary hover:opacity-90"
-          >
-            설문 제출하기
-          </Button>
         </form>
       </Form>
     </div>