From f6c0826707baffca5d2116053a1bcfb47fc0b60a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Tue, 31 Oct 2023 00:12:57 +0900
Subject: [PATCH 1/4] =?UTF-8?q?Design:=20BoardBar=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=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/BoardBar/BoardBar.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/BoardBar/BoardBar.tsx b/src/components/Sidebar/BoardBar/BoardBar.tsx
index 5ce1ecc..ba4414a 100644
--- a/src/components/Sidebar/BoardBar/BoardBar.tsx
+++ b/src/components/Sidebar/BoardBar/BoardBar.tsx
@@ -62,20 +62,19 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
 };
 
 const Container = styled.div`
-  width: 20rem;
+  width: 20.4rem;
   height: 100vh;
-  background-color: #202b37;
+  background-color: #f1f1f1;
   overflow: auto;
   position: relative;
+  padding: 2.4rem 0;
 `;
 
 const ContentContainer = styled.div`
-  height: 96%;
   padding-bottom: 3rem;
 `;
 
 const FooterContainer = styled.div`
-  position: sticky;
   bottom: 0;
   left: 0;
   width: 100%;

From 9c2474ffc8e063796e16e241760dc20d3e35d500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Tue, 31 Oct 2023 00:14:30 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Design:=20BoardHeader=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/BoardBar/BoardHeader.tsx          | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/components/Sidebar/BoardBar/BoardHeader.tsx b/src/components/Sidebar/BoardBar/BoardHeader.tsx
index b241be3..b49c384 100644
--- a/src/components/Sidebar/BoardBar/BoardHeader.tsx
+++ b/src/components/Sidebar/BoardBar/BoardHeader.tsx
@@ -1,7 +1,7 @@
+import DivideLine from '@components/DivideLine/DivideLine';
 import Icon from '@components/Icon';
 import Modal from '@components/Modal';
 import ParticipantList from '@components/Modal/ParticipantLists';
-import { GameEnum } from '@constants/MakeGame';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import useModals from '@hooks/useModals';
@@ -22,8 +22,8 @@ const BoardHeader = ({ hostname, leagueTitle, gameCategory, participateNum }: Bo
         <span css={labelStyle}>개최자</span>
         <span css={hostnameStyle}>{hostname}</span>
         <TitleContainer>{leagueTitle}</TitleContainer>
-        <GameNameWrapper>{GameEnum[gameCategory]}</GameNameWrapper>
       </Wrapper>
+      <DivideLine />
       <ParticipateWrapper
         onClick={() =>
           openModal(Modal, {
@@ -32,11 +32,12 @@ const BoardHeader = ({ hostname, leagueTitle, gameCategory, participateNum }: Bo
           })
         }
       >
-        <span>참여자(팀)</span>
+        <span css={participantStyle}>참여자(팀)</span>
         <ParticipateBox>
           <Icon kind='team' color='#637083' size='2rem' />
           {participateNum}
         </ParticipateBox>
+        <DivideLine />
       </ParticipateWrapper>
     </Container>
   );
@@ -45,53 +46,60 @@ const BoardHeader = ({ hostname, leagueTitle, gameCategory, participateNum }: Bo
 export default BoardHeader;
 
 const Container = styled.div`
-  padding: 1.4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   color: white;
-  font-size: 1.3rem;
+  font-size: 1.4rem;
 `;
 
-const Wrapper = styled.div`
-  border-bottom: solid 1px #344051;
-`;
+const Wrapper = styled.div``;
 
 const labelStyle = css`
-  color: #ced2da;
-  font-size: 1.2rem;
+  color: #717171;
+  padding: 5px;
+  margin-bottom: 8px;
 `;
 
 const hostnameStyle = css`
   font-size: 1.5rem;
   font-weight: semi-bold;
+  color: #000000;
+`;
+
+const participantStyle = css`
+  color: #868686;
+  font-size: 1.2rem;
 `;
 
 const TitleContainer = styled.div`
-  width: 100%;
-  height: 3rem;
+  width: 19.2rem;
+  height: 2.8rem;
+  font-size: 1.6rem;
+
+  color: #000000;
+  background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #637083;
-  border-radius: 0.5rem;
-  margin-top: 3px;
+  border-radius: 6px;
   font-weight: bold;
 `;
 
-const GameNameWrapper = styled.div`
-  text-align: center;
-  padding: 1rem 0 1rem;
-`;
-
 const ParticipateWrapper = styled.div`
