[FE] FEAT: 반응형 thumbnail 추가 #233

[42inshin]

해당 사항 (중복 선택)

• FEAT : 새로운 기능 추가 및 개선
• FIX : 기존 기능 수정 및 정상 동작을 위한 간단한 추가, 수정사항
• BUG : 버그 수정
• REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
• TEST : 테스트 코드 추가
• DOCS : 코드가 아닌 문서를 수정한 경우
• REMOVE : 파일을 삭제하는 작업만 수행
• RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
• ETC : 이외에 다른 경우 - 어떠한 사항인지 작성해주세요.

설명

🔗 관련 이슈 closed #233

📝 작업 내용

유튜브 url을 통해서 썸네일을 가져올 수 있습니다. 제공 되는 thumbnail을 크기에 따라서 적절한 사이즈로 가져올 수 있도록 utils 함수로 만들었습니다.

// 유튜브 썸네일 이미지 가져오기
// maxres: 1280p, sd: 640p, hq: 480p, mq: 320p, default: 120p
export const getYoutubeThumbnail = (
  url: string | undefined,
  quality: 'default' | 'mq' | 'hq' | 'sd' | 'maxres',
): string | undefined => {
  if (!url) return undefined;

  const videoId = url.split('v=')[1];
  if (!videoId) return url;

  const qualityMap = {
    maxres: 'maxresdefault',
    sd: 'sddefault',
    hq: 'hqdefault',
    mq: 'mqdefault',
    default: 'default',
  };

  return `https://img.youtube.com/vi/${videoId}/${qualityMap[quality]}.jpg`;
};

📸 스크린샷(optional)

크기에 따라서 미디어쿼리 적용되는 모습

미디어쿼리 사이즈 별 썸네일 크기

[juwon5272]

LGTM 고생하셨습니다!