refactor : mainpage 구조

Refs:[#18]
chhw130 · Dec 14, 2023 · 1fa60ec · 1fa60ec
1 parent c2db775
commit 1fa60ec
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 37 deletions.
diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -1,6 +1,5 @@
 import { Divider, Flex, HStack, Heading, Text, VStack } from "@chakra-ui/react";
 import ChattingMsgCard from "../card/ChattingMsgCard";
-import UserChattingMsgCard from "./UserChattingMsgCard";
 import DietChattingMsgCart from "./DietChattingMsgCard";
 import ChattingInput from "../input/ChattingInput";
 import HealthIcon from "../icon/HealthIcon";
@@ -11,7 +10,9 @@ const ChattingRoom = () => {
       <Flex
         w={"100%"}
         bgColor={"#FFFFFF"}
-        h={"80%"}
+        h={"85%"}
+        maxH={"1150px"}
+        minH={"300px"}
         borderRadius={"12px 12px 0 0"}
         position={"absolute"}
         bottom={"0"}
@@ -23,7 +24,6 @@ const ChattingRoom = () => {
           padding={"13px 22px"}
           spacing={"0.5px"}
           zIndex={100}
-          bgColor={"white"}
         >
           <HStack spacing={"2px"}>
             <HealthIcon />
@@ -72,7 +72,7 @@ const ChattingRoom = () => {
             </Text>
           </ChattingMsgCard>
 
-          <UserChattingMsgCard>
+          {/* <UserChattingMsgCard>
             아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
           </UserChattingMsgCard>
           <UserChattingMsgCard>
@@ -95,7 +95,7 @@ const ChattingRoom = () => {
           </UserChattingMsgCard>
           <UserChattingMsgCard>
             아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
-          </UserChattingMsgCard>
+          </UserChattingMsgCard> */}
 
           <DietChattingMsgCart />
         </VStack>

diff --git a/component/card/DietStateCard.tsx b/component/card/DietStateCard.tsx
@@ -1,31 +1,29 @@
 import { Box, Card, HStack, Text } from "@chakra-ui/react";
-import Image from "next/image";
 import HealthMountainIcon from "../icon/HealthMountainIcon";
 
 const DietStateCard = () => {
   return (
-    <>
-      <Card
-        bg={"rgba(0, 0, 0, 0.2)"}
-        h={"70px"}
-        w={"346px"}
-        color={"#FFFFFF"}
-        padding={"22px"}
-        flexDir={"row"}
-        borderRadius={"12px"}
-      >
-        <HStack display={"flex"} margin={"0 auto"} w={"100%"} spacing={"18px"}>
-          <HealthMountainIcon />
-          <Box w={"70%"}>
-            <Text>
-              식단을 입력하시면
-              <br />
-              오늘의 솔루션을 드릴게요
-            </Text>
-          </Box>
-        </HStack>
-      </Card>
-    </>
+    <Card
+      bg={"rgba(0, 0, 0, 0.2)"}
+      margin={"0 auto"}
+      h={"70px"}
+      w={"346px"}
+      color={"#FFFFFF"}
+      padding={"22px"}
+      flexDir={"row"}
+      borderRadius={"12px"}
+    >
+      <HStack display={"flex"} margin={"0 auto"} w={"100%"} spacing={"18px"}>
+        <HealthMountainIcon />
+        <Box w={"70%"}>
+          <Text>
+            식단을 입력하시면
+            <br />
+            오늘의 솔루션을 드릴게요
+          </Text>
+        </Box>
+      </HStack>
+    </Card>
   );
 };
 

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text, VStack } from "@chakra-ui/react";
 import ChattingRoom from "../../../component/card/ChattingRoom";
 import DietStateCard from "../../../component/card/DietStateCard";
 import { useRouter } from "next/navigation";
@@ -27,8 +27,10 @@ const Page = () => {
             <UserIcon />
           </Text>
         </TheHeader>
-        <DietStateCard />
-        <ChattingRoom />
+        <VStack spacing={"20px"} w={"100%"}>
+          <DietStateCard />
+          <ChattingRoom />
+        </VStack>
       </Flex>
     </>
   );

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -3,8 +3,9 @@ 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 GoBackArrowIcon from "../../../component/icon/GoBackArrowIcon";
 import { useUser } from "../../../utils/hooks/useUser";
+import CloseIcon from "../../../component/icon/CloseIcon";
+import Image from "next/image";
 
 const Page = () => {
   const router = useRouter();
@@ -24,18 +25,38 @@ const Page = () => {
         alignItems={"center"}
       >
         <TheHeader>
+          <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
+            마이페이지
+          </Text>
           <Box
             pos={"absolute"}
+            right={"22px"}
             cursor={"pointer"}
             onClick={() => router.push("/main")}
           >
-            <GoBackArrowIcon />
+            <CloseIcon />
           </Box>
-          <Text margin={"0 auto"} fontSize={"20px"} fontWeight={"medium"}>
-            마이페이지
-          </Text>
         </TheHeader>
-        <VStack w={"100%"} spacing={"22px"} margin={"20px 0 0 0 "}>
+        <VStack w={"100%"} spacing={"15px"} margin={"20px 0 0 0 "}>
+          <VStack spacing={"3px"}>
+            <Image
+              src={
+                "https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"
+              }
+              style={{ width: "94px", height: "94px" }}
+              alt="식선생"
+              width={100}
+              height={100}
+            />
+            <Text
+              textAlign={"center"}
+              color={"#2F2F2F"}
+              fontWeight={"semibold"}
+              fontSize={"18px"}
+            >
+              김식단
+            </Text>
+          </VStack>
           <TodayReportCard>
             <VStack spacing={"12px"} alignItems={"flex-start"}>
               <Text color={"#959595"}>기본 정보</Text>