-  padding: 1rem 0 1rem;
-  border-bottom: solid 1px #344051;
-  &: hover {
+  width: 19.2rem;
+  color: #000000;
+  font-size: 1.6rem;
+
+  &:hover {
     cursor: pointer;
     opacity: 0.6;
   }
 `;
 
 const ParticipateBox = styled.div`
-  background-color: #344051;
+  background-color: #ffffff;
   padding: 1rem 1rem 1rem 1rem;
   display: flex;
   justify-content: space-between;

From 79c5043a10f348b95be452ebe4e01c8cbc42896f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Tue, 31 Oct 2023 00:14:52 +0900
Subject: [PATCH 3/4] =?UTF-8?q?Feat:=20=EA=B5=AC=EB=B6=84=EC=84=A0=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DivideLine/DivideLine.tsx | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/DivideLine/DivideLine.tsx

diff --git a/src/components/DivideLine/DivideLine.tsx b/src/components/DivideLine/DivideLine.tsx
new file mode 100644
index 0000000..f4aa96b
--- /dev/null
+++ b/src/components/DivideLine/DivideLine.tsx
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+const DivideLine = () => {
+  return (
+    <DividingLine>
+      <svg
+        width='200'
+        height='1'
+        viewBox='0 0 200 1'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <rect width='200' height='1' rx='0.5' fill='#C1C1C1' />
+      </svg>
+    </DividingLine>
+  );
+};
+
+const DividingLine = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 21px;
+`;
+
+export default DivideLine;

From b681c6bf006dd451d7bb6ac885adb1f18043d406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Tue, 31 Oct 2023 00:15:11 +0900
Subject: [PATCH 4/4] =?UTF-8?q?Design:=20BoardBar=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=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/BoardBar/BoardBody.tsx | 179 +++++++++++-------
 1 file changed, 113 insertions(+), 66 deletions(-)

diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx
index 42f0704..d1f7c5d 100644
--- a/src/components/Sidebar/BoardBar/BoardBody.tsx
+++ b/src/components/Sidebar/BoardBar/BoardBody.tsx
@@ -166,7 +166,7 @@ const BoardBody = ({ channelLink }: Props) => {
               {isSuccess && data.myMatchRound !== 0 && (
                 <div>
                   <Title>현재 라운드</Title>
-                  <Wrapper
+                  <BoardContainer
                     onClick={() => {
                       setSelected('CurrentRound');
                       router.push(`/contents/${channelLink}/checkIn/${data.myMatchId}`);
@@ -184,13 +184,14 @@ const BoardBody = ({ channelLink }: Props) => {
                         <RedCircle />
                       </div>
                     </CurrentRound>
-                  </Wrapper>
+                  </BoardContainer>
                 </div>
               )}
-              <div>
-                <Title>대회 관리</Title>
+              <AdminTable>
+                <Title>대회</Title>
+                <NoticeScrollContainer></NoticeScrollContainer>
                 {channelPermission === 0 && (
-                  <Wrapper
+                  <BoardContainer
                     isSelected={selected === 'admin'}
                     data-id='admin'
                     data-board-title='관리자'
@@ -198,60 +199,64 @@ const BoardBody = ({ channelLink }: Props) => {
                   >
                     대회 관리
                     <Icon kind='lock' color='#637083' size='1.5rem' />
-                  </Wrapper>
+                  </BoardContainer>
                 )}
-                <Wrapper
+
+                <BoardContainer
                   isSelected={selected === 'bracket'}
                   data-id='bracket'
                   data-board-title='대진표'
                   onClick={onClickBoard}
                 >
                   대진표
-                  <Icon kind='lock' color='#637083' size='1.5rem' />
-                </Wrapper>
+                </BoardContainer>
+              </AdminTable>
+              <NoticeTable>
                 <Title>공지사항</Title>
-                {boards &&
-                  boards.map((board, index) =>
-                    channelPermission === 0 ? (
-                      <Draggable
-                        key={board.boardId}
-                        draggableId={board.boardId.toString()}
-                        index={index}
-                      >
-                        {(provided) => (
-                          <Wrapper
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
+                <ScrollContainer>
+                  <NoticeScrollContainer>
+                    {boards &&
+                      boards.map((board, index) =>
+                        channelPermission === 0 ? (
+                          <Draggable
+                            key={board.boardId}
+                            draggableId={board.boardId.toString()}
+                            index={index}
+                          >
+                            {(provided) => (
+                              <BoardContainer
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                                data-id={board.boardId}
+                                data-board-title={board.boardTitle}
+                                onClick={onClickBoard}
+                                isSelected={board.boardId.toString() === selected}
+                              >
+                                {board.boardTitle}
+                              </BoardContainer>
+                            )}
+                          </Draggable>
+                        ) : (
+                          <BoardContainer
+                            key={board.boardId}
                             data-id={board.boardId}
                             data-board-title={board.boardTitle}
                             onClick={onClickBoard}
-                            isSelected={board.boardId.toString() === selected}
+                            isSelected={selected === board.boardId.toString()}
                           >
                             {board.boardTitle}
-                            <Icon kind='lock' color='#637083' size='1.5rem' />
-                          </Wrapper>
-                        )}
-                      </Draggable>
-                    ) : (
-                      <Wrapper
-                        key={board.boardId}
-                        data-id={board.boardId}
-                        data-board-title={board.boardTitle}
-                        onClick={onClickBoard}
-                        isSelected={selected === board.boardId.toString()}
-                      >
-                        {board.boardTitle}
-                      </Wrapper>
-                    ),
-                  )}
-              </div>
-              {channelPermission === 0 && (
-                <Wrapper isSelected={false} onClick={onClickNewBoard}>
-                  공지 추가하기
-                  <Icon kind='plus' color='#637083' size='1.6rem' />
-                </Wrapper>
-              )}
+                          </BoardContainer>
+                        ),
+                      )}
+                    {channelPermission === 0 && (
+                      <BoardContainer isSelected={false} onClick={onClickNewBoard}>
+                        공지 추가하기
+                      </BoardContainer>
+                    )}
+                  </NoticeScrollContainer>
+                </ScrollContainer>
+              </NoticeTable>
             </div>
           )}
         </Droppable>
@@ -264,24 +269,7 @@ const BoardBody = ({ channelLink }: Props) => {
 export default BoardBody;
 
 const Container = styled.ul`
-  color: white;
-`;
-
-const Wrapper = styled.li<{ isSelected: boolean }>`
-  font-size: 1.5rem;
-  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background: linear-gradient(90deg, rgba(211, 250, 255, 0.3) 0%, rgba(211, 250, 255, 0) 128.25%);
-  }
-  color: white;
-
-  ${({ isSelected }) =>
-    isSelected &&
-    `background: linear-gradient(90deg, rgba(211, 250, 255, 0.30) 0%, rgba(211, 250, 255, 0.00) 128.25%)`};
+  color: #000000;
 `;
 
 const CurrentRound = styled.div`
@@ -303,7 +291,66 @@ const Boarder = styled.div`
 `;
 
 const Title = styled.div`
+  width: 100%;
+  font-size: 1.2rem;
+  color: #868686;
+  text-align: left;
+`;
+
+const AdminTable = styled.div`
+  width: 19.2rem;
+  height: 12.8rem;
+
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 1rem;
+`;
+
+const ScrollContainer = styled.div`
+  min-height: 20rem;
+  max-height: 20rem;
+  overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #202b37;
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: #868686;
+    border-radius: 1rem;
+  }
+`;
+
+const NoticeTable = styled.div``;
+
+const NoticeScrollContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 1rem;
+`;
+
+const BoardContainer = styled.li<{ isSelected: boolean }>`
+  width: 19.2rem;
+  height: 4.8rem;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #aec3ae;
+  }
+
+  background-color: #ffffff;
   font-size: 1.4rem;
-  color: #adb5bd;
-  padding: 0.8rem 0 0.8rem 0.8rem;
+  cursor: pointer;
+  color: #000000;
+  border-radius: 6px;
+
+  ${({ isSelected }) => isSelected && `background-color: #AEC3AE;`}
 `;