feat: 오픈 그래프 설정 및 reponse 수정

Kernel360 · Apr 1, 2024 · 8b48555 · 8b48555
1 parent 5777c3e
commit 8b48555
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 10 deletions.
diff --git a/frontend/public/logo/og-logo.png b/frontend/public/logo/og-logo.png
diff --git a/frontend/src/app/(with-header)/detail/[travel]/[id]/page.tsx b/frontend/src/app/(with-header)/detail/[travel]/[id]/page.tsx
@@ -9,34 +9,50 @@ import {
 import SpotDetail from '@/app/_components/mypage/spot/SpotDetail';
 import { myInfoSchema } from '@/types/response';
 import React from 'react';
+import { Metadata } from 'next';
+import { createMetadata } from '@/utils';
 
-export async function generateMetaData({
+export async function generateMetadata({
   params,
 }: {
   params: { id: number; travel: string };
-}) {
+}): Promise<Metadata> {
   if (params.travel === 'spot') {
     const spotDetail = await getSpotDetail(params.id);
     if (spotDetail.status === 'succeed') {
-      return {
+      const data = {
         title: spotDetail.data.place_name,
         description: spotDetail.data.description,
+        image: spotDetail.data.image_urls[0],
+        url: `https://yigil.co.kr/detail/spot/${params.id}`,
+      };
+      return createMetadata(data);
+    } else
+      return {
+        title: '장소 상세 페이지',
+        description: '장소 상세 설명',
         openGraph: {
-          images: [spotDetail.data.image_urls[0]],
+          images: ['/public/logo/og-logo.png'],
         },
       };
-    }
   } else {
     const courseDetail = await getCourseDetail(params.id);
     if (courseDetail.status === 'succeed') {
-      return {
+      const data = {
         title: courseDetail.data.title,
         description: courseDetail.data.description,
+        image: courseDetail.data.map_static_image_url,
+        url: `https://yigil.co.kr/detail/course/${params.id}`,
+      };
+      return createMetadata(data);
+    } else
+      return {
+        title: '코스 상세 페이지',
+        description: '코스 상세 설명',
         openGraph: {
-          images: [courseDetail.data.map_static_image_url],
+          images: ['/public/logo/favicon.svg'],
         },
       };
-    }
   }
 }
 
@@ -52,7 +68,7 @@ export default async function SpotDetailPage({
   if (params.travel === 'spot') {
     const spotDetail = await getSpotDetail(params.id);
 
-    if (!spotDetail.success)
+    if (spotDetail.status === 'failed')
       return (
         <div className="w-full h-full flex flex-col break-words justify-center items-center text-3xl text-center text-main">
           장소 상세 정보를 불러오는데 실패했습니다. <hr /> 다시 시도해주세요.

diff --git a/frontend/src/app/(with-header)/place/[id]/page.tsx b/frontend/src/app/(with-header)/place/[id]/page.tsx
@@ -1,5 +1,7 @@
 import PlaceDetailWithMySpot from '@/app/_components/place/detail/PlaceDetailWithMySpot';
 
+
+
 export default async function PlaceDetailPage({
   params,
 }: {

diff --git a/frontend/src/app/(without-header)/login/page.tsx b/frontend/src/app/(without-header)/login/page.tsx
@@ -11,6 +11,8 @@ import GoogleLoginButton from '@/app/_components/ui/button/GoogleLoginButton';
 import NaverLoginButton from '@/app/_components/ui/button/NaverLoginButton';
 import { googleOAuthEndPoint } from '@/app/endpoints/api/auth/callback/google/constants';
 
+
+
 export default async function LoginPage() {
   const { KAKAO_ID, GOOGLE_CLIENT_ID, NAVER_SEARCH_ID } = process.env;
 

diff --git a/frontend/src/app/_components/mypage/hooks/myPageActions.ts b/frontend/src/app/_components/mypage/hooks/myPageActions.ts
@@ -139,7 +139,7 @@ export const getSpotDetail = async (spotId: number) => {
     },
   });
   const result = await res.json();
-  const parsedSpotDetail = mypageSpotDetailSchema.safeParse(result);
+  const parsedSpotDetail = parseResult(mypageSpotDetailSchema, result);
   return parsedSpotDetail;
 };
 

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -21,6 +21,20 @@ export const metadata: Metadata = {
   },
 
   description: '지도 기반 장소 기록·공유 서비스',
+  openGraph: {
+    title: '이길로그 홈페이지',
+    description: '지도 기반 장소 기록·공유 서비스',
+    images: ['/public/logo/og-logo.png'],
+    type: 'website',
+    siteName: '이길로그',
+    url: 'https://yigil.co.kr',
+    locale: 'ko-KR',
+  },
+  twitter: {
+    title: '이길로그 홈페이지',
+    description: '지도 기반 장소 기록·공유 서비스',
+    images: ['/public/logo/og-logo.png'],
+  },
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -97,3 +97,33 @@ export function parseResult<TOutput, TInput>(
   return { status: 'succeed', data: result.data };
 }
 
+export async function createMetadata(data: {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+}) {
+  const { title, description, image, url } = data;
+  return {
+    title: title,
+    description: description,
+    openGraph: {
+      siteName: '이길로그',
+      url: url,
+      locale: 'ko-KR',
+      images: {
+        url: image,
+        alt: title,
+      },
+      type: 'website',
+    },
+    twitter: {
+      title: title,
+      description: description,
+      images: {
+        url: image,
+        alt: `${title}-이미지`,
+      },
+    },
+  };
+}