feat: mobile UI

AJTKS · May 20, 2024 · f100bfc · f100bfc
1 parent 6076dc3
commit f100bfc
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx
@@ -2,6 +2,7 @@ import React, { useState, useCallback } from "react";
 import axios from "axios";
 import UploadButton from "../Components/UploadButton";
 import { useNavigate } from "react-router-dom";
+import { useMediaQuery } from "react-responsive";
 
 const MainPage: React.FC = () => {
   const [isAnalyzing, setIsAnalyzing] = useState(false);
@@ -10,6 +11,7 @@ const MainPage: React.FC = () => {
   const [file, setFile] = useState<File | null>(null);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     const selectedFile = acceptedFiles[0];
@@ -43,7 +45,7 @@ const MainPage: React.FC = () => {
 
       setTimeout(() => {
         navigate("/result", { state: { taskId: task_id } });
-      }, 3000);
+      }, 2000);
     } catch (error) {
       console.error("Error uploading file:", error);
       setIsAnalyzing(false);
@@ -70,13 +72,13 @@ const MainPage: React.FC = () => {
       style={{ backgroundImage: 'url("Desktop - 9.svg")' }}
     >
       <div
-        className="text-white text-5xl font-normal"
+        className="text-white text-5xl font-normal text-center px-4"
         style={{ fontFamily: "Inter" }}
       >
         알아서 잘 딱 깔끔하게 센스있게
       </div>
       <div
-        className="text-gray-300 text-2xl font-normal text-center mt-6 flex flex-col items-center"
+        className="text-gray-300 text-2xl font-normal text-center mt-6 flex flex-col items-center px-4"
         style={{ fontFamily: "Inter" }}
       >
         <div className="mb-4">
@@ -86,48 +88,47 @@ const MainPage: React.FC = () => {
       </div>
 
       {showConfirmation && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
           <div className="bg-white p-4 rounded shadow-lg text-center">
-            <p className="mb-4">"{fileName}"을(를) 업로드 하시겠습니까?</p>
+            <p className="mb-4">Are you sure you want to upload {fileName}?</p>
             <button
               className="bg-green-500 text-white py-2 px-4 rounded mr-2"
               onClick={handleUpload}
             >
-              확인
+              Confirm
             </button>
             <button
               className="bg-red-500 text-white py-2 px-4 rounded"
               onClick={() => setShowConfirmation(false)}
             >
-              취소
+              Cancel
             </button>
           </div>
         </div>
       )}
 
       {error && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
           <div className="bg-white p-4 rounded shadow-lg text-center">
             <p className="mb-4">{error}</p>
             <button
               className="bg-red-500 text-white py-2 px-4 rounded"
               onClick={() => setError(null)}
             >
-              닫기
+              Close
             </button>
           </div>
         </div>
       )}
 
       {isAnalyzing && (
-        <div className="fixed inset-0 bg-white bg-opacity-75 flex flex-col justify-center items-center">
+        <div className="fixed inset-0 bg-white bg-opacity-75 flex flex-col items-center justify-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" }}
           >
-            분석 중입니다...
+            Analyzing...
           </div>
         </div>
       )}

diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import axios from "axios";
+import { useMediaQuery } from "react-responsive";
 
 const decodeUnicode = (str: string) => {
   return str.replace(/\\u[\dA-F]{4}/gi, (match) => {
@@ -14,15 +15,7 @@ const ResultPage: React.FC = () => {
   const [searchResult, setSearchResult] = useState<any[]>([]);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
-
-  const textRef = useRef<HTMLDivElement>(null);
-
-  const checkOverflow = (element: HTMLElement | null) => {
-    if (element) {
-      return element.scrollWidth > element.clientWidth;
-    }
-    return false;
-  };
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
 
   useEffect(() => {
     if (!taskId) {
@@ -82,24 +75,30 @@ const ResultPage: React.FC = () => {
       className="overflow-hidden w-full min-h-screen flex flex-col items-center justify-center bg-cover bg-center"
       style={{ backgroundImage: 'url("Desktop - 9.svg")' }}
     >
-      <div className="relative w-full max-w-4xl px-4">
-        <div className="flex justify-between items-center w-full mt-10">
-          <div className="relative z-10 text-white text-[20px] font-bold">
-            추천 음악 목록
-          </div>
-          <button
-            className="bg-blue-800 text-white text-base font-bold px-4 py-2 rounded-full transition duration-200 ease-in-out hover:bg-blue-700 active:bg-blue-900 active:scale-95"
-            onClick={() => navigate("/")}
-          >
-            다시 인식하기
-          </button>
+      <div className="absolute top-0 right-0 m-4">
+        <button
+          className="bg-blue-800 text-white text-base font-bold px-4 py-2 rounded-full transition duration-200 ease-in-out hover:bg-blue-700 active:bg-blue-900 active:scale-95"
+          onClick={() => navigate("/")}
+        >
+          다시 인식하기
+        </button>
+      </div>
+      <div className="relative w-full max-w-4xl px-4 text-center mt-10">
+        <div className="relative z-10 text-white text-[20px] font-bold">
+          추천 음악 목록
         </div>
       </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">
+      <div
+        className={`relative z-10 mt-4 ${
+          isMobile
+            ? "flex overflow-x-auto space-x-4 px-4"
+            : "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 px-4"
+        }`}
+      >
         {searchResult.map((result, index) => (
           <div
             key={index}
-            className="relative w-[220px] h-[320px] rounded-tl-[38px] overflow-hidden bg-white bg-opacity-60 shadow-md border border-white backdrop-blur-md"
+            className="relative w-[220px] h-[320px] rounded-tl-[38px] overflow-hidden bg-white bg-opacity-60 shadow-md border border-white backdrop-blur-md flex-shrink-0"
           >
             <div className="w-full h-[200px] bg-gray-300">
               {result.albumArt ? (
@@ -115,40 +114,14 @@ const ResultPage: React.FC = () => {
               )}
             </div>
             <div className="p-2 flex flex-col justify-between h-[120px]">
-              <div
-                ref={textRef}
-                className={`relative ${
-                  checkOverflow(textRef.current) ? "flex overflow-x-hidden" : ""
-                }`}
-              >
-                <div
-                  className={`${
-                    checkOverflow(textRef.current)
-                      ? "animate-marquee whitespace-nowrap"
-                      : ""
-                  }`}
-                >
-                  <span className="text-black text-lg font-bold mx-4">
-                    {result.musicName}
-                  </span>
+              <div className="relative">
+                <div className="text-black text-lg font-bold truncate">
+                  {result.musicName}
                 </div>
               </div>
-              <div
-                ref={textRef}
-                className={`relative ${
-                  checkOverflow(textRef.current) ? "flex overflow-x-hidden" : ""
-                }`}
-              >
-                <div
-                  className={`${
-                    checkOverflow(textRef.current)
-                      ? "animate-marquee whitespace-nowrap"
-                      : ""
-                  }`}
-                >
-                  <span className="text-gray-700 text-sm mx-4">
-                    {result.singer}
-                  </span>
+              <div className="relative">
+                <div className="text-gray-700 text-sm truncate">
+                  {result.singer}
                 </div>
               </div>
             </div>