♻️ Refactor data fetch function

soheeyeo · Feb 14, 2024 · 5b37e71 · 5b37e71
1 parent 1208bbe
commit 5b37e71
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 58 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -341,6 +341,12 @@ header {
     color: var(--main-color);
 }
 
+.loading_txt_result {
+    padding-top: 30px;
+    font-size: 18px;
+    color: var(--main-color);
+}
+
 @keyframes bounce {
     0%,
     100% {

diff --git a/app/loading.js b/app/loading.js
@@ -1,4 +1,4 @@
-export default function Loading({ style }) {
+export default function Loading({ style, result }) {
     return (
         <section className={`loading_section ${style ? style : "common"}`}>
             <div className="loading_container">
@@ -7,6 +7,11 @@ export default function Loading({ style }) {
                 <div className="loading_drop"></div>
             </div>
             <h2 className="loading_txt">Loading...</h2>
+            {result ? (
+                <p className="loading_txt_result">초콜릿을 찾고 있어요🍫</p>
+            ) : (
+                ""
+            )}
         </section>
     );
 }
diff --git a/app/test/result/[type]/Content.js b/app/test/result/[type]/Content.js
@@ -0,0 +1,59 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import Loading from "@/app/loading";
+
+export default function Content({ styles, item }) {
+    const data = item;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setIsLoading(true);
+        }, 3000);
+    });
+
+    return (
+        <>
+            {isLoading ? (
+                <section className={styles.result_section}>
+                    <h1 className={styles.result_tit}>
+                        이 초콜릿을 추천드려요.
+                    </h1>
+                    <p className={styles.result_msg}>
+                        제품을 클릭하면 상세 페이지로 이동합니다.
+                    </p>
+                    <div className={styles.result_item_container}>
+                        <Link href={"/detail/" + data.id}>
+                            <div className={styles.result_feature_container}>
+                                <div className={styles.result_feature_box}>
+                                    <p>{data.country}</p>
+                                </div>
+                                <div className={styles.result_feature_box}>
+                                    <p>{data.type}</p>
+                                </div>
+                            </div>
+                            <div className={styles.result_img_wrapper}>
+                                <img
+                                    className={styles.result_img}
+                                    src={data.image}
+                                />
+                            </div>
+                            <div className={styles.result_info_container}>
+                                <h4 className={styles.result_brand_name}>
+                                    {data.brand}
+                                </h4>
+                                <p className={styles.result_item_name}>
+                                    {data.name}
+                                </p>
+                            </div>
+                        </Link>
+                    </div>
+                </section>
+            ) : (
+                <Loading style={"data_f"} result={"result"} />
+            )}
+        </>
+    );
+}
diff --git a/app/test/result/[type]/page.js b/app/test/result/[type]/page.js
@@ -1,75 +1,38 @@
-"use client";
 import styles from "../../test.module.css";
 import testData from "@/util/testData";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import Loading from "@/app/loading";
+import Content from "./Content";
 
-export default function Result({ params: { type } }) {
-    const [data, setData] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
+export const metadata = {
+    description: "초콜릿 추천 테스트 결과",
+    openGraph: {
+        description: "초콜릿 추천 테스트 결과",
+    },
+};
 
+async function getData(resultItem) {
+    const res = await fetch(`${process.env.URL}/api/result`, {
+        method: "POST",
+        body: JSON.stringify(resultItem.name),
+    });
+    const result = await res.json();
+    return result;
+}
+
+export default async function Result({ params: { type } }) {
     const testResult = testData.result;
-    const result = testResult.find((data) => {
+    const resultItem = testResult.find((data) => {
         if (Array.isArray(data.type)) {
             return data.type.includes(type);
         } else {
             return data.type === type;
         }
     });
 
-    useEffect(() => {
-        fetch("/api/result", {
-            method: "POST",
-            body: JSON.stringify(result.name),
-        })
-            .then((res) => res.json())
-            .then((result) => {
-                setData(result);
-                setIsLoading(true);
-            });
-    }, []);
+    const item = await getData(resultItem);
 
     return (
         <main className={styles.result_main}>
-            {isLoading ? (
-                <section className={styles.result_section}>
-                    <h1 className={styles.result_tit}>
-                        이 초콜릿을 추천드려요.
-                    </h1>
-                    <p className={styles.result_msg}>
-                        제품을 클릭하면 상세 페이지로 이동합니다.
-                    </p>
-                    <div className={styles.result_item_container}>
-                        <Link href={"/detail/" + data.id}>
-                            <div className={styles.result_feature_container}>
-                                <div className={styles.result_feature_box}>
-                                    <p>{data.country}</p>
-                                </div>
-                                <div className={styles.result_feature_box}>
-                                    <p>{data.type}</p>
-                                </div>
-                            </div>
-                            <div className={styles.result_img_wrapper}>
-                                <img
-                                    className={styles.result_img}
-                                    src={data.image}
-                                />
-                            </div>
-                            <div className={styles.result_info_container}>
-                                <h4 className={styles.result_brand_name}>
-                                    {data.brand}
-                                </h4>
-                                <p className={styles.result_item_name}>
-                                    {data.name}
-                                </p>
-                            </div>
-                        </Link>
-                    </div>
-                </section>
-            ) : (
-                <Loading style={"data_f"} />
-            )}
+            <Content styles={styles} item={item} />
         </main>
     );
 }