style: 다크모드 토글 버튼 헤더에 추가

src/assets/icons/index.ts

@@ -33,3 +33,5 @@ export { default as SubjectiveIcon } from './subjective.svg?react'
 export { default as CloseDropDownIcon } from './close-dropdown.svg?react'
 export { default as FilterReplyIcon } from './filter-reply.svg?react'
 export { default as ImageIcon } from './image.svg?react'
+export { default as SunIcon } from './sun.svg?react'
+export { default as MoonIcon } from './moon.svg?react'

src/components/Header/index.tsx

@@ -1,12 +1,14 @@
 import { memo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useToast } from '@/hooks'
+import { useDarkMode, useToast } from '@/hooks'
 import { useUser, useLogout } from '@/apis/hooks'
 import {
   LogoRowIcon,
   LogoShortIcon,
   ArrowLeftIcon,
   BasicProfileIcon,
+  SunIcon,
+  MoonIcon,
 } from '@/assets/icons'
 import { rangerCleanHead } from '@/assets/images'
 import { Modal } from '..'
@@ -24,6 +26,7 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
   const navigate = useNavigate()
 
   const { addToast } = useToast()
+  const { toggle, darkMode } = useDarkMode()
 
   const avatarVisible = pathname !== '/sign-up' && pathname !== '/login'
   const goBackVisible = pathname !== '/login' && pathname !== '/'
@@ -58,7 +61,17 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
           <LogoShortIcon className="ml-1 h-7 w-8 md:hidden" />
           <LogoRowIcon className="hidden h-11 w-60 md:block" />
         </div>
-        <div>
+        <div className="flex items-center gap-x-3 md:gap-x-5">
+          <div
+            className="flex cursor-pointer items-center justify-center md:h-8 md:w-8"
+            onClick={toggle}
+          >
+            {darkMode ? (
+              <MoonIcon className="h-full w-full animate" />
+            ) : (
+              <SunIcon className="h-full w-full" />
+            )}
+          </div>
           {avatarVisible && user && (
             <>
               <Dropdown>

src/routes/Layout.tsx

@@ -1,9 +1,12 @@
+import { useEffect } from 'react'
 import { Outlet } from 'react-router-dom'
-import { useDarkMode } from '@/hooks'
 import { ApiErrorBoundary } from '@/components'
+import { scrollToTop } from '@/utils'
 
 const Layout = () => {
-  const { toggle } = useDarkMode()
+  useEffect(() => {
+    scrollToTop()
+  }, [])
 
   return (
     <>
@@ -14,12 +17,6 @@ const Layout = () => {
           </ApiErrorBoundary>
         </div>
       </div>
-      <button
-        className="btn fixed bottom-10 right-20 bg-pink-800 text-white"
-        onClick={toggle}
-      >
-        토글
-      </button>
     </>
   )
 }