Merge pull request #25 from chhw130/dev

feat(metadata) : 메타데이터 추가

component/button/MainButton.tsx

@@ -13,6 +13,7 @@ const MainButton = ({
   color,
   _disabled,
   _hover,
+  isLoading,
 }: ButtonProps) => {
   return (
     <Button
@@ -29,6 +30,7 @@ const MainButton = ({
       type={type}
       _disabled={_disabled}
       _hover={_hover}
+      isLoading={isLoading}
     >
       {children}
     </Button>

component/card/DietStateCard.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, HStack, Text } from "@chakra-ui/react";
-import HealthMountainIcon from "../icon/HealthMountainIcon";
 import { ReactNode } from "react";
 
 const DietStateCard = ({ children }: { children: ReactNode }) => {

component/form/UserPhysicForm.tsx

@@ -159,6 +159,7 @@ const UserPhysicForm = ({ userInfo }: UserPhysicsFormPropsType) => {
           <MainButton
             w={"100%"}
             h={"52px"}
+            isLoading={isLoading}
             _disabled={{
               bgColor: "#D2D2D2",
               color: "#FFFFFF",

component/template/SignupTemplate.tsx

@@ -29,8 +29,6 @@ const SignupTemplate = ({ jwtToken }: { jwtToken: JwtToken }) => {
   });
   const { funnel, setFunnel } = useFunnel("userAgreement");
 
-  localStorage.setItem(`jwt`, jwtToken.jwt);
-
   return (
     <>
       <Progress

src/app/layout.tsx

@@ -1,11 +1,32 @@
 import type { Metadata } from "next";
 import { ChakraLayout } from "@/app/ChakraLayout";
 import QueryLayout from "./QueryLayout";
-import { ColorModeScript } from "@chakra-ui/react";
+import OGImg from "../../utils/img/OGImg.jpg";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  // metadataBase: new URL("https://www.choeaein.click/"),
+  title: "식선생",
+  description: "당신의 식단 관리 서비스",
+  openGraph: {
+    title: "식선생",
+    description: "당신의 식단 관리 서비스",
+    // url: "https://www.choeaein.click/",
+    siteName: "foodteacher",
+    images: [
+      {
+        url: "../../utils/img/OGImg.jpg",
+        width: 800,
+        height: 600,
+      },
+      {
+        url: "../../utils/img/OGImg.jpg",
+        width: 1800,
+        height: 1600,
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
 };
 
 export default function RootLayout({

src/app/main/page.tsx

@@ -7,6 +7,8 @@ import TheHeader from "../../../component/header/TheHeader";
 import UserIcon from "../../../component/icon/UserIcon";
 import TextLogoIcon from "../../../component/icon/TextLogoIcon";
 import HealthMountainIcon from "../../../component/icon/HealthMountainIcon";
+import Image from "next/image";
+import mainStage1 from "../../../utils/img/mainStage1.png";
 
 const Page = () => {
   const router = useRouter();
@@ -63,13 +65,22 @@ const Page = () => {
                   <Text fontSize={"16px"} color={"#787878"}>
                     200Kcal 초과
                   </Text>
-                  <Heading>
-                    오늘 <Text color={"#40E98E"}>30분 이상 달려야</Text>
+                  <Heading fontSize={"22px"}>
+                    오늘{" "}
+                    <Text as={"a"} color={"#40E98E"}>
+                      30분 이상 달려야
+                    </Text>
                     <br />
                     현재 몸무게 안정권 유지
                   </Heading>
                 </Box>
-                <HealthMountainIcon />
+                <Image
+                  src={mainStage1}
+                  alt="메인 캐릭터"
+                  placeholder="blur"
+                  style={{ width: "104px", height: "auto" }}
+                  quality={100}
+                />
               </HStack>
             </DietStateCard>
           )}

utils/api/AxiosSetting.ts

@@ -9,8 +9,6 @@ const instacne = axios.create({
   },
 });
 
-const jwtToken = localStorage.getItem(`jwt`);
-
 export interface DietResponse {
   아침: string;
   점심: string;
@@ -34,9 +32,13 @@ export const postKakaoCode = async (code: string) => {
 };
 
 export const postUserInfo = async (userInfo: UserInfoType) => {
+  const jwtToken = localStorage.getItem(`jwt`);
+  console.log(jwtToken);
+
   const res = await instacne.post("", userInfo, {
     headers: { Authorization: `Bearer ${jwtToken}` },
   });
+
   return res.data;
 };
 

utils/hooks/usePostUserInfo.ts

@@ -1,13 +1,14 @@
 import { useMutation } from "@tanstack/react-query";
 import { postUserInfo } from "../api/AxiosSetting";
+import { UserInfoType } from "../../component/template/SignupTemplate";
 
 export const usePostUserInfo = () => {
   const {
     data,
     mutateAsync: postUserInfoMutation,
     isLoading,
   } = useMutation({
-    mutationFn: () => postUserInfo(),
+    mutationFn: (userInfo: UserInfoType) => postUserInfo(userInfo),
     onError: () => {},
     onSuccess: () => {},
   });