Merge pull request #135 from TheUpperPart/Design/#133

Design: 채널바 height 수정
TheUpperPart · Sep 16, 2023 · 99a0c31 · 99a0c31
2 parents dd5760e + 24a2b08
commit 99a0c31
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx
@@ -95,6 +95,7 @@ const ChannelbarContainer = styled.div`
 
   padding: 2rem 0;
   width: 10rem;
+
   height: 100vh;
 
   background-color: #141c24;

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -39,7 +39,7 @@ const Layout = ({ children }: PropsWithChildren) => {
         </SidebarWrapper>
         <Wrapper>
           <Header />
-          <main>{children}</main>
+          <Main>{children}</Main>
         </Wrapper>
       </CommonLayout>
     </>
@@ -52,10 +52,27 @@ const CommonLayout = styled.div`
 
 const Wrapper = styled.div`
   width: 100%;
+  height: 100vh;
 `;
 
 const SidebarWrapper = styled.div`
   flex: 0 0;
 `;
 
+const Main = styled.main`
+  overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    width: 1rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #202b37;
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: #344051;
+    border-radius: 1rem;
+  }
+`;
+
 export default Layout;
diff --git a/src/pages/make-channel.tsx b/src/pages/make-channel.tsx
@@ -99,7 +99,7 @@ export const fadeIn = keyframes`
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 5.5rem);
+  height: calc(100vh - 5.5rem);
   position: relative;
 `;