feat: 검색 기능을 구현한다. #144

baegyeong · 2024-03-10T13:59:56Z

주요 변경사항

면접기록, 지원현황 페이지의 검색 기능을 구현했습니다.
use-debounce 패키지를 추가했습니다.
면접기록, 지원현황에서 각각 쓰이던 컴포넌트를 하나로 합쳤습니다. (동일한 기능을 하기 때문입니다)
- components/common/Search.tsx
면접기록, 지원현황에서 불러오는 데이터와 검색 시 불러오는 데이터 형식이 다르기 때문에 useSearchQuery (커스텀훅)에서 맞춰주고자 했습니다.
검색 결과가 없을 때 간단하게 문구로 처리했습니다.

리뷰어에게...

늦어져서 죄송합니다...
개선할 부분이 있다면 피드백 주세요

체크리스트

reviewers 설정
label 설정
milestone 설정

- useDebounceCallback 사용

- 면접 기록 및 지원현황의 검색 컴포넌트 통합

- react query를 사용하여 구현 - 면접기록에 사용하는 데이터 형식 정의 (searchInterviewData) - 지원현황에 사용하는 데이터 형식 정의 (searchApplicantData)

- navbar 클릭 시 url이 바뀜에 따라 검색창이 초기화되는 문제 해결

- 검색 결과에 대한 pagination 적용을 위해 수정

2yunseong

👍 디바운스 적용하신게 인상 깊네요.
몇가지 고민해볼만한거 남겨두었는데, 같이 고민해봐요

frontend/components/common/Search.tsx

frontend/src/apis/search/index.ts

2yunseong · 2024-03-10T14:28:33Z

frontend/src/hooks/useSearchQuery.tsx

+  const searchInterviewData = search?.answers.map((value) => ({
+    id: value.id,
+    title: `[${value.field}] ${value.name}`,
+    subElements: [
+      value.field1.split('"').join(""),
+      value.field2.split('"').join(""),
+      `${value.grade.split('"').join("")} ${value.semester
+        .split('"')
+        .join("")}`,
+    ],
+  }));
+
+  const searchApplicantData = search?.answers.map((value) => ({
+    id: value.id,
+    title: `[${value.field}] ${value.name}`,
+    subElements: [
+      value.field1.split('"').join(""),
+      value.field2.split('"').join(""),
+      `${value.grade.split('"').join("")} ${value.semester
+        .split('"')
+        .join("")}`,
+      new Date(Number(value.uploadDate)).toLocaleString("ko-KR", {
+        dateStyle: "short",
+      }),
+    ],
+  }));


하나의 로직으로 만들어볼 수 있을까요??
callback에서 만드는 데이터에서, Date가 추가되는 부분만 다른 것 같은데, 어떻게 재사용 가능하게 분리해 낼 수 있을까요?

동의합니다. 하나의 값으로 뺄 수 있을 것 같아요!

수정했습니다... !! 650cacb

좋아요 👍 👍

loopy-lim

좋네용!! 몇개만 고쳐주시면 좋을꺼 같아요!

frontend/app/(WithNavbar)/interview/[generation]/page.tsx

frontend/components/applicant/Board.tsx

loopy-lim · 2024-03-10T15:03:01Z

frontend/components/applicant/PageNavbar.tsx

-      url={`/applicant/${generation}?type=${type}&order=${order}`}
+      url={`/applicant/${generation}?search=${searchKeyword}&type=${type}&order=${order}`}


사실 이것도 좋지만,,, use client라면, 다른 형태 중 하나인 URL search 를 쓰는 것도 추후에 좋을 수도 있어요!

감사합니다! 하지만 혹시 그 이유를 더 자세하게 설명해주실 수 있을까요?

const searchParams = useSearchParams(); const searchKeyword = searchParams.get("search") || "";

현재 이렇게 검색어를 불러오고 있는데, 제시해주신 방식과 이 방식이 어떤 차이가 있어서 제안해주신 건지 궁금합니다..!

