🎨 design(#171): 랜딩 페이지 가로 크기 오버되는 문제 해결

Part3-Team15 · Jul 3, 2024 · 13df067 · 13df067
1 parent 01ead08
commit 13df067
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 13 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -2,16 +2,16 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className='flex h-[100px] w-dvw items-center justify-around bg-dark-500 text-gray-9f'>
+    <footer className='flex h-[100px] w-full items-center justify-around bg-dark-500 text-gray-9f'>
       <div>
         <p>©codeit - 2023</p>
       </div>
-      <div>
+      <div className='flex gap-5'>
         <p> Privacy Policy </p>
         <p> FAQ </p>
       </div>
       <div>
-        <Link href='/'> Github </Link>
+        <Link href='https://github.com/Part3-Team15/taskify'> Github </Link>
       </div>
     </footer>
   );

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -18,14 +18,10 @@ export default function Header() {
   const { pathname } = router;
 
   // NOTE: 리다이렉션은 페이지에서 할 것이라 생각하고, 상태에 걸맞은 헤더 보여줌
-  if (!user) {
-    if (pathname === '/') {
-      // NOTE: 랜딩페이지
-      return <LandingHeader />;
-    }
-
-    // NOTE: 로그인 페이지 or 404 페이지
-    return <></>;
+
+  if (pathname === '/') {
+    // NOTE: 랜딩페이지
+    return <LandingHeader />;
   }
 
   if (pathname.startsWith('/dashboard/')) {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,7 +6,7 @@ import Footer from '@/components/Footer';
 
 function Home() {
   return (
-    <main className='h-dvh max-h-[calc(100dvh-70px)] overflow-y-scroll bg-dark-500 text-white'>
+    <main className='scrollbar-black h-dvh max-h-[calc(100dvh-70px)] overflow-y-auto bg-dark-500 text-white'>
       <Head>
         <title>Taskify</title>
       </Head>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -26,7 +26,7 @@
   }
 
   .btn-red {
-    @apply align-center active:bg-red-active rounded-[8px] bg-red text-white transition-all hover:bg-red-hover disabled:bg-violet-disabled;
+    @apply align-center rounded-[8px] bg-red text-white transition-all hover:bg-red-hover active:bg-red-active disabled:bg-violet-disabled;
   }
 
   .section {
@@ -60,6 +60,113 @@
   .modal-basic {
     @apply h-[220px] w-[327px] md:h-[250px] md:w-[540px];
   }
+
+  .scrollbar-white {
+    /* 스크롤바 전체 */
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+    /* 스크롤바 손잡이 */
+    &::-webkit-scrollbar-thumb {
+      background-color: #a0aec0;
+      border-radius: 6px;
+      border: 3px solid #f7fafc;
+    }
+    /* 스크롤바 손잡이 호버 */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #718096;
+    }
+    /* 스크롤바 손잡이 클릭 */
+    &::-webkit-scrollbar-thumb:active {
+      background-color: #4a5568;
+    }
+    /* 스크롤바 배경 */
+    &::-webkit-scrollbar-track {
+      background-color: #f7fafc;
+    }
+  }
+
+  .scrollbar-black {
+    /* 스크롤바 전체 */
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+    /* 스크롤바 손잡이 */
+    &::-webkit-scrollbar-thumb {
+      background-color: #414141;
+      border-radius: 6px;
+      border: 3px solid #212121;
+    }
+    /* 스크롤바 손잡이 호버 */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #505050;
+    }
+    /* 스크롤바 손잡이 클릭 */
+    &::-webkit-scrollbar-thumb:active {
+      background-color: #313131;
+    }
+    /* 스크롤바 배경 */
+    &::-webkit-scrollbar-track {
+      background-color: #212121;
+    }
+  }
+
+  .scrollbar-violet {
+    /* 스크롤바 전체 */
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+    /* 스크롤바 손잡이 */
+    &::-webkit-scrollbar-thumb {
+      background-color: #5534da;
+      border-radius: 6px;
+      border: 3px solid #f1effd;
+    }
+    /* 스크롤바 손잡이 호버 */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #3925a8;
+    }
+    /* 스크롤바 손잡이 클릭 */
+    &::-webkit-scrollbar-thumb:active {
+      background-color: #261680;
+    }
+    /* 스크롤바 배경 */
+    &::-webkit-scrollbar-track {
+      background-color: #f1effd;
+    }
+  }
+
+  .scrollbar-violet-dark {
+    /* 스크롤바 전체 */
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+    /* 스크롤바 손잡이 */
+    &::-webkit-scrollbar-thumb {
+      background-color: #5534da;
+      border-radius: 6px;
+      border: 3px solid #212121;
+    }
+    /* 스크롤바 손잡이 호버 */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #3925a8;
+    }
+    /* 스크롤바 손잡이 클릭 */
+    &::-webkit-scrollbar-thumb:active {
+      background-color: #261680;
+    }
+    /* 스크롤바 배경 */
+    &::-webkit-scrollbar-track {
+      background-color: #212121;
+    }
+  }
+
+  .scrollbar-none {
+    /* 스크롤바 전체 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }
 
 @layer utilities {