✨ feat: Table component 구현

[Moon-ju-young]

📌 변경 사항 개요

Table component를 구현하였습니다.

📝 상세 내용

Table component

• 내부적으로 알아서 api 요청을 보내고 데이터를 보여줍니다.
• api 오류가 발생할 시에는 빈 table을 보여줍니다.
• mode prop은 notice 혹은 user 문자열 값을 받습니다. notice는 공고에 대한 지원 목록, user는 유저가 지원한 공고 목록을 보여줍니다.
• mode prop이 notice일 경우 shopId와 noticeId prop을 필요로 하고, mode prop이 user일 경우 userId prop을 필요로 합니다.
• mode prop이 notice일 경우, data[n] 배열의 5번째 요소로 applicationId가 들어갑니다. user일 때는 4개까지 입니다.
• className prop으로 너비/포지션 정도의 간단한 스타일을 부여할 수 있습니다.
• 텍스트가 넘치는 경우엔 PC/Tablet에서는 2줄까지, Mobile에서는 1줄까지만 보여줍니다. 다만, line-clamp 설정을 활용하는 만큼 환경에 따라 제대로 적용되지 않을 수 있다고 생각해 추가적으로 임시방편인 overflow-hidden 스타일을 적용했습니다.

TableStatus component

• status prop을 받아 status(상태)에 맞는 태그를 보여줍니다.

TableButtons component

• 거절/수락 버튼을 보여주는 component.
• shopId, noticeId, applicaitonId props는 api 요청을 보내는데에 사용됩니다.

🔗 관련 이슈

Resolves: #46

🖼️ 스크린샷(선택사항)

• error 상태 예시
  

💡 참고 사항

• data 부족으로 인해 테스트가 덜 되었습니다. 다만 테스트까지 기다리기엔 코드 양을 생각했을 때 리뷰가 너무 오래 걸릴 거 같아 draft로 일찍 올렸습니다.
• 코드가 다소 길고 복잡한 걸 잘 알고 있습니다! 그러니 이해가 안 되는 점이 있다면 편하게 질문해주세요
• TableButtons가 전혀 테스트 되지 않아 정상적으로 작동하는지 모릅니다. 일단 로직은 승인/거절 예 모달 버튼을 누르면 일단 상태(status)를 바꾼 후, request가 실패한다면 다시 pending 상태 (버튼 상태)로 돌아오는 로직입니다. request 처리 중에는 disabled 처리를 할까 하다 그냥 위 방식으로 구현하였는데 다른 의견이 있으시다면 말씀해주세요~
• 기본적으로 데이터가 없어도 5개의 행을 유지하도록 구현했습니다. 데이터 개수만큼만 보여주는 게 나을까요?

[Yun-Jinwoo]

좋습니다~!👍

[minimo-9]

잘 하셨습니다! 나중에 리팩토링을 할 때 멘토님 얘기대로 피드백 들은 부분만 변경하면 더 좋을 것 같습니다!

[Moon-ju-young]

일단 merge 하고 오류 생기면 수정하는 방향으로 가겠습니다~