From 806907d179a18c2a024a9f97da41e0dc300c961a 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, 21 Nov 2023 20:50:20 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Design:=20=EB=A6=AC=EA=B7=B8=ED=97=88?=
 =?UTF-8?q?=EB=B8=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=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/MainHeader/MainHeader.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/MainHeader/MainHeader.tsx b/src/components/MainHeader/MainHeader.tsx
index 03df5a8..a60dbce 100644
--- a/src/components/MainHeader/MainHeader.tsx
+++ b/src/components/MainHeader/MainHeader.tsx
@@ -60,7 +60,7 @@ const BoardContainer = styled.li<{ isSelected: boolean }>`
 
   &:hover {
     background-color: #ff4655;
-    color: white;
+    color: #f2f2f2;
   }
 
   background-color: #ffffff;
@@ -70,7 +70,10 @@ const BoardContainer = styled.li<{ isSelected: boolean }>`
   border-radius: 6px;
   padding-left: 1rem;
 
-  ${({ isSelected }) => isSelected && `background-color: #FF4655; color:white;`}
+  ${({ isSelected }) =>
+    isSelected &&
+    `    background-color: #ff4655;
+    color: #f2f2f2;`}
 `;
 
 const Boards = styled.div`

From 237d4df1405704a6a42cb0467ca2c3b4be10d243 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, 21 Nov 2023 20:50:43 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Design:=20BoardBar=20=EC=A0=84=EB=B0=98?=
 =?UTF-8?q?=EC=A0=81=EC=9D=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

---
 src/components/Sidebar/BoardBar/BoardBar.tsx  | 11 ++---
 src/components/Sidebar/BoardBar/BoardBody.tsx | 43 ++++++++++++-------
 .../Sidebar/BoardBar/BoardFooter.tsx          | 21 ++++++++-
 .../Sidebar/BoardBar/BoardHeader.tsx          | 18 ++++----
 4 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/components/Sidebar/BoardBar/BoardBar.tsx b/src/components/Sidebar/BoardBar/BoardBar.tsx
index 2c33c40..2e38f56 100644
--- a/src/components/Sidebar/BoardBar/BoardBar.tsx
+++ b/src/components/Sidebar/BoardBar/BoardBar.tsx
@@ -73,18 +73,13 @@ const Container = styled.div`
   background-color: #f1f1f1;
   overflow: auto;
   position: relative;
-  padding: 2.4rem 0;
+  padding-top: 1.6rem;
 `;
 
-const ContentContainer = styled.div`
-  padding-bottom: 3rem;
-`;
+const ContentContainer = styled.div``;
 
 const FooterContainer = styled.div`
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 3rem;
+  width: 20.4rem;
 `;
 
 export default BoardBar;
diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx
index 3876416..c64fdc1 100644
--- a/src/components/Sidebar/BoardBar/BoardBody.tsx
+++ b/src/components/Sidebar/BoardBar/BoardBody.tsx
@@ -281,6 +281,8 @@ export default BoardBody;
 
 const Container = styled.ul`
   color: #000000;
+  width: 20rem;
+  margin: 0 auto;
 `;
 
 const CurrentRound = styled.div`
@@ -301,15 +303,15 @@ const Boarder = styled.div`
   border-bottom: solid 1px #344051;
 `;
 
-const Title = styled.div`
-  width: 100%;
+const Title = styled.h2`
+  width: 18.4rem;
   font-size: 1.2rem;
   color: #868686;
   text-align: left;
 `;
 
 const AdminTable = styled.div`
-  width: 19.2rem;
+  width: 18.4rem;
 
   margin: 0 auto;
   display: flex;
@@ -320,25 +322,32 @@ const AdminTable = styled.div`
 `;
 
 const ScrollContainer = styled.div`
-  min-height: 20rem;
-  max-height: 20rem;
+  min-height: 25rem;
+  max-height: 25rem;
   overflow-y: auto;
-
+  overflow-x: hidden;
   ::-webkit-scrollbar {
-    width: 0.5rem;
+    width: 0.2rem;
   }
   ::-webkit-scrollbar-thumb {
     background-color: #202b37;
-    border-radius: 1rem;
+    border-radius: 0.1rem;
   }
   ::-webkit-scrollbar-track {
     background-color: #868686;
-    border-radius: 1rem;
+    border-radius: 0.1rem;
   }
 `;
 
 const NoticeTable = styled.div`
-  padding-top: 1rem;
+  width: 18.4rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 1rem;
+  row-gap: 1rem;
 `;
 
 const NoticeScrollContainer = styled.div`
