디자인 수정 및 애니메이션 효과 적용

src/components/cardEdit/SearchDropdown.tsx

@@ -6,18 +6,24 @@ import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
 import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack';
+import { POKEMON_NICKNAME1, POKEMON_NICKNAME2 } from '@/lib/constants';
 
 interface SearchDropdownProps {
   searchResults: (PokemonType | undefined)[] | null;
   setIsOpen: (arg: boolean) => void;
 }
 
 const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
-  const { setPokemonData } = useSelectedPokemonForCard();
+  const { setPokemonNickName1, setPokemonNickName2, setPokemonData } =
+    useSelectedPokemonForCard();
   const [currentPage, setCurrentPage] = useState(1);
   const POKEMONS_PER_PAGE = 12;
 
-  const selectPokemon = (pokemon: PokemonType | null) => {
+  const handleClick = (pokemon: PokemonType | null) => {
+    const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length);
+    const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length);
+    setPokemonNickName1(POKEMON_NICKNAME1[randomIndex1]);
+    setPokemonNickName2(POKEMON_NICKNAME2[randomIndex2]);
     setPokemonData(pokemon);
     setIsOpen(false);
   };
@@ -79,7 +85,7 @@ const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
           <li
             className={styles.dropdown__list}
             key={pokemon?.id}
-            onClick={() => selectPokemon(pokemon ? pokemon : null)}
+            onClick={() => handleClick(pokemon ? pokemon : null)}
           >
             <div>
               <img

src/components/plate/FilterPlates.tsx

@@ -4,12 +4,18 @@ import useSelectedStore from '@/store/useSelectedStore';
 import PlateHideButton from './PlateHideButton';
 import { useState } from 'react';
 import Inner from '../Inner';
+import { AnimatePresence, motion } from 'framer-motion';
 
 const FilterPlates = () => {
   const koreanTypes = Object.values(POKEMON_TYPES);
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const { selectedPlate, setSelectedPlate } = useSelectedStore();
 
+  const variants = {
+    open: { height: '200px' },
+    closed: { height: 0 },
+  };
+
   const renderTypes = (types: string[]) =>
     types.map((koreanType) => {
       const isPlateSelected = selectedPlate.includes(koreanType);
@@ -38,19 +44,26 @@ const FilterPlates = () => {
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.type_outer_container}>
-        <Inner>
-          <div
-            className={`${styles.type_container} ${
-              isOpen ? '' : styles.closed
-            }`}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial="closed"
+            animate="open"
+            exit="closed"
+            variants={variants}
+            transition={{ duration: 0.6 }}
+            className={styles.container}
           >
-            <span>*속성을 선택해주세요.</span>
-            <div className={styles.type_plates}>{renderTypes(koreanTypes)}</div>
-          </div>
-        </Inner>
-      </div>
-      <PlateHideButton setIsOpen={setIsOpen} />
+            <Inner>
+              <motion.span>*속성을 선택해주세요.</motion.span>
+              <motion.div className={styles.type_plates}>
+                {renderTypes(koreanTypes)}
+              </motion.div>
+            </Inner>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <PlateHideButton isOpen={isOpen} setIsOpen={setIsOpen} />
     </div>
   );
 };

src/components/plate/Plate.module.scss

@@ -2,15 +2,38 @@
 @import 'src/styles/theme.scss';
 
 .wrapper {
+  position: relative;
+  height: 100%;
+  margin-top: -30px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  margin-bottom: 60px;
+
+  .container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: #fff;
+    border-bottom: 3px solid #000;
+    overflow: hidden;
+
+    .type_plates {
+      margin-top: 20px;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+  }
 }
 
-.type_outer_container {
-  width: 100%;
-  height: 100%;
-  border-bottom: 4px solid #000;
+.plate_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .type_plate {
@@ -28,36 +51,6 @@
   gap: 3px;
 }
 
-.type_container {
-  padding: 25px 0;
-  gap: 15px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-height: 500px;
-  opacity: 1;
-  transition: 0.3s ease-out;
-
-  &.closed {
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    padding: 0;
-  }
-
-  > span {
-    align-self: flex-start;
-    font-size: 13px;
-    font-weight: 400;
-  }
-
-  .type_plates {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-}
-
 @each $type, $color in $type-colors {
   .click_plate.#{$type} {
     @include plate_click_style($color);
@@ -87,6 +80,9 @@
 }
 
 .hide_button {
+  position: absolute;
+  top: unset;
+  bottom: -25px;
   cursor: pointer;
   outline: none;
   background-color: transparent;
@@ -96,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/Plate.tsx

@@ -29,7 +29,9 @@ const Plate = ({ pokemonTypeProp }: PlateProp) => {
     </div>
   );
 
-  return <div className={styles.wrapper}>{renderTypes(pokemonTypeProp)}</div>;
+  return (
+    <div className={styles.plate_wrapper}>{renderTypes(pokemonTypeProp)}</div>
+  );
 };
 
 export default Plate;

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>
   );
 };
 

src/styles/mixin.scss

@@ -32,7 +32,7 @@
 }
 
 @mixin plate_pokemon_type($color) {
-  border-radius: 8px;
+  border-radius: 16.5px;
   align-items: center;
   font-size: 10px;
   justify-content: center;
@@ -54,3 +54,21 @@
   width: $width;
   height: $height;
 }
+
+@mixin mobile {
+  @media (max-width: 738px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (max-width: 1366px) {
+    @content;
+  }
+}