Merge pull request #91 from Nexters/feat/#85

Feat/#85

Author: ljh0608

src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx

@@ -1,28 +1,25 @@
-"use client";
+import { Metadata } from "next";
 
-import TarotInteraction from "../../../../../tarot/components/TarotInteraction";
-import { useState } from "react";
+import TarotReadingResultClient from "@/tarot/components/TarotReadingResultClient";
+export const generateMetadata = (): Metadata => {
+  return {
+    title: "타로냥 - AI 타로로 보는 오늘의 운세, 무료 타로 상담",
+    description: "고양이 타로술사 타로냥이 당신의 질문에 답해주는 AI 타로 서비스입니다.",
+    openGraph: {
+      title: "타로냥 - AI 타로로 보는 오늘의 운세, 무료 타로 상담",
+      description: "고양이 타로술사 타로냥이 당신의 질문에 답해주는 AI 타로 서비스입니다.",
+      images: [
+        {
+          url: "/opengraph-image.jpg",
+          width: 1200,
+          height: 630,
+          alt: "Tarot Reading Result",
+        },
+      ],
+    },
+  };
+};
 
-import TarotResultAfterView from "@/tarot/components/TarotResultAfterView";
-
-import { useTarotReadingResult } from "@/tarot/hooks/useTarotReadingResult";
-import { useParams } from "next/navigation";
-import TarotResultHeader from "@/tarot/components/TarotResultHeader";
-
-export default function TarotReadingResultPage() {
-  const { resultId } = useParams();
-  const [tarotInteraction, setTarotInteraction] = useState(true);
-  const { data, isLoading } = useTarotReadingResult(Number(resultId));
-
-  return (
-    <>
-      {!tarotInteraction && <TarotResultHeader />}
-
-      {tarotInteraction || isLoading ? (
-        <TarotInteraction setTarotInteraction={setTarotInteraction} tarotId={data?.tarot} />
-      ) : (
-        <TarotResultAfterView />
-      )}
-    </>
-  );
+export default function TarotReadingResultPage({ params }: { params: { resultId: string } }) {
+  return <TarotReadingResultClient resultId={params.resultId} />;
 }

src/tarot/components/TarotReadingResultClient.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+
+import TarotInteraction from "./TarotInteraction";
+import TarotResultAfterView from "@/tarot/components/TarotResultAfterView";
+import TarotResultHeader from "@/tarot/components/TarotResultHeader";
+import { useTarotReadingResult } from "@/tarot/hooks/useTarotReadingResult";
+
+export default function TarotReadingResultClient({ resultId }: { resultId: string }) {
+  const [tarotInteraction, setTarotInteraction] = useState(true);
+  const { data, isLoading } = useTarotReadingResult(Number(resultId));
+
+  return (
+    <>
+      {!tarotInteraction && <TarotResultHeader />}
+
+      {tarotInteraction || isLoading ? (
+        <TarotInteraction setTarotInteraction={setTarotInteraction} tarotId={data?.tarot} />
+      ) : (
+        <TarotResultAfterView />
+      )}
+    </>
+  );
+}