Refactor/#443 캐러셀 컴포넌트 및 썸네일 컴포넌트 리팩터링 (#454)

* refactor: isActive 속성에 $표시 추가

* feat: Thumbnail 컴포넌트 borderRadius 속성 추가

* refactor: 캐러셀 앨범 자켓을 Thumbnail 컴포넌트로 대체

* Fix/#445 preCheckAccessToken 로직 변경

* design: 캐러셀 아이템 재생 아이콘 높이 너비 스타일 추가

* design: 캐러셀 내 아이템 border radius 4px로 통일

frontend/src/features/songs/components/CarouselItem.tsx

@@ -3,6 +3,7 @@ import { styled } from 'styled-components';
 import emptyPlay from '@/assets/icon/empty-play.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import LoginModal from '@/features/auth/components/LoginModal';
+import Thumbnail from '@/features/songs/components/Thumbnail';
 import useModal from '@/shared/components/Modal/hooks/useModal';
 import Spacing from '@/shared/components/Spacing';
 import ROUTE_PATH from '@/shared/constants/path';
@@ -35,13 +36,13 @@ const CarouselItem = ({ votingSong }: CarouselItemProps) => {
       />
 
       <CollectingLink onClick={isLoggedIn ? goToPartCollectingPage : openModal}>
-        <Album src={albumCoverUrl} />
+        <Thumbnail src={albumCoverUrl} size="xl" borderRadius={4} />
         <Spacing direction={'horizontal'} size={24} />
         <Contents>
           <Title>{title}</Title>
           <Singer>{singer}</Singer>
           <PlayingTime>
-            <img src={emptyPlay} />
+            <PlayIcon src={emptyPlay} />
             <PlayingTimeText>{toMinSecText(videoLength)}</PlayingTimeText>
           </PlayingTime>
         </Contents>
@@ -63,12 +64,6 @@ const CollectingLink = styled.a`
   padding: 10px;
 `;
 
-const Album = styled.img`
-  max-width: 120px;
-  background-color: white;
-  border-radius: 4px;
-`;
-
 const Contents = styled.div`
   display: flex;
   flex-direction: column;
@@ -110,3 +105,9 @@ const PlayingTime = styled.div`
 const PlayingTimeText = styled.p`
   padding-top: 2px;
 `;
+
+const PlayIcon = styled.img`
+  width: 16px;
+  height: 16px;
+  margin: auto;
+`;

frontend/src/features/songs/components/CollectionCarousel.tsx

@@ -38,7 +38,7 @@ const CollectionCarousel = ({ children }: CarouselProps) => {
         </CarouselWrapper>
         <IndicatorWrapper aria-hidden>
           {Array.from({ length: numberOfItems }, (_, idx) => (
-            <Dot key={idx} isActive={idx === currentIndex} />
+            <Dot key={idx} $isActive={idx === currentIndex} />
           ))}
         </IndicatorWrapper>
       </Wrapper>
@@ -91,10 +91,10 @@ const IndicatorWrapper = styled.div`
   background-color: transparent;
 `;
 
-const Dot = styled.div<{ isActive: boolean }>`
+const Dot = styled.div<{ $isActive: boolean }>`
   width: 8px;
   height: 8px;
-  background-color: ${({ isActive, theme: { color } }) =>
-    isActive ? color.primary : color.secondary};
+  background-color: ${({ $isActive, theme: { color } }) =>
+    $isActive ? color.primary : color.secondary};
   border-radius: 50%;
 `;

frontend/src/features/songs/components/Thumbnail.tsx

@@ -4,26 +4,27 @@ import type { ImgHTMLAttributes, SyntheticEvent } from 'react';
 
 interface ThumbnailProps extends ImgHTMLAttributes<HTMLImageElement> {
   size?: Size;
+  borderRadius?: number;
 }
 
-const Thumbnail = ({ size = 'lg', ...props }: ThumbnailProps) => {
+const Thumbnail = ({ size = 'lg', borderRadius = 4, ...props }: ThumbnailProps) => {
   const insertDefaultJacket = ({ currentTarget }: SyntheticEvent<HTMLImageElement>) => {
     currentTarget.src = defaultAlbumJacket;
   };
 
   return (
-    <Wrapper $size={size}>
+    <Wrapper $size={size} $borderRadius={borderRadius}>
       <img {...props} alt="노래 앨범" aria-hidden loading="lazy" onError={insertDefaultJacket} />
     </Wrapper>
   );
 };
 
 export default Thumbnail;
 
-const Wrapper = styled.div<{ $size: Size }>`
+const Wrapper = styled.div<{ $size: Size; $borderRadius: number }>`
   overflow: hidden;
   ${({ $size }) => SIZE_VARIANTS[$size]};
-  border-radius: 4px;
+  border-radius: ${({ $borderRadius }) => $borderRadius}px;
 `;
 
 const SIZE_VARIANTS = {