fix: 2줄 처리 완료

Author: jiji-hoon96

apps/profile/src/components/VideoCard/VideoCard.styles.ts

@@ -7,7 +7,17 @@ const VideoCard = styled.a`
 `;
 
 const VideoThumbnailWrapper = styled.div`
-  position: relative;
+  width: 160px;
+  height: 90px;
+  border-radius: 4px;
+  overflow: hidden;
+  gap: 6px;
+  background-color: ${({ theme }) => theme.palette.mobile.grey.g80};
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #2e303a;
 `;
 
 const VideoInfo = styled.div`
@@ -36,6 +46,13 @@ const VideoThumbnail = styled.img`
 const VideoTitle = styled.p`
   ${({ theme }) => theme.typo.sh1};
   color: #f6f7ff;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 `;
 
 export default {

apps/profile/src/components/VideoCard/index.tsx

@@ -1,6 +1,7 @@
 import { useYoutubeVideoDuration } from '@boolti/api';
 import { formatYoutubeDuration, getYoutubeThumbnailUrl, getYoutubeVideoId } from '~/utils';
 import Styled from './VideoCard.styles';
+import { BooltiDarkIcon, BooltiDarkLogo } from '@boolti/icon';
 
 interface VideoCardProps {
   videoUrl: string;
@@ -9,12 +10,21 @@ interface VideoCardProps {
 const VideoCard = ({ videoUrl }: VideoCardProps) => {
   const videoId = getYoutubeVideoId(videoUrl) as string;
   const { data } = useYoutubeVideoDuration(videoId);
+  const thumbnailUrl = videoId ? getYoutubeThumbnailUrl(videoId) : null;
+
   const formattedDuration = formatYoutubeDuration(data?.duration ?? null);
 
   return (
     <Styled.VideoCard href={videoUrl} target="_blank" rel="noopener noreferrer">
       <Styled.VideoThumbnailWrapper>
-        <Styled.VideoThumbnail src={getYoutubeThumbnailUrl(videoId)} alt="YouTube video" />
+        {thumbnailUrl ? (
+          <Styled.VideoThumbnail src={thumbnailUrl} alt="YouTube video" />
+        ) : (
+          <>
+            <BooltiDarkIcon />
+            <BooltiDarkLogo />
+          </>
+        )}
       </Styled.VideoThumbnailWrapper>
       <Styled.VideoInfo>
         <Styled.VideoTitle>{data?.title ?? '알 수 없는 동영상'}</Styled.VideoTitle>

apps/profile/src/pages/ProfileVideosPage/ProfileVideosPage.styles.ts

@@ -45,6 +45,12 @@ const Title = styled.p`
   color: #f6f7ff;
   margin: 0;
   line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 `;
 
 const Duration = styled.p`