feat(form) : form layout 구성

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

Hide file tree

Showing 8 changed files with 121 additions and 96 deletions.
diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx
@@ -16,13 +16,13 @@ const LoginFunnel = () => {
       />
 
       <ButtonGroup
-        width={"90%"}
+        width={"100%"}
         pos={"fixed"}
-        bottom={"50px"}
+        bottom={"30px"}
         margin={"0 auto"}
-        display={"flex"}
+        justifyContent={"center"}
+        alignItems={"center"}
         flexDir={"column"}
-        textAlign={"center"}
         gap={"10px"}
       >
         <MainButton w={"100%"} h={"52px"} onClick={() => {}}>

diff --git a/component/Funnel/MainFunnel.tsx b/component/Funnel/MainFunnel.tsx
@@ -10,8 +10,6 @@ interface MainFunnelPropsType {
 }
 
 const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
-  const router = useRouter();
-
   return (
     <>
       <Image
@@ -47,10 +45,11 @@ const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
       </Box>
 
       <ButtonGroup
-        width={"90%"}
+        width={"100%"}
         pos={"fixed"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton
           w={"100%"}

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
@@ -1,7 +1,7 @@
 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 }: ButtonProps) => {
   return (
     <Button
       bgColor={"#000000"}
@@ -11,6 +11,7 @@ const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
       h={h}
       maxW={"390px"}
       onClick={onClick}
+      alignSelf={alignSelf}
     >
       {children}
     </Button>

diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -19,8 +19,8 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
   return (
-    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-      <Box as="section">
+    <>
+      <Box as="section" alignSelf={"flex-start"}>
         <Heading
           as={"h1"}
           color={"#000000"}
@@ -105,16 +105,17 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
       </VStack>
 
       <ButtonGroup
-        width={"90%"}
-        pos={"fixed"}
+        width={"100%"}
+        pos={"absolute"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton w={"100%"} h={"52px"}>
           동의하고 시작하기
         </MainButton>
       </ButtonGroup>
-    </Flex>
+    </>
   );
 };
 

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useForm } from "react-hook-form";
 import {
   Box,
+  Button,
   ButtonGroup,
   Flex,
   FormControl,
@@ -12,7 +12,6 @@ import {
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react";
-import { useParams } from "next/navigation";
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 
@@ -28,11 +27,11 @@ function RadioCard(props: any) {
       <Box
         {...checkbox}
         cursor="pointer"
-        borderWidth="1px"
-        borderRadius="md"
+        borderRadius={"12px"}
+        border={"1px solid #BCBCBC"}
         fontSize={"15px"}
         fontWeight={"semibold"}
-        boxShadow="md"
+        color={"#C6C6C6"}
         _checked={{
           bg: "#000000",
           color: "white",
@@ -64,65 +63,66 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
 
   return (
     <>
-      <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>
-            <MainInput
-              placeholder="이름을 입력해주세요."
-              w={"100%"}
-              h={"48px"}
-            />
-          </FormControl>
-          <FormControl>
-            <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
-              성별
-            </FormLabel>
-            <HStack {...group}>
-              {options.map((value) => {
-                const radio = getRadioProps({ value });
-                return (
-                  <RadioCard key={value} {...radio}>
-                    {value}
-                  </RadioCard>
-                );
-              })}
-            </HStack>
-          </FormControl>
-        </HStack>
-        <ButtonGroup
-          width={"90%"}
-          pos={"fixed"}
-          bottom={"30px"}
-          margin={"0 auto"}
+      <Box as="section" alignSelf={"flex-start"}>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
         >
-          <MainButton
-            w={"100%"}
-            h={"52px"}
-            onClick={() => {
-              setFunnel("userPhysics");
-              setProgress((oldState) => oldState + 33.3);
-            }}
-          >
-            다음으로
-          </MainButton>
-        </ButtonGroup>
-      </Flex>
+          기본정보를 입력해주세요
+        </Heading>
+        <Text as={"h2"} color={"#787878"} fontSize={"17px"} lineHeight={2}>
+          성별에 맞는 대사량기준으로 알려드려요
+        </Text>
+      </Box>
+      <HStack
+        as={"form"}
+        flexDir={"column"}
+        w={"100%"}
+        spacing={5}
+        padding={"30px 0"}
+      >
+        <FormControl>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            이름
+          </FormLabel>
+          <MainInput placeholder="이름을 입력해주세요." w={"100%"} h={"48px"} />
+        </FormControl>
+        <FormControl>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            성별
+          </FormLabel>
+          <HStack {...group}>
+            {options.map((value) => {
+              const radio = getRadioProps({ value });
+              return (
+                <RadioCard key={value} {...radio}>
+                  {value}
+                </RadioCard>
+              );
+            })}
+          </HStack>
+        </FormControl>
+      </HStack>
+      <ButtonGroup
+        width={"100%"}
+        pos={"absolute"}
+        bottom={"30px"}
+        margin={"0 auto"}
+        justifyContent={"center"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            setFunnel("userPhysics");
+            setProgress((oldState) => oldState + 33.3);
+          }}
+        >
+          다음으로
+        </MainButton>
+      </ButtonGroup>
     </>
   );
 };

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -3,7 +3,6 @@ import MainButton from "../button/MainButton";
 import {
   Box,
   ButtonGroup,
-  Flex,
   FormControl,
   FormLabel,
   HStack,
@@ -25,11 +24,8 @@ const UserPhysicForm = ({
   setProgress,
 }: UserPhysicsFormPropsType) => {
   return (
-    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-      <Box as="section">
-        <Text as={"h2"} color={"#787878"} fontSize={"17px"}>
-          거의 다 왔어요!
-        </Text>
+    <>
+      <Box as="section" alignSelf={"flex-start"}>
         <Heading
           as={"h1"}
           color={"#000000"}
@@ -38,9 +34,18 @@ const UserPhysicForm = ({
         >
           신체정보를 입력해주세요
         </Heading>
+        <Text as={"h2"} color={"#787878"} fontSize={"17px"} lineHeight={2}>
+          개인 맞춤으로 알려드려요
+        </Text>
       </Box>
-      <HStack as={"form"} flexDir={"column"} w={"100%"} spacing={5}>
-        <FormControl isRequired>
+      <HStack
+        as={"form"}
+        flexDir={"column"}
+        w={"100%"}
+        spacing={5}
+        padding={"30px 0"}
+      >
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             나이
           </FormLabel>
@@ -55,7 +60,7 @@ const UserPhysicForm = ({
           </InputGroup>
         </FormControl>
 
-        <FormControl isRequired>
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             키
           </FormLabel>
@@ -66,7 +71,7 @@ const UserPhysicForm = ({
             </InputRightElement>
           </InputGroup>
         </FormControl>
-        <FormControl isRequired>
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             체중
           </FormLabel>
@@ -77,12 +82,24 @@ const UserPhysicForm = ({
             </InputRightElement>
           </InputGroup>
         </FormControl>
+        <FormControl>
+          <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"}
+        width={"100%"}
+        pos={"absolute"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton
           w={"100%"}
@@ -95,7 +112,7 @@ const UserPhysicForm = ({
           다음으로
         </MainButton>
       </ButtonGroup>
-    </Flex>
+    </>
   );
 };
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,8 +10,11 @@ export default function Home() {
     <Flex
       as={"main"}
       flexDir={"column"}
-      w={"90%"}
+      w={"100%"}
+      pos={"relative"}
+      maxW={"390px"}
       height={"100vh"}
+      padding={"60px 22px"}
       margin={"0 auto"}
       justifyContent={"center"}
       alignItems={"center"}

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import UserInfoForm from "../../../component/form/UserInfoForm";
-import { Box, Progress, extendTheme } from "@chakra-ui/react";
+import { Flex, Progress } from "@chakra-ui/react";
 import { useFunnel } from "../../../utils/hooks/useFunnel";
 import UserPhysicForm from "../../../component/form/UserPhysicForm";
 import UserAgreementForm from "../../../component/form/UserAgreementForm";
@@ -18,12 +18,16 @@ const Page = () => {
         isAnimated={true}
         value={progress}
       />
-      <Box
-        width={"100%"}
-        h={"100%"}
+      <Flex
+        as={"main"}
+        flexDir={"column"}
+        w={"100%"}
+        h={"99vh"}
+        pos={"relative"}
         maxW={"390px"}
-        padding={"70px 0px"}
+        padding={"60px 22px"}
         margin={"0 auto"}
+        alignItems={"center"}
       >
         {funnel === "userInfo" && (
           <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
@@ -34,7 +38,7 @@ const Page = () => {
         {funnel === "userAgreement" && (
           <UserAgreementForm setFunnel={setFunnel} />
         )}
-      </Box>
+      </Flex>
     </>
   );
 };