[Feat/#9] 학생회비 납부자 조회 페이지 구현

[daun-up]

📌 관련 이슈번호

• Closes [ Feat ] 학생회비 납부자 조회 페이지 퍼블리싱 #9

🎟️ PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경

Check List

• 🔀 PR 제목의 형식을 잘 작성했나요?
• 🏗️ yarn build는 성공했나요?
• 🧹 불필요한 코드는 제거했나요? (TODO, 주석, clg... etc.)
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?

✅ Key Changes

package.json 수정 (shadcn.ui 추가)

1. tailwind 기본 단위 커스텀 단위로 수정 (sheet 컴포넌트 사용에서의 단위 수정 -> 이슈가 되면 다시 되돌려 놓아야할 것 같아요 해결 방법이 이것 뿐이라 수정했씁니다)
2. table 컴포넌트 구현
3. 사이드바 (sheet) 컴포넌트 구햔
4. 검색 컴포넌트 구현

📢 To Reviewers

• next dev 의존성 문제라거나 에러 나면 연락 주세요... 삽질을 좀 해서 잘 안 될 수도 있을 것 같아요

📸 스크린샷

🔗 참고 자료

https://velog.io/@xoxojw/Next.js-15%EC%97%90%EC%84%9C-shadcnui-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

[Choi-Jiwon-38]

객체에 대한 타입 지정할때 interface 사용한 거 좋습니다 👍🏻

[Choi-Jiwon-38]

혹시 Array.map을 이용하면서 key 값을 지정해줄 때, index가 아닌 다른 식별자 값을 사용할 수 있을까요?

물론 해당 배열이 변경될 여지가 없거나 추가로 사용할 식별자 값이 없다면 index를 사용해도 괜찮습니다.

[Kim, Lee, Park]
<ul>
    <li>Kim</li>
    <li>Lee</li>
    <li>Park</li>
</ul>

[Choi, Kim, Lee, Park]
<ul>
    <li>Choi<li>  // <- 새로운 요소
    <li>Kim</li>
    <li>Lee</li>
    <li>Park</li>
</ul>

위와 같은 경우를 예로 들면 배열의 앞에 새로운 요소가 추가됨에 따라 하나씩 key가 밀리면서 리액트는 key 0, 1, 2에 해당하는 값이 변경되고 key 3은 새로 추가되었다고 생각하게 되어 4개 모두 업데이트가 이루어지게 됩니다.

코드상으로는 student_id를 식별자로 사용해도 괜찮아보이는데 확인 한 번만 부탁 드리겠습니다 :)

[Choi-Jiwon-38]

import {
  forwardRef,
  ComponentProps
} from "react";

로 Named Import 방식을 사용하도록 교체해볼 수 있을 것 같습니다. Wildcard import를 사용할 경우, 사용하지 않는 코드까지 번들에 포함될 가능성이 있어 보이기 때문입니다. Tree shaking과 관련된 내용이어서 같이 찾아보면 좋을 거 같아요.

[Choi-Jiwon-38]

이 부분도 위 코멘트와 비슷한 이유로 아래와 같이 변경해보는 건 어떨까요? Named Import와 Alias 를 함께 사용하는 방법입니다.

import { 
    ...
    Portal as SheetPortal,
    ...
} from '@radix-ui/react-dialog';