From 9e026118e06b5c9bc26a87a3d5c99685fef25c3d Mon Sep 17 00:00:00 2001
From: Jisung Jeong <ssjeond@naver.com>
Date: Mon, 5 Aug 2024 13:41:38 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Layout/NavigationBar.tsx           | 21 ++++++++++++-------
 .../NavigationDropdown/NavigationDropdown.tsx |  2 +-
 .../NotificationDropdown.tsx                  |  2 +-
 pages/mypage.tsx                              |  1 -
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
index 4269b12..6a9d6b7 100644
--- a/components/Layout/NavigationBar.tsx
+++ b/components/Layout/NavigationBar.tsx
@@ -58,7 +58,7 @@ export default function NavigationBar() {
   }
 
   return (
-    <div className="sticky top-0 flex h-[70px] justify-center items-center z-30 px-[24px] t:px-[24px] m:px-[24px] border-b border-solid bg-white border-var-gray3 dark:bg-var-dark1 dark:border-var-dark1">
+    <div className="sticky top-0 flex h-[70px] justify-center items-center z-50 px-[24px] t:px-[24px] m:px-[24px] border-b border-solid border-var-gray3 bg-var-gray1 dark:bg-var-dark1 dark:border-var-dark1">
       <div className="w-[1200px] flex justify-between items-center ">
         <div className="flex items-center">
           <Link href="/">
@@ -78,16 +78,21 @@ export default function NavigationBar() {
             checked={darkMode}
           />
           {isLoggedIn ? (
-            <div className="flex items-center gap-2">
-              <button onClick={toggleNotifyDropdown}>
-                <div className="relative">
-                  <Image src={notificationIcon} alt="알림 아이콘" />
+            <div className="flex items-center justify-center gap-2">
+              <button onClick={toggleNotifyDropdown} className="relative">
+                <Image
+                  src={notificationIcon}
+                  width={25}
+                  height={25}
+                  alt="알림 아이콘"
+                />
+                <div>
                   {data?.totalCount !== undefined && data?.totalCount > 0 && (
-                    <span className="absolute top-[-7px] right-[-7px] flex items-center justify-center bg-red-500 w-[15px] h-[15px] text-white text-[12px] rounded-full">
-                      <p className="translate-y-[2%] translate-x-[-10%]">
+                    <div className="absolute top-[-7px] right-[-5px] flex items-center justify-center  bg-red-500 w-[15px] h-[15px] text-white text-[12px] rounded-full">
+                      <p className="dark:translate-x-[-0.2px] dark:translate-y-[-0.6px]">
                         {data.totalCount}
                       </p>
-                    </span>
+                    </div>
                   )}
                 </div>
               </button>
diff --git a/components/NavigationDropdown/NavigationDropdown.tsx b/components/NavigationDropdown/NavigationDropdown.tsx
index 3379950..7143767 100644
--- a/components/NavigationDropdown/NavigationDropdown.tsx
+++ b/components/NavigationDropdown/NavigationDropdown.tsx
@@ -6,7 +6,7 @@ export default function NavigationDropdown() {
 
   return (
     <div
-      className="z-30 absolute bottom-[-90px] flex w-[90px] animate-slideDown flex-col justify-center overflow-hidden rounded-md bg-var-gray1 dark:bg-var-dark2 dark:border-none border-var-gray2 border-solid border  
+      className="z-30 absolute bottom-[-90px] flex w-[90px] animate-slideDown flex-col justify-center overflow-hidden rounded-md bg-var-gray1 dark:bg-var-dark2 dark:border-none border-var-gray3 border-solid border  
        shadow-lg "
     >
       <Link
diff --git a/components/NavigationDropdown/NotificationDropdown.tsx b/components/NavigationDropdown/NotificationDropdown.tsx
index eb68de9..56bc11a 100644
--- a/components/NavigationDropdown/NotificationDropdown.tsx
+++ b/components/NavigationDropdown/NotificationDropdown.tsx
@@ -60,7 +60,7 @@ export default function NotificationDropdown({
   }, []);
 
   return (
-    <div className="z-50 px-[20px] py-[17px] absolute top-[80%] right-[8%] t:right-[8%] w-[368px] h-[360px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 dark:bg-var-dark2 border-var-dark3 border border-solid">
+    <div className="z-50 px-[20px] py-[17px] absolute top-[80%] right-[8%] t:right-[8%] w-[368px] h-[360px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 dark:bg-var-dark2 dark:border-solid dark:border-var-dark3 border border-none">
       <div className="flex text-[20px] font-bold mb-[10px] justify-between ">
         알림 {data ? `${data.totalCount}` : '0'}개
         <CloseButton onClick={onClick} />
diff --git a/pages/mypage.tsx b/pages/mypage.tsx
index 9c636e3..7b6f3c3 100644
--- a/pages/mypage.tsx
+++ b/pages/mypage.tsx
@@ -8,7 +8,6 @@ import useLoginState from '@/hooks/useLoginState';
 import { useSideNavigation } from '@/hooks/useSideNavigation';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const OGTitle = '내정보 | GLOBALNOMAD';