✨feat: 공고 검색 Tag 더미데이터 구현하기 #15

Team-inglo · Oct 21, 2024 · ec4aec8 · ec4aec8
1 parent 1bf5af0
commit ec4aec8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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',
+}