diff --git a/component/card/ChattingMsgCard.tsx b/component/card/ChattingMsgCard.tsx new file mode 100644 index 0000000..fcda1a8 --- /dev/null +++ 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 ( + <> + + + {children} + + + + ); +}; + +export default ChattingMsgCard; diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx new file mode 100644 index 0000000..4649a44 --- /dev/null +++ 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 ( + <> + + + + 식선생 + + + 다이어트는 의지의 차이입니다. + + + + + 반갑습니다 00님 + + 자, 오늘은 어떤 음식을 드셨나요? +
+ 아침, 점심, 저녁 메뉴를 알려주세요 + + ex) 아침은 00 점심은 00 저녁은 00을 먹었어 + + + + + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + + + + + + + + ); +}; + +export default ChattingRoom; diff --git a/component/card/DietChattingMsgCard.tsx b/component/card/DietChattingMsgCard.tsx new file mode 100644 index 0000000..8535030 --- /dev/null +++ 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 ( + <> + + + + + + 아침 + + + 200 Kcal + + + + + 점심 + + + 1000 Kcal + + + + + 저녁 + + + 900 Kcal + + + + + + 300 Kcal가 초과되셨습니다. + + + + + + + + ); +}; + +export default DietChattingMsgCart; diff --git a/component/card/DietStateCard.tsx b/component/card/DietStateCard.tsx new file mode 100644 index 0000000..2dfb594 --- /dev/null +++ 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 ( + <> + + + + 식선생 + + + + 식단을 입력하시면 +
+ 오늘의 솔루션을 드릴게요 + + + + + + ); +}; + +export default DietStateCard; diff --git a/component/card/TodayReportCard.tsx b/component/card/TodayReportCard.tsx new file mode 100644 index 0000000..a55edf5 --- /dev/null +++ b/component/card/TodayReportCard.tsx @@ -0,0 +1,26 @@ +import { Card, CardBody, CardProps } from "@chakra-ui/react"; + +const TodayReportCard = ({ children }: CardProps) => { + return ( + <> + + + {children} + + + + ); +}; + +export default TodayReportCard; diff --git a/component/card/UserChattingMsgCard.tsx b/component/card/UserChattingMsgCard.tsx new file mode 100644 index 0000000..b0e0b6b --- /dev/null +++ b/component/card/UserChattingMsgCard.tsx @@ -0,0 +1,28 @@ +import { Box, Card, CardBody, CardProps } from "@chakra-ui/react"; + +const UserChattingMsgCard = ({ children }: CardProps) => { + return ( + <> + + + {children} + + + + ); +}; + +export default UserChattingMsgCard; diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx index e53b4a0..d8c98f7 100644 --- a/component/form/UserAgreementForm.tsx +++ b/component/form/UserAgreementForm.tsx @@ -11,14 +11,17 @@ import MainButton from "../button/MainButton"; interface UserAgreementFormPropsType { setFunnel: React.Dispatch>; + setProgress: React.Dispatch>; } -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 ( <> @@ -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); + }} > - 동의하고 시작하기 + 다음으로 diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx index 590fcc8..ba9320a 100644 --- 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>; setProgress: React.Dispatch>; + setUserInfo: React.Dispatch>; } -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 = (data) => { console.log(data, value); + setFunnel("userPhysics"); setProgress((oldState) => oldState + 33.3); }; diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx index 2182c3c..ab9183f 100644 --- 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>; setProgress: React.Dispatch>; } +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(); const onSubmit: SubmitHandler = (data) => { console.log(data); - setFunnel("userAgreement"); - setProgress((oldState) => oldState + 33.3); + // setProgress((oldState) => oldState + 33.3); + router.push("/main"); }; return ( <> diff --git a/component/header/TheHeader.tsx b/component/header/TheHeader.tsx new file mode 100644 index 0000000..8e83568 --- /dev/null +++ b/component/header/TheHeader.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { Flex } from "@chakra-ui/react"; +import { ReactNode } from "react"; + +const TheHeader = ({ children }: { children: ReactNode }) => { + return ( + <> + + {children} + + + ); +}; + +export default TheHeader; diff --git a/component/input/ChattingInput.tsx b/component/input/ChattingInput.tsx new file mode 100644 index 0000000..ac38e73 --- /dev/null +++ b/component/input/ChattingInput.tsx @@ -0,0 +1,39 @@ +import { + Box, + Button, + Flex, + Input, + InputGroup, + InputRightElement, +} from "@chakra-ui/react"; + +const ChattingInput = () => { + return ( + <> + + + + + + icon + + + + + ); +}; + +export default ChattingInput; diff --git a/component/progressBar/ProgressBar.tsx b/component/progressBar/ProgressBar.tsx index 8464c04..5ca5d22 100644 --- a/component/progressBar/ProgressBar.tsx +++ b/component/progressBar/ProgressBar.tsx @@ -2,11 +2,7 @@ import React from "react"; const ProgressBar = () => { - return ( - <> - - - ); + return <>; }; export default ProgressBar; diff --git a/component/section/MainTitleSection.tsx b/component/section/MainTitleSection.tsx new file mode 100644 index 0000000..ea3051b --- /dev/null +++ b/component/section/MainTitleSection.tsx @@ -0,0 +1,33 @@ +import { Box, HStack, Heading } from "@chakra-ui/react"; +import Image from "next/image"; + +const MainTitleSection = () => { + return ( + <> + + + 식선생 + + 식단을 입력하시면 +
+ 오늘의 솔루션을 드릴게요 + + + + + ); +}; + +export default MainTitleSection; diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx new file mode 100644 index 0000000..8471c6f --- /dev/null +++ b/src/app/detail/page.tsx @@ -0,0 +1,55 @@ +"use client"; +import { Flex, Text, VStack } from "@chakra-ui/react"; +import { useRouter } from "next/navigation"; +import TodayReportCard from "../../../component/card/TodayReportCard"; +import TheHeader from "../../../component/header/TheHeader"; + +const Page = () => { + const router = useRouter(); + return ( + <> + + + router.push("/main")} + cursor={"pointer"} + > + {"<"} + + + 오늘의 칼로리 레포트 + + + + + + 00님의 하루 칼로리 +
+ 아침 : 계란후라이 200 kcal + 점심 : 짜장면 1000 kcal + 저녁 : 마라탕 800 kcal + + + 00님께 드리는 팩폭 +
+ 기초대사량에서 300 Kcal 초과 + 권장 운동 + 걷기 운동 1시간 이상 + + + + + ); +}; + +export default Page; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 78fd14b..0283484 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { ChakraLayout } from "@/app/ChakraLayout"; import QueryLayout from "./QueryLayout"; +import { Box } from "@chakra-ui/react"; export const metadata: Metadata = { title: "Create Next App", diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx new file mode 100644 index 0000000..913c089 --- /dev/null +++ b/src/app/main/page.tsx @@ -0,0 +1,36 @@ +"use client"; +import { Flex, Text } from "@chakra-ui/react"; +import ChattingRoom from "../../../component/card/ChattingRoom"; +import DietStateCard from "../../../component/card/DietStateCard"; +import { useRouter } from "next/navigation"; +import TheHeader from "../../../component/header/TheHeader"; + +const Page = () => { + const router = useRouter(); + return ( + <> + + + 로고 + router.push("/mypage")} cursor={"pointer"}> + 마이페이지 + + + + + + + ); +}; + +export default Page; diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx new file mode 100644 index 0000000..59589fe --- /dev/null +++ b/src/app/mypage/page.tsx @@ -0,0 +1,54 @@ +"use client"; +import { Flex, Text, VStack } from "@chakra-ui/react"; +import { useRouter } from "next/navigation"; +import TodayReportCard from "../../../component/card/TodayReportCard"; +import TheHeader from "../../../component/header/TheHeader"; + +const Page = () => { + const router = useRouter(); + return ( + <> + + + router.push("/main")} + cursor={"pointer"} + > + {"<"} + + + 마이페이지 + + + + + 내 정보 +
+ 이름 + 성별 + 나이 + 체중 + 목표체중 + + 오늘의 식단 + + + 로그아웃 + + + + + ); +}; + +export default Page; diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index e5cacab..2052d98 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -5,11 +5,27 @@ 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"; -import { SubmitHandler, useForm } from "react-hook-form"; + +export interface UserInfoType { + userName: string; + gender: string; + age: number; + height: number; + weight: number; + targetWeight: number; +} const Page = () => { const [progress, setProgress] = useState(33.3); - const { funnel, setFunnel } = useFunnel("userInfo"); + const [userInfo, setUserInfo] = useState({ + userName: "", + gender: "", + age: 0, + height: 0, + weight: 0, + targetWeight: 0, + }); + const { funnel, setFunnel } = useFunnel("userAgreement"); return ( <> @@ -20,6 +36,7 @@ const Page = () => { isAnimated={true} value={progress} /> + { margin={"0 auto"} alignItems={"center"} > - {funnel === "userInfo" && ( - - )} - {funnel === "userPhysics" && ( - - )} {funnel === "userAgreement" && ( - + + )} + {funnel === "userInfo" && ( + )} + {funnel === "userPhysics" && } );