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('텍스트가 복사되었습니다.'); } }; 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` 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 {renderLeagueButton()}; }; 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 ( - 개최자 + 개최자 {hostname} {leagueTitle} @@ -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;