fix: Design

AJTKS · May 13, 2024 · 98ec0fe · 98ec0fe
1 parent 383688b
commit 98ec0fe
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 29 deletions.
diff --git a/public/Desktop - 8.png b/public/Desktop - 8.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/1c06fef0a28189bbd6e4e04ddb5ac6a6.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/Components/UploadButton.tsx b/src/Components/UploadButton.tsx
@@ -13,10 +13,11 @@ const UploadButton: React.FC<UploadButtonProps> = ({ onDrop }) => {
   });
 
   return (
-    <div className="w-full h-full bg-green-500 flex justify-center items-center">
+    <div className="relative w-[200px] h-[60px] bg-green-500 flex justify-center items-center">
+      {" "}
       <div
         {...getRootProps()}
-        className="absolute top-[32px] left-[41px] w-[218px] h-[30.81px] flex justify-center items-center text-white text-[18px] font-normal cursor-pointer"
+        className="flex justify-center items-center w-full h-full text-white text-lg font-normal cursor-pointer"
         style={{ fontFamily: "Inter" }}
       >
         <input {...getInputProps()} />

diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx
@@ -39,26 +39,27 @@ const MainPage: React.FC = () => {
   );
 
   return (
-    <div>
-      <div className="w-full h-full bg-white"></div>
-      <div>
-        <img className="w-full h-auto" src="Vector.png"></img>
+    <div className="overflow-hidden w-full min-h-screen fixed inset-0">
+      <img
+        className="absolute w-full min-h-screen object-cover"
+        src="Desktop - 8.png"
+        alt="Background"
+      />
+      <div className="absolute left-[342.51px] top-[458px] w-[820px] h-[107px] flex justify-center items-center">
         <div
-          className="absolute left-[342.51px] top-[458px] w-[820px] h-[107px] text-white text-[62px] font-normal break-words"
+          className="text-white text-[62px] font-normal break-words"
           style={{ fontFamily: "Inter" }}
         >
           알아서 잘 딱 깔끔하게 센스있게
         </div>
-        <div
-          className="absolute left-[457.51px] top-[583px] w-[589px] h-[38px] text-gray-300 text-[22px] font-normal break-words"
-          style={{ fontFamily: "Inter" }}
-        >
-          Input the Audio, and then wait for our recommendation!
-        </div>
+      </div>
+      <div className="absolute left-[457.51px] top-[583px] w-[589px] flex flex-col justify-center items-center text-gray-300 text-[22px] font-normal break-words">
+        Input the Audio, and then wait for our recommendation!
         <UploadButton onDrop={onDrop} />
       </div>
+
       {isAnalyzing && (
-        <div className="absolute w-full h-full bg-white bg-opacity-75 flex justify-center items-center">
+        <div className="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center">
           <div
             className="text-center text-black text-[35px] font-normal"
             style={{ fontFamily: "Inter" }}
@@ -67,7 +68,7 @@ const MainPage: React.FC = () => {
           </div>
           <img
             className="w-[391px] h-[351.90px]"
-            src="/ajtks-client/public/1c06fef0a28189bbd6e4e04ddb5ac6a6.png"
+            src="1c06fef0a28189bbd6e4e04ddb5ac6a6.png"
             alt="Analysis"
           />
         </div>

diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx
@@ -2,21 +2,21 @@ import React from "react";
 
 const ResultPage = () => {
   return (
-    <div className="relative w-full h-full bg-white">
-      <div className="absolute w-[1440px] h-[1024px] bg-black"></div>
-      <div className="absolute left-[-32.51px] top-0 w-[1520.91px] h-[1408.54px]">
-        <div className="absolute left-[32.51px] w-full h-full bg-white"></div>
-        <div className="absolute top-[312.43px] w-full h-[1096.11px] bg-gradient-to-l from-purple-800 to-cyan-500"></div>
-      </div>
+    <div className="overflow-hidden w-full min-h-screen fixed inset-0">
+      <img
+        className="absolute w-full min-h-screen object-cover"
+        src="Desktop - 8.png"
+        alt="Background"
+      />
       <div
-        className="absolute left-[660px] top-[656px] text-white text-[20px] font-bold"
+        className="absolute left-[660px] top-[550px] text-white text-[20px] font-bold"
         style={{ fontFamily: "Inter" }}
       >
         추천 음악 목록
       </div>
-      <div className="absolute left-[250.25px] top-[714px] flex items-start justify-start space-x-[20.11px]">
+      <div className="absolute left-[250.25px] top-[600px] flex items-start justify-start space-x-[20.11px]">
         {/* Cards Repeated with Different Contents */}
-        {Array.from({ length: 4 }).map((_, index) => (
+        {Array.from({ length: 5 }).map((_, index) => (
           <div
             key={index}
             className="relative w-[172px] h-[228px] rounded-tl-[38px] overflow-hidden"
@@ -36,7 +36,7 @@ const ResultPage = () => {
           </div>
         ))}
       </div>
-      <div className="absolute left-[250px] top-[63px] w-[1061.44px] h-[467px]">
+      <div className="absolute left-[250px] top-[63px] w-[1061.44px] h-[430px]">
         <div className="absolute top-[58px] w-[250px] h-[250px] bg-gray-300">
           <img className="w-full h-full" src="" alt="Featured Image" />
         </div>
@@ -52,16 +52,16 @@ const ResultPage = () => {
             편곡 FRNK, Frankie Scoca
           </div>
         </div>
-        <div className="absolute left-0 top-[334px] w-[174.44px] h-[35px] pl-[20.72px] pr-[20.72px] pt-[10px] pb-[10px] bg-black bg-opacity-80 rounded-full border border-black flex justify-center items-center space-x-[6.68px]">
+        <div className="absolute left-0 top-[334px] w-auto h-[35px] pl-[20.72px] pr-[20.72px] pt-[10px] pb-[10px] bg-black bg-opacity-80 rounded-full border border-black flex justify-center items-center space-x-[6.68px]">
           <div className="text-center text-blue-400 text-[12px] font-bold">
             음악 설명 by MU-LLaMA
           </div>
         </div>
-        <div className="absolute right-0 top-0 w-[128.44px] h-[38px] px-[20.72px] py-[10px] bg-blue-800 rounded-full flex justify-center items-center">
+        <div className="absolute right-0 top-0 w-auto h-[38px] px-[20.72px] py-[10px] bg-blue-800 rounded-full flex justify-center items-center">
           <div className="text-white text-[15px] font-bold">다시 인식하기</div>
         </div>
       </div>
-      <div className="absolute left-[130px] top-[620px] w-[1181.01px] border-t border-white border-opacity-40"></div>
+      <div className="absolute left-[130px] top-[530px] w-[1181.01px] border-t border-white border-opacity-40"></div>
     </div>
   );
 };