Merge pull request #18 from chhw130/dev

design : mainpage / signupPage color
potenday-project · Dec 15, 2023 · b971f69 · b971f69
2 parents 3b08ebf + 7dbc607
commit b971f69
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 90 deletions.
diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx
@@ -18,13 +18,7 @@ const LoginFunnel = () => {
 
   return (
     <>
-      <Image
-        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
-        alt="식선생"
-        width={100}
-        height={100}
-      />
-
+      <Text>우리의 식단 선생님</Text>
       <ButtonGroup
         width={"100%"}
         pos={"fixed"}

diff --git a/component/Funnel/MainFunnel.tsx b/component/Funnel/MainFunnel.tsx
@@ -1,5 +1,13 @@
 "use client";
-import { Box, ButtonGroup, Heading, Text, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  ButtonGroup,
+  Card,
+  CardBody,
+  Heading,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import Image from "next/image";
 import MainButton from "../../component/button/MainButton";
 import { useRouter } from "next/navigation";
@@ -14,62 +22,62 @@ const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
 
   return (
     <>
-      <Image
-        src={
-          "https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg?cs=srgb&dl=pexels-mohamed-almari-1485894.jpg&fm=jpg"
-        }
-        alt="식선생"
-        width={100}
-        height={100}
-      />
-      <VStack spacing={"16px"} as="section" paddingBottom={"100px"}>
+      <VStack spacing={"16px"} as="section" marginTop={"71px"}>
         <Heading
           as={"h1"}
-          color={"#000000"}
+          color={"#FFFFFF"}
           fontSize={"24px"}
           fontWeight={"semibold"}
           textAlign={"center"}
           lineHeight={10}
-          padding={"15px"}
+          padding={"0px"}
+          w={"325px"}
         >
-          살빼려면
+          식선생에게 식단 알리고
           <br />
-          오늘 얼마만큼 운동해야하지?
-        </Heading>
-        <Text
-          as={"h2"}
-          color={"#787878"}
-          fontSize={"17px"}
-          textAlign={"center"}
-          lineHeight={7}
-        >
-          오늘 먹은 음식을 식선생에게 외쳐보세요! <br />
-          <Text as={"a"} color={"#636363"} fontWeight={"semibold"}>
-            필요 운동량
+          <Text as={"a"} color={"#40E98E"} fontWeight={"semibold"}>
+            운동량
           </Text>
           과&nbsp;
-          <Text as={"a"} color={"#636363"} fontWeight={"semibold"}>
+          <Text as={"a"} color={"#40E98E"} fontWeight={"semibold"}>
             안찌는 식단
           </Text>
-          을 한번에 알려드려요
-        </Text>
+          을 추천 받자!
+        </Heading>
       </VStack>
 
+      <Card bgColor={"#FFFFFF20"} marginTop={"71px"}>
+        <CardBody textAlign={"center"} color={"#D2D2D2"}>
+          나.. 오늘 얼마나 먹었더라?
+          <br />안 찌려면 얼마만큼 운동해야하지?
+        </CardBody>
+      </Card>
+
+      <Image
+        src={
+          "https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg?cs=srgb&dl=pexels-mohamed-almari-1485894.jpg&fm=jpg"
+        }
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+
       <ButtonGroup
         width={"100%"}
-        pos={"fixed"}
+        pos={"absolute"}
         bottom={"30px"}
-        margin={"0 auto"}
+        padding={"0 22px"}
         justifyContent={"center"}
       >
         <MainButton
           w={"100%"}
           h={"52px"}
+          bgColor={"#40E98E"}
           onClick={() => {
             setFunnel("login");
           }}
         >
-          다음으로
+          <Text color={"#2B2C2C"}>다음으로</Text>
         </MainButton>
       </ButtonGroup>
     </>

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
@@ -9,20 +9,26 @@ const MainButton = ({
   alignSelf,
   isDisabled,
   type,
+  bgColor,
+  color,
+  _disabled,
+  _hover,
 }: ButtonProps) => {
   return (
     <Button
-      bgColor={"#000000"}
+      bgColor={bgColor}
+      color={color}
       textColor={"white"}
       borderRadius={"12px"}
-      margin={"0 22px"}
       w={w}
       h={h}
       maxW={"390px"}
       onClick={onClick}
       alignSelf={alignSelf}
       isDisabled={isDisabled}
       type={type}
+      _disabled={_disabled}
+      _hover={_hover}
     >
       {children}
     </Button>

diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -23,7 +23,6 @@ import {
   personalAgreement,
   serviceAgreement,
 } from "../../utils/DummyData/AgreementData";
-import { useRouter, useSearchParams } from "next/navigation";
 
 interface UserAgreementFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
@@ -34,13 +33,14 @@ const UserAgreementForm = ({
   setFunnel,
   setProgress,
 }: UserAgreementFormPropsType) => {
-  const [checkedItems, setCheckedItems] = useState([false, false, false]);
+  const [checkedItems, setCheckedItems] = useState([false, false]);
   const [modalState, setModalState] = useState<string>("");
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const allChecked = checkedItems.every(Boolean);
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
+  console.log(checkedItems);
   return (
     <>
       <Modal
@@ -88,20 +88,16 @@ const UserAgreementForm = ({
         <Flex
           w={"346px"}
           h={"48px"}
-          border={"1px solid #BCBCBC"}
+          border={"1px solid #00CE84"}
           borderRadius={"12px"}
         >
           <Checkbox
             isChecked={allChecked}
             isIndeterminate={isIndeterminate}
             margin={"auto 20px"}
-            color={"#BCBCBC"}
+            color={"#00CE84"}
             onChange={(e) =>
-              setCheckedItems([
-                e.target.checked,
-                e.target.checked,
-                e.target.checked,
-              ])
+              setCheckedItems([e.target.checked, e.target.checked])
             }
           >
             모두 동의합니다.
@@ -112,13 +108,7 @@ const UserAgreementForm = ({
           isChecked={checkedItems[0]}
           textDecor={"underline"}
           margin={"auto 20px"}
-          onChange={(e) =>
-            setCheckedItems([
-              e.target.checked,
-              checkedItems[1],
-              checkedItems[2],
-            ])
-          }
+          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
         >
           <Box
             onClick={() => {
@@ -134,13 +124,7 @@ const UserAgreementForm = ({
           margin={"auto 20px"}
           textDecor={"underline"}
           isChecked={checkedItems[1]}
-          onChange={(e) =>
-            setCheckedItems([
-              checkedItems[0],
-              e.target.checked,
-              checkedItems[2],
-            ])
-          }
+          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
         >
           <Box
             onClick={() => {
@@ -151,21 +135,6 @@ const UserAgreementForm = ({
             (필수) 개인 정보 수집 및 이용 동의
           </Box>
         </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
@@ -178,7 +147,16 @@ const UserAgreementForm = ({
         <MainButton
           w={"100%"}
           h={"52px"}
-          isDisabled={checkedItems.filter((ele) => ele).length !== 3}
+          isDisabled={checkedItems.filter((ele) => ele).length !== 2}
+          _disabled={{
+            bgColor: "#D2D2D2",
+            color: "#FFFFFF",
+          }}
+          _hover={{
+            bgColor: "#2B2C2C30",
+            color: "#FFFFFF",
+          }}
+          bgColor={"#2B2C2C"}
           onClick={() => {
             setFunnel("userInfo");
             setProgress((oldState) => oldState + 33.3);

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -32,10 +32,15 @@ function RadioCard(props: any) {
         fontSize={"15px"}
         fontWeight={"semibold"}
         color={"#C6C6C6"}
+        _hover={{
+          bgColor: "#00CE8440",
+          color: "#FFFFFF",
+          borderColor: "transparent",
+        }}
         _checked={{
-          bg: "#000000",
+          bg: "#00CE84",
           color: "white",
-          borderColor: "#000000",
+          borderColor: "transparent",
         }}
         px={5}
         py={3}
@@ -70,7 +75,6 @@ const UserInfoForm = ({
   const { handleSubmit, register } = useForm<SignUpFormType>();
 
   const onSubmit: SubmitHandler<SignUpFormType> = (data) => {
-    console.log(data, value);
     const newUserInfo: UserInfoType = {
       userName: data.userName,
       gender: value as string,
@@ -146,6 +150,15 @@ const UserInfoForm = ({
           <MainButton
             w={"100%"}
             h={"52px"}
+            _disabled={{
+              bgColor: "#D2D2D2",
+              color: "#FFFFFF",
+            }}
+            _hover={{
+              bgColor: "#2B2C2C30",
+              color: "#FFFFFF",
+            }}
+            bgColor={"#2B2C2C"}
             type="submit"
             isDisabled={value === ""}
           >

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -29,7 +29,11 @@ interface PhysicsFormType {
 
 const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
   const router = useRouter();
-  const { handleSubmit, register } = useForm<PhysicsFormType>();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<PhysicsFormType>();
 
   const onSubmit: SubmitHandler<PhysicsFormType> = async (data) => {
     const newUserInfo: UserInfoType = {
@@ -44,6 +48,9 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
     console.log(newUserInfo);
     router.push("/main");
   };
+
+  const formErr = Object.keys(errors).length ? true : false;
+
   return (
     <>
       <Box as="section" alignSelf={"flex-start"}>
@@ -77,9 +84,10 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
             </InputLeftElement>
             <Input
               {...register("age", { required: true })}
+              focusBorderColor={"#00C27C"}
+              color={"#00C27C"}
               type="number"
               h={"48px"}
-              focusBorderColor={"black"}
             />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               세
@@ -96,7 +104,8 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
               {...register("height", { required: true })}
               type="number"
               h={"48px"}
-              focusBorderColor={"black"}
+              focusBorderColor={"#00C27C"}
+              color={"#00C27C"}
             />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               cm
@@ -112,7 +121,8 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
               {...register("weight", { required: true })}
               type="number"
               h={"48px"}
-              focusBorderColor={"black"}
+              focusBorderColor={"#00C27C"}
+              color={"#00C27C"}
             />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               kg
@@ -128,7 +138,8 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
               {...register("targetWeight", { required: true })}
               type="number"
               h={"48px"}
-              focusBorderColor={"black"}
+              focusBorderColor={"#00C27C"}
+              color={"#00C27C"}
             />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               kg
@@ -142,7 +153,21 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
           margin={"0 auto"}
           justifyContent={"center"}
         >
-          <MainButton w={"100%"} h={"52px"} type="submit">
+          <MainButton
+            w={"100%"}
+            h={"52px"}
+            _disabled={{
+              bgColor: "#D2D2D2",
+              color: "#FFFFFF",
+            }}
+            _hover={{
+              bgColor: "#2B2C2C30",
+              color: "#FFFFFF",
+            }}
+            bgColor={"#2B2C2C"}
+            type="submit"
+            isDisabled={formErr}
+          >
             다음으로
           </MainButton>
         </ButtonGroup>