From c18be562e2d9db8e137d68cacc1f13406ac712ca Mon Sep 17 00:00:00 2001
From: rachel4w2 <rachel4w2@naver.com>
Date: Mon, 27 Nov 2023 14:59:55 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=A0=95=EB=A0=AC=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/recruitment/page.tsx         |  5 ++++-
 .../components/recruitment/main/Filter.tsx    |  5 +++--
 .../recruitment/main/SortToggleButton.tsx     | 21 +++++++++++++++++++
 frontend/src/utils/atoms.ts                   |  8 ++++++-
 frontend/src/utils/types.ts                   |  2 ++
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/recruitment/main/SortToggleButton.tsx

diff --git a/frontend/src/app/recruitment/page.tsx b/frontend/src/app/recruitment/page.tsx
index e2e26ed..14494be 100644
--- a/frontend/src/app/recruitment/page.tsx
+++ b/frontend/src/app/recruitment/page.tsx
@@ -11,6 +11,7 @@ import {
   multiplefilterState,
   keywordfilterState,
   recruitfilterState,
+  directionState,
 } from '../../utils/atoms'
 import Filter from '../../components/recruitment/main/Filter'
 import RecruitmentCard from '../../components/recruitment/main/RecruitmentCard'
@@ -29,6 +30,7 @@ export default function Recruitment() {
   const multipleFilter = useRecoilValue(multiplefilterState)
   const keywordFilter = useRecoilValue(keywordfilterState)
   const recruitFilter = useRecoilValue(recruitfilterState)
+  const direction = useRecoilValue(directionState)
 
   const [postCount, setPostCount] = useState(0)
   const router = useRouter()
@@ -41,6 +43,7 @@ export default function Recruitment() {
     const params = new URLSearchParams()
     params.set('page', String(pageParam))
     params.set('size', '12')
+    params.set('direction', direction)
 
     const positions = multipleFilter
       .filter((v) => v.category === 'position')
@@ -86,7 +89,7 @@ export default function Recruitment() {
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
     useInfiniteQuery(
-      ['recruitments', multipleFilter, keywordFilter, recruitFilter],
+      ['recruitments', multipleFilter, keywordFilter, recruitFilter, direction],
       getData,
       {
         getNextPageParam: (lastPage, pages) =>
diff --git a/frontend/src/components/recruitment/main/Filter.tsx b/frontend/src/components/recruitment/main/Filter.tsx
index a956eec..66f066f 100644
--- a/frontend/src/components/recruitment/main/Filter.tsx
+++ b/frontend/src/components/recruitment/main/Filter.tsx
@@ -1,3 +1,4 @@
+import SortToggleButton from './SortToggleButton'
 import ToggleButton from './ToggleButton'
 
 export type FilterPropsType = {
@@ -8,8 +9,8 @@ export default function Filter({ postCount }: FilterPropsType) {
   return (
     <div className="flex items-center h-[30px] w-[900px] px-4 justify-between text-[13px] pb-4 border-b-[1px]">
       <div className="flex">
-        <span className="w-[62px]">게시글 {postCount}개</span>
-        <div className="pl-4 ml-3 border-l-2">최신 순</div>
+        <span className="w-[73px] border-r-2 mr-3">게시글 {postCount}개</span>
+        <SortToggleButton />
       </div>
       <div className="flex items-center">
         <span className="mr-2">모집 중인 프로젝트만 보기</span>
diff --git a/frontend/src/components/recruitment/main/SortToggleButton.tsx b/frontend/src/components/recruitment/main/SortToggleButton.tsx
new file mode 100644
index 0000000..3c62747
--- /dev/null
+++ b/frontend/src/components/recruitment/main/SortToggleButton.tsx
@@ -0,0 +1,21 @@
+import { useRecoilState } from 'recoil'
+import { directionState } from '../../../utils/atoms'
+
+export default function SortToggleButton() {
+  const [direction, setDirection] = useRecoilState(directionState)
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        if (direction === 'ASC') {
+          setDirection('DESC')
+        } else {
+          setDirection('ASC')
+        }
+      }}
+    >
+      {direction === 'ASC' ? '오래된 순 ▲' : '최신 순 ▼'}
+    </button>
+  )
+}
diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts
index b98b0ef..5c4b849 100644
--- a/frontend/src/utils/atoms.ts
+++ b/frontend/src/utils/atoms.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil'
 import { recoilPersist } from 'recoil-persist'
-import { MultipleFilterType } from './types'
+import { DirectionType, MultipleFilterType } from './types'
 
 const { persistAtom } = recoilPersist()
 
@@ -115,6 +115,11 @@ const recruitfilterState = atom<boolean>({
   default: false,
 })
 
+const directionState = atom<DirectionType>({
+  key: 'directionState',
+  default: 'ASC',
+})
+
 export {
   titleState,
   tldrState,
@@ -137,4 +142,5 @@ export {
   multiplefilterState,
   keywordfilterState,
   recruitfilterState,
+  directionState,
 }
diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
index 2501ff0..190de1d 100644
--- a/frontend/src/utils/types.ts
+++ b/frontend/src/utils/types.ts
@@ -16,3 +16,5 @@ export type MultipleFilterType = {
   category: 'position' | 'skill'
   name: PositionType | SkillType
 }
+
+export type DirectionType = 'ASC' | 'DESC'