Merge pull request #285 from boostcampwm-2024/dev-front

[FE] Merge to main

Author: Hosung99

frontend/src/component/molecule/DarkModeButton.tsx

@@ -14,7 +14,7 @@ export default function DarkModeButton({ animate }: Props) {
   return (
     <motion.button
       onClick={toggleDarkMode}
-      className='pointer-events-auto absolute flex h-[30px] w-[30px] items-center justify-center rounded-full hover:scale-110'
+      className='pointer-events-auto flex h-[50px] w-[50px] items-center justify-center rounded-full hover:scale-150'
       animate={animate}>
       <Img
         src={FaviconImg}

frontend/src/component/molecule/NavbarCustomSelect.tsx

@@ -9,7 +9,7 @@ export default function NavbarCustomSelect() {
   const { data = [] } = useGroupNames(generation);
   const location = useLocation();
   const prevProjectGroupRef = useRef<string | null>(null);
-  const projectGroup = location.pathname.split('/project/')[1];
+  const projectGroup = decodeURIComponent(location.pathname.split('/project/')[1]);
 
   useEffect(() => {
     if (data.length > 0 && projectGroup !== prevProjectGroupRef.current) {

frontend/src/component/molecule/NavbarTitle.tsx

@@ -1,6 +1,5 @@
-import FaviconImg from '@asset/image/Favicon.svg';
 import H1 from '@component/atom/H1';
-import Img from '@component/atom/Img';
+import DarkModeButton from '@component/molecule/DarkModeButton';
 import { useNavigate } from 'react-router-dom';
 
 export default function NavbarTitle() {
@@ -12,8 +11,8 @@ export default function NavbarTitle() {
 
   return (
     <div className='my-2 w-full'>
-      <div className='flex min-w-0 cursor-pointer items-center gap-2' onClick={navigateMain}>
-        <Img src={FaviconImg} cssOption='w-[36px]' alt='와치덕스 로고 이미지' />
+      <div className='flex min-w-0 cursor-pointer items-center' onClick={navigateMain}>
+        <DarkModeButton />
         <H1 cssOption='font-bold text-[1.6vw] truncate dark:text-white' content='WatchDucks' />
       </div>
     </div>

frontend/src/component/organism/NavbarSelectWrapper.tsx

@@ -1,18 +1,14 @@
 import CustomErrorBoundary from '@boundary/CustomErrorBoundary';
-import DarkModeButton from '@component/molecule/DarkModeButton';
 import NavbarCustomSelect from '@component/molecule/NavbarCustomSelect';
 import NavbarDefaultSelect from '@component/molecule/NavbarDefaultSelect';
 import { PATH } from '@constant/Path';
-import { useDuckAnimation } from '@hook/useDarkModeAnimation';
 import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 
 export default function NavbarSelectWrapper() {
   const { pathname } = useLocation();
   const isProjectPath = pathname.includes(PATH.PROJECT);
   const containerRef = useRef<HTMLDivElement>(null);
-  const duckAnimation = useDuckAnimation({ containerRef });
-
   return (
     <div className='relative mt-[8px] w-full'>
       <div ref={containerRef}>
@@ -24,9 +20,6 @@ export default function NavbarSelectWrapper() {
           </CustomErrorBoundary>
         )}
       </div>
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-full'>
-        <DarkModeButton animate={duckAnimation} />
-      </div>
     </div>
   );
 }