fix : rerendering issue

component/card/CharacterImgCard.tsx

@@ -1,4 +1,3 @@
-import { Box } from "@chakra-ui/react";
 import Image from "next/image";
 import React from "react";
 import stage1 from "../../utils/img/stage1.png";

component/card/ChattingRoom.tsx

@@ -110,13 +110,21 @@ const ChattingRoom = ({
             <>
               <ChattingMsgCard>
                 <HStack spacing={"5px"}>
-                  <RunningIcon />
-                  <Text>
-                    <Text as="a" color={"#00C27C"} fontWeight={"semibold"}>
-                      {dietResponseData.운동필요시간}
-                    </Text>
-                    이상 꼭 하셔야해요.
-                  </Text>
+                  {!dietResponseData.운동필요시간.includes("안 해도") ? (
+                    <>
+                      <RunningIcon />
+                      <Text as="a" color={"#00C27C"} fontWeight={"semibold"}>
+                        {dietResponseData.운동필요시간}
+                      </Text>
+                      이상 꼭 하셔야해요.
+                    </>
+                  ) : (
+                    <>
+                      <Text as="a" color={"#00C27C"} fontWeight={"semibold"}>
+                        {dietResponseData.운동필요시간}
+                      </Text>
+                    </>
+                  )}
                 </HStack>
               </ChattingMsgCard>
               <ChattingMsgCard>{dietResponseData.잔소리}</ChattingMsgCard>

component/section/DietStateSection.tsx

@@ -9,20 +9,20 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import Image from "next/image";
-import React, { useEffect, useLayoutEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import mainStage1 from "../../utils/img/mainStage1.png";
 import mainStage2 from "../../utils/img/mainStage2.png";
 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";
-import { userInfo } from "os";
 
 const DietStateSection = (isLoading: { isLoading: boolean }) => {
   const [dietResponseData, setDietResponseData] = useState<
     DietResponse | undefined
   >();
+
   useEffect(() => {
     let userInfo: any = localStorage.getItem("userDiet");
     if (userInfo) {
@@ -35,7 +35,7 @@ const DietStateSection = (isLoading: { isLoading: boolean }) => {
     stage1: ["열정가득 다이어터", mainStage1],
     stage2: ["기세등등 유지어터", mainStage2],
     stage3: ["휴식중인 유지어터", mainStage3],
-    stage4: ["방신한 다이어터", mainStage4],
+    stage4: ["방심한 다이어터", mainStage4],
     stage5: ["위기의 다이어터", mainStage5],
   };
 

src/app/main/page.tsx

@@ -14,7 +14,6 @@ import { usePostUserDiet } from "../../../utils/hooks/usePostUserDiet";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useEffect, useState } from "react";
 import { UserInfoType } from "../../../component/template/SignupTemplate";
-import { DietResponse } from "../../../utils/api/AxiosSetting";
 
 export interface UserPostDietData extends UserInfoType {
   query: string;
@@ -42,7 +41,7 @@ const Page = () => {
   useEffect(() => {
     let userDietData: any = localStorage.getItem("userDiet");
     setUserDiet(userDietData);
-  }, [userDiet]);
+  }, [isLoading]);
 
   const onSubmit: SubmitHandler<DietMsgType> = async (data) => {
     reset();