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;`} `;