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('텍스트가 복사되었습니다.'); } };