feat(mypage) : 마이페이지 구성요소 및 레이아웃 세팅

Refs:[#20]
potenday-project · Dec 12, 2023 · 85de0cf · 85de0cf
1 parent 9b31624
commit 85de0cf
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 38 deletions.
diff --git a/component/card/ChattingMsgCard.tsx b/component/card/ChattingMsgCard.tsx
@@ -8,7 +8,7 @@ const ChattingMsgCard = ({ children }: CardProps) => {
         bgColor={"#F5F5F9"}
         width={"max-content"}
         shadow={"none"}
-        margin={"10px 0px 10px 22px"}
+        margin={"0px 0px 0px 22px"}
       >
         <CardBody
           color={"#2F2F2F"}

diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Flex, Heading, Text } from "@chakra-ui/react";
+import { Box, Divider, Flex, Heading, Text, VStack } from "@chakra-ui/react";
 import ChattingMsgCard from "../card/ChattingMsgCard";
 import UserChattingMsgCard from "./UserChattingMsgCard";
 import DietChattingMsgCart from "./DietChattingMsgCard";
@@ -31,7 +31,12 @@ const ChattingRoom = () => {
           </Text>
           <Divider padding={"4.5px 0"} color={"#ECECEC"} />
         </Box>
-        <Box>
+        <VStack
+          w={"100%"}
+          alignItems={"flex-start"}
+          spacing={"16px"}
+          marginTop={"10px"}
+        >
           <ChattingMsgCard>반갑습니다 00님</ChattingMsgCard>
           <ChattingMsgCard>
             자, 오늘은 어떤 음식을 드셨나요?
@@ -47,7 +52,7 @@ const ChattingRoom = () => {
           </UserChattingMsgCard>
 
           <DietChattingMsgCart />
-        </Box>
+        </VStack>
         <ChattingInput />
       </Flex>
     </>

diff --git a/component/card/DietChattingMsgCard.tsx b/component/card/DietChattingMsgCard.tsx
@@ -18,7 +18,7 @@ const DietChattingMsgCart = ({}: CardProps) => {
         w={"312px"}
         bgColor={"#F5F5F9"}
         shadow={"none"}
-        margin={"10px 0px 10px 22px"}
+        margin={"0px 0px 0px 22px"}
       >
         <CardHeader padding={"14px 16px 0 16px"}>
           <Flex justifyContent={"space-between"} textAlign={"center"}>

diff --git a/component/card/UserChattingMsgCard.tsx b/component/card/UserChattingMsgCard.tsx
@@ -7,9 +7,10 @@ const UserChattingMsgCard = ({ children }: CardProps) => {
         bgColor={"#F5F5F9"}
         width={"max-content"}
         shadow={"none"}
-        margin={"10px 22px 20px 0px"}
+        margin={"0px 22px 0px 0px"}
         float={"right"}
         fontSize={"18px"}
+        alignSelf={"flex-end"}
       >
         <CardBody
           color={"#2F2F2F"}

diff --git a/component/header/TheHeader.tsx 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 (
+    <>
+      <Flex
+        as={"header"}
+        position={"fixed"}
+        top={"0"}
+        padding={"4px 22px"}
+        w={"100%"}
+        h={"52px"}
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
+        {children}
+      </Flex>
+    </>
+  );
+};
+
+export default TheHeader;
diff --git a/src/app/detail/page.tsx 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 (
+    <>
+      <Flex
+        flexDir={"column"}
+        w={"100%"}
+        h={"100vh"}
+        pos={"relative"}
+        maxW={"390px"}
+        padding={"60px 22px 0px 22px"}
+        margin={"0 auto"}
+        alignItems={"center"}
+      >
+        <TheHeader>
+          <Text
+            pos={"fixed"}
+            onClick={() => router.push("/main")}
+            cursor={"pointer"}
+          >
+            {"<"}
+          </Text>
+          <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
+            오늘의 칼로리 레포트
+          </Text>
+        </TheHeader>
+
+        <VStack w={"100%"} spacing={"17px"}>
+          <TodayReportCard>
+            00님의 하루 칼로리
+            <br />
+            <Text fontWeight={"semibold"}>아침 : 계란후라이 200 kcal</Text>
+            <Text fontWeight={"semibold"}>점심 : 짜장면 1000 kcal</Text>
+            <Text fontWeight={"semibold"}>저녁 : 마라탕 800 kcal</Text>
+          </TodayReportCard>
+          <TodayReportCard>
+            00님께 드리는 팩폭
+            <br />
+            <Text fontWeight={"semibold"}>기초대사량에서 300 Kcal 초과</Text>
+            <Text>권장 운동</Text>
+            <Text fontWeight={"semibold"}>걷기 운동 1시간 이상</Text>
+          </TodayReportCard>
+        </VStack>
+      </Flex>
+    </>
+  );
+};
+
+export default Page;
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -3,6 +3,7 @@ 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();
@@ -19,20 +20,12 @@ const Page = () => {
         bgColor={"#D9D9D9"}
         alignItems={"center"}
       >
-        <Flex
-          as={"header"}
-          position={"fixed"}
-          top={"0"}
-          justifyContent={"space-between"}
-          padding={"4px 22px"}
-          bgColor={"#D9D9D9"}
-          w={"100%"}
-        >
+        <TheHeader>
           <Text>로고</Text>
           <Text onClick={() => router.push("/mypage")} cursor={"pointer"}>
             마이페이지
           </Text>
-        </Flex>
+        </TheHeader>
         <DietStateCard />
         <ChattingRoom />
       </Flex>

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -2,6 +2,7 @@
 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();
@@ -17,13 +18,7 @@ const Page = () => {
         margin={"0 auto"}
         alignItems={"center"}
       >
-        <Flex
-          as={"header"}
-          position={"fixed"}
-          top={"0"}
-          padding={"4px 22px"}
-          w={"100%"}
-        >
+        <TheHeader>
           <Text
             pos={"fixed"}
             onClick={() => router.push("/main")}
@@ -32,25 +27,24 @@ const Page = () => {
             {"<"}
           </Text>
           <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
-            오늘의 칼로리 레포트
+            마이페이지
           </Text>
-        </Flex>
-
-        <VStack w={"100%"} spacing={"17px"}>
-          <TodayReportCard>
-            00님의 하루 칼로리
-            <br />
-            <Text fontWeight={"semibold"}>아침 : 계란후라이 200 kcal</Text>
-            <Text fontWeight={"semibold"}>점심 : 짜장면 1000 kcal</Text>
-            <Text fontWeight={"semibold"}>저녁 : 마라탕 800 kcal</Text>
-          </TodayReportCard>
+        </TheHeader>
+        <VStack w={"100%"} spacing={"22px"} margin={"20px 0 0 0 "}>
           <TodayReportCard>
-            00님께 드리는 팩폭
+            내 정보
             <br />
-            <Text fontWeight={"semibold"}>기초대사량에서 300 Kcal 초과</Text>
-            <Text>권장 운동</Text>
-            <Text fontWeight={"semibold"}>걷기 운동 1시간 이상</Text>
+            <Text fontWeight={"semibold"}>이름</Text>
+            <Text fontWeight={"semibold"}>성별</Text>
+            <Text fontWeight={"semibold"}>나이</Text>
+            <Text fontWeight={"semibold"}>체중</Text>
+            <Text fontWeight={"semibold"}>목표체중</Text>
           </TodayReportCard>
+          <TodayReportCard>오늘의 식단</TodayReportCard>
+
+          <Text fontSize={"18px"} alignSelf={"flex-start"} marginLeft={"15px"}>
+            로그아웃
+          </Text>
         </VStack>
       </Flex>
     </>