From 93dda4f2d2c7cf2aaafaeeccb2a7cde1d2838692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 20:56:41 +0900
Subject: [PATCH] =?UTF-8?q?feat(agreement)=20:=20=EC=95=BD=EA=B4=80?=
 =?UTF-8?q?=EB=8F=99=EC=9D=98=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/button/MainButton.tsx      |  1 +
 component/form/UserAgreementForm.tsx | 88 +++++++++++++++++++++++++++-
 src/app/signup/page.tsx              | 10 +++-
 3 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
index 30221cb..b99db25 100644
--- a/component/button/MainButton.tsx
+++ b/component/button/MainButton.tsx
@@ -9,6 +9,7 @@ const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
       borderRadius={"12px"}
       w={w}
       h={h}
+      maxW={"390px"}
       onClick={onClick}
     >
       {children}
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
index 5d8cded..cd3ddeb 100644
--- a/component/form/UserAgreementForm.tsx
+++ b/component/form/UserAgreementForm.tsx
@@ -1,5 +1,12 @@
-import { Box, ButtonGroup, Flex, Heading, RadioGroup } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  ButtonGroup,
+  Checkbox,
+  Flex,
+  Heading,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
 import MainButton from "../button/MainButton";
 
 interface UserAgreementFormPropsType {
@@ -7,6 +14,10 @@ interface UserAgreementFormPropsType {
 }
 
 const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
+  const [checkedItems, setCheckedItems] = useState([false, false, false]);
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+
   return (
     <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
       <Box as="section">
@@ -15,13 +26,84 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
           color={"#000000"}
           fontSize={"24px"}
           fontWeight={"semibold"}
+          lineHeight={"35px"}
         >
-          서비스를 이용하시려면
+          식선생을 이용하시려면
           <br />
           약관 동의가 필요해요.
         </Heading>
       </Box>
 
+      <VStack alignItems={"flex-start"} spacing={5} padding={"30px 0"}>
+        <Flex
+          w={"346px"}
+          h={"48px"}
+          border={"1px solid #BCBCBC"}
+          borderRadius={"12px"}
+        >
+          <Checkbox
+            isChecked={allChecked}
+            isIndeterminate={isIndeterminate}
+            margin={"auto 20px"}
+            color={"#BCBCBC"}
+            onChange={(e) =>
+              setCheckedItems([
+                e.target.checked,
+                e.target.checked,
+                e.target.checked,
+              ])
+            }
+          >
+            모두 동의합니다.
+          </Checkbox>
+        </Flex>
+        <Checkbox
+          color={"#838383"}
+          isChecked={checkedItems[0]}
+          textDecor={"underline"}
+          margin={"auto 20px"}
+          onChange={(e) =>
+            setCheckedItems([
+              e.target.checked,
+              checkedItems[1],
+              checkedItems[2],
+            ])
+          }
+        >
+          (필수) 서비스 이용 약관 동의
+        </Checkbox>
+        <Checkbox
+          color={"#838383"}
+          margin={"auto 20px"}
+          textDecor={"underline"}
+          isChecked={checkedItems[1]}
+          onChange={(e) =>
+            setCheckedItems([
+              checkedItems[0],
+              e.target.checked,
+              checkedItems[2],
+            ])
+          }
+        >
+          (필수) 개인 정보 수집 및 이용 동의
+        </Checkbox>
+        <Checkbox
+          color={"#838383"}
+          textDecor={"underline"}
+          margin={"auto 20px"}
+          isChecked={checkedItems[2]}
+          onChange={(e) =>
+            setCheckedItems([
+              checkedItems[0],
+              checkedItems[1],
+              e.target.checked,
+            ])
+          }
+        >
+          (필수) 만 14세 이상입니다
+        </Checkbox>
+      </VStack>
+
       <ButtonGroup
         width={"90%"}
         pos={"fixed"}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 3531524..59402b5 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -14,11 +14,17 @@ const Page = () => {
       <Progress
         bgColor={"#D9D9D9"}
         // colorScheme="black"
-        size="sm"
+        size="xs"
         isAnimated={true}
         value={progress}
       />
-      <Box width={"100%"} h={"100%"}>
+      <Box
+        width={"100%"}
+        h={"100%"}
+        maxW={"390px"}
+        padding={"70px 0px"}
+        margin={"0 auto"}
+      >
         {funnel === "userInfo" && (
           <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
         )}