@@ -349,21 +358,25 @@ const NoticeScrollContainer = styled.div`
 `;
 
 const BoardContainer = styled.li<{ isSelected: boolean }>`
-  width: 19.2rem;
+  width: 18.4rem;
   height: 4.8rem;
   display: flex;
   align-items: center;
   padding-left: 1rem;
 
   &:hover {
-    background-color: #aec3ae;
+    background-color: #ff4655;
+    color: #f2f2f2;
   }
 
   background-color: #ffffff;
   font-size: 1.3rem;
   cursor: pointer;
-  color: #000000;
-  border-radius: 6px;
+  color: #020202;
+  border-radius: 0.6rem;
 
-  ${({ isSelected }) => isSelected && `background-color: #AEC3AE;`}
+  ${({ isSelected }) =>
+    isSelected &&
+    `    background-color: #ff4655;
+    color: #f2f2f2;`}
 `;
diff --git a/src/components/Sidebar/BoardBar/BoardFooter.tsx b/src/components/Sidebar/BoardBar/BoardFooter.tsx
index 61c7cb3..57b0863 100644
--- a/src/components/Sidebar/BoardBar/BoardFooter.tsx
+++ b/src/components/Sidebar/BoardBar/BoardFooter.tsx
@@ -42,14 +42,33 @@ const BoardFooter = ({
     }
   };
 
+  if (channelPermission === 0) {
+    return <></>;
+  }
+
   return <Container>{renderLeagueButton()}</Container>;
 };
 
 const Container = styled.div`
-  color: black;
+  color: #020202;
+  background-color: #ffffff;
   font-size: 1.5rem;
   text-align: center;
   cursor: pointer;
+  position: absolute;
+  bottom: 1rem;
+  display: flex;
+  align-items: center;
+  width: 18.4rem;
+  height: 4rem;
+  left: 1rem;
+  border-radius: 0.6rem;
+  text-align: center;
+  padding-left: 1rem;
+  &:hover {
+    background-color: #ff4655;
+    color: #f2f2f2;
+  }
 `;
 
 export default BoardFooter;
diff --git a/src/components/Sidebar/BoardBar/BoardHeader.tsx b/src/components/Sidebar/BoardBar/BoardHeader.tsx
index b49c384..70cb80e 100644
--- a/src/components/Sidebar/BoardBar/BoardHeader.tsx
+++ b/src/components/Sidebar/BoardBar/BoardHeader.tsx
@@ -19,7 +19,7 @@ const BoardHeader = ({ hostname, leagueTitle, gameCategory, participateNum }: Bo
   return (
     <Container>
       <Wrapper>
-        <span css={labelStyle}>개최자</span>
+        <span css={labelStyle}>개최자 </span>
         <span css={hostnameStyle}>{hostname}</span>
         <TitleContainer>{leagueTitle}</TitleContainer>
       </Wrapper>
@@ -46,6 +46,8 @@ const BoardHeader = ({ hostname, leagueTitle, gameCategory, participateNum }: Bo
 export default BoardHeader;
 
 const Container = styled.div`
+  width: 20rem;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -54,12 +56,13 @@ const Container = styled.div`
   font-size: 1.4rem;
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  margin: 0 auto;
+`;
 
 const labelStyle = css`
   color: #717171;
-  padding: 5px;
-  margin-bottom: 8px;
+  margin-bottom: 1.6rem;
 `;
 
 const hostnameStyle = css`
@@ -74,10 +77,9 @@ const participantStyle = css`
 `;
 
 const TitleContainer = styled.div`
-  width: 19.2rem;
   height: 2.8rem;
   font-size: 1.6rem;
-
+  width: 18.4rem;
   color: #000000;
   background-color: #ffffff;
   display: flex;
@@ -88,7 +90,7 @@ const TitleContainer = styled.div`
 `;
 
 const ParticipateWrapper = styled.div`
-  width: 19.2rem;
+  width: 18.4rem;
   color: #000000;
   font-size: 1.6rem;
 
@@ -100,7 +102,7 @@ const ParticipateWrapper = styled.div`
 
 const ParticipateBox = styled.div`
   background-color: #ffffff;
-  padding: 1rem 1rem 1rem 1rem;
+  padding: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

From fb4cb75a455db3b1f20f85dbf4b8d94475d01da5 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, 21 Nov 2023 20:52:37 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20http=EC=97=90=EC=84=9C=EB=8F=84=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=BD=EB=B3=B4=EB=93=9C=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=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

---
 src/components/Header/Header.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 644c90f..0e3da63 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -49,7 +49,20 @@ const Header = () => {
       await navigator.clipboard.writeText(channelLink as string);
       alert('클립보드에 초대링크가 복사되었습니다.');
     } catch (e) {
-      alert('복사에 실패하였습니다. 다시 시도해주세요');
+      // execCommand 사용
+      const textArea = document.createElement('textarea');
+      textArea.value = `${channelLink}`;
+      document.body.appendChild(textArea);
+      textArea.select();
+      textArea.setSelectionRange(0, 99999);
+      try {
+        document.execCommand('copy');
+      } catch (err) {
+        console.error('복사 실패', err);
+      }
+      textArea.setSelectionRange(0, 0);
+      document.body.removeChild(textArea);
+      alert('텍스트가 복사되었습니다.');
     }
   };