Merge branch 'request' of https://github.com/AJTKS/AJTKS-client into …

…request
AJTKS · May 20, 2024 · 44b761e · 44b761e
2 parents a0008bd + f51c51e
commit 44b761e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 48 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,7 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/" element={<MainPage />} />
-        <Route path="/result/:task_id" element={<ResultPage />} />
+        <Route path="/result" element={<ResultPage />} />
       </Routes>
     </Router>
   );

diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx
@@ -40,7 +40,10 @@ const MainPage: React.FC = () => {
 
       const { task_id } = response.data;
       console.log("File uploaded successfully, task ID:", task_id);
-      navigate(`/result/${task_id}`);
+
+      setTimeout(() => {
+        navigate("/result", { state: { taskId: task_id } });
+      }, 2000);
     } catch (error) {
       console.error("Error uploading file:", error);
       setIsAnalyzing(false);
@@ -119,6 +122,7 @@ const MainPage: React.FC = () => {
       {isAnalyzing && (
         <div className="fixed inset-0 bg-white bg-opacity-75 flex flex-col justify-center items-center">
           <img className="w-auto h-40 animate-pulse" src="Group 1.svg" alt="" />
+
           <div
             className="text-center text-black text-2xl font-normal mb-4"
             style={{ fontFamily: "Inter" }}

diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx
@@ -1,39 +1,47 @@
 import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import axios from "axios";
 
+const decodeUnicode = (str: string) => {
+  return str.replace(/\\u[\dA-F]{4}/gi, (match) => {
+    return String.fromCharCode(parseInt(match.replace(/\\u/g, ""), 16));
+  });
+};
+
 const ResultPage = () => {
-  const { task_id } = useParams<{ task_id: string }>();
-  const [searchResult, setSearchResult] = useState<any>(null);
+  const location = useLocation();
+  const { taskId } = location.state || {};
+  const [searchResult, setSearchResult] = useState<any[]>([]);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
+    if (!taskId) {
+      setError("Task ID가 제공되지 않았습니다.");
+      return;
+    }
+
     const fetchResult = async () => {
       try {
         const response = await axios.get(
-          `https://ajtksbackend.p-e.kr/task/${task_id}`
+          `https://ajtksbackend.p-e.kr/task/${taskId}`
         );
-        const { status, searchResult } = response.data;
+        const { searchResult } = response.data;
 
-        if (status === "completed") {
-          const decodedResult = searchResult.map((result: any) => ({
-            ...result,
-            musicName: decodeURIComponent(escape(result.musicName)),
-            singer: decodeURIComponent(escape(result.singer)),
-          }));
-          setSearchResult(decodedResult);
-        } else {
-          setTimeout(fetchResult, 3000);
-        }
+        const decodedResult = searchResult.map((result: any) => ({
+          ...result,
+          musicName: decodeUnicode(result.musicName),
+          singer: decodeUnicode(result.singer),
+        }));
+        setSearchResult(decodedResult);
       } catch (error) {
         console.error("Error fetching task status:", error);
         setError("결과를 가져오는 중 오류가 발생했습니다.");
       }
     };
 
     fetchResult();
-  }, [task_id]);
+  }, [taskId]);
 
   if (error) {
     return (
@@ -51,20 +59,6 @@ const ResultPage = () => {
     );
   }
 
-  if (!searchResult) {
-    return (
-      <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-75">
-        <img className="w-40 h-40 animate-pulse" src="Group 1.png" alt="" />
-        <div
-          className="text-center text-black text-2xl font-normal mb-4"
-          style={{ fontFamily: "Inter" }}
-        >
-          분석 중입니다...
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="overflow-hidden w-full min-h-screen fixed inset-0 flex flex-col items-center justify-center">
       <img
@@ -76,47 +70,38 @@ const ResultPage = () => {
         추천 음악 목록
       </div>
       <div className="relative z-10 mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 px-4">
-        {searchResult.map((result: any, index: number) => (
+        {searchResult.map((result, index) => (
           <div
             key={index}
             className="relative w-[172px] h-[228px] rounded-tl-[38px] overflow-hidden bg-white bg-opacity-60 shadow-md border border-white backdrop-blur-md"
           >
             <div className="w-full h-[172px] bg-gray-300">
               <img
                 className="w-full h-full"
-                src={result.image}
+                src={`path-to-image-${index + 1}.jpg`}
                 alt={`Music recommendation ${index + 1}`}
               />
             </div>
             <div className="p-2">
-              <div className="text-black text-sm font-bold">
+              <div className="text-black text-lg font-bold">
                 {result.musicName}
               </div>
-              <div className="text-gray-700 text-xs">{result.singer}</div>
+              <div className="text-gray-700 text-sm">{result.singer}</div>
             </div>
           </div>
         ))}
       </div>
       <div className="relative z-10 mt-10 w-full max-w-4xl px-4">
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-gray-300 p-6 rounded-lg shadow-md">
-          <div className="w-full sm:w-1/3 bg-gray-300">
-            <img
-              className="w-full h-full"
-              src={searchResult[0]?.featuredImage}
-              alt="Featured music"
-            />
-          </div>
-        </div>
         <div className="flex justify-between w-full mt-4">
           <div className="bg-black bg-opacity-80 text-blue-400 text-sm font-bold px-4 py-2 rounded-full">
             음악 설명 by MU-LLaMA
           </div>
-          <div
-            className="bg-blue-800 text-white text-base font-bold px-4 py-2 rounded-full cursor-pointer transition duration-200 ease-in-out hover:bg-blue-700 active:bg-blue-900 active:scale-95"
+          <button
+            className="bg-blue-800 text-white text-base font-bold px-4 py-2 rounded-full"
             onClick={() => navigate("/")}
           >
             다시 인식하기
-          </div>
+          </button>
         </div>
       </div>
     </div>