feat: mobile responsive UI

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

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/Components/UploadButton.tsx b/src/Components/UploadButton.tsx
@@ -1,22 +1,26 @@
 import React from "react";
 import { useDropzone } from "react-dropzone";
+import { useMediaQuery } from "react-responsive";
 
 interface UploadButtonProps {
   onDrop: (acceptedFiles: File[]) => void;
 }
 
 const UploadButton: React.FC<UploadButtonProps> = ({ onDrop }) => {
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
   const { getRootProps, getInputProps, open, isDragActive } = useDropzone({
     onDrop,
     noClick: true,
     noKeyboard: true,
   });
 
   return (
-    <div className="relative w-52 h-16">
+    <div className={`relative ${isMobile ? "w-40 h-12" : "w-52 h-16"}`}>
       <div
         {...getRootProps()}
-        className={`flex justify-center items-center w-full h-full text-white text-lg font-normal cursor-pointer rounded-lg transition duration-200 ease-in-out ${
+        className={`flex justify-center items-center w-full h-full text-white ${
+          isMobile ? "text-base" : "text-lg"
+        } font-normal cursor-pointer rounded-lg transition duration-200 ease-in-out ${
           isDragActive ? "bg-green-400" : "bg-green-500"
         } hover:bg-green-600 active:bg-green-700 active:scale-95`}
         style={{ fontFamily: "Inter" }}

diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx
@@ -72,13 +72,13 @@ const MainPage: React.FC = () => {
       style={{ backgroundImage: 'url("Desktop - 9.svg")' }}
     >
       <div
-        className="text-white text-5xl font-normal text-center px-4"
+        className="text-white text-3xl md: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 px-4"
+        className="text-gray-300 text-xl md:text-2xl font-normal text-center mt-6 flex flex-col items-center px-4"
         style={{ fontFamily: "Inter" }}
       >
         <div className="mb-4">
@@ -90,18 +90,18 @@ const MainPage: React.FC = () => {
       {showConfirmation && (
         <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">Are you sure you want to upload {fileName}?</p>
+            <p className="mb-4">"{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>
@@ -115,7 +115,7 @@ const MainPage: React.FC = () => {
               className="bg-red-500 text-white py-2 px-4 rounded"
               onClick={() => setError(null)}
             >
-              Close
+              닫기
             </button>
           </div>
         </div>
@@ -128,7 +128,7 @@ const MainPage: React.FC = () => {
             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,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import axios from "axios";
 import { useMediaQuery } from "react-responsive";
@@ -84,7 +84,7 @@ const ResultPage: React.FC = () => {
         </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 className="relative z-10 text-white text-3xl md:text-4xl font-bold">
           추천 음악 목록
         </div>
       </div>