아 get은 충분히 좋지만, 이제 set을 같이하면 좋을것 같았어요! 저렇게 작성을 하면 url에 항상 searchKeyword, type, order을 같이 넣어야 하는 불편함이 있지 않을까 싶었어요!!

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

const search = searchParams.get("search") || ""; const type = searchParams.get("type") ?? "list"; const order = searchParams.get("order") ?? ORDER_MENU.INTERVIEW[0].type; const queryParams = { search, type, order }; const createQueryString = useCallback( (name: string[], value: string[]) => { const params = new URLSearchParams(searchParams.toString()); name.forEach((el, index) => params.set(el, value[index] || "")); return params.toString(); }, [searchParams] ); createQueryString(Object.keys(queryParams), Object.values(queryParams));

그렇다면 이렇게 set하는 함수인 createQueryString을 만들어서 요 리턴 값을 url 부분에 박아보려고 하는데 어떤가요? 다른 곳에서도 사용될거라서 훅으로 빼볼까 합니다..

저는 좋은거 같아요!

frontend/components/common/Search.tsx

frontend/components/common/board/Board.tsx

- pathname을 다루는 부분에 useTransition 적용 - use-debounce에서 useDebounce 라이브러리로 변경 - Keyword에서 term으로 변수명 통일 - form 태그 삭제

loopy-lim · 2024-03-12T15:47:10Z

frontend/components/common/Search.tsx

+    startTransition(() => {
+      if (debouncedSearchTerm) {
+        params.set("search", debouncedSearchTerm);
+      } else {
+        params.delete("search");
+      }
+
+      replace(`${pathname}?${params.toString()}`);
+    });
+  }, [debouncedSearchTerm, pathname]);


ㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷ 날로 성장하는 실력 무섭네요...

frontend/components/common/board/Board.tsx

geongyu09

수고 많으셨습니다!

geongyu09 · 2024-03-13T14:21:07Z

frontend/src/hooks/useSearchQuery.tsx

+  const searchInterviewData = search?.answers.map((value) => ({
+    id: value.id,
+    title: `[${value.field}] ${value.name}`,
+    subElements: [
+      value.field1.split('"').join(""),
+      value.field2.split('"').join(""),
+      `${value.grade.split('"').join("")} ${value.semester
+        .split('"')
+        .join("")}`,
+    ],
+  }));
+
+  const searchApplicantData = search?.answers.map((value) => ({
+    id: value.id,
+    title: `[${value.field}] ${value.name}`,
+    subElements: [
+      value.field1.split('"').join(""),
+      value.field2.split('"').join(""),
+      `${value.grade.split('"').join("")} ${value.semester
+        .split('"')
+        .join("")}`,
+      new Date(Number(value.uploadDate)).toLocaleString("ko-KR", {
+        dateStyle: "short",
+      }),
+    ],
+  }));


동의합니다. 하나의 값으로 뺄 수 있을 것 같아요!

- 쿼리스트링에 파라미터를 get, set 하는 커스텀 훅 생성

baegyeong added 16 commits March 9, 2024 19:56

fix: 컴포넌트명 postfix 제거 (component)

cb2db21

chore: use-debounce 패키지 추가

f84f0c5

feat: input의 onChange 함수 정의 (handleSearch)

11eb03c

- useDebounceCallback 사용

feat: input 타입을 search로 변경

81bf3d7

fix: button 태그 제거

bb12e6d

feat: Search 컴포넌트 구현

cd3efda

- 면접 기록 및 지원현황의 검색 컴포넌트 통합

feat: search api 정의

88426be

feat: useSearchQuery 훅 구현

552a146

- react query를 사용하여 구현 - 면접기록에 사용하는 데이터 형식 정의 (searchInterviewData) - 지원현황에 사용하는 데이터 형식 정의 (searchApplicantData)

