From 85548a80c28c672b5f73af809f7bcbe410d1db80 Mon Sep 17 00:00:00 2001
From: HyunWoo Choi <116826162+chhw130@users.noreply.github.com>
Date: Sun, 10 Dec 2023 20:28:13 +0900
Subject: [PATCH] =?UTF-8?q?style(form)=20:=20form=20input=20/=20focus=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref:[#4,#5]
---
 component/form/UserInfoForm.tsx   |  6 ++-
 component/form/UserPhysicForm.tsx | 85 +++++++++++++++++++++++++++++--
 component/input/MainInput.tsx     |  1 +
 3 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
index db97ef5..c476f6e 100644
--- 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
index 6c13255..4da0b8d 100644
--- a/component/form/UserPhysicForm.tsx
+++ b/component/form/UserPhysicForm.tsx
@@ -1,7 +1,20 @@
-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>>;
@@ -9,10 +22,72 @@ interface UserPhysicsFormPropsType {
 
 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
index 79737fd..3ebd0db 100644
--- 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"}
     />
   );
 };