Design: framer motion 으로 plate 토글 버튼 아이콘 애니메이션 구현

src/components/plate/FilterPlates.tsx

@@ -63,7 +63,7 @@ const FilterPlates = () => {
           </motion.div>
         )}
       </AnimatePresence>
-      <PlateHideButton setIsOpen={setIsOpen} />
+      <PlateHideButton isOpen={isOpen} setIsOpen={setIsOpen} />
     </div>
   );
 };

src/components/plate/Plate.module.scss

@@ -92,4 +92,17 @@
   border-right: 15px solid transparent;
   border-top: 24px solid #000;
   width: 111px;
+
+  div {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -18px;
+    margin: auto;
+    scale: 1.5;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

src/components/plate/PlateHideButton.tsx

@@ -1,17 +1,32 @@
 import styles from './Plate.module.scss';
-
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+import { motion } from 'framer-motion';
 interface PlateHideButtonProp {
+  isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const PlateHideButton = ({ setIsOpen }: PlateHideButtonProp) => {
+const PlateHideButton = ({ isOpen, setIsOpen }: PlateHideButtonProp) => {
+  const variant = {
+    open: { rotate: 0 },
+    close: { rotate: 180 },
+  };
+
   return (
     <button
       onClick={() => {
         setIsOpen((prev) => !prev);
       }}
       className={styles.hide_button}
-    ></button>
+    >
+      <motion.div
+        variants={variant}
+        animate={isOpen ? 'open' : 'close'}
+        transition={{ duration: 0.4 }}
+      >
+        <IoChevronUp />
+      </motion.div>
+    </button>
   );
 };