feat: 다크모드 로고 적용

eunji-0623 · Jul 20, 2024 · 3bbde3b · 3bbde3b
1 parent b761c54
commit 3bbde3b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 5 deletions.
diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
@@ -1,9 +1,10 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import Logo from '@/public/icon/logo_small.svg';
+import darkLogo from '@/public/icon/dark_logo_small.svg';
 import notificationIcon from '@/public/icon/icon_notification.svg';
 import { useUserData } from '@/hooks/useUserData';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import NavigationDropdown from '../NavigationDropdown/NavigationDropdown';
 import useClickOutside from '@/hooks/useClickOutside';
 import useGetNotification from '@/hooks/useGetNotification';
@@ -57,7 +58,7 @@ export default function NavigationBar() {
       <div className="w-[1200px] flex justify-between items-center ">
         <div className="flex items-center">
           <Link href="/">
-            <Image src={Logo} alt="로고 아이콘" />
+            <Image src={darkMode ? darkLogo : Logo} alt="로고 아이콘" />
           </Link>
         </div>
         <div className="flex items-center gap-4">

diff --git a/components/NavigationDropdown/NotificationDropdown.tsx b/components/NavigationDropdown/NotificationDropdown.tsx
@@ -59,7 +59,7 @@ export default function NotificationDropdown({
   }, []);
 
   return (
-    <div className="z-50 px-[20px] py-[17px] absolute top-[60px] t:right-[100px] 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 border-var-dark3 border border-solid">
       <div className="flex text-[20px] font-bold mb-[10px] justify-between ">
         알림 {data ? `${data.totalCount}` : '0'}개
         <CloseButton onClick={onClick} />

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -12,6 +12,8 @@ import { useRouter } from 'next/router';
 import { GetServerSideProps } from 'next';
 import useEnterSubmit from '@/hooks/useEnterSubmit';
 import Spinner from '@/components/Spinner/Spinner';
+import { darkModeState } from '@/states/themeState';
+import { useRecoilState } from 'recoil';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   return {
@@ -24,6 +26,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
 export default function LoginPage() {
   const { postLoginMutation, isLoading } = useLogin();
   const { isLoggedIn } = useLoginState();
+  const [darkMode, setDarkMode] = useRecoilState(darkModeState);
   const router = useRouter();
   const {
     register,
@@ -51,7 +54,12 @@ export default function LoginPage() {
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
       {/* 로고 */}
       <Link href="/">
-        <Image width={340} height={192} src="/icon/logo_big.svg" alt="로고" />
+        <Image
+          width={340}
+          height={192}
+          src={`${darkMode ? '/icon/dark_logo_big.svg' : '/icon/logo_big.svg'}`}
+          alt="로고"
+        />
       </Link>
 
       {/* 로그인 폼 */}

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -12,6 +12,8 @@ import useLoginState from '@/hooks/useLoginState';
 import { useRouter } from 'next/router';
 import { GetServerSideProps } from 'next';
 import useEnterSubmit from '@/hooks/useEnterSubmit';
+import { useRecoilState } from 'recoil';
+import { darkModeState } from '@/states/themeState';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   return {
@@ -25,6 +27,7 @@ export default function SingupPage() {
   const [isChecked, setIsChecked] = useState(false);
   const { isLoggedIn } = useLoginState();
   const router = useRouter();
+  const [darkMode, setDarkMode] = useRecoilState(darkModeState);
   const { postSignupMutation, isLoading } = useSignup();
 
   const {
@@ -65,7 +68,12 @@ export default function SingupPage() {
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
       {/* 로고 */}
       <Link href="/">
-        <Image width={340} height={192} src="/icon/logo_big.svg" alt="로고" />
+        <Image
+          width={340}
+          height={192}
+          src={`${darkMode ? '/icon/dark_logo_big.svg' : '/icon/logo_big.svg'}`}
+          alt="로고"
+        />
       </Link>
 
       {/* 로그인 폼 */}

diff --git a/public/icon/dark_logo_big.svg b/public/icon/dark_logo_big.svg