✨feat: 공고 검색 페이지에서 dropdown 구현하기 #15

src/components/PostSearch/PostSearchResult.tsx

@@ -2,6 +2,7 @@ import NoSearchResultImg from '@/assets/images/NoSearchResultImg.png';
 import { JobPostingItemType } from '@/types/common/jobPostingItem';
 import JobPostingCard from '@/components/Common/JobPostingCard';
 import { useState } from 'react';
+import PostSearchSortDropdown from '@/components/PostSearch/PostSearchSortDropdown';
 
 // 공고 목록 더미데이터
 const JOB_POSTING_LIST: JobPostingItemType[] = [
@@ -51,12 +52,18 @@ enum SORT_TYPE {
 
 const PostSearchResult = () => {
   // TODO: 홈에서 See more 버튼 클릭 시 해당 메뉴로 정렬하기
-  const [,] = useState<SORT_TYPE>(SORT_TYPE.POPULAR);
+  const [selectedSort, setSelectedSort] = useState<SORT_TYPE>(
+    SORT_TYPE.POPULAR,
+  );
   return (
     <section className="flex flex-col items-center gap-[1rem] w-full mt-[1rem] px-[1.5rem]">
       <div className="w-full flex justify-between items-center">
         <h3 className="head-3 text-black">Search Result</h3>
-        <button>dropdown 만들기</button>
+        <PostSearchSortDropdown
+          options={Object.values(SORT_TYPE)}
+          value={selectedSort}
+          onSelect={(sort) => setSelectedSort(sort as SORT_TYPE)}
+        />
       </div>
       {JOB_POSTING_LIST?.length ? (
         JOB_POSTING_LIST.map((value: JobPostingItemType) => (

src/components/PostSearch/PostSearchSortDropdown.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import DownArrowIcon from '@/assets/icons/PostSearch/DownArrowIcon.svg?react';
+
+type DropdownProps = {
+  options: string[];
+  value: string | undefined;
+  onSelect: (option: string) => void;
+};
+
+// DropdownModal 컴포넌트: 드롭다운 옵션을 표시하는 모달
+const DropdownModal = ({ options, value, onSelect }: DropdownProps) => {
+  return (
+    <div className="w-min absolute top-[1.7rem] right-0 shadow rounded-2xl bg-white border border-[#dcdcdc] flex flex-row items-start justify-start p-2 text-left text-sm text-[#656565]">
+      <div className="flex-1 flex flex-col items-start justify-start gap-[5px]">
+        {options.map((option, index) => (
+          <div
+            key={index}
+            className={`px-2 py-2 ${value == option && 'bg-[#f4f4f9] text-[#1e1926]'} rounded-lg  caption-1-sb`}
+            onClick={() => onSelect(option)}
+          >
+            {option}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const PostSearchSortDropdown = ({
+  options,
+  value,
+  onSelect,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-[0.25rem] py-[0.25rem] px-[0.5rem] rounded-[0.25rem] border-[0.031rem] border-[#1E1926] text-[#1E1926] caption-1-sb"
+      >
+        {value}
+        <div
+          className={`transition-transform duration-300 ${
+            isOpen && 'rotate-180'
+          }`}
+        >
+          <DownArrowIcon />
+        </div>
+      </button>
+      {isOpen && (
+        <DropdownModal value={value} options={options} onSelect={onSelect} />
+      )}
+    </div>
+  );
+};
+export default PostSearchSortDropdown;

src/pages/PostSearch/PostSearchPage.tsx

@@ -3,6 +3,7 @@ import PostSearchFilterList from '@/components/PostSearch/PostSearchFilterList';
 import PostSearchResult from '@/components/PostSearch/PostSearchResult';
 
 const PostSearchPage = () => {
+  // TODO: 여기서 검색어, 검색 필터 모두 전역변수로 관리하기
   return (
     <>
       <TextFieldHeader