From ec4aec8284211c4dd5431078b5ec676ac96fdf77 Mon Sep 17 00:00:00 2001
From: nakyong82 <nakyong7770@gmail.com>
Date: Mon, 21 Oct 2024 23:00:51 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20=EA=B3=B5=EA=B3=A0=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20Tag=20=EB=8D=94=EB=AF=B8=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=ED=95=98=EA=B8=B0=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PostSearch/PostSearchFilterList.tsx       | 64 ++++++++++---------
 .../PostSearch/PostSearchResult.tsx           | 11 +++-
 src/constants/postSearch.ts                   | 13 ++++
 3 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 src/constants/postSearch.ts

diff --git a/src/components/PostSearch/PostSearchFilterList.tsx b/src/components/PostSearch/PostSearchFilterList.tsx
index f1696649..8b390ce2 100644
--- a/src/components/PostSearch/PostSearchFilterList.tsx
+++ b/src/components/PostSearch/PostSearchFilterList.tsx
@@ -1,40 +1,44 @@
 import Tag from '@/components/Common/Tag';
 import FilterIcon from '@/assets/icons/FilterIcon.svg?react';
+import { FILTER_CATEGORY } from '@/constants/postSearch';
+
+// tag 더미데이터
+const TAG_LIST = [
+  {
+    category: FILTER_CATEGORY.INDUSTRY,
+    value: 'GENERAL_INTERPRETATION_TRANSLATION',
+  },
+  {
+    category: FILTER_CATEGORY.VISA,
+    value: 'D-2-1',
+  },
+  {
+    category: FILTER_CATEGORY.EMPLOYMENT_TYPE,
+    value: 'PARTTIME',
+  },
+  {
+    category: FILTER_CATEGORY.RECRUITMENT_PERIOD,
+    value: 'OPENING',
+  },
+];
 
 const PostSearchFilterList = () => {
   return (
     <section className="relative w-full pt-[0.75rem] pb-[0.5rem] pr-[2.5rem]">
       <div className="w-full pl-[1.5rem] flex items-center gap-[0.5rem] overflow-x-scroll whitespace-nowrap no-scrollbar">
-        <Tag
-          value={'~~~~~~ERFWERF'}
-          onDelete={(value) => console.log(value)}
-          padding="0.313rem 0.5rem 0.313rem 0.75rem"
-          isRounded={true}
-          hasCheckIcon={false}
-          backgroundColor={'#FEF387'}
-          color="#1E1926"
-          fontStyle="body-3"
-        />
-        <Tag
-          value={'~~~~~~ERFWERF'}
-          onDelete={(value) => console.log(value)}
-          padding="0.313rem 0.5rem 0.313rem 0.75rem"
-          isRounded={true}
-          hasCheckIcon={false}
-          backgroundColor={'#FEF387'}
-          color="#1E1926"
-          fontStyle="body-3"
-        />
-        <Tag
-          value={'~~~~~~ERFWERF'}
-          onDelete={(value) => console.log(value)}
-          padding="0.313rem 0.5rem 0.313rem 0.75rem"
-          isRounded={true}
-          hasCheckIcon={false}
-          backgroundColor={'#FEF387'}
-          color="#1E1926"
-          fontStyle="body-3"
-        />
+        {TAG_LIST.map((value, index) => (
+          <Tag
+            key={`${index}_${value}`}
+            value={value.value}
+            onDelete={(value) => console.log(value)}
+            padding="0.313rem 0.5rem 0.313rem 0.75rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor={'#FEF387'}
+            color="#1E1926"
+            fontStyle="body-3"
+          />
+        ))}
       </div>
       <button className="absolute top-0 right-0 px-[0.5rem] py-[0.75rem]">
         <FilterIcon />
diff --git a/src/components/PostSearch/PostSearchResult.tsx b/src/components/PostSearch/PostSearchResult.tsx
index 51c64470..498ebce5 100644
--- a/src/components/PostSearch/PostSearchResult.tsx
+++ b/src/components/PostSearch/PostSearchResult.tsx
@@ -1,6 +1,7 @@
 import NoSearchResultImg from '@/assets/images/NoSearchResultImg.png';
 import { JobPostingItemType } from '@/types/common/jobPostingItem';
 import JobPostingCard from '@/components/Common/JobPostingCard';
+import { useState } from 'react';
 
 // 공고 목록 더미데이터
 const JOB_POSTING_LIST: JobPostingItemType[] = [
@@ -42,12 +43,20 @@ const JOB_POSTING_LIST: JobPostingItemType[] = [
   },
 ];
 
+enum SORT_TYPE {
+  POPULAR = 'Popular',
+  RECOMMENDED = 'Recommended',
+  RECENT = 'Recent',
+}
+
 const PostSearchResult = () => {
+  // TODO: 홈에서 See more 버튼 클릭 시 해당 메뉴로 정렬하기
+  const [,] = 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>Recent</button>
+        <button>dropdown 만들기</button>
       </div>
       {JOB_POSTING_LIST?.length ? (
         JOB_POSTING_LIST.map((value: JobPostingItemType) => (
diff --git a/src/constants/postSearch.ts b/src/constants/postSearch.ts
new file mode 100644
index 00000000..ebeeac5c
--- /dev/null
+++ b/src/constants/postSearch.ts
@@ -0,0 +1,13 @@
+export const enum FILTER_CATEGORY {
+  REGION_1DEPTH = 'region_1depth', // 시, 도
+  REGION_2DEPTH = 'region_2depth', // 구
+  REGION_3DEPTH = 'region_3depth', // 동
+  INDUSTRY = 'industry',
+  WORK_PERIOD = 'work_period',
+  WORK_DAYS_PER_WEEK = 'work_days_per_week',
+  WORKING_DAY = 'working_day',
+  WORKING_HOURS = 'working_hours',
+  RECRUITMENT_PERIOD = 'recruitment_period',
+  EMPLOYMENT_TYPE = 'employment_type',
+  VISA = 'visa',
+}