feat: 면접기록/지원현황 페이지 검색 기능 #240

2yunseong · 2025-02-24T09:55:40Z

PR을 통해 해결하려는 문제가 무엇인가요? 🚀

백엔드에서 새로 개발한 검색 API를 연동하였습니다.

PR에서 핵심적으로 변경된 부분이 어떤 부분인가요? 👀

검색 기능 개선으로 인해 변경된 API 스펙에 대응하고, 일부 구조를 변경하였습니다.

GET /api/v1/page/{page}/search/{search-keyword}/applicants 삭제
GET /api/v1/page/{page}/records searchKeyword 추가
GET /api/v1/page/{page}/year/{year}/applicants searchKeyword 추가

변경된 API 스펙과 더불어, 불필요한 중복을 제거하고 잘못된 추상화를 바로 잡았습니다.

핵심 변경사항 이외 추가적으로 변경된 사항이 있나요? ➕

로딩 스피너를 추가하였습니다.
일부 key props가 전달되지 않은 문제를 해결하였습니다.

추가적으로, 리뷰어가 리뷰하며 알아야 할 정보가 있나요? 🙌

코드 변경이 많아 terminal에서 확인하시기 바랍니다!

이런 부분을 신경써서 봐주셨으면 좋겠어요. 🙋🏻‍♂️

코드 퀄리티
PageNavBar 쪽 검증해주시면 감사드리겠습니다.

체크리스트 ✅

reviewers 설정
assignees 설정
label 설정

- 기존 API에 검색기능 추가 - 따라서, 검색 전용 API가 쓸모 없어짐

geongyu09

(리뷰가 늦어서 죄송합니다..)

정말 수고 많으셨습니다..!
전체적으로 코드가 훨씬 읽기 쉬워진 느낌을 많이 받은 것 같아요!
인터뷰 페이지와 지원 현황 페이지의 컴포넌트 레벨을 동일하게 가져가는 것도 너무나도 코드 이해하는데 도움이 됐던 것 같습니다..! 대박이네요

깊이있는 리뷰는 아니지만, 개인적인 생각을 남겨봤습니다..!

geongyu09 · 2025-02-25T14:37:59Z

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

 import SortList from "@/components/common/SortList";
 import Search from "@/components/common/Search";
 import { ORDER_MENU } from "@/src/constants";
+import ApplicantList from "../../../../components/applicant/ApplicantList";


괜찮다면..! 위의 import문과 같이 alias를 사용해도 괜찮을 것 같습니다!

vsc 설정이 이상한가 보네요 ㅠㅠ 감사합니다 수정해볼께용

geongyu09 · 2025-02-25T14:39:14Z

frontend/components/applicant/ApplicantList.tsx

+    return (
+      <div>
+        <LoadingSpinner size={8} />
+      </div>


멋진 로더네요!!👍👍

추가적으로, div로 한번 더 감씬 이유가 있으신가요..?

실수입니다! 제거 하도록하겠습니다 :) 고마워요 👍

geongyu09 · 2025-02-25T14:41:47Z

frontend/components/applicant/Board.tsx

-          />
+    <>
+      <BoardTable boardRows={boardData} handleModalOpen={handleModalOpen} />
+      <BoardModal


네이밍 변경 좋네요!👍

loopy-lim · 2025-02-26T12:33:04Z

frontend/components/applicant/ApplicantList.tsx

+  const { data: applicants, status } = useQuery(
+    ["allApplicant", { generation, order, pageIndex, searchKeyword }],
+    () =>
+      getApplicantByPageWithGeneration(
+        +pageIndex,
+        generation,
+        order,
+        searchKeyword
+      ),
+    {
+      enabled: !!generation,
+    }
+  );


nit. 점진적으로 query 업그레이드 + suspense query, hook으로 바꾸는것도 좋을 수 있겠네요!

너무 좋은 아이디어 입니다 채승님 !! 항상 감사드립니다 :)

loopy-lim · 2025-02-26T12:37:56Z

frontend/components/common/LoadingSpinner.tsx

