Merge pull request #77 from eunji-0623/feature-jisung

refactor: 스타일 개선
eunji-0623 · Aug 5, 2024 · fda3af3 · fda3af3
2 parents 60d729b + d02e9f0
commit fda3af3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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';