diff --git a/src/Pages/ResultPage.tsx b/src/Pages/ResultPage.tsx index 93ba376..3f070c7 100644 --- a/src/Pages/ResultPage.tsx +++ b/src/Pages/ResultPage.tsx @@ -17,6 +17,13 @@ const ResultPage: React.FC = () => { const navigate = useNavigate(); const isMobile = useMediaQuery({ query: "(max-width: 768px)" }); + const nameRefs = useRef([]); + const singerRefs = useRef([]); + const [overflowStates, setOverflowStates] = useState<{ + name: boolean[]; + singer: boolean[]; + }>({ name: [], singer: [] }); + const checkOverflow = (element: HTMLElement | null) => { if (element) { return element.scrollWidth > element.clientWidth; @@ -24,6 +31,12 @@ const ResultPage: React.FC = () => { return false; }; + useLayoutEffect(() => { + const nameOverflow = nameRefs.current.map(checkOverflow); + const singerOverflow = singerRefs.current.map(checkOverflow); + setOverflowStates({ name: nameOverflow, singer: singerOverflow }); + }, [searchResult]); + useEffect(() => { if (!taskId) { setError("Task ID가 제공되지 않았습니다."); @@ -47,7 +60,7 @@ const ResultPage: React.FC = () => { musicName: decodeUnicode(result.musicName), singer: decodeUnicode(result.singer), albumArt: result.albumArt - ? `https://ajtksbackend.p-e.kr/${result.albumArt}` + ? `https://ajtksbackend.p-e.kr/album_arts/${result.albumArt}` : null, })); @@ -101,76 +114,64 @@ const ResultPage: React.FC = () => { : "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 px-4" }`} > - {searchResult.map((result, index) => { - const nameRef = useRef(null); - const singerRef = useRef(null); - const [nameOverflow, setNameOverflow] = useState(false); - const [singerOverflow, setSingerOverflow] = useState(false); - - useLayoutEffect(() => { - setNameOverflow(checkOverflow(nameRef.current)); - setSingerOverflow(checkOverflow(singerRef.current)); - }, []); - - return ( -
-
- {result.albumArt ? ( - {`Album - ) : ( -
- No Image -
- )} -
-
+ {searchResult.map((result, index) => ( +
+
+ {result.albumArt ? ( + {`Album + ) : ( +
+ No Image +
+ )} +
+
+
(nameRefs.current[index] = el as HTMLDivElement)} + className={`relative ${ + overflowStates.name[index] ? "flex overflow-x-hidden" : "" + }`} + >
-
- - {result.musicName} - -
+ + {result.musicName} +
+
+
(singerRefs.current[index] = el as HTMLDivElement)} + className={`relative ${ + overflowStates.singer[index] ? "flex overflow-x-hidden" : "" + }`} + >
-
- - {result.singer} - -
+ + {result.singer} +
- ); - })} +
+ ))}