[FE] issue45: 필터 기능 구현 #68

nan-noo · 2022-07-16T17:36:29Z

요약

메인페이지 필터 기능 구현

세부사항

필터 다중 선택 - checkbox로 구현
필터 좌우 슬라이드 구현 - 끝까지 도달시 반대방향 끝으로 돌아가도록 구현 + 반응형, sticky
메인 페이지 로직 변경 - 스터디 검색 및 조회 api 하나로 데이터 불러오도록 수정 + 타입 수정
메인페이지를 감싸던 Wrapper를 필터 섹션 제외한 스터디카드리스트만 감싸도록 변경 - 필터 스타일 때문

close #45

[BE] 충돌 해결

… into feat/45-filter

svg에 색이 변하지 않는 이유 - stroke 대신 fill이 필요한 경우가 있었고, stroke의 width가 0이어서 변하지 않는 경우도 있었음

useQuery의 key에서 selectedFilters를 제거해서 해결 + 드롭박스가 카드에 가려지는 오류 수정 -> z-index 스타일 추가

+ throttle 적용

… feat/45-filter

스터디 조회와 검색 기능이 합쳐져서 msw 로직 수정 및 필요없는 api 함수 제거 + 스터디 key 수정(description -> excerpt)

슬라이드 버튼 클릭시 좌우 스크롤 + sticky 적용

끝까지 이동했을 때 한 번 더 클릭시 스크롤 반대 방향 끝으로 이동

max-width 지정

airman5573 · 2022-07-18T06:38:27Z

frontend/src/components/FilterButton/FilterButton.stories.tsx

