Design/#202 메인 화면 디자인 변경

src/components/Bracket/BracketContents.tsx

@@ -53,24 +53,26 @@ const BracketContents = (props: Props) => {
                 {match.matchPlayerInfoList.length === 0 ? (
                   <MatchNoGame>아직 대진표가 생성되지 않았어요 :(</MatchNoGame>
                 ) : (
-                  match.matchPlayerInfoList.map((user) => {
-                    return (
-                      <UserContainer myself={user.gameId === data.myGameId}>
-                        <UserImgContainer>
-                          {user.profileSrc ? (
-                            <UserImg src={user.profileSrc} alt='profile' width={30} height={30} />
-                          ) : (
-                            <UserNameImg>
-                              <UserNameImgText>{user.gameId.substring(0, 2)}</UserNameImgText>
-                            </UserNameImg>
-                          )}
-                        </UserImgContainer>
-
-                        <UserName>{user.gameId}</UserName>
-                        <UserScore>{user.score}</UserScore>
-                      </UserContainer>
-                    );
-                  })
+                  match.matchPlayerInfoList
+                    .sort((a, b) => b.score - a.score)
+                    .map((user) => {
+                      return (
+                        <UserContainer myself={user.gameId === data.myGameId}>
+                          <UserImgContainer>
+                            {user.profileSrc ? (
+                              <UserImg src={user.profileSrc} alt='profile' width={30} height={30} />
+                            ) : (
+                              <UserNameImg>
+                                <UserNameImgText>{user.gameId.substring(0, 2)}</UserNameImgText>
+                              </UserNameImg>
+                            )}
+                          </UserImgContainer>
+
+                          <UserName>{user.gameId}</UserName>
+                          <UserScore>{user.score}</UserScore>
+                        </UserContainer>
+                      );
+                    })
                 )}
               </MatchContent>
             </MatchContainer>

src/components/Content/ContentModify.tsx

@@ -48,9 +48,6 @@ const ContentModify = ({ title, content, onUpdateContent }: ContentModifyProps)
     <>
       <TitleField placeholder={'제목을 입력해주세요'} defaultValue={title} ref={titleRef} />
       <InputField placeholder={'텍스트를 입력해주세요'} defaultValue={content} ref={textRef} />
-      <ContentButton right='25' backgroundColor='#ff0044'>
-        삭제하기
-      </ContentButton>
       <ContentButton
         right='15'
         backgroundColor='grey'

src/components/Header/Header.tsx

@@ -71,9 +71,11 @@ const Header = () => {
 export default Header;
 
 const Headers = styled.header`
-  width: 100%;
+  width: calc(100% - 5rem);
+  margin: 0 2.5rem;
+  background-color: #f1f1f1;
 
-  background-color: #141c24;
+  border-radius: 0 0 16px 16px;
 `;
 
 const Container = styled.div`
@@ -98,7 +100,7 @@ const LoginBtn = styled.button`
   column-gap: 0.5rem;
 
   background-color: inherit;
-  color: white;
+  color: #000000;
   cursor: pointer;
 `;
 
@@ -128,8 +130,8 @@ const DropList = styled.li`
 
   display: flex;
 
-  background-color: #344051;
-  color: white;
+  background-color: #f1f1f1;
+  color: #000000;
 
   height: 4rem;
   border: 1px solid black;

src/components/Main/NoAuthMain.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+import Image from 'next/image';
+
+const NoAuthMain = () => {
+  return (
+    <Main>
+      <Container>
+        <LogoContainer>
+          <LogoImage src='/img/logo/logo-l.png' width='584' height='101' alt='logo' />
+        </LogoContainer>
+        <Title>당신의 실력을 증명해보세요.</Title>
+        <ContentText>대회 개최부터 운영, 관전까지</ContentText>
+        <ContentText>리그허브에서 한번에..</ContentText>
+
+        <Footer>
+          <FooterText>지금 리그에 참여하세요.</FooterText>
+          <KakaoLogin
+            href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`}
+          >
+            <Image src='/img/auth/kakao_login.png' alt='kakao_login' width={300} height={55} />
+          </KakaoLogin>
+        </Footer>
+      </Container>
+    </Main>
+  );
+};
+
+const Main = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background: url('/img/main/main.png');
+  background-size: 100% 100vh;
+  background-repeat: no-repeat;
+`;
+
+const Container = styled.div`
+  color: white;
+  height: 50rem;
+  width: 60rem;
+  margin: 0 auto;
+`;
+
+const LogoContainer = styled.div``;
+
+const LogoImage = styled(Image)`
+  margin: 0 auto;
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  font-size: 3.2rem;
+  margin: 2rem 0;
+`;
+
+const ContentText = styled.div`
+  text-align: center;
+  font-size: 2rem;
+`;
+const KakaoLogin = styled.a``;
+
+const FooterText = styled.div`
+  margin: 4rem 0;
+`;
+const Footer = styled.div`
+  margin: 10rem auto 0 auto;
+  font-size: 2rem;
+  text-align: center;
+`;
+
+export default NoAuthMain;

src/components/Sidebar/BoardBar/BoardBody.tsx

@@ -116,7 +116,6 @@ const BoardBody = ({ channelLink }: Props) => {
     const newBoards = [...boards];
     const [removed] = newBoards.splice(source.index, 1);
     newBoards.splice(destination.index, 0, removed);
-    console.log(newBoards);
     for (let i = 0; i < newBoards.length; i++) {
       newBoards[i].boardIndex = i + 1;
     }
@@ -146,13 +145,13 @@ const BoardBody = ({ channelLink }: Props) => {
     if (JSON.stringify(boards) === JSON.stringify(data.channelBoardLoadDtoList)) return;
     setBoards(data.channelBoardLoadDtoList);
   }, [data?.channelBoardLoadDtoList]);
-  
+
   useEffect(() => {
     setBoards((prevBoards) => {
       return prevBoards.map((board) => {
-        if (board.boardId === selected) {
+        if (board.boardId.toString() === selected)
           return { ...board, boardTitle: lastVisitedBoardIdLists[channelLink].boardTitle };
-        }
+
         return board;
       });
     });

src/components/Sidebar/ChannelBar/ChannelBar.tsx

@@ -10,6 +10,7 @@ import Modal from '@components/Modal';
 import Icon from '@components/Icon';
 import useModals from '@hooks/useModals';
 import useMakeGame from '@hooks/useMakeGame';
+import MainChannelCircle from '../ChannelCircle/MainChannelCircle';
 
 interface ChannelBarProps {
   channels: ChannelCircleProps[];
@@ -36,90 +37,118 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => {
 
   return (
     <ChannelbarContainer>
-      <DragDropContext onDragEnd={dragEnd}>
-        <Droppable droppableId='channels-drop' key='channelsKey'>
-          {(provided, snapshot) => (
-            <DropContainer ref={provided.innerRef} {...provided.droppableProps}>
-              {channels &&
-                channels.map(
-                  ({ channelLink, title, gameCategory, customChannelIndex, imgSrc }, index) => (
-                    <Draggable
-                      draggableId={'channel-' + channelLink}
-                      index={index}
-                      key={channelLink}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                          css={css`
-                            margin: 0 auto;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                          `}
-                          onClick={() => updateSelectedChannel(channelLink)}
-                        >
-                          <ChannelCircle
-                            channelLink={channelLink}
-                            title={title}
-                            gameCategory={gameCategory}
-                            customChannelIndex={customChannelIndex}
-                            imgSrc={imgSrc}
-                          />
-                        </div>
-                      )}
-                    </Draggable>
-                  ),
-                )}
-              {provided.placeholder}
-            </DropContainer>
-          )}
-        </Droppable>
-      </DragDropContext>
-      <ChannelParticipate
-        onClick={() =>
-          openModal(Modal, {
-            onClose: () => {
-              closeModal(Modal);
-              resetState();
-            },
-            children: <SelectChannelType handleModal={() => closeModal(Modal)} />,
-          })
-        }
-      >
-        <CenteredIcon kind='plus' color='white' size={24} />
-      </ChannelParticipate>
+      <ScrollContainer>
+        <MainCircleContainer>
+          <MainChannelCircle />
+          <Line>
+            <svg
+              width='60'
+              height='4'
+              viewBox='0 0 60 4'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <rect width='60' height='4' rx='2' fill='white' />
+            </svg>
+          </Line>
+        </MainCircleContainer>
+        <DragDropContext onDragEnd={dragEnd}>
+          <Droppable droppableId='channels-drop' key='channelsKey'>
+            {(provided, snapshot) => (
+              <DropContainer ref={provided.innerRef} {...provided.droppableProps}>
+                {channels &&
+                  channels.map(
+                    ({ channelLink, title, gameCategory, customChannelIndex, imgSrc }, index) => (
+                      <Draggable
+                        draggableId={'channel-' + channelLink}
+                        index={index}
+                        key={channelLink}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            css={css`
+                              margin: 0 auto;
+                              display: flex;
+                              align-items: center;
+                              justify-content: center;
+                            `}
+                            onClick={() => updateSelectedChannel(channelLink)}
+                          >
+                            <ChannelCircle
+                              channelLink={channelLink}
+                              title={title}
+                              gameCategory={gameCategory}
+                              customChannelIndex={customChannelIndex}
+                              imgSrc={imgSrc}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    ),
+                  )}
+                {provided.placeholder}
+              </DropContainer>
+            )}
+          </Droppable>
+        </DragDropContext>
+        <ChannelParticipate
+          onClick={() =>
+            openModal(Modal, {
+              onClose: () => {
+                closeModal(Modal);
+                resetState();
+              },
+              children: <SelectChannelType handleModal={() => closeModal(Modal)} />,
+            })
+          }
+        >
+          <CenteredIcon kind='plus' color='#FF4655' size={30} />
+        </ChannelParticipate>
+      </ScrollContainer>
     </ChannelbarContainer>
   );
 };
 
 const ChannelbarContainer = styled.div`
+  width: 11.2rem;
+
+  background-color: #d9d9d9;
+
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    width: 0rem;
+  }
+`;
+
+const ScrollContainer = styled.div`
   display: flex;
+  align-items: center;
   flex-direction: column;
+`;
 
-  padding: 2rem 0;
-  width: 10rem;
-
-  height: 100vh;
+const MainCircleContainer = styled.div``;
 
-  background-color: #141c24;
-  float: left;
-  text-align: center;
-  row-gap: 2rem;
-  overflow: auto;
+const Line = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
 `;
 
 const ChannelParticipate = styled.button`
-  width: 6rem;
-  height: 6rem;
+  width: 6.2rem;
+  height: 6.2rem;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   position: relative;
-  margin: 0 auto;
-  background: #344051;
+  margin: 24px 0;
+  background: #ffffff;
 `;
 
 const CenteredIcon = styled(Icon)`
@@ -134,7 +163,6 @@ const DropContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  row-gap: 2rem;
 `;
 
 export default ChannelBar;