Refactor/list page 애니메이션

src/components/CardList/index.jsx

@@ -21,6 +21,8 @@ const CardList = ({ cards, pageWidth }) => {
     Navigate(`/post/${id}`);
   };
 
+  const btnHoverAnimation = 'hover:transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out';
+
   return (
     <div className='grid grid-rows-3 grid-cols-2 gap-4 md:gap-5 md:grid-rows-2 md:grid-cols-3 tablet:grid-cols-tabletLow tablet:justify-center'>
       {cards.map((item, i) => {
@@ -30,7 +32,7 @@ const CardList = ({ cards, pageWidth }) => {
           <div
             onClick={() => cardMove(item.id)}
             role='presentation'
-            className={`flex flex-col justify-between border rounded-2xl border-gray-40 bg-gray-10 px-4 py-4 cursor-pointer ${DISPLAY_CLASS_NAME}`}
+            className={`flex flex-col justify-between border rounded-2xl border-gray-40 bg-gray-10 px-4 py-4 cursor-pointer ${DISPLAY_CLASS_NAME} ${btnHoverAnimation} hover:border-gray-50`}
             key={item.id}
           >
             <div className='flex flex-col'>

src/components/SortDropDown/index.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import DropDonwUpImg from 'assets/images/icons/ic_Arrow-up.svg';
 import { ReactComponent as DropDownUnderImg } from 'assets/images/icons/ic_Arrow-down.svg';
@@ -11,7 +11,10 @@ const SortDropDown = ({ changeSort }) => {
 
   const [sortText, setSortText] = useState('최신순');
 
-  const toggleDropdown = () => {
+  const dropdownRef = useRef(null);
+
+  const toggleDropdown = (e) => {
+    e.stopPropagation();
     setIsOpen((prevState) => !prevState);
   };
 
@@ -22,18 +25,33 @@ const SortDropDown = ({ changeSort }) => {
     changeSort(target.textContent);
   };
 
+  // 외부 클릭 시 드롭다운을 닫는 함수
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  // 컴포넌트 마운트 시 이벤트 리스너 추가
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className='relative'>
+    <div className='relative' ref={dropdownRef}>
       <button type='button' className={`flex items-center gap-2 border rounded-lg py-2 px-3 text-sm  ${isOpen ? 'border-gray-60' : 'border-gray-40'} `} onClick={toggleDropdown}>
         <span className={`text-sm ${isOpen ? 'text-gray-60' : 'text-gray-40'}`}>{sortText}</span>
         {isOpen ? <img src={DropDonwUpImg} alt='위쪽 화살표' className='w-3.5 h-3.5' /> : <DropDownUnderImg className='w-3.5 h-3.5 fill-gray-40' />}
       </button>
       {isOpen && (
-        <ul className='flex flex-col items-center absolute top-10 left-0 right-0 z-20 mt-2 border rounded-lg border-gray-30 bg-gray-10 text-sm shadow-1pt cursor-pointer'>
-          <li className={`py-2 ${sortText === '이름순' ? 'text-blue-50' : ''}`} onClick={onClick} role='presentation'>
+        <ul className='flex flex-col  absolute top-10 left-0 right-0 z-20 mt-2 border rounded-lg border-gray-30 bg-gray-10 text-sm shadow-1pt cursor-pointer'>
+          <li className={`py-2 ${sortText === '이름순' ? 'text-blue-50' : ''} text-center rounded-lg hover:bg-gray-20`} onClick={onClick} role='presentation'>
             이름순
           </li>
-          <li className={`py-2 ${sortText === '최신순' ? 'text-blue-50' : ''}`} onClick={onClick} role='presentation'>
+          <li className={`py-2 ${sortText === '최신순' ? 'text-blue-50' : ''} text-center rounded-lg hover:bg-gray-20`} onClick={onClick} role='presentation'>
             최신순
           </li>
         </ul>

src/pages/QuestionList/index.jsx

@@ -54,7 +54,7 @@ const QuestionList = () => {
           </Link>
 
           <button
-            className='flex flex-row justify-between gap-[4px] bg-brown-10 border-brown-40 border rounded-lg px-3 py-2 text-sm text-brown-40 font-normal whitespace-nowrap'
+            className='flex flex-row justify-between gap-[4px] bg-brown-10 border-brown-40 border rounded-lg px-3 py-2 text-sm text-brown-40 font-normal whitespace-nowrap transition-colors duration-300 hover:bg-brown-20'
             type='button'
             onClick={onClickPageMove}
           >