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

[daun-up]

📌 관련 이슈번호

• Closes [ Feat ] 사이드바 sheet 구현 #14

🎟️ PR 유형

어떤 변경 사항이 있나요?

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

Check List

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

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

1./payer-inquiry 로 접근 가능합니다.
2. shadcn.ui 에서 제공하는 버튼에 스타일을 여러 개 지정할 수 있어서, 데스크탑 뷰 primary 버튼과 secondary 버튼 스타일을 추가해두었습니다.

3. 사이드바 시트에서 학생회비 납부자를 추가하는 폼을 구현했습니다. 학번, 이름 입력하고 플러스 버튼을 누르면 추가되며 api 의 경우 적용하기를 눌렀을 때 적용되게 할 예정입니다.

📢 To Reviewers

• 디자인을 적당히만... 따랐씁니다! 마음이 급해서ㅜㅜ 그리고 수정사항이 생겼어요 바로 버튼 위치인데요! 한 번 실행시켜보시고 사용자 입장에서 불편한지 판단해주시면 감사하겠습니다.

원래 이런 식으로 선택한 이름 삭제 버튼이 있었는데

이렇게 바꾸었어요 피드백 부탁드립니다! 원래가 좋으면 고칠게요!!

[sinji2102]

테이블 뷰 많아서 복잡했을 텐데 고생하셨습니당~~ 중복 추가 + 삭제 이슈 수정되면 어푸할게요!

[sinji2102]

p3) map에 key값을 주는 방식은 성능 저하 이슈가 일어날 수 있어요! 관련해서 아티클 남기고 갑니다~

https://velog.io/@phjjj/React-map%EC%9C%BC%EB%A1%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%98%B8%EC%B6%9C%EC%8B%9C-key%EB%A5%BC-index%EB%A1%9C-%EB%91%90%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

생각해보니까 header라서 굳이 값이 늘어날 걱정을 안 해도 될 것 같기도 하고... 저는 이런 경우에 그냥 item 이름을 key값으로 주거나 랜덥값을 key로 주는 방식을 사용하고 있습니다! 한 번 고민해보면 좋을 것 같아요

[daun-up]

header 를 key 값으로 주는 방식을 추천 받았는데, 이건 어떨까요? @sinji2102