From bbe3c2685126e48b7e53e3e74fd2d776775e1d37 Mon Sep 17 00:00:00 2001 From: Junhyeong Park Date: Tue, 21 May 2024 01:45:39 +0900 Subject: [PATCH] feat: mobile responsive UI --- src/Components/UploadButton.tsx | 8 ++++++-- src/Pages/MainPage.tsx | 14 +++++++------- src/Pages/ResultPage.tsx | 4 ++-- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/Components/UploadButton.tsx b/src/Components/UploadButton.tsx index de6f8bb..40beb71 100644 --- a/src/Components/UploadButton.tsx +++ b/src/Components/UploadButton.tsx @@ -1,11 +1,13 @@ import React from "react"; import { useDropzone } from "react-dropzone"; +import { useMediaQuery } from "react-responsive"; interface UploadButtonProps { onDrop: (acceptedFiles: File[]) => void; } const UploadButton: React.FC = ({ onDrop }) => { + const isMobile = useMediaQuery({ query: "(max-width: 768px)" }); const { getRootProps, getInputProps, open, isDragActive } = useDropzone({ onDrop, noClick: true, @@ -13,10 +15,12 @@ const UploadButton: React.FC = ({ onDrop }) => { }); return ( -
+
{ style={{ backgroundImage: 'url("Desktop - 9.svg")' }} >
알아서 잘 딱 깔끔하게 센스있게
@@ -90,18 +90,18 @@ const MainPage: React.FC = () => { {showConfirmation && (
-

Are you sure you want to upload {fileName}?

+

"{fileName}"을(를) 업로드 하시겠습니까?

@@ -115,7 +115,7 @@ const MainPage: React.FC = () => { className="bg-red-500 text-white py-2 px-4 rounded" onClick={() => setError(null)} > - Close + 닫기
@@ -128,7 +128,7 @@ const MainPage: React.FC = () => { className="text-center text-black text-2xl font-normal mb-4" style={{ fontFamily: "Inter" }} > - Analyzing... + 분석 중입니다...
)} diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx index d08a3c1..c18af5c 100644 --- 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 = () => {
-
+
추천 음악 목록