Merge pull request #244 from TheUpperPart/Design/#237

Design/#237 BoardBar 디자인 변경 및 http에서도 클립보드 사용가능하도록 변경
TheUpperPart · Nov 21, 2023 · 7088716 · 7088716
2 parents abc8284 + 58827da
commit 7088716
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 35 deletions.
diff --git 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('텍스트가 복사되었습니다.');
     }
   };
 

diff --git 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`

diff --git 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
@@ -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
@@ -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
@@ -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;