Fix: 속성선택 아코디언을 닫을 때, 애니메이션이 동작하지 않는 오류 해결

src/components/plate/FilterPlates.tsx

@@ -4,15 +4,17 @@ import useSelectedStore from '@/store/useSelectedStore';
 import PlateHideButton from './PlateHideButton';
 import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
+import useCalculateInnerWidth from '@/hook/useCalculateInnerWidth';
 
 const FilterPlates = () => {
   const koreanTypes = Object.values(POKEMON_TYPES);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const { selectedPlate, setSelectedPlate } = useSelectedStore();
+  const innerWidth = useCalculateInnerWidth();
 
   const variants = {
-    open: { height: '200px' },
-    closed: { height: 0 },
+    open: { height: '200px', opacity: 1 },
+    closed: { height: 0, opacity: 0 },
   };
 
   const renderTypes = (types: string[]) =>
@@ -44,13 +46,12 @@ const FilterPlates = () => {
   return (
     <div className={styles.wrapper}>
       <AnimatePresence>
-        {isOpen ? (
+        {isOpen && (
           <motion.div
             initial="closed"
             animate="open"
             exit="closed"
-            variants={variants}
-            transition={{ duration: 0.3 }}
+            variants={innerWidth <= 768 ? {} : variants}
             className={styles.container}
           >
             <div className={styles.inner}>
@@ -62,8 +63,6 @@ const FilterPlates = () => {
               </motion.div>
             </div>
           </motion.div>
-        ) : (
-          <div></div>
         )}
       </AnimatePresence>
       <PlateHideButton isOpen={isOpen} setIsOpen={setIsOpen} />