Merge pull request #4 from chhw130/dev

PR : mypage 작업
potenday-project · Dec 12, 2023 · 79cea6d · 79cea6d
2 parents bef6fbf + 3482ccd
commit 79cea6d
Show file tree

Hide file tree

Showing 18 changed files with 569 additions and 32 deletions.
diff --git a/component/card/ChattingMsgCard.tsx b/component/card/ChattingMsgCard.tsx
@@ -0,0 +1,27 @@
+import { Box, Card, CardBody, CardProps } from "@chakra-ui/react";
+import { Children } from "react";
+
+const ChattingMsgCard = ({ children }: CardProps) => {
+  return (
+    <>
+      <Card
+        bgColor={"#F5F5F9"}
+        width={"max-content"}
+        shadow={"none"}
+        margin={"0px 0px 0px 22px"}
+      >
+        <CardBody
+          color={"#2F2F2F"}
+          padding={"14px 16px"}
+          width={"max-content"}
+          maxW={"346px"}
+          fontSize={"18px"}
+        >
+          {children}
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default ChattingMsgCard;
diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -0,0 +1,62 @@
+import { Box, Divider, Flex, Heading, Text, VStack } from "@chakra-ui/react";
+import ChattingMsgCard from "../card/ChattingMsgCard";
+import UserChattingMsgCard from "./UserChattingMsgCard";
+import DietChattingMsgCart from "./DietChattingMsgCard";
+import ChattingInput from "../input/ChattingInput";
+
+const ChattingRoom = () => {
+  return (
+    <>
+      <Flex
+        w={"100%"}
+        bgColor={"#FFFFFF"}
+        h={"80%"}
+        borderRadius={"12px 12px 0 0"}
+        position={"absolute"}
+        bottom={"0"}
+        overflow={"scroll"}
+        flexDir={"column"}
+      >
+        <Box textAlign={"center"} w={"100%"} padding={"10px 22px"}>
+          <Heading
+            as={"h1"}
+            color={"#000000"}
+            fontSize={"20px"}
+            fontWeight={"medium"}
+          >
+            식선생
+          </Heading>
+          <Text as={"h2"} color={"#787878"} fontSize={"12px"} lineHeight={2}>
+            다이어트는 의지의 차이입니다.
+          </Text>
+          <Divider padding={"4.5px 0"} color={"#ECECEC"} />
+        </Box>
+        <VStack
+          w={"100%"}
+          alignItems={"flex-start"}
+          spacing={"16px"}
+          marginTop={"10px"}
+        >
+          <ChattingMsgCard>반갑습니다 00님</ChattingMsgCard>
+          <ChattingMsgCard>
+            자, 오늘은 어떤 음식을 드셨나요?
+            <br />
+            아침, 점심, 저녁 메뉴를 알려주세요
+            <Text as={"h2"} color={"#787878"} fontSize={"16px"} lineHeight={2}>
+              ex) 아침은 00 점심은 00 저녁은 00을 먹었어
+            </Text>
+          </ChattingMsgCard>
+
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
+
+          <DietChattingMsgCart />
+        </VStack>
+        <ChattingInput />
+      </Flex>
+    </>
+  );
+};
+
+export default ChattingRoom;
diff --git a/component/card/DietChattingMsgCard.tsx b/component/card/DietChattingMsgCard.tsx
@@ -0,0 +1,85 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Divider,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+
+const DietChattingMsgCart = ({}: CardProps) => {
+  return (
+    <>
+      <Card
+        w={"312px"}
+        bgColor={"#F5F5F9"}
+        shadow={"none"}
+        margin={"0px 0px 0px 22px"}
+      >
+        <CardHeader padding={"14px 16px 0 16px"}>
+          <Flex justifyContent={"space-between"} textAlign={"center"}>
+            <Box>
+              <Text as={"h2"} color={"#787878"} fontSize={"15px"}>
+                아침
+              </Text>
+              <Heading
+                as={"h1"}
+                color={"#000000"}
+                fontSize={"18px"}
+                fontWeight={"regular"}
+              >
+                200 Kcal
+              </Heading>
+            </Box>
+            <Box>
+              <Text as={"h2"} color={"#787878"} fontSize={"15px"}>
+                점심
+              </Text>
+              <Heading
+                as={"h1"}
+                color={"#000000"}
+                fontSize={"18px"}
+                fontWeight={"regular"}
+              >
+                1000 Kcal
+              </Heading>
+            </Box>
+            <Box>
+              <Text as={"h2"} color={"#787878"} fontSize={"15px"}>
+                저녁
+              </Text>
+              <Heading
+                as={"h1"}
+                color={"#000000"}
+                fontSize={"18px"}
+                fontWeight={"regular"}
+              >
+                900 Kcal
+              </Heading>
+            </Box>
+          </Flex>
+          <Divider margin={"0 auto"} padding={"4.5px 0"} color={"#ECECEC"} />
+          <Text
+            textAlign={"center"}
+            paddingTop={"4.5px"}
+            color={"#FF6C6C"}
+            fontWeight={"medium"}
+          >
+            300 Kcal가 초과되셨습니다.
+          </Text>
+        </CardHeader>
+        <CardBody color={"#2F2F2F"} padding={"16px 14px 14px 14px"}>
+          <Button bgColor={"#FFFFFF"} w={"100%"} h={"41px"}>
+            식단 상세보기
+          </Button>
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default DietChattingMsgCart;
diff --git a/component/card/DietStateCard.tsx b/component/card/DietStateCard.tsx
@@ -0,0 +1,40 @@
+import { Box, Card, HStack, Text } from "@chakra-ui/react";
+import Image from "next/image";
+
+const DietStateCard = () => {
+  return (
+    <>
+      <Card
+        bg={"rgba(0, 0, 0, 0.2)"}
+        h={"70px"}
+        w={"346px"}
+        color={"#FFFFFF"}
+        padding={"22px"}
+        flexDir={"row"}
+        borderRadius={"12px"}
+      >
+        <HStack display={"flex"} margin={"0 auto"} w={"100%"} spacing={"18px"}>
+          <Box w={"20%"}>
+            <Image
+              src={
+                "https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"
+              }
+              alt="식선생"
+              width={70}
+              height={70}
+            />
+          </Box>
+          <Box w={"70%"}>
+            <Text>
+              식단을 입력하시면
+              <br />
+              오늘의 솔루션을 드릴게요
+            </Text>
+          </Box>
+        </HStack>
+      </Card>
+    </>
+  );
+};
+
+export default DietStateCard;
diff --git a/component/card/TodayReportCard.tsx b/component/card/TodayReportCard.tsx
@@ -0,0 +1,26 @@
+import { Card, CardBody, CardProps } from "@chakra-ui/react";
+
+const TodayReportCard = ({ children }: CardProps) => {
+  return (
+    <>
+      <Card
+        bgColor={"#F5F5F9"}
+        width={"max-content"}
+        shadow={"none"}
+        w={"100%"}
+      >
+        <CardBody
+          color={"#2F2F2F"}
+          padding={"14px 16px"}
+          width={"max-content"}
+          maxW={"346px"}
+          fontSize={"18px"}
+        >
+          {children}
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default TodayReportCard;
diff --git a/component/card/UserChattingMsgCard.tsx b/component/card/UserChattingMsgCard.tsx
@@ -0,0 +1,28 @@
+import { Box, Card, CardBody, CardProps } from "@chakra-ui/react";
+
+const UserChattingMsgCard = ({ children }: CardProps) => {
+  return (
+    <>
+      <Card
+        bgColor={"#F5F5F9"}
+        width={"max-content"}
+        shadow={"none"}
+        margin={"0px 22px 0px 0px"}
+        float={"right"}
+        fontSize={"18px"}
+        alignSelf={"flex-end"}
+      >
+        <CardBody
+          color={"#2F2F2F"}
+          padding={"14px 16px"}
+          width={"max-content"}
+          maxW={"320px"}
+        >
+          {children}
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default UserChattingMsgCard;
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -11,14 +11,17 @@ import MainButton from "../button/MainButton";
 
 interface UserAgreementFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
+const UserAgreementForm = ({
+  setFunnel,
+  setProgress,
+}: UserAgreementFormPropsType) => {
   const [checkedItems, setCheckedItems] = useState([false, false, false]);
   const allChecked = checkedItems.every(Boolean);
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
-  console.log();
   return (
     <>
       <Box as="section" alignSelf={"flex-start"}>
@@ -116,8 +119,12 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
           w={"100%"}
           h={"52px"}
           isDisabled={checkedItems.filter((ele) => ele).length !== 3}
+          onClick={() => {
+            setFunnel("userInfo");
+            setProgress((oldState) => oldState + 33.3);
+          }}
         >
-          동의하고 시작하기
+          다음으로
         </MainButton>
       </ButtonGroup>
     </>

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -13,6 +13,7 @@ import {
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { UserInfoType } from "@/app/signup/page";
 
 function RadioCard(props: any) {
   const { getInputProps, getRadioProps } = useRadio(props);
@@ -48,9 +49,14 @@ function RadioCard(props: any) {
 interface UserInfoFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
   setProgress: React.Dispatch<React.SetStateAction<number>>;
+  setUserInfo: React.Dispatch<React.SetStateAction<UserInfoType>>;
 }
 
-const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
+const UserInfoForm = ({
+  setFunnel,
+  setProgress,
+  setUserInfo,
+}: UserInfoFormPropsType) => {
   const options = ["남성", "여성"];
 
   const { getRootProps, getRadioProps, value } = useRadioGroup({
@@ -65,6 +71,7 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
 
   const onSubmit: SubmitHandler<SignUpFormType> = (data) => {
     console.log(data, value);
+
     setFunnel("userPhysics");
     setProgress((oldState) => oldState + 33.3);
   };

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -14,29 +14,26 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
 
 interface UserPhysicsFormPropsType {
-  setFunnel: React.Dispatch<React.SetStateAction<string>>;
   setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
+interface PhysicsFormType {
+  age: number;
+  height: number;
+  weight: number;
+  targetWeight: number;
+}
 
-const UserPhysicForm = ({
-  setFunnel,
-  setProgress,
-}: UserPhysicsFormPropsType) => {
-  interface PhysicsFormType {
-    age: number;
-    height: number;
-    weight: number;
-    targetWeight: number;
-  }
-
+const UserPhysicForm = () => {
+  const router = useRouter();
   const { handleSubmit, register } = useForm<PhysicsFormType>();
 
   const onSubmit: SubmitHandler<PhysicsFormType> = (data) => {
     console.log(data);
-    setFunnel("userAgreement");
-    setProgress((oldState) => oldState + 33.3);
+    // setProgress((oldState) => oldState + 33.3);
+    router.push("/main");
   };
   return (
     <>