feat(agreement) : 약관동의 checkbox

Refs:[#4,#5]
chhw130 · Dec 11, 2023 · 93dda4f · 93dda4f
1 parent 024bcf6
commit 93dda4f
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 5 deletions.
diff --git 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
@@ -1,12 +1,23 @@
-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 {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
 }
 
 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
@@ -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} />
         )}