feat: 면접기록 및 지원현황에서 검색결과 불러오기

6d9ecdf

fix: 지원날짜 오타 수정

c77c6e1

feat: search 컴포넌트에 defaultValue 지정

b0a5612

- navbar 클릭 시 url이 바뀜에 따라 검색창이 초기화되는 문제 해결

feat: search api 디렉토리 위치 변경

86cc062

feat: 검색 시 navbar에 별도의 endPage 지정

77585b9

- 검색 결과에 대한 pagination 적용을 위해 수정

fix: nullish로 연산자 변경

f202b78

feat: 검색 결과가 없을 때 처리

2cc3b10

fix: component postfix 제거

5628389

baegyeong requested review from 2yunseong, geongyu09 and bada308 March 10, 2024 13:59

baegyeong self-assigned this Mar 10, 2024

baegyeong requested review from BlackBean99 and loopy-lim as code owners March 10, 2024 13:59

fix: Txt 컴포넌트로 변경

789b19e

2yunseong approved these changes Mar 10, 2024

View reviewed changes

loopy-lim requested changes Mar 10, 2024

View reviewed changes

baegyeong added 3 commits March 12, 2024 02:53

fix: 요청 api 매개변수 interface 지정

55e4852

fix: Keyword에서 term으로 변수명 통일

d83a01a

fix: useTransition 및 디바운스 라이브러리 변경

376e547

- pathname을 다루는 부분에 useTransition 적용 - use-debounce에서 useDebounce 라이브러리로 변경 - Keyword에서 term으로 변수명 통일 - form 태그 삭제

baegyeong force-pushed the feat/30-search branch 2 times, most recently from 908ffed to 093ceef Compare March 12, 2024 15:38

baegyeong force-pushed the feat/30-search branch from 093ceef to 376e547 Compare March 12, 2024 15:39

fix: board 컴포넌트의 key prop 변경

4580891

baegyeong requested a review from loopy-lim March 12, 2024 15:41

loopy-lim approved these changes Mar 12, 2024

View reviewed changes

geongyu09 approved these changes Mar 13, 2024

View reviewed changes

baegyeong added 2 commits March 13, 2024 23:32

feat: useCreateQueryString 훅 생성

446f9dc

- 쿼리스트링에 파라미터를 get, set 하는 커스텀 훅 생성

fix: useSearchQuery에서 겹치는 로직 수정

650cacb

baegyeong merged commit 082f528 into main Mar 13, 2024
1 check passed

2yunseong deleted the feat/30-search branch September 9, 2024 05:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 검색 기능을 구현한다. #144

feat: 검색 기능을 구현한다. #144

baegyeong commented Mar 10, 2024

2yunseong left a comment

2yunseong Mar 10, 2024

geongyu09 Mar 13, 2024

baegyeong Mar 13, 2024

2yunseong Mar 13, 2024

loopy-lim left a comment

loopy-lim Mar 10, 2024 •

edited

Loading

baegyeong Mar 11, 2024

loopy-lim Mar 12, 2024

2yunseong Mar 13, 2024

baegyeong Mar 13, 2024

loopy-lim Mar 13, 2024

2yunseong Mar 13, 2024

loopy-lim Mar 12, 2024

geongyu09 left a comment

geongyu09 Mar 13, 2024

		url={`/applicant/${generation}?type=${type}&order=${order}`}
		url={`/applicant/${generation}?search=${searchKeyword}&type=${type}&order=${order}`}

feat: 검색 기능을 구현한다. #144

feat: 검색 기능을 구현한다. #144

Conversation

baegyeong commented Mar 10, 2024

주요 변경사항

리뷰어에게...

관련 이슈

체크리스트

2yunseong 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

loopy-lim left a comment

Choose a reason for hiding this comment

loopy-lim Mar 10, 2024 • 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

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

geongyu09 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loopy-lim Mar 10, 2024 •

edited

Loading