Update: header DropDown height 3.5rem

components/common/button/CloseButton.tsx

@@ -5,14 +5,13 @@ import { combineClassName } from '@/utils/combineClassName';
 
 interface CloseButtonProps {
   className?: string;
-  onClose: () => void;
+  onClose: (e: MouseEvent) => void;
   size?: string;
 }
 
 const CloseButton = ({ className = '', onClose, size = '1.5rem' }: CloseButtonProps) => {
   const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    onClose();
+    onClose(e);
   };
 
   return (

components/common/channelCard/ChannelCard.tsx

@@ -9,7 +9,6 @@ import { openWindow } from '@/utils/windowEvent';
 import CopyButton from '@/components/common/button/CopyButton';
 import useStopPropagation from '@/hooks/useStopPropagation';
 import { DEFAULT_BLUR_BASE64 } from '@/consts';
-import Link from 'next/link';
 
 interface ChannelItemProps {
   content: ChannelsDataType;

components/common/dropDown/DropDown.module.scss

@@ -4,7 +4,6 @@
 
 .wrap {
   position: relative;
-
   &.active {
     //펼쳐지는 효과
     button {
@@ -41,12 +40,13 @@
     width: 100%;
     position: absolute;
     overflow: hidden;
-    background-color: var(--liveuta-bg-color-light);
+    background-color: #fff;
     color: var(--liveuta-default-text-color);
     border-radius: 0 0 0.5rem 0.5rem;
+    @include box-shadow();
 
     //펼쳐지는 효과
-    transition: max-height 0.2s ease;
+    transition: max-height 0.2s ease, visibility 0.2s ease;
     visibility: hidden;
     max-height: 0;
 

components/common/modal/ChannelCardModal.tsx

@@ -3,9 +3,8 @@ import Modal from '@/components/layout/modal/Modal';
 import channelCardModal from '@/components/common/modal/ChannelCardModal.module.scss';
 import { openWindow } from '@/utils/windowEvent';
 import CopyButton from '@/components/common/button/CopyButton';
-import { MouseEvent } from 'react';
 import { DEFAULT_BLUR_BASE64 } from '@/consts';
-import Link from 'next/link';
+import { MouseEvent } from 'react';
 
 interface ChannelCardModalProp {
   onClose: (e: MouseEvent) => void;

components/home/Home.module.scss

@@ -44,7 +44,7 @@
           width: 100%;
 
           a {
-            background-color: lighten(map-get($colors, main), 10%);
+            background-color: #fff;
 
             width: 100%;
             line-height: 2.4rem;
@@ -53,7 +53,7 @@
 
             &:hover {
               background-color: var(--liveuta-default-color);
-              color: lighten(map-get($colors, main), 10%);
+              color: #fff;
             }
 
             &.active {
@@ -72,7 +72,7 @@
     .total {
       line-height: 2.4rem;
       padding: 0 0.4rem;
-      background-color: lighten(map-get($colors, main), 10%);
+      background-color: #fff;
       border-radius: 5px;
       @include box-shadow();
     }

components/layout/Footer.tsx

@@ -1,5 +1,3 @@
-import { useRouter } from 'next/router';
-
 const Footer = () => {
   return <footer className="footer" />;
 };

components/layout/Header.module.scss

@@ -13,6 +13,7 @@
   top: 0px;
   left: 0px;
   width: 100%;
+  height: 3.5rem;
   position: fixed;
   z-index: 100;
   background-color: var(--liveuta-header-color);
@@ -66,6 +67,7 @@
 
     .navigation {
       display: flex;
+      align-items: center;
       gap: 1rem;
 
       .search-input {

components/layout/NavigationList.tsx

@@ -7,12 +7,12 @@ const NavigationList = () => {
   return (
     <ul>
       <li>
-        <DropDown title="목차" width="8.5rem">
+        <DropDown title="목차" width="8.5rem" height="3.5rem">
           <IndexLinkList />
         </DropDown>
       </li>
       <li>
-        <DropDown title="외부링크" width="8.5rem">
+        <DropDown title="외부링크" width="8.5rem" height="3.5rem">
           <ExternalLinkList />
         </DropDown>
       </li>

components/layout/modal/Modal.tsx

@@ -1,15 +1,14 @@
 'use client';
 import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import modal from '@/components/layout/modal/Modal.module.scss';
-import { FaWindowClose } from 'react-icons/fa';
 import useStopPropagation from '@/hooks/useStopPropagation';
 import ModalPortal from '@/components/layout/modal/ModalPortal';
 import CloseButton from '@/components/common/button/CloseButton';
 
 interface ModalProps {
   children: ReactNode;
   style?: CSSProperties;
-  onClose: () => void;
+  onClose: (e: MouseEvent) => void;
 }
 
 const Modal = ({ children, style, onClose }: ModalProps) => {

components/layout/sidebar/ExternalLinksSection.tsx

@@ -1,6 +1,5 @@
 import { RxLink2 } from 'react-icons/rx';
 import { ReactNode } from 'react';
-import Link from 'next/link';
 
 const ExternalLink = ({ href, text }: { href: string; text: ReactNode }) => {
   return (

components/layout/sidebar/Sidebar.tsx

@@ -8,14 +8,15 @@ import ThemeButton from '@/components/common/button/ThemeButton';
 
 interface SidebarProps {
   show: boolean;
-  onClose: () => void;
+  onClose: (e: MouseEvent) => void;
 }
 
 const Sidebar = ({ show, onClose }: SidebarProps) => {
   const { stopPropagation } = useStopPropagation();
 
-  const onClick = () => {
-    onClose();
+  const onClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    onClose(e);
   };
 
   return (

styles/_placeholder.scss

@@ -1,13 +1,14 @@
 %scroll-bar {
   &::-webkit-scrollbar {
-    width: 15px;
+    width: 10px;
   }
   &::-webkit-scrollbar-track {
     background-color: rgba(0, 0, 0, 0.1);
   }
   &::-webkit-scrollbar-thumb {
     background-color: var(--liveuta-active-color);
     border-radius: 10px;
+
     &:hover {
       background-color: var(--liveuta-hover-color);
     }

styles/globals.scss

@@ -10,7 +10,7 @@
   --liveuta-bg-right: url('/background/right.jpg');
   --liveuta-bg-left-position: 60%;
   --liveuta-bg-right-position: 40%;
-  --liveuta-title-color: #fff4f6;
+  --liveuta-title-color: #fff;
   --liveuta-default-text-color: #e06e61;
   --liveuta-default-color: #fa8072; //salmon
   --liveuta-header-color: #ffc1cc;