feat : 정렬 토글 버튼 구현

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) =>

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>

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>
+  )
+}

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,
 }

frontend/src/utils/types.ts

@@ -16,3 +16,5 @@ export type MultipleFilterType = {
   category: 'position' | 'skill'
   name: PositionType | SkillType
 }
+
+export type DirectionType = 'ASC' | 'DESC'