[회비 관리] 페이지네이션 에러 수정

[dooohun]

[#195] request

회비 내역 수정 페이지네이션 버그 해결

페이지네이션 전부 dues 페이지로 이동하는 버그를 Pagination props를 pageName으로 받아 에러 해결

Please check if the PR fulfills these requirements

• The commit message follows our guidelines
• Did you merge recent main branch?

Screenshot

Precautions (main files for this PR ...)

• Close [회비] 회비 내역 수정 페이지네이션 버그 #195

[github-actions]

Code review by ChatGPT

[github-actions]

코드를 검토한 결과, 주석 추가 및 경로 대체로 개선이 필요합니다. 다음은 주요 사항과 개선 제안입니다.

주요 사항

• pageName 속성이 추가되었지만, 기본 경로를 정확하게 설정하는 것이 중요합니다.
• prevYear와 nextYear의 계산에서 관련 조건들이 적절하게 설정되어 있어야 합니다.

개선 제안

@@ -20,14 +21,14 @@ export default function YearPagination({ duesYear, setDuesYear }: YearPagination
     // 재학생 회비 내역이 2021년부터 시작하므로 2021년 이전으로 이동할 수 없음
     // 이전 연도로 이동 시, 페이지를 올바르게 설정합니다.
     const prevYear = page ? page + 1 : 2;
     if (prevYear <= currentYear - 2020) {
-      navigate(`/${pageName}?page=${prevYear}`);
+      navigate(`/${pageName}?page=${prevYear}`); // 'dues' 대신 'pageName'을 사용하여 동적으로 경로 설정
       setDuesYear((prev) => prev - 1);
     }
   };
 
   const goToNextYear = () => {
     // 다음 연도로 이동 시, 페이지를 올바르게 설정합니다.
     if (page && page > 1) {
-      navigate(`/${pageName}?page=${page - 1}`);
+      navigate(`/${pageName}?page=${page - 1}`); // 'dues' 대신 'pageName'을 사용하여 동적으로 경로 설정
       setDuesYear((prev) => prev + 1);
     }
   };

개선 사항 설명

• 주석을 추가하여 코드의 가독성을 높였습니다.
• navigate 함수에서 'dues'를 pageName으로 바꾸어 동적으로 경로를 설정했습니다. 이는 컴포넌트의 재사용성을 높이는 데 기여합니다.

[github-actions]

주요 사항:

• 개선 제안은 YearPagination 컴포넌트에 pageName prop을 추가한 것으로, 이는 페이지 네비게이션의 명확성을 높이고, 관련된 컴포넌트에서 어떤 데이터가 사용되는지를 명확하게 나타내기 위함입니다.

제안 사항:

@@ -154,7 +154,7 @@ function DefaultTable() {
     <>
       <div css={S.searchAndPagination}>
         <div css={S.pagination}>
-          <YearPagination duesYear={duesYear} setDuesYear={setDuesYear} />
+          <YearPagination pageName="dues" duesYear={duesYear} setDuesYear={setDuesYear} />
         </div>
         <div>
           <Input

이러한 개선을 통해 코드의 가독성이 향상되고, 추후 유지보수 시에 의미 전달의 명확함을 제공할 수 있습니다.

[github-actions]

코드 리뷰 결과, YearPagination 컴포넌트에 추가적인 prop인 pageName이 필요하다는 점을 확인했습니다. 이 prop이 없으면 컴포넌트 내에서 page에 대한 정보를 전달받지 못하는 문제가 발생할 수 있습니다. 이로 인해 페이지에 대한 동적 처리가 필요할 경우, 올바른 동작을 하지 않을 수 있습니다.

해당 코드에서 개선할 사항은 다음과 같습니다:

-          <YearPagination duesYear={duesYear} setDuesYear={setDuesYear} />
+          <YearPagination pageName="edit-dues" duesYear={duesYear} setDuesYear={setDuesYear} />

주요 사항:

1. YearPagination 컴포넌트에 pageName prop 추가: 이 변경은 특정 페이지에 대한 정보를 컴포넌트에 전달하여, 조건에 맞는 로직을 수행하는 데 필요할 수 있습니다.

추가적으로, 코드의 다른 부분에서 props validation을 통해 해당 prop이 제대로 전달되고 있는지 확인하는 것도 좋을 것입니다.

[github-actions]

코드 리뷰 결과, YearPagination 컴포넌트에 pageName prop을 추가하는 것이 적절합니다. 이렇게 하면 해당 컴포넌트가 현재 페이지의 이름을 알 수 있어 유연한 처리가 가능해질 것입니다. 다음은 제안된 개선 사항입니다.

@@ -27,7 +27,7 @@ export default function PersonalDues() {
   return (
     <div css={S.container}>
       <div css={S.pagination}>
-        <YearPagination duesYear={duesYear} setDuesYear={setDuesYear} />
+        <YearPagination pageName="dues" duesYear={duesYear} setDuesYear={setDuesYear} />
       </div>
       <div>
         <div>

주요 사항:

1. YearPagination 컴포넌트에 pageName prop을 추가하여 페이지의 출처를 명확히 했습니다. 이로 인해 컴포넌트의 재사용성이 높아지고, 코드의 가독성과 유지보수성이 개선됩니다.