From 1ea0833cc42a531cbe8a4d10b8ce32f43458b3e3 Mon Sep 17 00:00:00 2001
From: navyjeongs <wjdtjr8649@naver.com>
Date: Sun, 10 Sep 2023 01:13:26 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=B1=84=EB=84=90=20=EC=82=AC=EC=A7=84?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9D=B4=EB=A6=84=202?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/ChannelCircle/ChannelCircle.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx b/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx
index a39f076..3f8ab7c 100644
--- a/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx
+++ b/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx
@@ -7,14 +7,14 @@ import { ChannelCircleProps } from 'src/@types/channelCircle';
 const ChannelCircle = ({
   channelLink,
   title,
-  category,
+  gameCategory,
   imgSrc,
   customChannelIndex,
 }: ChannelCircleProps) => {
   return (
     <ChannelBtn url={imgSrc}>
-      <ChannelName>{title}</ChannelName>
-      <ChannelGame>{GameEnum[category]}</ChannelGame>
+      <ChannelName>{imgSrc ? '' : title.substring(0, 2)}</ChannelName>
+      <ChannelGame>{GameEnum[gameCategory]}</ChannelGame>
     </ChannelBtn>
   );
 };
@@ -43,7 +43,9 @@ const ChannelBtn = styled.div<{ url?: string }>`
     prop.url &&
     css`
       background-image: url(${prop.url});
-      background-size: cover;
+      background-size: 100% 75%;
+      background-position: center top; /* 배경 이미지를 가운데 정렬하고 위에서부터 정렬합니다. */
+      background-repeat: no-repeat; /* 배경 이미지 반복을 비활성화합니다. */
     `}
 
   &:hover {