+export const Default = Template.bind({});
+Default.args = {
+  shortTitle: 'JS',
+  description: '자바스크립트',


shortTitle -> shortName / description -> fullName이 좋을것 같아요. description은 어떤 장황한 설명이 있을때 더 어울린다고 생각합니다.

airman5573 · 2022-07-18T06:57:55Z

frontend/src/api/getStudyList.ts

+  const filterParams = selectedFilters.map(({ id, categoryName }) => `&${categoryName}=${id}`).join('');
+
+  const response = await axiosInstance.get(
+    `/api/studies/search?page=${page}&size=${size}&title=${title}&${filterParams}`,


title이 없는 경우에는 path에 넣지 않는게 좋을것 같아요

airman5573 · 2022-07-18T08:02:36Z

frontend/src/components/FilterButton/FilterButton.style.ts

+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+interface CheckBoxLabelProps {


interface vs type
비교하고 상의해서 하나로 일관성있게 가는걸로~
https://stackoverflow.com/questions/49562569/typed-react-props-as-type-or-an-interface

airman5573 · 2022-07-18T08:02:57Z

frontend/src/components/FilterButton/FilterButton.style.ts

+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;


row, column 갭이 모두 필요한가요?

airman5573 · 2022-07-18T08:04:34Z

frontend/src/components/FilterButton/FilterButton.tsx

+  shortName: string;
+  fullName: string;
+  isChecked: boolean;
+  handleFilterButtonClick: React.ChangeEventHandler<HTMLInputElement>;


HTMLInputElement인가요? 버튼 아닌가요?

airman5573 · 2022-07-18T08:36:38Z

frontend/src/mocks/handlers.ts

-    if (!title) {
-      return res(ctx.status(400), ctx.json({ message: '검색어가 비어있습니다' }));
-    }
+    const generation = req.url.searchParams.getAll('generation');


배열로 받으니까 복수 형태로 쓰는게 좋을것 같아요!

airman5573 · 2022-07-18T08:37:36Z

frontend/src/pages/MainPage/FilterSection/FilterSection.style.ts

+    position: sticky;
+    top: 85px;
+    max-width: 1280px;
+    height: fit-content;


필요한 속성인가요?

fit-content 말하신 건가요?? 삭제했습니다 ㅎㅎ

airman5573 · 2022-07-18T08:39:50Z

frontend/src/pages/MainPage/FilterSection/FilterSection.style.ts

+  }
+`;
+
+export const FilterSectionHeader = styled.h2`


필요한 컴포넌트인가요? 왜 항상 display: none인가요?

section 태그를 사용할 때는 일반적으로 헤더 태그가 필요하다고 생각해서 넣었는데, 제목이 필요한 상황에서만 넣으면 되는 것 같네요..! 우선 제거했을 때 접근성에는 문제가 없어 보입니다. mdn 문서에 should always라고 써져 있긴 합니당
stackoverflow에는 항상 필요하진 않다고 되어 있네요.

airman5573 · 2022-07-18T08:41:16Z

frontend/src/pages/MainPage/FilterSection/FilterSection.tsx

+  const tagFilters = filterByCategory(data?.filters, 3);
+
+  const handleLeftSlideButtonClick = () => {
+    if (!sliderRef.current) {


Suggested change

if (!sliderRef.current) {

if (!sliderRef.current) return

이쪽으로 맞추는건 어떨까요

airman5573 · 2022-07-18T08:44:50Z

frontend/src/pages/MainPage/index.tsx

+                    thumbnailUrl={study.thumbnail}
+                    thumbnailAlt={`${study.title} 스터디 이미지`}
+                    title={study.title}
+                    description={study.excerpt}


폴더명: 소문자 hyphen 사용 컴포넌트 파일명: Components.**.tsx 폴더 구조: layout 폴더에 헤더, 푸터 관련 컴포넌트 이동

nan-noo and others added 30 commits July 13, 2022 15:13

feat: FilterChip 컴포넌트 구현

cf4d457

Merge pull request woowacourse-teams#55 from woowacourse-teams/develop

83ccdef

[BE] 충돌 해결

style: FilterChip width overflow 수정

08310bc

feat: CheckListItem 컴포넌트 구현

a53ea68

Merge branch 'feat/45-filter' of https://github.com/nan-noo/2022-moamoa…

6e7f0f0

… into feat/45-filter

chore: CI 결과 슬랙 알림 조건문 수정

fade22d

chore: CI 과정 중 슬랙 알림 제거

858d549

refactor: import 문 경로 수정 및 사용하지 않는 파일 삭제

073c4d7

feat: DropBox 구현

45ceac7

perf: CheckListItem에 memoization 적용

e4a941a

style: DropBox 및 svg 스타일 수정

2fb3137

svg에 색이 변하지 않는 이유 - stroke 대신 fill이 필요한 경우가 있었고, stroke의 width가 0이어서 변하지 않는 경우도 있었음

feat: Filter 컴포넌트 구현

d020f0b

feat: FilterSection 컴포넌트 구현

0f857ea

Merge branch 'woowacourse-teams:main' into feat/45-filter

ac7422a

feat: 태그 조회 및 검색 mocking 서버 구현

2cb5a88

feat: FilterSection 컴포넌트에 태그리스트 조회 구현

aacf3ab

feat: MainPage에 FilterSection 컴포넌트 추가

2ea703d

fix: 필터를 추가할 때 깜박이는 에러 수정

65691a2

useQuery의 key에서 selectedFilters를 제거해서 해결 + 드롭박스가 카드에 가려지는 오류 수정 -> z-index 스타일 추가

fix: api url 오타 수정

67610db

feat: 필터 검색 기능 구현

0d75935

+ throttle 적용

fix: 메인페이지에서 항상 FilterSection이 보이도록 수정

2169e65

Merge branch 'develop' of https://github.com/nan-noo/2022-moamoa into…

c94ad6a

… feat/45-filter

Merge branch 'develop' of https://github.com/nan-noo/2022-moamoa into…

f70a616

… feat/45-filter

feat: 필터 로직 변경에 따른 컴포넌트 삭제

8562e60

feat: FilterButton 컴포넌트 구현

d45c037

feat: FilterSection 컴포넌트 구현

dcdbbc2

style: FilterSection, FilterButton 스타일 수정

df516c9

fix: onClick 이벤트 -> onChange 이벤트로 수정

9a7d670

feat: 검색 결과 조회 모킹 서버 수정

b836ab2

스터디 조회와 검색 기능이 합쳐져서 msw 로직 수정 및 필요없는 api 함수 제거 + 스터디 key 수정(description -> excerpt)

feat: InfiniteScroll 컴포넌트 구현

c3e94ff

nan-noo added 4 commits July 17, 2022 02:00

feat: SlideButton 컴포넌트 구현

86e68f1

feat: 필터 구역에 슬라이드 기능 적용

16ad9ec

슬라이드 버튼 클릭시 좌우 스크롤 + sticky 적용

refactor: 주석 제거

135cca0

feat: 슬라이드 기능 수정

116904e

끝까지 이동했을 때 한 번 더 클릭시 스크롤 반대 방향 끝으로 이동

nan-noo added 🚀 feature New feature or request 😁 frontend New frontend feature labels Jul 16, 2022

nan-noo requested a review from airman5573 July 16, 2022 17:36

nan-noo self-assigned this Jul 16, 2022

nan-noo linked an issue Jul 16, 2022 that may be closed by this pull request

[FE] 필터 기능 구현 #45

Closed

nan-noo added 3 commits July 18, 2022 15:23

style:FilterSection 스타일 수정

f7794eb

max-width 지정

feat: description -> fullName으로 수정

4c1dbb4

feat: 타이틀 쿼리 파라미터 전송 방식 수정

5872dd0

airman5573 requested changes Jul 18, 2022

View reviewed changes

nan-noo added 13 commits July 18, 2022 19:20

style: gap 대신 column, row-gap 사용

0af48a9

feat: FilterButton을 체크박스에서 버튼으로 변경

c8d5eb4

chore: layout 절대 경로 추가

6fb5ddc

refactor: 폴더, 파일 네이밍 및 폴더 구조 변경

b851a63

폴더명: 소문자 hyphen 사용 컴포넌트 파일명: Components.**.tsx 폴더 구조: layout 폴더에 헤더, 푸터 관련 컴포넌트 이동

refactor: 절대 경로로 변경

2ecbd75

fix: eslint no var requires error 수정

ebc7ec8

refactor: SlideButton -> ArrowButton 이름 변경

2ad1bd9

feat: ArrowButton prop 변경

b8bfe78

refactor: 사용하지 않는 파일 삭제

2e570f2

refactor: handlers 수정

55ccccd

refactor: description -> excerpt로 수정

e53fe35

refactor: 사용하지 않는 스타일 컴포넌트 제거

962f00d

feat: icon 버튼들에 aria-label 추가

f05b9bc

airman5573 merged commit 01dcadf into woowacourse-teams:develop Jul 18, 2022

This was linked to issues Jul 18, 2022

[FE] 컴포넌트 이름 수정 #34

Closed

[FE] 공통 컴포넌트 폴더 분리 #13

Closed

nan-noo deleted the feat/45-filter-with-category branch July 26, 2022 04:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] issue45: 필터 기능 구현 #68

[FE] issue45: 필터 기능 구현 #68

nan-noo commented Jul 16, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

nan-noo Jul 18, 2022

airman5573 Jul 18, 2022

nan-noo Jul 18, 2022

airman5573 Jul 18, 2022

airman5573 Jul 18, 2022

[FE] issue45: 필터 기능 구현 #68

[FE] issue45: 필터 기능 구현 #68

Conversation

nan-noo commented Jul 16, 2022

요약

세부사항

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment