Skip to content

Commit

Permalink
fix(mypage) : 체험판 마이페이지 logic 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@chhw130
chhw130 committed Dec 16, 2023
1 parent 3472a72 commit 6691efe
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 125 deletions.
149 changes: 149 additions & 0 deletions component/template/MyPageTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/app/main/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
135 changes: 12 additions & 123 deletions src/app/mypage/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 6691efe

Please sign in to comment.