[jiheon788] 필터링, 검색 기능 구현 #14

jiheon788 · 2023-03-21T19:03:38Z

구현 기능

기본 정렬은 ID 기준 오름차순으로 구현해주세요
표에서 주문번호, 거래일 & 거래시간 버튼을 누르면 각각 내림차순 정렬이 되도록 해주세요
주문 처리 상태에 따라 filtering 기능을 구현해주세요
고객이름을 검색할 수 있도록 해주세요

참고 사항

`useSetParams` -> `useQueryString` 커스텀 훅 개편

@tnghgks 호수님 커스텀 훅을 참고하여 기존 useSetParams 을 좀 더 추상화하였습니다.
기능: getParam, setParam, deleteParam, deleteAllParam

Query String

검색: `customer=<username>`

현재 페이지에서만 검색하는 것이 아닌 전체 고객을 검색하기 위해 고객 명단을 받는 api 추가했습니다.
useQuery -> useQueries로 변경하여 두가지 api를 병렬로 fetch합니다.
고객 검색시 filter함수를 통하여 일치하는 명단을 필터링 + 검색어와 일치하는 부분을 하이라이트 처리합니다.
고객을 선택하면 기타 쿼리스트링(소팅, 필터링, 페이지)은 모두 초기화하고 set합니다. 다른 조건에 상관없이 해당 고객의 데이터를 가져오기 위함입니다.

.../order?date=2023-03-08&customer=jiheon (x)
.../order?customer=jiheon (o)

정렬: `sort=id-descending`, `sort=time-descending`

sort = null일 경우, id 오름차순 정렬 default
조건 추가시 첫 페이지부터 보여주기 위해 page 쿼리는 delete (1페이지)합니다. (이하 동일)

필터링: `filter=complete`, `filter=incomplete`

page 쿼리 delete (1페이지)

UI-UX

검색: Drawer 사이드 패널
오늘만 보기: Switch
필터링: Select 메뉴
Icon Button은 hover시 툴팁으로 안내 e.g. 필터아이콘 버튼 호버시 Filter by status 안내 툴팁

에러핸들링

에러메시지를 에러페이지에서 보여줍니다.
쿼리 리셋 및 새로고침 버튼 추가

Sample

Date pick - Filter status

Search - Init

Sort

- 전체 고객 목록 가져오기 api 구축 - useQueries로 변경하여 병렬로 가져오게함

- 배열이 비어있을때 선택날짜를 반환

- 추상화 업그레이드

- 모든 작업시 페이지는 첫 페이지로 - 이유: 조건없는 10페이지에서 6페이지만 존재하는 날짜를 선택할때와 같은 상황 대비

jhoon9494

지헌님 고생하셨습니다!
유저 검색에 대한 api를 별도로 만들어서 처리하신 부분이 인상적입니다!
잘봤습니다 ㅎㅎ

jhoon9494 · 2023-03-22T01:19:12Z

src/lib/hooks/useOrderQuery.ts

+      {
+        queryKey: ['/mock/customers'],
+        queryFn: () => getCustomers().then((res) => res.data.customers),
+      },
+    ],


유저 이름을 검색하는 api를 만들어 검색할 수 있는 유저를 보여주는 부분이 참 좋은 것 같네요!

useQueries를 통한 병렬로 데이터를 가져오는것이 인상깊었습니다.

jhoon9494 · 2023-03-22T01:24:22Z

src/lib/hooks/useQueryString.ts

+import { paramsKeyType } from '@/interface/main';
+import { PARAMS_KEY } from '@/constants/config';
+
+const useQueryString = () => {


다른 코드에서 사용되는 부분이 있어서 추상화에 대해 감을 잡기 어려웠는데, 간단하게 적용해주셨네요!
참고하겠습니다 ㅎㅎ

와 이부분 진짜 깔끔하게 추상화해주셨네요 👍

오 정말 좋네요. 인터페이스 활용도 아주 제대로 한 경우 같습니다. 👍

jhoon9494 · 2023-03-22T01:26:51Z

src/mocks/handlers/order.ts

@@ -30,4 +66,14 @@ export const orderListHandlers = [
      }),
    );
  }),