+interface LoadingSpinnerProps {
+  size?: TailwindSize;
+}
+const LoadingSpinner = ({ size = 6 }: LoadingSpinnerProps) => {
+  return (
+    <div className={`w-${size} h-${size}`}>


size를 type으로 두는 것을 한번 고민하면 좋을 것 같습니다.

tailwind와 Template literals는 호환성이 좋지 않습니다.

저렇게 만들게 되면, postcss의 성능이 저하가 심합니다.

만약 w, h를 동시에 다루고 싶다면, wh-6과 같은 plugin을 만드는 것을 추천합니다. 추가적으로 width가 24px이상은 svg의 크기가 24이기 때문에 더 커기지 않을 것 같습니다!

오호 그렇군요~?! 또 하나 알아갑니다~!

wh-6 같은 플러그인이 무슨 말씀이실까요??

아 고정된 크기를 원한다면 tailwind플러그인을 만들어서 독자적인 방식으로 사용할 수 있다! 라는 말이었습니다

smb0123

리뷰가 너무 늦었네요... 죄송합니다.

정말 수고 많으셨습니다 ~~
몇가지만 확인해주시면 좋을 것 같습니다.

smb0123 · 2025-02-27T06:01:16Z

frontend/components/applicant/ApplicantList.tsx

+  const { data: applicants, status } = useQuery(
+    ["allApplicant", { generation, order, pageIndex, searchKeyword }],
+    () =>
+      getApplicantByPageWithGeneration(
+        +pageIndex,
+        generation,
+        order,
+        searchKeyword
+      ),
+    {
+      enabled: !!generation,
+    }
+  );


tanstack query의 v3 문법을 사용하는 곳이 있고 v4 문법을 사용하는 곳이 있는데 통일성있게 가져가는 게 좋다고 생각해서 다 같이 이야기해보면 좋을 것 같네요 !

너무 좋습니다 :) 저는 무의식적으로 작성하느라 놓쳤는데 이야기가 나와 좋네요.

smb0123 · 2025-02-27T06:36:54Z

frontend/src/hooks/applicant/useApplicantPaginationParams.ts

+  const pageIndex = searchParams.get("page") || "1";
+  const order = searchParams.get("order") || ORDER_MENU.APPLICANT[0].type;
+  const searchKeyword = searchParams.get("search") || "";
+  const type = searchParams.get("type") ?? "list";


pageIndex, order, searchKeyword는 || 연산자를 사용하고 type은 ?? 연산자를 사용한 이유가 궁금합니다.

저도 궁금하네용ㅋ_ㅋ
타입의 쓰임새가 뭘까요?? get()으로 가져오는 값이 어떤 타입인지 알 수 없으니 고치기에 신중했습니당

smb0123 · 2025-02-27T06:42:46Z

frontend/src/hooks/applicant/useApplicantPaginationParams.ts

+  const pageIndex = searchParams.get("page") || "1";
+  const order = searchParams.get("order") || ORDER_MENU.APPLICANT[0].type;
+  const searchKeyword = searchParams.get("search") || "";
+  const type = searchParams.get("type") ?? "list";


type을 추가하신 이유가 궁금합니다.
제가 놓쳤을 수도 있지만 useApplicantPaginationParams를 불러와서 type을 사용하는 곳이 ApplicantPageNavbar 컴포넌트만 있는데 페이지 클릭 시 query param으로 type을 추가하기만 할 뿐 이 type를 이용해서 아무런 동작을 하지 않는 것으로 코드 이해를 했습니다.

저도 그렇게 이해했는데 레거시라 일단은 건드리지 않았습니다!

smb0123

PageNavbarComponent에서 a 태그를 사용하고 있는데 next에서 제공하는 Link 태그로 변경하면 CSR로 동작을 하여서 페이지 이동이 매끄러워 지는 장점이 있어서 변경하는 게 좋을 것 같습니다.

cho-in-sik

고생하셨습니다! 😂 저도 민보님 말대로 tanstack Query 버전이 달라서 했갈렸었는데 통일관련 얘기해보면 좋겠네요👍

jiucchu

수고 많으셨습니다!

jiucchu · 2025-02-28T04:03:40Z

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

 import Search from "@/components/common/Search";
 import { ORDER_MENU } from "@/src/constants";
+import InterviewerList from "../../../../components/interview/InterviewerList";


이 부분도 alias 적용이 되지 않은 것 같습니다!

상세한 제보 감사드립니다 ^.^

smb0123

고생하셨습니다 !

2yunseong · 2025-03-01T06:11:01Z

@smb0123

PageNavbarComponent에서 a 태그를 사용하고 있는데 next에서 제공하는 Link 태그로 변경하면 CSR로 동작을 하여서 페이지 이동이 매끄러워 지는 장점이 있어서 변경하는 게 좋을 것 같습니다.

민보님, 이 부분은 기능 먼저 머지된 이후 리팩터링으로 별도로 진행하겠습니다 ! 알려주셔서 감사합니다 :)

#254

smb0123 · 2025-03-01T06:15:32Z

민보님, 이 부분은 기능 먼저 머지된 이후 리팩터링으로 별도로 진행하겠습니다 ! 알려주셔서 감사합니다 :)

넵 알겠습니다 ! 감사합니다 !

2yunseong added 16 commits February 23, 2025 22:30

refactor: 쿼리키 정규화

a358a54

refactor: 불필요한 함수 호출 삭제

874c441

feat: API 스펙 변경 대응

47f7d97

feat: API 스펙 변경에 따른 검색 로직 수정

60b4b1b

- 기존 API에 검색기능 추가 - 따라서, 검색 전용 API가 쓸모 없어짐

feat: API 스펙 변경에 따른 인터뷰(면접) 검색 로직 수정

0893937

fix: 잘못된 쿼리요청 제거

8487785

