hotfix: 매칭테스트 결과 ssr로 변경, 카카오톡 공유 키 오류 해결

team-acode · Feb 1, 2024 · 3730d7a · 3730d7a
1 parent f39490a
commit 3730d7a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 64 deletions.
diff --git a/.env b/.env
diff --git a/app/find-taste/result/page.tsx b/app/find-taste/result/page.tsx
@@ -1,36 +1,16 @@
-'use client';
-
 import UserStyle from '@/components/matchingtest/UserStyle';
 import Similar from '@/components/matchingtest/Similar';
 import ResultNav from '@/components/matchingtest/ResultNav';
 import Link from 'next/link';
-import { useState, useEffect } from 'react';
-import ResultModal from '@/components/matchingtest/ResultModal';
+// import ResultModal from '@/components/matchingtest/ResultModal';
+import ShareButton from '@/components/matchingtest/ShareButton';
+import { headers } from 'next/headers';
 
 interface ResultPageProps {
   searchParams: { [key: string]: string | undefined };
 }
 
-interface Family {
-  familyKorName: string;
-  familyEngName: string;
-  summary: string;
-  icon: string;
-  keyword: string[];
-}
-
-interface Fragrance {
-  fragranceId: string;
-  fragranceName: string;
-  brandName: string;
-  familyName: string;
-  thumbnail: string;
-}
-
-const Page = ({ searchParams }: ResultPageProps) => {
-  const [families, setFamilies] = useState<Family[]>([]);
-  const [fragrances, setFragrances] = useState<Fragrance[]>([]);
-
+const Page = async ({ searchParams }: ResultPageProps) => {
   const styles = {
     style1: searchParams.vibe ? searchParams.vibe[0] : '',
     style2: searchParams.vibe ? searchParams.vibe[1] : '',
@@ -51,50 +31,26 @@ const Page = ({ searchParams }: ResultPageProps) => {
     scent: searchParams.individuality,
     style: searchParams.vibe,
   };
-  const datafetch = async () => {
-    try {
-      const res = await fetch('/api/extract', {
-        method: 'POST',
-        body: JSON.stringify({ payload }),
-      });
 
-      if (!res.ok) {
-        throw new Error(`Failed to send request: ${res.status}`);
-      }
+  const protocol = process?.env.NODE_ENV === 'development' ? 'http' : 'https';
+  const host = headers().get('host');
 
-      const responseData = await res.json();
-      setFamilies(responseData.families);
-      setFragrances(responseData.fragrances);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error fetching data:', error);
-    }
-  };
+  const res = await fetch(`${protocol}://${host}/api/extract`, {
+    method: 'POST',
+    body: JSON.stringify({ payload }),
+  });
 
-  useEffect(() => {
-    datafetch();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  if (!res.ok) return null;
 
-  const [isModalOpen, setModalOpen] = useState(false);
-  const handleShareClick = () => {
-    setModalOpen(true);
-  };
+  const responseData = await res.json();
 
   return (
     <div>
       <ResultNav />
-      <UserStyle families={families} />
-      <Similar fragrance={fragrances} style={styles} />
+      <UserStyle families={responseData.families} />
+      <Similar fragrance={responseData.fragrances} style={styles} />
       <div className="flex flex-row mt-[79px] justify-center mx-4 gap-x-[11px] pb-[28px]">
-        <button
-          type="button"
-          className="h2 rounded bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
-          onClick={handleShareClick}
-        >
-          공유하기
-        </button>
-
+        <ShareButton />
         <Link href="/">
           <button
             type="button"
@@ -104,8 +60,6 @@ const Page = ({ searchParams }: ResultPageProps) => {
           </button>
         </Link>
       </div>
-
-      {isModalOpen && <ResultModal onClose={() => setModalOpen(false)} />}
     </div>
   );
 };

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -7,7 +7,7 @@ const page = () => {
   const host = headers().get('host');
 
   const redirectUri = `${protocol}://${host}/login/kakao`;
-  const apiKey = process.env.KAKAO_REST_API_KEY;
+  const apiKey = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
   const kakaoLoginLink = `https://kauth.kakao.com/oauth/authorize?client_id=${apiKey}&redirect_uri=${redirectUri}&response_type=code`;
 
   return (

diff --git a/components/matchingtest/ResultModal.tsx b/components/matchingtest/ResultModal.tsx
@@ -71,7 +71,7 @@ const ResultModal = ({ onClose }: ResultModalProps) => {
   const kakaoShare = () => {
     if (window.Kakao) {
       const kakao = window.Kakao;
-      const appKey = process.env.NEXT_PUBLIC_KAKAO_APP_KEY;
+      const appKey = process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY;
       const templateId = 103843;
       if (!kakao.isInitialized()) {
         kakao.init(appKey);
@@ -84,6 +84,7 @@ const ResultModal = ({ onClose }: ResultModalProps) => {
       });
     }
   };
+
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"

diff --git a/components/matchingtest/ShareButton.tsx b/components/matchingtest/ShareButton.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import ResultModal from '@/components/matchingtest/ResultModal';
+import React, { useState } from 'react';
+
+const ShareButton = () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const handleShareClick = () => {
+    setModalOpen(true);
+  };
+
+  return (
+    <>
+      {isModalOpen ? <ResultModal onClose={() => setModalOpen(false)} /> : null}
+      <button
+        type="button"
+        className="h2 rounded bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
+        onClick={handleShareClick}
+      >
+        공유하기
+      </button>
+    </>
+  );
+};
+
+export default ShareButton;