localStorage Err

component/card/ChattingRoom.tsx

@@ -11,7 +11,7 @@ import {
   UseFormRegister,
 } from "react-hook-form";
 import { DietResponse } from "../../utils/api/AxiosSetting";
-import { useState } from "react";
+import RunningIcon from "../icon/RunningIcon";
 
 export interface DietMsgType {
   msg: string;
@@ -97,7 +97,6 @@ const ChattingRoom = ({
               {"ex) 아침은 00 점심은 00 저녁은 00을 먹었어"}
             </Text>
           </ChattingMsgCard>
-
           {chattingData && (
             <UserChattingMsgCard>{chattingData}</UserChattingMsgCard>
           )}
@@ -106,6 +105,23 @@ const ChattingRoom = ({
             isLoading={isLoading}
             dietResponseData={dietResponseData}
           />
+
+          {dietResponseData && (
+            <>
+              <ChattingMsgCard>
+                <HStack spacing={"5px"}>
+                  <RunningIcon />
+                  <Text>
+                    <Text as="a" color={"#00C27C"} fontWeight={"semibold"}>
+                      {dietResponseData.운동필요시간}
+                    </Text>
+                    이상 꼭 하셔야해요.
+                  </Text>
+                </HStack>
+              </ChattingMsgCard>
+              <ChattingMsgCard>{dietResponseData.잔소리}</ChattingMsgCard>
+            </>
+          )}
         </VStack>
       </Flex>
       <ChattingInput

component/card/DietChattingMsgCard.tsx

@@ -10,7 +10,6 @@ import {
   Flex,
   HStack,
   Heading,
-  Spinner,
   Text,
   VStack,
 } from "@chakra-ui/react";
@@ -34,7 +33,7 @@ const DietChattingMsgCart = ({
   return (
     <>
       <Card
-        w={!isLoading ? "197px" : "312px"}
+        w={!dietResponseData ? "197px" : "312px"}
         bgColor={"#FFFFFF"}
         shadow={"none"}
         margin={"0px 0px 0px 22px"}
@@ -46,7 +45,7 @@ const DietChattingMsgCart = ({
               <Box w={"30%"}>
                 <Lottie animationData={LoadingLotte} />
               </Box>
-              <Text color={"#2F2F2F"} fontSize={"18px"}>
+              <Text color={"#2F2F2F"} fontSize={"18px"} textAlign={"center"}>
                 식선생이 오늘의
                 <br />
                 식사를 분석하고 있어요
@@ -68,7 +67,7 @@ const DietChattingMsgCart = ({
                     fontSize={"18px"}
                     fontWeight={"regular"}
                   >
-                    {dietResponseData?.아침}
+                    {` ${dietResponseData?.아침} Kcal`}
                   </Heading>
                 </Box>
                 <Box>
@@ -81,7 +80,7 @@ const DietChattingMsgCart = ({
                     fontSize={"18px"}
                     fontWeight={"regular"}
                   >
-                    {dietResponseData?.점심}
+                    {` ${dietResponseData?.점심} Kcal`}
                   </Heading>
                 </Box>
                 <Box>
@@ -94,7 +93,7 @@ const DietChattingMsgCart = ({
                     fontSize={"18px"}
                     fontWeight={"regular"}
                   >
-                    {dietResponseData?.저녁}
+                    {`${dietResponseData?.저녁} Kcal`}
                   </Heading>
                 </Box>
               </Flex>
@@ -113,7 +112,9 @@ const DietChattingMsgCart = ({
                   fontWeight={"semibold"}
                   fontSize={"17px"}
                 >
-                  {dietResponseData?.초과칼로리}를 초과하셨습니다.
+                  {dietResponseData?.초과칼로리 > 0
+                    ? `${dietResponseData?.초과칼로리} Kcal를 초과하셨습니다.`
+                    : `${-dietResponseData?.초과칼로리} Kcal 더 드셔도 됩니다.`}
                 </Text>
               </HStack>
             </CardHeader>

component/form/UserInfoForm.tsx

@@ -81,7 +81,7 @@ const UserInfoForm = ({
       age: 0,
       height: 0,
       weight: 0,
-      targetweight: 0,
+      targetWeight: 0,
     };
 
     setUserInfo(newUserInfo);

component/form/UserPhysicForm.tsx

@@ -22,10 +22,10 @@ interface UserPhysicsFormPropsType {
   userInfo: UserInfoType;
 }
 interface PhysicsFormType {
-  age: number;
-  height: number;
-  weight: number;
-  targetweight: string;
+  age: string;
+  height: string;
+  weight: string;
+  targetWeight: string;
 }
 
 const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
@@ -44,18 +44,17 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
     const newUserInfo: UserInfoType = {
       name: userInfo.name,
       gender: userInfo.gender,
-      age: data.age,
-      height: data.height,
-      weight: data.weight,
-      targetweight: parseInt(data.targetweight),
+      age: parseInt(data.age),
+      height: parseInt(data.height),
+      weight: parseInt(data.weight),
+      targetWeight: parseInt(data.targetWeight),
     };
 
-    await postUserInfoMutation(newUserInfo);
-
-    console.log(userId);
-
-    localStorage.setItem("userId", userId.user_id);
+    // await postUserInfoMutation(newUserInfo);
+    // console.log(userId);
+    // localStorage.setItem("userId", userId.user_id);
 
+    localStorage.setItem("userInfo", JSON.stringify(newUserInfo));
     router.push("/main");
   };
 
@@ -145,7 +144,7 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
           </FormLabel>
           <InputGroup>
             <Input
-              {...register("targetweight", { required: true })}
+              {...register("targetWeight", { required: true })}
               type="number"
               h={"48px"}
               focusBorderColor={"#00C27C"}

component/section/DietStateSection.tsx

@@ -16,8 +16,13 @@ import mainStage3 from "../../utils/img/mainStage3.png";
 import mainStage4 from "../../utils/img/mainStage4.png";
 import mainStage5 from "../../utils/img/mainStage5.png";
 import { useRouter } from "next/navigation";
+import { DietResponse } from "../../utils/api/AxiosSetting";
 
-const DietStateSection = () => {
+const DietStateSection = ({
+  dietResponseData,
+}: {
+  dietResponseData: DietResponse;
+}) => {
   const dietNickName = {
     stage1: "열정가득 다이어터",
     stage2: "기세등등 유지어터",
@@ -26,6 +31,22 @@ const DietStateSection = () => {
     stage5: "위기의 다이어터",
   };
 
+  function getStageName(step: number) {
+    if (step >= 800) {
+      return dietNickName.stage5;
+    } else if (step >= 400) {
+      return dietNickName.stage4;
+    } else if (step >= 200) {
+      return dietNickName.stage3;
+    } else if (step >= 100) {
+      return dietNickName.stage2;
+    } else {
+      return dietNickName.stage1;
+    }
+  }
+
+  const nickName = getStageName(dietResponseData.초과칼로리);
+
   const router = useRouter();
   return (
     <HStack
@@ -38,12 +59,14 @@ const DietStateSection = () => {
     >
       <Box w={"100%"}>
         <Text fontSize={"16px"} color={"#787878"}>
-          200Kcal 초과
+          {dietResponseData?.초과칼로리 > 0
+            ? `${dietResponseData?.초과칼로리} Kcal 초과`
+            : `${-dietResponseData?.초과칼로리} Kcal`}
         </Text>
         <Heading fontSize={"22px"}>
           오늘{" "}
           <Text as={"a"} color={"#40E98E"}>
-            30분 이상 달려야
+            {dietResponseData.운동필요시간}
           </Text>
           <br />
           현재 몸무게 안정권 유지
@@ -53,7 +76,7 @@ const DietStateSection = () => {
         <Card bgColor={"#434343"} margin={"0 auto"}>
           <CardBody padding={"4px 7px"}>
             <Text color={"#40E98E"} textAlign={"center"} fontSize={"9px"}>
-              열정가득 다이어터
+              {nickName}
             </Text>
           </CardBody>
         </Card>

component/template/MyPageTemplate.tsx

@@ -14,7 +14,11 @@ const MyPageTemplate = () => {
   const router = useRouter();
   const [userData, setUserData] = useState<UserInfoType>();
 
-  const {} = useUser();
+  useEffect(() => {
+    let userInfo: any = localStorage.getItem("userInfo");
+    const userInfoData: UserInfoType = JSON.parse(userInfo);
+    setUserData(userInfoData);
+  }, []);
 
   return (
     <>
@@ -110,7 +114,7 @@ const MyPageTemplate = () => {
                   목표 체중
                 </Text>
                 <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  {userData?.targetweight}
+                  {userData?.targetWeight}
                 </Text>
               </HStack>
             </VStack>
@@ -131,7 +135,7 @@ const MyPageTemplate = () => {
             marginLeft={"15px"}
             cursor={"pointer"}
             onClick={() => {
-              localStorage.removeItem(`userId`);
+              localStorage.removeItem(`userInfo`);
               router.push("/");
             }}
           >

component/template/SignupTemplate.tsx

@@ -14,7 +14,7 @@ export interface UserInfoType {
   age: number;
   height: number;
   weight: number;
-  targetweight: number;
+  targetWeight: number;
 }
 
 const SignupTemplate = ({ jwtToken }: { jwtToken?: JwtToken }) => {
@@ -25,7 +25,7 @@ const SignupTemplate = ({ jwtToken }: { jwtToken?: JwtToken }) => {
     age: 0,
     height: 0,
     weight: 0,
-    targetweight: 0,
+    targetWeight: 0,
   });
   const { funnel, setFunnel } = useFunnel("userAgreement");
 

src/app/main/page.tsx

@@ -13,12 +13,23 @@ import DietStateSection from "../../../component/section/DietStateSection";
 import { usePostUserDiet } from "../../../utils/hooks/usePostUserDiet";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useState } from "react";
+import { UserInfoType } from "../../../component/template/SignupTemplate";
 
-export interface UserPostDietData {
-  msg: string;
-  userId: string | null;
+export interface UserPostDietData extends UserInfoType {
+  query: string;
+  userId?: string | null;
 }
 
+// {
+//   "name": "서경원",
+//   "height": 123,
+//   "weight": 432,
+//   "age": 12,
+//   "gender": "남성",
+//   "targetWeight": 321,
+//   "query": "오늘 아침은 우유 1컵, 점심은 된장찌개랑 갈비조림, 저녁은 마라탕"
+// }
+
 const Page = () => {
   const router = useRouter();
   const [chattingData, setChattingData] = useState<string>("");
@@ -37,14 +48,26 @@ const Page = () => {
   } = useForm<DietMsgType>();
 
   const onSubmit: SubmitHandler<DietMsgType> = async (data) => {
-    const userId = localStorage.getItem("userId");
-    const userInfoData: UserPostDietData = {
-      msg: data.msg,
-      userId,
-    };
-    setChattingData(data.msg);
+    localStorage.removeItem("userDiet");
     reset();
-    await postUserDietMutation(userInfoData);
+    const userInfoString: string | null = localStorage.getItem("userInfo");
+
+    if (userInfoString !== null) {
+      const userInfo: UserInfoType = JSON.parse(userInfoString);
+      const userInfoData: UserPostDietData = {
+        query: data.msg,
+        name: userInfo.name,
+        age: userInfo.age,
+        weight: userInfo.weight,
+        height: userInfo.height,
+        targetWeight: userInfo.targetWeight,
+        gender: userInfo.gender,
+      };
+      setChattingData(data.msg);
+      await postUserDietMutation(userInfoData);
+
+      localStorage.setItem("userDiet", JSON.stringify(dietResponseData));
+    }
   };
 
   return (
@@ -68,7 +91,7 @@ const Page = () => {
           </Text>
         </TheHeader>
         <VStack spacing={"20px"} w={"100%"} h={"100%"}>
-          {false ? (
+          {!dietResponseData ? (
             <DietStateCard>
               <HStack
                 display={"flex"}
@@ -91,7 +114,7 @@ const Page = () => {
             </DietStateCard>
           ) : (
             <DietStateCard>
-              <DietStateSection />
+              <DietStateSection dietResponseData={dietResponseData} />
             </DietStateCard>
           )}
 

src/app/mypage/page.tsx

@@ -1,19 +1,10 @@
 "use client";
-import { Box, Flex, HStack, Text, VStack } from "@chakra-ui/react";
-import { useRouter } from "next/navigation";
-import TodayReportCard from "../../../component/card/TodayReportCard";
-import TheHeader from "../../../component/header/TheHeader";
-import { useUser } from "../../../utils/hooks/useUser";
-import CloseIcon from "../../../component/icon/CloseIcon";
-import Image from "next/image";
-import MyPageCharacter from "../../../utils/img/MypageCharacter.png";
+
 import { useEffect, useState } from "react";
 import { UserInfoType } from "../../../component/template/SignupTemplate";
 import MyPageTemplate from "../../../component/template/MyPageTemplate";
 
 const Page = () => {
-  const { data } = useUser();
-
   // const [userData, setUserData] = useState<UserInfoType>();
 
   // useEffect(() => {

src/app/page.tsx

@@ -15,7 +15,7 @@ export default function Home() {
     if (colorMode === "dark") {
       setColorMode("light");
     }
-    const userId = localStorage.getItem("userId");
+    const userId = localStorage.getItem("userInfo");
     if (userId) return router.push("/main");
   }, [colorMode, setColorMode, router]);