feat: 불필요한 hook 제거

8c606bf

refactor: 변수명 리팩터링

690e82a

feat: 로딩 스피너 추가

6908690

refactor: 공통된 parameter 추출 로직 hook으로 분리

bb4936e

refactor: 불필요한 추상화 제거

3cc4da1

refactor: 불필요한 추상화 제거

91e8130

fix: 리팩터링에 따른 불필요한 함수 제거

ad29ca5

refactor: hard한 타입 선언 제거

74b9a0d

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

03a7dba

fix: reconcliation이 안되는 문제 해결

8bbc391

2yunseong added enhancement 기능개선 혹은 UI/UX개선 제안 feature 기능개발 labels Feb 24, 2025

2yunseong requested review from geongyu09, cho-in-sik, smb0123 and jiucchu February 24, 2025 09:55

2yunseong self-assigned this Feb 24, 2025

2yunseong requested review from BlackBean99 and loopy-lim as code owners February 24, 2025 09:55

2yunseong linked an issue Feb 24, 2025 that may be closed by this pull request

[FE] feat: 검색 기능 구현 #237

Closed

2 tasks

geongyu09 approved these changes Feb 25, 2025

View reviewed changes

loopy-lim reviewed Feb 26, 2025

View reviewed changes

smb0123 reviewed Feb 27, 2025

View reviewed changes

cho-in-sik approved these changes Feb 28, 2025

View reviewed changes

jiucchu approved these changes Feb 28, 2025

View reviewed changes

2yunseong added 4 commits February 28, 2025 21:34

refactor: import alias 사용

3e5c91e

fix: 불필요한 태그 삭제

8d5cd5e

refactor: 로딩스피너 코드 개선

97c9e85

fix: 잘못된 props 전달 수정

d33a357

smb0123 approved these changes Mar 1, 2025

View reviewed changes

2yunseong mentioned this pull request Mar 1, 2025

[FE] refactor: prefetch를 통한 페이지 탐색 개선 #254

Open

2 tasks

2yunseong merged commit a8d14cc into main Mar 1, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 면접기록/지원현황 페이지 검색 기능 #240

feat: 면접기록/지원현황 페이지 검색 기능 #240

2yunseong commented Feb 24, 2025 •

edited

Loading

geongyu09 left a comment

geongyu09 Feb 25, 2025

2yunseong Feb 25, 2025

2yunseong Feb 28, 2025

geongyu09 Feb 25, 2025 •

edited

Loading

geongyu09 Feb 25, 2025

2yunseong Feb 25, 2025

2yunseong Feb 28, 2025

geongyu09 Feb 25, 2025

loopy-lim Feb 26, 2025

2yunseong Feb 28, 2025

loopy-lim Feb 26, 2025

2yunseong Feb 28, 2025

2yunseong Feb 28, 2025

loopy-lim Mar 1, 2025

smb0123 left a comment

smb0123 Feb 27, 2025

2yunseong Feb 28, 2025

smb0123 Feb 27, 2025 •

edited

Loading

2yunseong Feb 28, 2025

smb0123 Feb 27, 2025

2yunseong Feb 28, 2025

smb0123 left a comment

cho-in-sik left a comment

jiucchu left a comment •

edited

Loading

jiucchu Feb 28, 2025

2yunseong Feb 28, 2025

2yunseong Feb 28, 2025

smb0123 left a comment

2yunseong commented Mar 1, 2025 •

edited

Loading

smb0123 commented Mar 1, 2025

feat: 면접기록/지원현황 페이지 검색 기능 #240

feat: 면접기록/지원현황 페이지 검색 기능 #240

Conversation

2yunseong commented Feb 24, 2025 • edited Loading

관련 이슈

작업 분류

PR을 통해 해결하려는 문제가 무엇인가요? 🚀

PR에서 핵심적으로 변경된 부분이 어떤 부분인가요? 👀

핵심 변경사항 이외 추가적으로 변경된 사항이 있나요? ➕

추가적으로, 리뷰어가 리뷰하며 알아야 할 정보가 있나요? 🙌

이런 부분을 신경써서 봐주셨으면 좋겠어요. 🙋🏻‍♂️

체크리스트 ✅

geongyu09 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

geongyu09 Feb 25, 2025 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smb0123 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smb0123 Feb 27, 2025 • 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

smb0123 left a comment

Choose a reason for hiding this comment

cho-in-sik left a comment

Choose a reason for hiding this comment

jiucchu left a comment • 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

smb0123 left a comment

Choose a reason for hiding this comment

2yunseong commented Mar 1, 2025 • edited Loading

smb0123 commented Mar 1, 2025

2yunseong commented Feb 24, 2025 •

edited

Loading

geongyu09 Feb 25, 2025 •

edited

Loading

smb0123 Feb 27, 2025 •

edited

Loading

jiucchu left a comment •

edited

Loading

2yunseong commented Mar 1, 2025 •

edited

Loading