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;