✂️ edit : ♻️ refactor : 카카오 공유하기 상수값 관리

dnd-side-project · Jun 11, 2024 · 934b02d · 934b02d
1 parent fb04b2e
commit 934b02d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/src/app/(Sub)/detail/[id]/page.tsx b/src/app/(Sub)/detail/[id]/page.tsx
@@ -8,24 +8,21 @@ import Header from '@/components/Header';
 import { Loading } from '@/components/Loading';
 import { PageAnimation } from '@/components/PageAnimation';
 import { HydrationProvider } from '@/components/Provider/HydrationProvider';
+import { OPEN_GRAPH } from '@/constants/meta';
 
-export async function generateMetadata(
-  { params }: { params: { id: string } },
-  parent: ResolvingMetadata
-): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
   const id = parseInt(params.id);
   const {
     poseInfo: { peopleCount, frameCount, tagAttributes },
   } = await getPoseDetail(id);
   const description = `${tagAttributes},${frameCount}컷,${peopleCount}인 포즈추천`;
-  const defaultOgTitle = (await parent).openGraph?.title;
 
   return {
     description,
     openGraph: {
-      title: defaultOgTitle,
-      description: '이 포즈는 어때요?',
-      images: ['/meta/og_detail.png'],
+      title: OPEN_GRAPH.detail.title,
+      description: OPEN_GRAPH.detail.description,
+      images: [OPEN_GRAPH.detail.image],
     },
   };
 }

diff --git a/src/constants/meta.ts b/src/constants/meta.ts
@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-export const META_STRING = {
+const META_STRING = {
   title: 'PosePicker | 포즈피커',
   description: {
     main: '포토부스에서 고민하는 당신을 위한 포즈 추천 서비스',
@@ -10,7 +10,7 @@ export const META_STRING = {
     // feed: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
   },
   image: {
-    og: '/meta/og_main.png',
+    main: '/meta/og_main.png',
     detail: '/meta/og_detail.png',
     kakao_share: 'https://www.posepicker.site/meta/og_kakao.png',
   },
@@ -22,6 +22,20 @@ export const META_STRING = {
   },
 };
 
+export const OPEN_GRAPH = {
+  detail: {
+    title: META_STRING.title,
+    description: '이 포즈는 어때요?',
+    image: META_STRING.image.detail,
+  },
+  kakao_share: {
+    title: '이 포즈는 어때요?',
+    description: META_STRING.description.sub,
+    button: '포즈 확인하기',
+    imageURL: META_STRING.image.kakao_share,
+  },
+};
+
 const METADATA: Metadata = {
   title: {
     default: `${META_STRING.title}`,
@@ -38,7 +52,7 @@ const METADATA: Metadata = {
   openGraph: {
     title: META_STRING.title,
     description: META_STRING.description.sub,
-    images: [META_STRING.image.og],
+    images: [META_STRING.image.main],
   },
   twitter: {
     title: META_STRING.title,

diff --git a/src/hooks/useKakaoShare.ts b/src/hooks/useKakaoShare.ts
@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 
 import { KAKAO_JS_KEY } from '@/constants/env';
-import { META_STRING } from '@/constants/meta';
+import { OPEN_GRAPH } from '@/constants/meta';
 
 export default function useKakaoShare() {
   useEffect(() => {
@@ -26,9 +26,7 @@ export default function useKakaoShare() {
       kakao.Link.sendDefault({
         objectType: 'feed',
         content: {
-          title: '이 포즈는 어때요?',
-          description: META_STRING.description.sub,
-          imageUrl: META_STRING.image.kakao_share,
+          ...OPEN_GRAPH.kakao_share,
           link: {
             mobileWebUrl: uri,
             webUrl: uri,