feat: add platform filter to ProjectPage

src/lib/api/remote/project.ts

@@ -1,10 +1,12 @@
 import { BASE_URL, DEFAULT_TIMEOUT } from '@src/lib/constants/client';
 import axios from 'axios';
+import qs from 'qs';
 import {
   GetProjectDetailResponse,
   GetProjectListResponse,
   ProjectAPI,
   ProjectCategoryType,
+  ProjectPlatformType,
 } from '../../types/project';
 
 const client = axios.create({
@@ -21,9 +23,14 @@ const getProjectDetail = async (projectId: number): Promise<GetProjectDetailResp
   return { project: { ...data, serviceTypes } };
 };
 
-const getProjectList = async (category?: ProjectCategoryType): Promise<GetProjectListResponse> => {
-  const queryString = category !== ProjectCategoryType.ALL ? `?filter=${category}` : '';
-  const { data } = await client.get(`/projects${queryString}`);
+const getProjectList = async (
+  category: ProjectCategoryType,
+  platform: ProjectPlatformType,
+): Promise<GetProjectListResponse> => {
+  const categoryParameter = category === ProjectCategoryType.ALL ? {} : { filter: category };
+  const platformParameter = platform === ProjectPlatformType.ALL ? {} : { platform };
+  const parameter = qs.stringify({ ...categoryParameter, ...platformParameter });
+  const { data } = await client.get(`/projects?${parameter}`);
   return { projects: data };
 };
 

src/lib/constants/project.ts

@@ -1,4 +1,4 @@
-import { ProjectCategoryType } from '@src/lib/types/project';
+import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 
 export const activeProjectCategoryList: ProjectCategoryType[] = [
   ProjectCategoryType.ALL,
@@ -31,3 +31,15 @@ export const projectCategoryDescription: Record<ProjectCategoryType, string> = {
     '기획, 디자인, 개발 파트가 배운 내용을 통해 간단한 아이디어를 시각화 해보는 프로젝트, 합동 세미나',
   [ProjectCategoryType.ETC]: '',
 };
+
+export const activeProjectPlatformList: ProjectPlatformType[] = [
+  ProjectPlatformType.ALL,
+  ProjectPlatformType.APP,
+  ProjectPlatformType.WEB,
+];
+
+export const projectPlatformLabel: Record<ProjectPlatformType, string> = {
+  [ProjectPlatformType.ALL]: '전체',
+  [ProjectPlatformType.APP]: '앱',
+  [ProjectPlatformType.WEB]: '웹',
+};

src/lib/types/project.ts

@@ -1,3 +1,9 @@
+export enum ProjectPlatformType {
+  ALL = 'ALL',
+  WEB = 'WEB',
+  APP = 'APP',
+}
+
 export enum ProjectCategoryType {
   ALL = 'ALL',
   APPJAM = 'APPJAM',
@@ -59,5 +65,8 @@ export interface GetProjectListResponse {
 
 export interface ProjectAPI {
   getProjectDetail(projectId: number): Promise<GetProjectDetailResponse>;
-  getProjectList(category?: ProjectCategoryType): Promise<GetProjectListResponse>;
+  getProjectList(
+    category: ProjectCategoryType,
+    platform: ProjectPlatformType,
+  ): Promise<GetProjectListResponse>;
 }

src/views/ProjectPage/ProjectPage.tsx

@@ -2,16 +2,23 @@ import { css } from '@emotion/react';
 import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
-import { activeProjectCategoryList, projectCategoryLabel } from '@src/lib/constants/project';
-import { ProjectCategoryType } from '@src/lib/types/project';
+import {
+  activeProjectCategoryList,
+  activeProjectPlatformList,
+  projectCategoryLabel,
+  projectPlatformLabel,
+} from '@src/lib/constants/project';
+import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 import { ProjectList } from './components';
 import RecentProjectList from './components/RecentProjectList';
 import useFetch from './hooks/useFetch';
 import S from './styles';
 
 function Projects() {
   const [selectedCategory, setCategory] = useState<ProjectCategoryType>(ProjectCategoryType.ALL);
-  const state = useFetch(selectedCategory);
+  const [selectedPlatform, setPlatform] = useState<ProjectPlatformType>(ProjectPlatformType.ALL);
+
+  const state = useFetch(selectedCategory, selectedPlatform);
 
   return (
     <PageLayout
@@ -25,14 +32,24 @@ function Projects() {
           <RecentProjectList />
           <S.Spacing />
           <S.SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</S.SectionTitle>
-          <Select
-            options={activeProjectCategoryList}
-            labels={projectCategoryLabel}
-            baseLabel="활동"
-            selectedValue={selectedCategory}
-            setSelectedValue={setCategory}
-            baseValue={ProjectCategoryType.ALL}
-          />
+          <S.FilterWrapper>
+            <Select
+              options={activeProjectCategoryList}
+              labels={projectCategoryLabel}
+              baseLabel="활동"
+              selectedValue={selectedCategory}
+              setSelectedValue={setCategory}
+              baseValue={ProjectCategoryType.ALL}
+            />
+            <Select
+              options={activeProjectPlatformList}
+              labels={projectPlatformLabel}
+              baseLabel="플랫폼"
+              selectedValue={selectedPlatform}
+              setSelectedValue={setPlatform}
+              baseValue={ProjectPlatformType.ALL}
+            />
+          </S.FilterWrapper>
           <ProjectList state={state} selectedCategory={selectedCategory} />
         </S.ContentWrapper>
       </S.Root>

src/views/ProjectPage/components/RecentProjectList/index.tsx

@@ -1,11 +1,11 @@
-import { ProjectCategoryType } from '@src/lib/types/project';
+import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 import useFetch from '../../hooks/useFetch';
 import S from '../../styles';
 import RecentProjectListCarousel from './Carousel';
 import RecentProjectListItem from './Item';
 
 export default function RecentProjectList() {
-  const state = useFetch(ProjectCategoryType.ALL, 'updatedAt');
+  const state = useFetch(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt');
 
   if (state._TAG !== 'OK') return null;
 

src/views/ProjectPage/hooks/useFetch.ts

@@ -1,15 +1,20 @@
 import { useCallback } from 'react';
 import useFetchBase from '@src/hooks/useFetchBase';
 import { api } from '@src/lib/api';
-import { ProjectCategoryType, ProjectType } from '@src/lib/types/project';
+import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project';
 import { sortBy } from '@src/lib/utils/array';
 
-const useFetch = (selected?: ProjectCategoryType, sortProp?: keyof ProjectType) => {
+const useFetch = (
+  selectedCategory: ProjectCategoryType,
+  selectedPlatform: ProjectPlatformType = ProjectPlatformType.ALL,
+  sortProp?: keyof ProjectType,
+) => {
   const willFetch = useCallback(async () => {
-    const response = await api.projectAPI.getProjectList(selected);
+    const response = await api.projectAPI.getProjectList(selectedCategory, selectedPlatform);
     if (sortProp) return sortBy<ProjectType>(response.projects, sortProp);
     return response.projects;
-  }, [selected, sortProp]);
+  }, [selectedCategory, selectedPlatform, sortProp]);
+
   const state = useFetchBase(willFetch);
   return state;
 };

src/views/ProjectPage/styles.ts

@@ -54,5 +54,15 @@ const Spacing = styled.div`
   }
 `;
 
-const S = { SectionTitle, Root, ContentWrapper, Spacing };
+const FilterWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    gap: 7px;
+  }
+`;
+
+const S = { SectionTitle, Root, ContentWrapper, Spacing, FilterWrapper };
 export default S;