feat: add platform filter to ProjectPage

sopt-makers · Oct 27, 2023 · cc316c9 · cc316c9
1 parent 026cdad
commit cc316c9
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 29 deletions.
diff --git a/src/lib/api/remote/project.ts b/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 };
 };
 

diff --git a/src/lib/constants/project.ts b/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,
@@ -16,3 +16,15 @@ export const projectCategoryLabel: Record<ProjectCategoryType, string> = {
   [ProjectCategoryType.JOINTSEMINAR]: '합동 세미나',
   [ProjectCategoryType.ETC]: '기타',
 };
+
+export const activeProjectPlatformList: ProjectPlatformType[] = [
+  ProjectPlatformType.ALL,
+  ProjectPlatformType.APP,
+  ProjectPlatformType.WEB,
+];
+
+export const projectPlatformLabel: Record<ProjectPlatformType, string> = {
+  [ProjectPlatformType.ALL]: '전체',
+  [ProjectPlatformType.APP]: '앱',
+  [ProjectPlatformType.WEB]: '웹',
+};
diff --git a/src/lib/types/project.ts b/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>;
 }
diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
@@ -1,35 +1,52 @@
 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 useFetch from './hooks/useFetch';
-import { ContentWrapper, Root, SectionTitle } from './styles';
+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 showScrollTopButton>
-      <Root>
-        <ContentWrapper>
-          <SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</SectionTitle>
-          <Select
-            options={activeProjectCategoryList}
-            labels={projectCategoryLabel}
-            baseLabel="활동"
-            selectedValue={selectedCategory}
-            setSelectedValue={setCategory}
-            baseValue={ProjectCategoryType.ALL}
-          />
+      <S.Root>
+        <S.ContentWrapper>
+          <S.SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</S.SectionTitle>
+          <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 ?? ProjectCategoryType.ALL}
           />
-        </ContentWrapper>
-      </Root>
+        </S.ContentWrapper>
+      </S.Root>
     </PageLayout>
   );
 }

diff --git a/src/views/ProjectPage/hooks/useFetch.ts b/src/views/ProjectPage/hooks/useFetch.ts
@@ -1,13 +1,16 @@
 import { useCallback } from 'react';
 import useFetchBase from '@src/hooks/useFetchBase';
 import { api } from '@src/lib/api';
-import { ProjectCategoryType } from '@src/lib/types/project';
+import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 
-const useFetch = (selected: ProjectCategoryType) => {
+const useFetch = (
+  selectedCategory: ProjectCategoryType,
+  selectedPlatform: ProjectPlatformType = ProjectPlatformType.ALL,
+) => {
   const willFetch = useCallback(async () => {
-    const response = await api.projectAPI.getProjectList(selected);
+    const response = await api.projectAPI.getProjectList(selectedCategory, selectedPlatform);
     return response.projects;
-  }, [selected]);
+  }, [selectedCategory, selectedPlatform]);
   const state = useFetchBase(willFetch);
   return state;
 };

diff --git a/src/views/ProjectPage/styles.ts b/src/views/ProjectPage/styles.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 
-export const SectionTitle = styled.div`
+const SectionTitle = styled.div`
   color: ${colors.gray10};
   font-size: 28px;
   font-style: normal;
@@ -10,15 +10,15 @@ export const SectionTitle = styled.div`
   letter-spacing: -0.56px;
 `;
 
-export const Root = styled.div`
+const Root = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   margin: 0 auto;
 `;
 
-export const ContentWrapper = styled.div`
+const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -38,3 +38,16 @@ export const ContentWrapper = styled.div`
     width: 360px;
   }
 `;
+
+const FilterWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    gap: 7px;
+  }
+`;
+
+const S = { SectionTitle, Root, ContentWrapper, FilterWrapper };
+export default S;