+
+  rest.get('/mock/customers', (req, res, ctx) => {
+    const customers = [...new Set(mockData.map((item) => item.customer_name))];


유저 이름이 중복되는 경우도 있지 않을까라는 생각이 듭니다!

@jhoon9494

일부러 중복 빼신 것 같습니다.

@jiheon788

중복 되는 경우도 잡아서 Jhon (2) 이런식으로 하면 어땠을까 싶습니다.

근데 처음에 PR 메시지 보고 `모든 고객을 조회한다니, 기존에 했던 가정을 깨는 거 아닐까?' 했는데요, 또 가만 생각해보니 이런 저런 필요로 특정 칼럼만 뽑아주는 api도 얼마든지 있을 수 있지 하게 되네요. 👍

동일한 이름일 경우 같은 유저일 수도 있지만, 이름만 같은 다른 유저일 수도 있기 때문에 여쭤봤습니다!!

@jhoon9494
아 이름만 같고 다른 유저의 경우를 말씀하신거군요..! 고객id 정보가 있으니 식별하는 과정이 필요하긴하겠네요. 생각 못한 부분인데 알려주셔서 감사합니다.🙇🏻‍♂️

@greyHairChooseLife
Jhon (2) 이런식으로 보여주는 것도 좋은 아이디어네요! 고객데이터의 경우 전체 명단이 필요하다 생각되어 구현했습니다.! 고객명단 가져오는 api의 경우 주기적으로 refetch하지 않고, 병렬적으로 한번만 받아오기에 성능저하면에서 걱정할 부분이 없다고 생각했구요!

@jiheon788

근데 백그라운드로 자기가 알아서 리패칭 하는 경우가 있거든요. 탭 이동이나 dev 툴, 아니면 화면 전환 했다가 다시 돌아온다던가 하는게 그런 경우고요, 페이지 이동해도 마찬가지입니다.

5초마다 리패칭 하는거에 staleTime 5초 주고, 이름만 받아오는건 글쎄 한.. 1~2 분 걸어놔도 괜찮지 않을까요? 참고로 캐쉬 데이터 지속 시간은 기본값 5분입니다.

https://tanstack.com/query/v4/docs/react/guides/important-defaults

@greyHairChooseLife

저도 잘 몰라 찾아보고 왔습니다. 상연님 말씀대로 캐싱처리를 제대로 사용못하고 있었네요 😂 방금 커밋 (2a1a6c8) 으로 오더는 5초, 고객목록은 Infinity로 주었습니다.

bokjunwoo · 2023-03-22T02:02:07Z

지헌님 고객 데이터를 가져오는 API를 통해 사용자 검색기능을 구현한 것이 인상적이였습니다. 주문자가 많아진다는 과정하에 처음에 아무것도 입력하지 않은 경우 빈 데이터를 보여주고 input value가 변경될 때 보여주는 것이 조금 더 좋은 방향이 될 것같습니다.👍

Noeyso

지헌님 고생하셨습니다! 추상화 깔끔하게 된 부분이 가장 좋았습니다👍 많이 배우고 갑니다

Noeyso · 2023-03-22T01:38:47Z

src/lib/hooks/useQueryString.ts

+import { paramsKeyType } from '@/interface/main';
+import { PARAMS_KEY } from '@/constants/config';
+
+const useQueryString = () => {


와 이부분 진짜 깔끔하게 추상화해주셨네요 👍

tnghgks

UI에도 신경을 많이 쓰셔서 전체적으로 깔끔한것 같습니다.
지헌님! 고생하셨습니다!👍

tnghgks · 2023-03-22T02:25:46Z

src/lib/hooks/useOrderQuery.ts

+      {
+        queryKey: ['/mock/customers'],
+        queryFn: () => getCustomers().then((res) => res.data.customers),
+      },
+    ],


useQueries를 통한 병렬로 데이터를 가져오는것이 인상깊었습니다.

tnghgks · 2023-03-22T02:31:33Z

src/lib/queryClient.ts

@@ -4,6 +4,7 @@ const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
+      useErrorBoundary: true,


suspense 속성을 true로 한다면 useErrorBoundary는 기본적으로 true로 설정되서 생략해도 상관없을 것 같습니다!

By default, instead of supplying the error variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors.
https://react-query-v3.tanstack.com/guides/suspense#_top

몰랐던부분인데 감사합니다👍 역시 공식문서를 항상 잘봐야하네요😂

jiheon788 · 2023-03-22T02:39:28Z

@bokjunwoo

지헌님 고객 데이터를 가져오는 API를 통해 사용자 검색기능을 구현한 것이 인상적이였습니다. 주문자가 많아진다는 과정하에 처음에 아무것도 입력하지 않은 경우 빈 데이터를 보여주고 input value가 변경될 때 보여주는 것이 조금 더 좋은 방향이 될 것같습니다.👍

input value가 변경될 때 보여주는 것이 더 깔끔할 것 같네요👍 좋은 방향 제시해주셔서 감사합니다 준우님🙇🏻‍♂️

raw20 · 2023-03-22T02:43:30Z

지헌님 정말 고생 많으셨습니다!! 👍👍
따로 필터링 된 조건안에서 유저 검색이 아니라 아예 api를 추가하여 전체 고객을 검색해서 알려주는 방식도 좋은 것같습니다!!
Drawer 사이드 패널로 구현하셔서 더 깔끔하네요!

greyHairChooseLife

고생하셨습니다. 👍

greyHairChooseLife · 2023-03-22T02:13:52Z

src/components/SearchSideDrawer.tsx

+                aria-hidden={true}
+                cursor="pointer"
+                p="0.2em 0"
+                onClick={() => navigate(`/admin/order?customer=${customer}`)}


'고객 이름으로 검색하면 다른 필터는 필요하지 않을 것이다.' 하는 아이디어가 좋은 것 같아요. 또 코드로 구현 한 방법이 그런 생각을 잘 드러내는 것 같습니다. 👍

세심하게 봐주셔서 감사합니다 상연님 😉😉

greyHairChooseLife · 2023-03-22T02:29:03Z

src/mocks/handlers/order.ts

@@ -30,4 +66,14 @@ export const orderListHandlers = [
      }),
    );
  }),
+
+  rest.get('/mock/customers', (req, res, ctx) => {
+    const customers = [...new Set(mockData.map((item) => item.customer_name))];


@jhoon9494

일부러 중복 빼신 것 같습니다.

@jiheon788

중복 되는 경우도 잡아서 Jhon (2) 이런식으로 하면 어땠을까 싶습니다.

근데 처음에 PR 메시지 보고 `모든 고객을 조회한다니, 기존에 했던 가정을 깨는 거 아닐까?' 했는데요, 또 가만 생각해보니 이런 저런 필요로 특정 칼럼만 뽑아주는 api도 얼마든지 있을 수 있지 하게 되네요. 👍

greyHairChooseLife · 2023-03-22T02:38:34Z

src/lib/hooks/useQueryString.ts

+import { paramsKeyType } from '@/interface/main';
+import { PARAMS_KEY } from '@/constants/config';
+
+const useQueryString = () => {


오 정말 좋네요. 인터페이스 활용도 아주 제대로 한 경우 같습니다. 👍

Co-authored-by: bokjunwoo <bokjunwoo@gmail.com>

- 쿼리 캐싱 기능 활용 위해 staletime 지정 Co-authored-by: greyHairChooseLife <greyhairchooselife@gmail.com>

Co-authored-by: Noeyso <soyeon9819@gmail.com>

jiheon788 added 10 commits March 21, 2023 16:46

style: 퍼블리싱

3880c6c

feat: 고객이름 검색

f7ab2b0

- 전체 고객 목록 가져오기 api 구축 - useQueries로 변경하여 병렬로 가져오게함

fix: 필터링 날짜데이터 없을때 start, end date NaN오류

7f30a36

- 배열이 비어있을때 선택날짜를 반환

refactor: useQueryString 커스텀 훅 개선

c3c83fe

- 추상화 업그레이드

feat: 정렬 및 필터링

58e86bd

style: 함수 분리 및 변수명 변경

f734080

style: 아이콘 버튼에 툴팁 적용

650d1d4

refactor: 필터링, 소팅 등 작동시 페이지 쿼리스트링은 초기화

6e91f54

- 모든 작업시 페이지는 첫 페이지로 - 이유: 조건없는 10페이지에서 6페이지만 존재하는 날짜를 선택할때와 같은 상황 대비

chore: 쿼리 클라이언트 설정 변경

1710328

docs: api 명세서 업데이트

14a4067

jiheon788 self-assigned this Mar 21, 2023

jiheon788 added the Type: Enhancement New feature or request label Mar 21, 2023

jhoon9494 reviewed Mar 22, 2023

View reviewed changes

Noeyso reviewed Mar 22, 2023

View reviewed changes

tnghgks reviewed Mar 22, 2023

View reviewed changes

greyHairChooseLife reviewed Mar 22, 2023

View reviewed changes

jhoon9494 mentioned this pull request Mar 22, 2023

필터링, 검색 기능 구현 #2

Closed

4 tasks

jiheon788 and others added 3 commits March 22, 2023 12:22

style: 검색 입력값이 있을때 고객의 명단 보여주기

b1e0c03

Co-authored-by: bokjunwoo <bokjunwoo@gmail.com>

style: stat창 ui 및 쿼리 staletime 지정

2a1a6c8

- 쿼리 캐싱 기능 활용 위해 staletime 지정 Co-authored-by: greyHairChooseLife <greyhairchooselife@gmail.com>

feat: 오름차순 내림차순 토글 버튼

977f0eb

Co-authored-by: Noeyso <soyeon9819@gmail.com>

jhoon9494 merged commit 38b27e0 into Wanted-PreOnboarding-Team-8:develop Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[jiheon788] 필터링, 검색 기능 구현 #14

[jiheon788] 필터링, 검색 기능 구현 #14

jiheon788 commented Mar 21, 2023 •

edited

Loading

jhoon9494 left a comment

jhoon9494 Mar 22, 2023

tnghgks Mar 22, 2023

jhoon9494 Mar 22, 2023

Noeyso Mar 22, 2023

greyHairChooseLife Mar 22, 2023

jhoon9494 Mar 22, 2023

greyHairChooseLife Mar 22, 2023

jhoon9494 Mar 22, 2023 •

edited

Loading

jiheon788 Mar 22, 2023

greyHairChooseLife Mar 22, 2023

jiheon788 Mar 22, 2023

bokjunwoo commented Mar 22, 2023

Noeyso left a comment

Noeyso Mar 22, 2023

tnghgks left a comment

tnghgks Mar 22, 2023

tnghgks Mar 22, 2023

jiheon788 Mar 22, 2023

jiheon788 commented Mar 22, 2023

raw20 commented Mar 22, 2023 •

edited

Loading

greyHairChooseLife left a comment

greyHairChooseLife Mar 22, 2023

jiheon788 Mar 22, 2023 •

edited

Loading

greyHairChooseLife Mar 22, 2023

greyHairChooseLife Mar 22, 2023

[jiheon788] 필터링, 검색 기능 구현 #14

[jiheon788] 필터링, 검색 기능 구현 #14

Conversation

jiheon788 commented Mar 21, 2023 • edited Loading

구현 기능

참고 사항

useSetParams -> useQueryString 커스텀 훅 개편

Query String

검색: customer=<username>

정렬: sort=id-descending, sort=time-descending

필터링: filter=complete, filter=incomplete

UI-UX

에러핸들링

Sample

Date pick - Filter status

Search - Init

Sort

jhoon9494 left a 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

jhoon9494 Mar 22, 2023 • edited Loading

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

bokjunwoo commented Mar 22, 2023

Noeyso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tnghgks left a 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

jiheon788 commented Mar 22, 2023

raw20 commented Mar 22, 2023 • edited Loading

greyHairChooseLife left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jiheon788 Mar 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jiheon788 commented Mar 21, 2023 •

edited

Loading

`useSetParams` -> `useQueryString` 커스텀 훅 개편

검색: `customer=<username>`

정렬: `sort=id-descending`, `sort=time-descending`

필터링: `filter=complete`, `filter=incomplete`

jhoon9494 Mar 22, 2023 •

edited

Loading

raw20 commented Mar 22, 2023 •

edited

Loading

jiheon788 Mar 22, 2023 •

edited

Loading