style(form) : form input / focus 스타일

Ref:[#4,#5]
chhw130 · Dec 10, 2023 · 85548a8 · 85548a8
1 parent ef791f8
commit 85548a8
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 6 deletions.
diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -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"}>

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -1,18 +1,93 @@
-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>>;
 }
 
 const UserPhysicForm = ({ setFunnel }: 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("userPhysics")}
+        >
+          다음으로
+        </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"}
     />
   );
 };