diff --git a/src/components/plate/FilterPlates.tsx b/src/components/plate/FilterPlates.tsx index 17ff16f..9197d0d 100644 --- a/src/components/plate/FilterPlates.tsx +++ b/src/components/plate/FilterPlates.tsx @@ -63,7 +63,7 @@ const FilterPlates = () => { )} - + ); }; diff --git a/src/components/plate/Plate.module.scss b/src/components/plate/Plate.module.scss index 35128e9..adafde0 100644 --- a/src/components/plate/Plate.module.scss +++ b/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; + } } diff --git a/src/components/plate/PlateHideButton.tsx b/src/components/plate/PlateHideButton.tsx index f127853..5d29fc3 100644 --- a/src/components/plate/PlateHideButton.tsx +++ b/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>; } -const PlateHideButton = ({ setIsOpen }: PlateHideButtonProp) => { +const PlateHideButton = ({ isOpen, setIsOpen }: PlateHideButtonProp) => { + const variant = { + open: { rotate: 0 }, + close: { rotate: 180 }, + }; + return ( + > + + + + ); };