[FE] FIX: 크기별 썸네일 적용 변경 #233

Author: 42inshin

src/frontend/src/components/VideoCard/index.css.ts

@@ -26,26 +26,24 @@ export const Thumbnail = styled.div<{ $playlistUrl: string | undefined }>`
     width: 100%;
     height: 100%;
     object-fit: cover;
+    content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'maxres')});
   }
 
-  /* 480px 이상: hq 크기 이미지 로드 */
-  @media (min-width: 480px) {
+  @media (max-width: 639px) {
     & > img {
-      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'hq')});
+      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'sd')});
     }
   }
 
-  /* 640px 이상: sd 크기 이미지 로드 */
-  @media (min-width: 640px) {
+  @media (max-width: 479px) {
     & > img {
-      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'sd')});
+      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'hq')});
     }
   }
 
-  /* 1280px 이상: maxres 크기 이미지 로드 */
-  @media (min-width: 1280px) {
+  @media (max-width: 319px) {
     & > img {
-      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'maxres')});
+      content: url(${props => getYoutubeThumbnail(props.$playlistUrl, 'mq')});
     }
   }
 `;

src/frontend/src/utils/youtubeUtils.ts

@@ -7,10 +7,10 @@ export const getYoutubeVideoInfo = async (videoId: string) => {
 };
 
 // 유튜브 썸네일 이미지 가져오기
-// maxres: 1280p, sd: 640p, hq: 480p, default: 120p
+// maxres: 1280p, sd: 640p, hq: 480p, mq: 320p, default: 120p
 export const getYoutubeThumbnail = (
   url: string | undefined,
-  quality: 'default' | 'hq' | 'sd' | 'maxres',
+  quality: 'default' | 'mq' | 'hq' | 'sd' | 'maxres',
 ): string | undefined => {
   if (!url) return undefined;
 
@@ -21,6 +21,7 @@ export const getYoutubeThumbnail = (
     maxres: 'maxresdefault',
     sd: 'sddefault',
     hq: 'hqdefault',
+    mq: 'mqdefault',
     default: 'default',
   };