From a0008bd68c649d592f82c217fcb2a4b6b692c0bc Mon Sep 17 00:00:00 2001
From: Junhyeong Park <pljh0906@yonsei.ac.kr>
Date: Tue, 21 May 2024 00:17:16 +0900
Subject: [PATCH] feat: button effect

---
 src/Components/UploadButton.tsx | 14 +++++++-------
 src/Pages/ResultPage.tsx        |  3 +--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/Components/UploadButton.tsx b/src/Components/UploadButton.tsx
index 925ecac..de6f8bb 100644
--- a/src/Components/UploadButton.tsx
+++ b/src/Components/UploadButton.tsx
@@ -13,18 +13,18 @@ const UploadButton: React.FC<UploadButtonProps> = ({ onDrop }) => {
   });
 
   return (
-    <div className="relative w-52 h-16 bg-green-500 flex justify-center items-center">
+    <div className="relative w-52 h-16">
       <div
         {...getRootProps()}
-        className="flex justify-center items-center w-full h-full text-white text-lg font-normal cursor-pointer"
+        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 ${
+          isDragActive ? "bg-green-400" : "bg-green-500"
+        } hover:bg-green-600 active:bg-green-700 active:scale-95`}
         style={{ fontFamily: "Inter" }}
       >
         <input {...getInputProps()} />
-        {isDragActive ? (
-          <p>Drop the files here...</p>
-        ) : (
-          <p onClick={open}>Select the Audio</p>
-        )}
+        <p onClick={open}>
+          {isDragActive ? "Drop the files here..." : "Select the Audio"}
+        </p>
       </div>
     </div>
   );
diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx
index 73faa4c..771b28b 100644
--- a/src/Pages/ResultPage.tsx
+++ b/src/Pages/ResultPage.tsx
@@ -17,7 +17,6 @@ const ResultPage = () => {
         const { status, searchResult } = response.data;
 
         if (status === "completed") {
-          // Decode the search result
           const decodedResult = searchResult.map((result: any) => ({
             ...result,
             musicName: decodeURIComponent(escape(result.musicName)),
@@ -113,7 +112,7 @@ const ResultPage = () => {
             음악 설명 by MU-LLaMA
           </div>
           <div
-            className="bg-blue-800 text-white text-base font-bold px-4 py-2 rounded-full cursor-pointer"
+            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"
             onClick={() => navigate("/")}
           >
             다시 인식하기