feat: conditional Marquee, Input filename

AJTKS · May 21, 2024 · 00bcec9 · 00bcec9
1 parent d571cd7
commit 00bcec9
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx
@@ -12,7 +12,7 @@ const decodeUnicode = (str: string) => {
 
 const ResultPage: React.FC = () => {
   const location = useLocation();
-  const { taskId } = location.state || {};
+  const { taskId, fileName } = location.state || {};
   const [searchResult, setSearchResult] = useState<any[]>([]);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
@@ -107,12 +107,17 @@ const ResultPage: React.FC = () => {
         <div className="relative z-10 text-white text-xl md:text-2xl font-bold mt-4">
           추천 음악 목록
         </div>
+        {fileName && (
+          <div className="text-white text-sm md:text-base mt-2">
+            입력 파일명: {fileName}
+          </div>
+        )}
       </div>
       <div
         className={`relative z-10 mt-4 w-full ${
           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"
+            : "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 px-4"
         }`}
         style={{ WebkitOverflowScrolling: "touch" }}
       >
@@ -141,19 +146,17 @@ const ResultPage: React.FC = () => {
                   overflowStates.name[index] ? "flex overflow-x-hidden" : ""
                 }`}
               >
-                <div
-                  className={`${
-                    overflowStates.name[index]
-                      ? "animate-marquee whitespace-nowrap"
-                      : "truncate"
-                  }`}
-                >
+                {result.musicName.length >= 10 ? (
                   <Marquee>
                     <span className="text-black text-lg font-bold mx-4">
                       {result.musicName}
                     </span>
                   </Marquee>
-                </div>
+                ) : (
+                  <span className="text-black text-lg font-bold mx-4">
+                    {result.musicName}
+                  </span>
+                )}
               </div>
               <div
                 ref={(el) => (singerRefs.current[index] = el as HTMLDivElement)}