feat: 모바일에서 커스텀 아이콘 드롭다운 메뉴 추가

pages/addboard/index.tsx

@@ -104,6 +104,7 @@ const AddBoard: React.FC = () => {
       className="add-product-container container my-16 mx-auto w-[344px] md:w-[696px] xl:w-[1200px] flex flex-col gap-24"
     >
       {/* 등록버튼 */}
+
       <div className="add-product-header flex justify-between items-center">
         <h1 className="add-product-title text-cool-gary-800 font-bold text-20">
           상품 등록하기

pages/boards/components/SortDropdown.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import { useReducer } from "react";
+
+interface SortDropdownProps {
+  handleSortChange: (order: string) => void;
+}
+
+const SortDropdown: React.FC<SortDropdownProps> = ({ handleSortChange }) => {
+  const [isOpen, setIsOpen] = useReducer(state => {
+    return !state;
+  }, false);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsOpen();
+    const target = e.target as HTMLElement;
+    if (target.id === "recent") {
+      handleSortChange("recent");
+    } else if (target.id === "like") {
+      handleSortChange("like");
+    }
+  };
+  return (
+    <div className="drop-down-container" onClick={handleClick}>
+      {/* 토글 버튼 */}
+      <Image
+        className="cursor-pointer"
+        src="/ic_sort.svg"
+        id="toggleIcon"
+        alt="정렬 아이콘"
+        width={40}
+        height={40}
+      />
+      {/* 옵션 목록 */}
+      {isOpen && (
+        <div className="drop-down-overlay z-10 w-full h-full fixed top-0 left-0 opacity-0" />
+      )}
+      {isOpen && (
+        <ul className="drop-down-list z-20 absolute right-2 top-50 w-100 border-1 flex flex-col bg-white rounded-md">
+          <li
+            className="w-full text-center py-4 border-b-1 cursor-pointer hover:bg-cool-gary-100"
+            id="recent"
+          >
+            최신순
+          </li>
+          <li
+            className="w-full text-center py-4 cursor-pointer hover:bg-cool-gary-100"
+            id="like"
+          >
+            인기순
+          </li>
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SortDropdown;

pages/boards/index.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useResponsive } from "../../lib/useMediaQuery";
 import { debounce } from "lodash";
 import { useRouter } from "next/router";
+import SortDropdown from "./components/SortDropdown";
 
 interface List {
   id: number;
@@ -44,10 +45,9 @@ const Boards: React.FC<BoardsProps> = ({ articles: initialArticles }) => {
     setBestArticles(sortedArticles.slice(0, 3));
   }, [articles]);
 
-  const handleSortChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { value } = e.target;
+  const handleSortChange = async (order: string) => {
     const response = await axiosJsonInstance.get(
-      `/articles?page=1&pageSize=10&orderBy=${value}`
+      `/articles?page=1&pageSize=10&orderBy=${order}`
     );
     setArticles(response.data.list);
   };
@@ -79,6 +79,7 @@ const Boards: React.FC<BoardsProps> = ({ articles: initialArticles }) => {
   return (
     <div className="container m-auto w-[343px] md:w-[696px] xl:w-[1200px]">
       <h2 className="font-bold text-20 mb-16">베스트 게시글</h2>
+
       {/* 베스트 게시글 영역 */}
       <div className="flex gap-16 xl:gap-24">
         {bestArticles.slice(0, itemsToShow).map(article => {
@@ -157,11 +158,11 @@ const Boards: React.FC<BoardsProps> = ({ articles: initialArticles }) => {
           onChange={handleInputChange}
         />
         {isMobile ? (
-          <Image src={"/ic_sort.svg"} alt="정렬아이콘" width={42} height={42} />
+          <SortDropdown handleSortChange={handleSortChange} />
         ) : (
           <div>
             <select
-              onChange={handleSortChange}
+              onChange={e => handleSortChange(e.target.value)}
               className="rounded-lg border pl-20 w-[130px] h-[42px] appearance-none relative"
             >
               <option value="recent">최신순</option>