feat(client): 프로젝트 보여주는 페이지 정렬기능 추가

apps/client/src/app/projects/page.tsx

@@ -1,15 +1,29 @@
+'use client';
+
 import { Container, Wrapper } from '@/components/layouts';
 import { ProjectList, ProjectSelectBox } from '@/components/projects';
 import { ProjectRecruitOptions, ProjectRecruitStatus } from '@/constants';
+import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa6';
 
 const ProjectsPage = () => {
+  const [projectStatus, setProjectStatus] = useState(ProjectRecruitStatus[0]?.state);
+  const [projectOptions, setProjectOpoins] = useState(ProjectRecruitOptions[0]?.state);
+
+  console.log(projectStatus, projectOptions); // 백엔드로 요청보낼때 사용될 코드
+
   return (
     <Container className="py-10 min-h-[100vh] bg-gray-10">
       <Wrapper>
         <div className="h-[40px] mb-5 flex items-center gap-[10px]">
-          <ProjectSelectBox options={ProjectRecruitStatus} />
-          <ProjectSelectBox options={ProjectRecruitOptions} />
+          <ProjectSelectBox
+            options={ProjectRecruitStatus}
+            setSelectedSortOption={setProjectStatus}
+          />
+          <ProjectSelectBox
+            options={ProjectRecruitOptions}
+            setSelectedSortOption={setProjectOpoins}
+          />
         </div>
         <div className="flex items-end justify-between">
           <span className="text-xl font-medium">프로젝트 목록 📋</span>

apps/client/src/components/projects/projectSelectBox.tsx

@@ -1,51 +1,55 @@
 'use client';
 
-import { ProjectSortOption } from '@/types';
+import type { ProjectSortOption, ProjectSortOptionState } from '@/types';
 import { Text } from '@jjoing/ui';
-import { memo, useState } from 'react';
+import { Dispatch, memo, SetStateAction, useState } from 'react';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 
 type ProjectSelectBoxProps = {
   options: ProjectSortOption[];
+  setSelectedSortOption: Dispatch<SetStateAction<ProjectSortOptionState>>;
 };
 
-const ProjectSelectBox = memo(({ options }: ProjectSelectBoxProps) => {
-  const [isClickButton, setIsClickButton] = useState(false);
-  const [clickButtonOption, setClickButtonOption] = useState(options[0]); // 백엔드로 요청할때는 id를 넘겨야 하므로 객체를 기본값으로 가짐
+const ProjectSelectBox = memo(
+  ({ options, setSelectedSortOption }: ProjectSelectBoxProps) => {
+    const [isClickButton, setIsClickButton] = useState(false);
+    const [clickButtonOption, setClickButtonOption] = useState(options[0]);
 
-  const handleOpenAndCloseOptions = () => {
-    setIsClickButton(!isClickButton);
-  };
+    const handleOpenAndCloseOptions = () => {
+      setIsClickButton(!isClickButton);
+    };
 
-  const handleOptionClick = (option: ProjectSortOption) => {
-    setClickButtonOption(option);
-    setIsClickButton(false);
-  };
+    const handleOptionClick = (option: ProjectSortOption) => {
+      setClickButtonOption(option);
+      setSelectedSortOption(option.state);
+      setIsClickButton(false);
+    };
 
-  return (
-    <div className="flex flex-col gap-5 relative">
-      <button
-        className="w-[150px] h-[40px] px-3 border border-gray-300 focus:border-gray-400 rounded-md bg-white flex items-center justify-between transition duration-30"
-        onClick={handleOpenAndCloseOptions}
-      >
-        <Text type="body3">{clickButtonOption?.content}</Text>
-        {isClickButton ? <IoIosArrowUp /> : <IoIosArrowDown />}
-      </button>
-      {isClickButton && (
-        <div className="absolute top-[45px] w-full border rounded-md border-gray-300 bg-white z-10">
-          {options.map((option) => (
-            <div
-              className="w-full h-[40px] px-3 flex items-center cursor-p rounded-md hover:bg-gray-100 transition duration-30"
-              onClick={() => handleOptionClick(option)}
-              key={option.id}
-            >
-              <Text type="body3">{option.content}</Text>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});
+    return (
+      <div className="flex flex-col gap-5 relative">
+        <button
+          className="w-[150px] h-[40px] px-3 border border-gray-300 focus:border-gray-400 rounded-md bg-white flex items-center justify-between transition duration-30"
+          onClick={handleOpenAndCloseOptions}
+        >
+          <Text type="body3">{clickButtonOption?.content}</Text>
+          {isClickButton ? <IoIosArrowUp /> : <IoIosArrowDown />}
+        </button>
+        {isClickButton && (
+          <div className="absolute top-[45px] w-full border rounded-md border-gray-300 bg-white z-10">
+            {options.map((option) => (
+              <div
+                className="w-full h-[40px] px-3 flex items-center cursor-p rounded-md hover:bg-gray-100 transition duration-30"
+                onClick={() => handleOptionClick(option)}
+                key={option.id}
+              >
+                <Text type="body3">{option.content}</Text>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 export default ProjectSelectBox;

apps/client/src/constants/projectRecruitOptions.ts

@@ -1,17 +1,19 @@
-export const ProjectRecruitOptions = [
+import type { ProjectSortOption } from '@/types';
+
+export const ProjectRecruitOptions: ProjectSortOption[] = [
   {
     id: 0,
     content: '최신순',
-    criteria: '',
+    state: '',
   },
   {
     id: 1,
     content: '조회수 많은 순',
-    criteria: 'view',
+    state: 'view',
   },
   {
     id: 2,
     content: '좋아요 많은 순',
-    criteria: 'like',
+    state: 'like',
   },
 ];

apps/client/src/constants/projectRecruitStatus.ts

@@ -1,4 +1,6 @@
-export const ProjectRecruitStatus = [
+import type { ProjectSortOption } from '@/types';
+
+export const ProjectRecruitStatus: ProjectSortOption[] = [
   {
     id: 0,
     content: '전체 프로젝트',

apps/client/src/types/index.ts

@@ -1 +1,2 @@
 export * from './projectSortOption';
+export * from './projectSortOptionState';

apps/client/src/types/projectSortOption.ts

@@ -1,6 +1,7 @@
+import type { ProjectSortOptionState } from './projectSortOptionState';
+
 export type ProjectSortOption = {
   id: number;
   content: string;
-  criteria?: string;
-  state?: string;
+  state?: ProjectSortOptionState;
 };

apps/client/src/types/projectSortOptionState.ts

@@ -0,0 +1,7 @@
+export type ProjectSortOptionState =
+  | ''
+  | 'view'
+  | 'like'
+  | 'FINDING'
+  | 'FOUND'
+  | undefined;