Merge pull request #203 from TheUpperPart/Design/#202

Design/#202 메인 화면 디자인 변경
TheUpperPart · Oct 30, 2023 · 807e59e · 807e59e
2 parents 81007ff + 29ac563
commit 807e59e
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 83 deletions.
diff --git a/public/img/board/main.png b/public/img/board/main.png
diff --git a/public/img/logo/logo-circle.png b/public/img/logo/logo-circle.png
diff --git a/src/components/Header/Header.tsx b/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;

diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/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;
diff --git a/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx b/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx
@@ -22,28 +22,29 @@ const ChannelCircle = ({
 export default ChannelCircle;
 
 const ChannelBtn = styled.div<{ url?: string }>`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  width: 7rem;
-  height: 7rem;
+  width: 8rem;
+  height: 8rem;
   border: 0;
-
-  border-radius: 50%;
+  margin: 12px 0;
+  border-radius: 34px;
 
   cursor: pointer;
   font-size: 1.2rem;
-  color: #ffffff;
+  color: #000000;
   transition: border-radius 0.3s ease;
 
-  background: linear-gradient(to bottom, #344051 75%, #202b37 25%);
+  background-color: #ffffff;
 
   ${(prop) =>
     prop.url &&
     css`
       background-image: url(${prop.url});
-      background-size: 100% 75%;
+      background-size: 100% 100%;
       background-position: center top;
       background-repeat: no-repeat;
     `}
@@ -64,10 +65,20 @@ const ChannelName = styled.div`
 `;
 
 const ChannelGame = styled.div`
+  position: absolute;
   width: 100%;
   height: 25%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.1rem;
+  font-size: 0.8rem;
+  color: #ffffff;
+  background-color: #ff4655;
+  border: 0.2px solid #1e1e1e;
+
+  border-radius: 8px;
+  width: 3.1rem;
+  height: 1.2rem;
+
+  bottom: -5px;
 `;
diff --git a/src/components/Sidebar/ChannelCircle/MainChannelCircle.tsx b/src/components/Sidebar/ChannelCircle/MainChannelCircle.tsx
@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+const MainChannelCircle = () => {
+  const router = useRouter();
+
+  return (
+    <ChannelBtn onClick={() => router.push('/')}>
+      <Image src={'/img/logo/logo-circle.png'} width={58} height={38} alt='circle-logo' />
+    </ChannelBtn>
+  );
+};
+
+export default MainChannelCircle;
+
+const ChannelBtn = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 8rem;
+  height: 8rem;
+  margin: 24px 0;
+  border: 0;
+
+  border-radius: 34px;
+
+  cursor: pointer;
+  font-size: 1.2rem;
+  background-color: #ffffff;
+  transition: border-radius 0.3s ease;
+
+  &:hover {
+    border-radius: 30%;
+  }
+`;
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -77,6 +77,9 @@ const CommonLayout = styled.div`
 const Wrapper = styled.div`
   width: 100%;
   height: 100vh;
+  background-image: url('/img/board/main.png');
+  background-size: 100% 100vh;
+  background-repeat: no-repeat;
 `;
 
 const SidebarWrapper = styled.div`

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,9 @@
+import styled from '@emotion/styled';
+
 export default function Home() {
-  return <div>Hello world!</div>;
+  return <Main>LeagueHub의 공지사항입니다. 2023. 10. 29 패치노트</Main>;
 }
+
+const Main = styled.div`
+  font-size: 2rem;
+`;