Merge pull request #3 from chhw130/dev

12/11PR

component/Funnel/LoginFunnel.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { ButtonGroup, Text } from "@chakra-ui/react";
+import MainButton from "../button/MainButton";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+const LoginFunnel = () => {
+  const router = useRouter();
+  return (
+    <>
+      <Image
+        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+
+      <ButtonGroup
+        width={"100%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+        justifyContent={"center"}
+        alignItems={"center"}
+        flexDir={"column"}
+        gap={"10px"}
+      >
+        <MainButton w={"100%"} h={"52px"} onClick={() => {}}>
+          다음으로
+        </MainButton>
+        <Text
+          as={"u"}
+          fontSize={"17px"}
+          color={"#9D9D9D"}
+          margin={"0.5rem"}
+          onClick={() => router.push("/signup")}
+          cursor={"pointer"}
+        >
+          체험하기
+        </Text>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default LoginFunnel;

component/Funnel/MainFunnel.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Box, ButtonGroup, Heading, Text } from "@chakra-ui/react";
+import Image from "next/image";
+import MainButton from "../../component/button/MainButton";
+import { useRouter } from "next/navigation";
+import { Dispatch, SetStateAction } from "react";
+
+interface MainFunnelPropsType {
+  setFunnel: Dispatch<SetStateAction<string>>;
+}
+
+const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
+  return (
+    <>
+      <Image
+        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+      <Box as="section" paddingBottom={"100px"}>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+          textAlign={"center"}
+          lineHeight={10}
+          padding={"15px"}
+        >
+          살빼려면
+          <br />
+          오늘 얼마만큼 운동해야하지?
+        </Heading>
+        <Text
+          as={"h2"}
+          color={"#787878"}
+          fontSize={"17px"}
+          textAlign={"center"}
+          lineHeight={7}
+        >
+          오늘 먹은 음식을 식선생에게 외쳐보세요! <br />
+          필요 운동량과 안찌는 식단을 한번에 알려드려요
+        </Text>
+      </Box>
+
+      <ButtonGroup
+        width={"100%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+        justifyContent={"center"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            setFunnel("login");
+          }}
+        >
+          다음으로
+        </MainButton>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default MainFunnel;

component/button/MainButton.tsx

@@ -1,15 +1,27 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
 import React from "react";
 
-const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
+const MainButton = ({
+  children,
+  w,
+  h,
+  onClick,
+  alignSelf,
+  isDisabled,
+  type,
+}: ButtonProps) => {
   return (
     <Button
       bgColor={"#000000"}
       textColor={"white"}
       borderRadius={"12px"}
       w={w}
       h={h}
+      maxW={"390px"}
       onClick={onClick}
+      alignSelf={alignSelf}
+      isDisabled={isDisabled}
+      type={type}
     >
       {children}
     </Button>

component/form/UserAgreementForm.tsx

@@ -1,38 +1,126 @@
-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;
+
+  console.log();
   return (
-    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-      <Box as="section">
+    <>
+      <Box as="section" alignSelf={"flex-start"}>
         <Heading
           as={"h1"}
           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"}
+        width={"100%"}
+        pos={"absolute"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
-        <MainButton w={"100%"} h={"52px"}>
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          isDisabled={checkedItems.filter((ele) => ele).length !== 3}
+        >
           동의하고 시작하기
         </MainButton>
       </ButtonGroup>
-    </Flex>
+    </>
   );
 };