From 5412d49366f9f0d50e83429d76cb20a782b5e416 Mon Sep 17 00:00:00 2001
From: navyjeongs <wjdtjr8649@naver.com>
Date: Sun, 10 Sep 2023 01:12:39 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=A3=BC=EC=86=8C=EB=8F=84=20=EB=84=98=EA=B8=B0=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

---
 .../Sidebar/ChannelBar/ChannelBar.tsx         | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx
index 6a7c6aa..5a21401 100644
--- a/src/components/Sidebar/ChannelBar/ChannelBar.tsx
+++ b/src/components/Sidebar/ChannelBar/ChannelBar.tsx
@@ -38,31 +38,38 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => {
           {(provided, snapshot) => (
             <DropContainer ref={provided.innerRef} {...provided.droppableProps}>
               {channels &&
-                channels.map(({ channelLink, title, category, customChannelIndex }, index) => (
-                  <Draggable draggableId={'channel-' + channelLink} index={index} key={channelLink}>
-                    {(provided, snapshot) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                        css={css`
-                          margin: 0 auto;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                        `}
-                        onClick={() => updateSelectedChannel(channelLink)}
-                      >
-                        <ChannelCircle
-                          channelLink={channelLink}
-                          title={title}
-                          category={category}
-                          customChannelIndex={customChannelIndex}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                ))}
+                channels.map(
+                  ({ channelLink, title, gameCategory, customChannelIndex, imgSrc }, index) => (
+                    <Draggable
+                      draggableId={'channel-' + channelLink}
+                      index={index}
+                      key={channelLink}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          css={css`
+                            margin: 0 auto;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          `}
+                          onClick={() => updateSelectedChannel(channelLink)}
+                        >
+                          <ChannelCircle
+                            channelLink={channelLink}
+                            title={title}
+                            gameCategory={gameCategory}
+                            customChannelIndex={customChannelIndex}
+                            imgSrc={imgSrc}
+                          />
+                        </div>
+                      )}
+                    </Draggable>
+                  ),
+                )}
               {provided.placeholder}
             </DropContainer>
           )}