Merge pull request #2 from chhw130/dev

사용자 회원가입 로직 및 progressbar 로직 추가
potenday-project · Dec 10, 2023 · 8776909 · 8776909
2 parents ef791f8 + 5de641c
commit 8776909
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 22 deletions.
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -1,10 +1,37 @@
-import { Flex, RadioGroup } from "@chakra-ui/react";
+import { Box, ButtonGroup, Flex, Heading, RadioGroup } from "@chakra-ui/react";
 import React from "react";
+import MainButton from "../button/MainButton";
 
-const UserAgreementForm = () => {
+interface UserAgreementFormPropsType {
+  setFunnel: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
   return (
-    <Flex as={"section"}>
-      <RadioGroup></RadioGroup>
+    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
+      <Box as="section">
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+        >
+          서비스를 이용하시려면
+          <br />
+          약관 동의가 필요해요.
+        </Heading>
+      </Box>
+
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+      >
+        <MainButton w={"100%"} h={"52px"}>
+          동의하고 시작하기
+        </MainButton>
+      </ButtonGroup>
     </Flex>
   );
 };

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -30,14 +30,13 @@ function RadioCard(props: any) {
         cursor="pointer"
         borderWidth="1px"
         borderRadius="md"
+        fontSize={"15px"}
+        fontWeight={"semibold"}
         boxShadow="md"
         _checked={{
-          bg: "teal.600",
+          bg: "#000000",
           color: "white",
-          borderColor: "teal.600",
-        }}
-        _focus={{
-          boxShadow: "outline",
+          borderColor: "#000000",
         }}
         px={5}
         py={3}
@@ -50,9 +49,10 @@ function RadioCard(props: any) {
 
 interface UserInfoFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
+const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
   const params = useParams();
 
   const options = ["남성", "여성"];
@@ -85,7 +85,11 @@ const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
             <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
               이름
             </FormLabel>
-            <MainInput placeholder="이름을 입력해주세요." w={"100%"} />
+            <MainInput
+              placeholder="이름을 입력해주세요."
+              w={"100%"}
+              h={"48px"}
+            />
           </FormControl>
           <FormControl>
             <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
@@ -112,7 +116,10 @@ const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
           <MainButton
             w={"100%"}
             h={"52px"}
-            onClick={() => setFunnel("userPhysics")}
+            onClick={() => {
+              setFunnel("userPhysics");
+              setProgress((oldState) => oldState + 33.3);
+            }}
           >
             다음으로
           </MainButton>

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -1,18 +1,99 @@
-import { ButtonGroup, Flex } from "@chakra-ui/react";
 import React from "react";
-import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
+import {
+  Box,
+  ButtonGroup,
+  Flex,
+  FormControl,
+  FormLabel,
+  HStack,
+  Heading,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  Text,
+} from "@chakra-ui/react";
 
 interface UserPhysicsFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserPhysicForm = ({ setFunnel }: UserPhysicsFormPropsType) => {
+const UserPhysicForm = ({
+  setFunnel,
+  setProgress,
+}: UserPhysicsFormPropsType) => {
   return (
-    <Flex as={"form"} flexDir={"column"}>
-      <MainInput w={"100%"} />
-      <ButtonGroup>
-        <MainButton>다음으로</MainButton>
+    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
+      <Box as="section">
+        <Text as={"h2"} color={"#787878"} fontSize={"17px"}>
+          거의 다 왔어요!
+        </Text>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+        >
+          신체정보를 입력해주세요
+        </Heading>
+      </Box>
+      <HStack as={"form"} flexDir={"column"} w={"100%"} spacing={5}>
+        <FormControl isRequired>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            나이
+          </FormLabel>
+          <InputGroup>
+            <InputLeftElement color={"#C6C6C6"} h={"48px"}>
+              만
+            </InputLeftElement>
+            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <InputRightElement color={"#C6C6C6"} h={"48px"}>
+              세
+            </InputRightElement>
+          </InputGroup>
+        </FormControl>
+
+        <FormControl isRequired>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            키
+          </FormLabel>
+          <InputGroup>
+            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <InputRightElement color={"#C6C6C6"} h={"48px"}>
+              cm
+            </InputRightElement>
+          </InputGroup>
+        </FormControl>
+        <FormControl isRequired>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            체중
+          </FormLabel>
+          <InputGroup>
+            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <InputRightElement color={"#C6C6C6"} h={"48px"}>
+              kg
+            </InputRightElement>
+          </InputGroup>
+        </FormControl>
+      </HStack>
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            setFunnel("userAgreement");
+            setProgress((oldState) => oldState + 33.3);
+          }}
+        >
+          다음으로
+        </MainButton>
       </ButtonGroup>
     </Flex>
   );

diff --git a/component/input/MainInput.tsx b/component/input/MainInput.tsx
@@ -9,6 +9,7 @@ const MainInput = ({ h, w, placeholder }: InputProps) => {
       border={"1px solid #BCBCBC"}
       borderRadius={"12px"}
       placeholder={placeholder}
+      focusBorderColor={"black"}
     />
   );
 };

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -4,21 +4,30 @@ import UserInfoForm from "../../../component/form/UserInfoForm";
 import { Box, Progress, extendTheme } from "@chakra-ui/react";
 import { useFunnel } from "../../../utils/hooks/useFunnel";
 import UserPhysicForm from "../../../component/form/UserPhysicForm";
+import UserAgreementForm from "../../../component/form/UserAgreementForm";
 
 const Page = () => {
-  const [progress, setProgress] = useState<number>(30);
+  const [progress, setProgress] = useState<number>(33.3);
   const { funnel, setFunnel } = useFunnel();
   return (
     <>
       <Progress
         bgColor={"#D9D9D9"}
         // colorScheme="black"
         size="sm"
+        isAnimated={true}
         value={progress}
       />
       <Box width={"100%"} h={"100%"}>
-        {funnel === "userInfo" && <UserInfoForm setFunnel={setFunnel} />}
-        {funnel === "userPhysics" && <UserPhysicForm setFunnel={setFunnel} />}
+        {funnel === "userInfo" && (
+          <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
+        {funnel === "userPhysics" && (
+          <UserPhysicForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
+        {funnel === "userAgreement" && (
+          <UserAgreementForm setFunnel={setFunnel} />
+        )}
       </Box>
     </>
   );