From 6691efe0c568d2d4f432bc5b4d381d97f3d869ae Mon Sep 17 00:00:00 2001
From: HyunWoo Choi <116826162+chhw130@users.noreply.github.com>
Date: Sat, 16 Dec 2023 16:57:43 +0900
Subject: [PATCH] =?UTF-8?q?fix(mypage)=20:=20=EC=B2=B4=ED=97=98=ED=8C=90?=
 =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20logic=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 component/template/MyPageTemplate.tsx | 149 ++++++++++++++++++++++++++
 src/app/main/page.tsx                 |   4 +-
 src/app/mypage/page.tsx               | 135 +++--------------------
 3 files changed, 163 insertions(+), 125 deletions(-)
 create mode 100644 component/template/MyPageTemplate.tsx

diff --git a/component/template/MyPageTemplate.tsx b/component/template/MyPageTemplate.tsx
new file mode 100644
index 0000000..9884697
--- /dev/null
+++ b/component/template/MyPageTemplate.tsx
@@ -0,0 +1,149 @@
+import { Box, Flex, HStack, Text, VStack } from "@chakra-ui/react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import MyPageCharacter from "../../utils/img/MypageCharacter.png";
+import { useEffect, useState } from "react";
+import TheHeader from "../header/TheHeader";
+import CloseIcon from "../icon/CloseIcon";
+import TodayReportCard from "../card/TodayReportCard";
+import { UserInfoType } from "./SignupTemplate";
+
+const MyPageTemplate = () => {
+  const router = useRouter();
+  const [userData, setUserData] = useState<UserInfoType>();
+
+  useEffect(() => {
+    let userInfo = localStorage.getItem("userInfo");
+    if (userInfo !== null) {
+      const userParsing: UserInfoType = JSON.parse(userInfo);
+      console.log(userParsing);
+      setUserData(userParsing);
+    }
+  }, [setUserData]);
+
+  return (
+    <>
+      <Flex
+        flexDir={"column"}
+        w={"100%"}
+        h={"100vh"}
+        pos={"relative"}
+        maxW={"390px"}
+        padding={"60px 22px 0px 22px"}
+        margin={"0 auto"}
+        alignItems={"center"}
+        bgColor={"#F4F4F4"}
+      >
+        <TheHeader>
+          <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
+            마이페이지
+          </Text>
+          <Box
+            pos={"absolute"}
+            right={"22px"}
+            cursor={"pointer"}
+            onClick={() => router.push("/main")}
+          >
+            <CloseIcon />
+          </Box>
+        </TheHeader>
+        <VStack w={"100%"} spacing={"15px"}>
+          <VStack spacing={"16px"}>
+            <Box bgColor={"white"} borderRadius={"40px"}>
+              <Image
+                src={MyPageCharacter}
+                alt="식선생"
+                placeholder="blur"
+                style={{ width: "104px", height: "auto" }}
+                quality={100}
+              />
+            </Box>
+            <Text
+              textAlign={"center"}
+              color={"#2F2F2F"}
+              fontWeight={"semibold"}
+              fontSize={"18px"}
+            >
+              {userData?.name}
+            </Text>
+          </VStack>
+          <TodayReportCard bgColor={"#FFFFFF"}>
+            <VStack spacing={"12px"} alignItems={"flex-start"}>
+              <Text color={"#00CE84"}>기본 정보</Text>
+              <HStack spacing={"32px"}>
+                <Text color={"#959595"} w={"67px"}>
+                  성별
+                </Text>
+                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
+                  {userData?.gender}
+                </Text>
+              </HStack>
+              <HStack spacing={"32px"}>
+                <Text color={"#959595"} w={"67px"}>
+                  나이
+                </Text>
+                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
+                  {userData?.age}
+                </Text>
+              </HStack>
+            </VStack>
+          </TodayReportCard>
+
+          <TodayReportCard>
+            <VStack spacing={"12px"} alignItems={"flex-start"}>
+              <Text color={"#00CE84"}>신체 정보</Text>
+              <HStack spacing={"32px"}>
+                <Text color={"#959595"} w={"67px"}>
+                  키
+                </Text>
+                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
+                  {userData?.height}
+                </Text>
+              </HStack>
+              <HStack spacing={"32px"}>
+                <Text color={"#959595"} w={"67px"}>
+                  체중
+                </Text>
+                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
+                  {userData?.weight}
+                </Text>
+              </HStack>
+              <HStack spacing={"32px"}>
+                <Text color={"#959595"} w={"67px"}>
+                  목표 체중
+                </Text>
+                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
+                  {userData?.targetweight}
+                </Text>
+              </HStack>
+            </VStack>
+          </TodayReportCard>
+
+          <TodayReportCard>
+            <VStack spacing={"12px"} alignItems={"flex-start"}>
+              <Text color={"#00CE84"}>오늘 하루 칼로리</Text>
+              <Text color={"#2F2F2F"}>아침 : </Text>
+              <Text color={"#2F2F2F"}>점심 :</Text>
+              <Text color={"#2F2F2F"}>저녁 :</Text>
+            </VStack>
+          </TodayReportCard>
+
+          <Text
+            fontSize={"18px"}
+            alignSelf={"flex-start"}
+            marginLeft={"15px"}
+            cursor={"pointer"}
+            onClick={() => {
+              localStorage.removeItem(`jwt`);
+              router.push("/");
+            }}
+          >
+            로그아웃
+          </Text>
+        </VStack>
+      </Flex>
+    </>
+  );
+};
+
+export default MyPageTemplate;
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index cc2b098..525e7a4 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -32,8 +32,8 @@ const Page = () => {
 
   useEffect(() => {
     const jwt = localStorage.getItem("jwt");
-
-    if (!jwt) return redirect("/");
+    const userInfo = localStorage.getItem("userInfo");
+    if (!jwt && !userInfo) return redirect("/");
   }, []);
 
   const onSubmit: SubmitHandler<DietMsgType> = async (data) => {
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 10db1c7..44bb7f5 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -7,135 +7,24 @@ 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 router = useRouter();
-
   const { data } = useUser();
 
-  return (
-    <>
-      <Flex
-        flexDir={"column"}
-        w={"100%"}
-        h={"100vh"}
-        pos={"relative"}
-        maxW={"390px"}
-        padding={"60px 22px 0px 22px"}
-        margin={"0 auto"}
-        alignItems={"center"}
-        bgColor={"#F4F4F4"}
-      >
-        <TheHeader>
-          <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
-            마이페이지
-          </Text>
-          <Box
-            pos={"absolute"}
-            right={"22px"}
-            cursor={"pointer"}
-            onClick={() => router.push("/main")}
-          >
-            <CloseIcon />
-          </Box>
-        </TheHeader>
-        <VStack w={"100%"} spacing={"15px"}>
-          <VStack spacing={"16px"}>
-            <Box bgColor={"white"} borderRadius={"40px"}>
-              <Image
-                src={MyPageCharacter}
-                alt="식선생"
-                placeholder="blur"
-                style={{ width: "104px", height: "auto" }}
-                quality={100}
-              />
-            </Box>
-            <Text
-              textAlign={"center"}
-              color={"#2F2F2F"}
-              fontWeight={"semibold"}
-              fontSize={"18px"}
-            >
-              김식단
-            </Text>
-          </VStack>
-          <TodayReportCard bgColor={"#FFFFFF"}>
-            <VStack spacing={"12px"} alignItems={"flex-start"}>
-              <Text color={"#00CE84"}>기본 정보</Text>
-              <HStack spacing={"32px"}>
-                <Text color={"#959595"} w={"67px"}>
-                  성별
-                </Text>
-                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  남
-                </Text>
-              </HStack>
-              <HStack spacing={"32px"}>
-                <Text color={"#959595"} w={"67px"}>
-                  나이
-                </Text>
-                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  21
-                </Text>
-              </HStack>
-            </VStack>
-          </TodayReportCard>
-
-          <TodayReportCard>
-            <VStack spacing={"12px"} alignItems={"flex-start"}>
-              <Text color={"#00CE84"}>신체 정보</Text>
-              <HStack spacing={"32px"}>
-                <Text color={"#959595"} w={"67px"}>
-                  키
-                </Text>
-                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  180cm
-                </Text>
-              </HStack>
-              <HStack spacing={"32px"}>
-                <Text color={"#959595"} w={"67px"}>
-                  체중
-                </Text>
-                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  80kg
-                </Text>
-              </HStack>
-              <HStack spacing={"32px"}>
-                <Text color={"#959595"} w={"67px"}>
-                  목표 체중
-                </Text>
-                <Text fontWeight={"semibold"} color={"#2F2F2F"}>
-                  80kg
-                </Text>
-              </HStack>
-            </VStack>
-          </TodayReportCard>
+  // const [userData, setUserData] = useState<UserInfoType>();
 
-          <TodayReportCard>
-            <VStack spacing={"12px"} alignItems={"flex-start"}>
-              <Text color={"#00CE84"}>오늘 하루 칼로리</Text>
-              <Text color={"#2F2F2F"}>아침 : </Text>
-              <Text color={"#2F2F2F"}>점심 :</Text>
-              <Text color={"#2F2F2F"}>저녁 :</Text>
-            </VStack>
-          </TodayReportCard>
+  // useEffect(() => {
+  //   let userInfo = localStorage.getItem("userInfo");
+  //   if (userInfo !== null) {
+  //     const userParsing: UserInfoType = JSON.parse(userInfo);
+  //     setUserData(userParsing);
+  //   }
+  // }, [setUserData]);
 
-          <Text
-            fontSize={"18px"}
-            alignSelf={"flex-start"}
-            marginLeft={"15px"}
-            cursor={"pointer"}
-            onClick={() => {
-              localStorage.removeItem(`jwt`);
-              router.push("/");
-            }}
-          >
-            로그아웃
-          </Text>
-        </VStack>
-      </Flex>
-    </>
-  );
+  return <MyPageTemplate />;
 };
 
 export default Page;