[FE] 내 방 목록에 썸네일 적용 #233

sgdevcamp2025 · Feb 23, 2025 · 3e8a50c · 3e8a50c
1 parent fadd696
commit 3e8a50c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/frontend/src/components/MyRoomCard/index.css.ts b/src/frontend/src/components/MyRoomCard/index.css.ts
@@ -10,7 +10,7 @@ export const Card = styled.div`
 `;
 
 export const Thumbnail = styled.div`
-  width: 124px;
+  width: 120px;
   flex-shrink: 0;
   aspect-ratio: 16 / 9;
   border-radius: 0.625rem;

diff --git a/src/frontend/src/components/MyRoomCard/index.tsx b/src/frontend/src/components/MyRoomCard/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import UserIcon from '@/assets/img/UsersLine.svg';
 import TrashcanIcon from '@/assets/img/Trashcan.svg';
 import ShareIcon from '@/assets/img/ShareLink.svg';
@@ -17,12 +17,25 @@ import {
   Title,
   UserCount,
 } from './index.css';
+import { getYoutubeThumbnail } from '@/utils/youtubeUtils';
 
 export const MyRoomCard = ({ room }: { room: MyRoomDto }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isClickDelete, setIsClickDelete] = useState(false);
+  const [thumbnail, setThumbnail] = useState<string>(DefaultThumbnail);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (!room.playlistUrl) return;
+
+    const fetchThumbnail = async () => {
+      const url = await getYoutubeThumbnail(room.playlistUrl ?? '', 'default');
+      setThumbnail(url ?? DefaultThumbnail);
+    };
+
+    fetchThumbnail();
+  }, [room.playlistUrl]);
+
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     navigate(`/room?code=${room.code}`);
@@ -60,7 +73,7 @@ export const MyRoomCard = ({ room }: { room: MyRoomDto }) => {
         onMouseLeave={() => setIsHovered(false)}
       >
         <Thumbnail>
-          <img src={room.playlistUrl ? room.playlistUrl : DefaultThumbnail} alt={room.title} />
+          <img src={thumbnail} alt={room.title} />
         </Thumbnail>
         <Info>
           <div>