Skip to content

Commit

Permalink
Merge pull request #208 from TheUpperPart/Design/#204
Browse files Browse the repository at this point in the history 
Design/#204 BoardBar 디자인 변경
  • Loading branch information
@navyjeongs
navyjeongs authored Oct 31, 2023
2 parents 5f7ebf1 + b681c6b commit 6a0d532
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 94 deletions.
26 changes: 26 additions & 0 deletions src/components/DivideLine/DivideLine.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 3 additions & 4 deletions src/components/Sidebar/BoardBar/BoardBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
179 changes: 113 additions & 66 deletions src/components/Sidebar/BoardBar/BoardBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand All @@ -184,74 +184,79 @@ 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='관리자'
onClick={onClickBoard}
>
대회 관리
<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>
Expand All @@ -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`
Expand All @@ -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;`}
`;
56 changes: 32 additions & 24 deletions src/components/Sidebar/BoardBar/BoardHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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, {
Expand All @@ -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>
);
Expand All @@ -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;
Expand Down

0 comments on commit 6a0d532

Please sign in to comment.