feat: integrate Zustand for global state management;

src/components/organisms/Hero/index.tsx

@@ -8,9 +8,9 @@ import {
   FaMinus,
 } from 'react-icons/fa';
 import { RiCalendarCheckLine, RiCalendarScheduleLine } from 'react-icons/ri';
-import { useGlobalStore } from '@/app/store/globalStore';
 import Link from 'next/link';
 import { Button } from '@/components/atoms/Button';
+import { useGlobalStore } from '@/app/store/global';
 
 type Props = {
   movies: Movie[];
@@ -28,11 +28,9 @@ export const Hero: FC<Props> = ({
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
-  const {
-    movies: storedMovies,
-    addMovie: addMovieToStore,
-    deleteMovie: deleteMovieInStore,
-  } = useGlobalStore();
+  const storedMovies = useGlobalStore(state => state.movies);
+  const addMovie = useGlobalStore(state => state.addMovie);
+  const deleteMovie = useGlobalStore(state => state.deleteMovie);
 
   const currentMovie = movies[currentIndex];
 
@@ -92,11 +90,11 @@ export const Hero: FC<Props> = ({
   }, [autoRotate, rotateInterval, nextSlide, movies.length]);
 
   const handleAdd = async () => {
-    addMovieToStore(currentMovie);
+    addMovie(currentMovie);
   };
 
   const handleRemove = async () => {
-    deleteMovieInStore(id);
+    deleteMovie(id);
   };
 
   return (