Feat/footer navbar

apps/web/package.json

@@ -42,6 +42,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^12.33.0",
     "gsap": "^3.14.2",
     "immer": "^10.1.1",
     "lottie-react": "^2.4.1",

apps/web/src/Footer.tsx

@@ -1,38 +1,70 @@
 'use client';
 
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
+import useFooterAnimateStore, { FooterKey } from '@/stores/useFooterAnimateStore';
 import { cn } from '@/utils/cn';
 
-const navigation = [
-  { name: '최신 곡', href: '/recent' },
+interface Navigation {
+  name: string;
+  href: string;
+  key: FooterKey;
+}
+
+const navigation: Navigation[] = [
+  { name: '최신 곡', href: '/recent', key: 'RECENT' },
 
-  { name: '부를 곡', href: '/tosing' },
-  { name: '검색', href: '/' },
+  { name: '부를 곡', href: '/tosing', key: 'TOSING' },
+  { name: '검색', href: '/', key: 'SEARCH' },
 
-  { name: '인기곡', href: '/popular' },
-  { name: '정보', href: '/info' },
+  { name: '인기곡', href: '/popular', key: 'POPULAR' },
+  { name: '정보', href: '/info', key: 'INFO' },
 ];
 
 export default function Footer() {
   const pathname = usePathname();
+  const { footerAnimateKey } = useFooterAnimateStore();
   const navPath = pathname.split('/')[1];
 
   return (
     <footer className="bg-background fixed bottom-0 flex h-8 w-full max-w-md justify-between">
       {navigation.map(item => {
         const isActive = '/' + navPath === item.href;
+        const isAnimating = footerAnimateKey === item.key;
+
         return (
-          <Button
-            asChild
-            key={item.name}
-            className={cn('flex-1 px-0 text-sm', isActive && 'bg-accent text-accent-foreground')}
-            variant="ghost"
-          >
-            <Link href={item.href}>{item.name}</Link>
-          </Button>
+          <div key={item.name} className="relative flex-1">
+            {isAnimating && (
+              <motion.div
+                className="bg-accent absolute top-0 left-1/2 z-0 h-4 w-4 -translate-x-1/2 rounded-full"
+                initial={{ y: -50, opacity: 0 }}
+                animate={{ y: 10, opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.3, ease: 'easeOut' }}
+              />
+            )}
+            <Button
+              asChild
+              className={cn(
+                'h-full w-full px-0 text-sm',
+                isActive && 'bg-accent text-accent-foreground',
+              )}
+              variant="ghost"
+            >
+              <Link href={item.href}>
+                <motion.span
+                  className="inline-block"
+                  animate={isAnimating ? { scale: 1.4 } : { scale: 1 }}
+                  transition={{ duration: 0.3, ease: 'easeInOut' }}
+                >
+                  {item.name}
+                </motion.span>
+              </Link>
+            </Button>
+          </div>
         );
       })}
     </footer>

apps/web/src/components/ThumbUpModal.tsx

@@ -11,6 +11,7 @@ import { Slider } from '@/components/ui/slider';
 import { useSongThumbMutation } from '@/queries/songThumbQuery';
 import { useUserQuery } from '@/queries/userQuery';
 import { usePatchSetPointMutation } from '@/queries/userQuery';
+import useFooterAnimateStore from '@/stores/useFooterAnimateStore';
 
 import FallingIcons from './FallingIcons';
 
@@ -29,10 +30,14 @@ export default function ThumbUpModal({ songId, handleClose }: ThumbUpModalProps)
   const { mutate: patchSongThumb, isPending: isPendingSongThumb } = useSongThumbMutation();
   const { mutate: patchSetPoint, isPending: isPendingSetPoint } = usePatchSetPointMutation();
 
+  const { setFooterAnimateKey } = useFooterAnimateStore();
+
   const handleClickThumb = () => {
     patchSongThumb({ songId, point: value[0] });
     patchSetPoint({ point: point - value[0] });
 
+    setFooterAnimateKey('POPULAR');
+
     handleClose();
   };
 

apps/web/src/hooks/useSearchSong.ts

@@ -9,6 +9,7 @@ import {
   useToggleToSingMutation,
 } from '@/queries/searchSongQuery';
 import useAuthStore from '@/stores/useAuthStore';
+import useFooterAnimateStore from '@/stores/useFooterAnimateStore';
 import useGuestToSingStore from '@/stores/useGuestToSingStore';
 import useSearchHistoryStore from '@/stores/useSearchHistoryStore';
 import { Method } from '@/types/common';
@@ -46,6 +47,7 @@ export default function useSearchSong() {
     isError,
   } = useInfiniteSearchSongQuery(query, searchType, isAuthenticated);
 
+  const { setFooterAnimateKey } = useFooterAnimateStore();
   const { addToHistory } = useSearchHistoryStore();
   const { addGuestToSingSong, removeGuestToSingSong } = useGuestToSingStore();
 
@@ -75,6 +77,7 @@ export default function useSearchSong() {
     if (!isAuthenticated) {
       if (method === 'POST') {
         addGuestToSingSong(song);
+        setFooterAnimateKey('TOSING');
       } else {
         removeGuestToSingSong(song.id);
       }
@@ -85,6 +88,10 @@ export default function useSearchSong() {
       toast.error('요청 중입니다. 잠시 후 다시 시도해주세요.');
       return;
     }
+
+    if (method === 'POST') {
+      setFooterAnimateKey('TOSING');
+    }
     toggleToSing({ songId: song.id, method });
   };
 
@@ -98,6 +105,10 @@ export default function useSearchSong() {
       toast.error('요청 중입니다. 잠시 후 다시 시도해주세요.');
       return;
     }
+
+    if (method === 'POST') {
+      setFooterAnimateKey('INFO');
+    }
     toggleLike({ songId, method });
   };
 
@@ -116,6 +127,8 @@ export default function useSearchSong() {
       toast.error('요청 중입니다. 잠시 후 다시 시도해주세요.');
       return;
     }
+
+    setFooterAnimateKey('INFO');
     postSong({ songId, folderName, query, searchType });
   };
 
@@ -125,6 +138,7 @@ export default function useSearchSong() {
       return;
     }
 
+    setFooterAnimateKey('INFO');
     moveSong({ songIdArray: [songId], folderId });
   };
 

apps/web/src/stores/useFooterAnimateStore.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+
+export type FooterKey = 'SEARCH' | 'RECENT' | 'TOSING' | 'POPULAR' | 'INFO' | null;
+
+interface FooterStore {
+  footerAnimateKey: FooterKey;
+  timeoutId: ReturnType<typeof setTimeout> | null;
+  setFooterAnimateKey: (key: FooterKey) => void;
+}
+
+const initialState = {
+  footerAnimateKey: null,
+  timeoutId: null,
+};
+
+const useFooterAnimateStore = create<FooterStore>((set, get) => ({
+  ...initialState,
+
+  setFooterAnimateKey: key => {
+    const { timeoutId } = get();
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    set({ footerAnimateKey: key });
+
+    const newTimeoutId = setTimeout(() => {
+      set({ footerAnimateKey: null, timeoutId: null });
+    }, 300);
+
+    set({ timeoutId: newTimeoutId });
+  },
+}));
+
+export default useFooterAnimateStore;