[Feat/#57] 대시보드 API 연결

[sinji2102]

📌 관련 이슈번호

• Closes [ Feat ] 관리자 대시보드 API 연결 #57

🎟️ PR 유형

어떤 변경 사항이 있나요?

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

Check List

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

✅ Key Changes

1. 대시보드 GET API 연결
2. 대시보드 PATCH API 연결

📢 To Reviewers

• 수민 오빠랑 얘기해본 결과... 반납은 취소가 없는 게 더 좋을 것 같다고 결정서 대여만 취소 버튼을 넣고 반납은 완료/승인만 넣었습니다!
• 원래 반납이 반납 승인만 있었는데 생각해보니까 관리자가 반납을 완료하는 로직이 없어서 대시보드에 반납 완료 처리까지 함께 넣었습니다.
  -> 그래서 반납의 경우 반납 승인 버튼이 우측 정렬이 되었는데... 다른 승인 버튼들과 간격을 맞추는 게 좋을까요?? 근데 그렇게 하면 오른쪽에 애매하게 공간이 남는 것 같아서... 다들 의견 남겨주세요
• 지금 svg가 전달이 안 오는데... aws에서 지워져서 안 오는 건지 뭔가 문제가 있는 건지 판단이 안 서서 일단 머지하고 수민 오빠한테 서버 svg 수정해달라고 요청한 후에 다시 수정해볼게요!

📸 스크린샷

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 27, 2025 10:55am

[tnals0924]

• 반납 완료 버튼을 빨강, 파랑이 아니라 아예 다른 색으로 두면 다른 승인 버튼들이랑 위치를 맞추지 않아도 괜찮게 보일 거 같은데 어떻게 생각하시나요?
• svg 안 불러와지는 거 수정해놓았습니다~

[sinji2102]

• 반납 완료 버튼을 빨강, 파랑이 아니라 아예 다른 색으로 두면 다른 승인 버튼들이랑 위치를 맞추지 않아도 괜찮게 보일 거 같은데 어떻게 생각하시나요?

근데 색상 없는 상태로 하면 사용자가 글자 차이가 너무 없어서 헷갈릴 수 있다고 생각해서 웬만하면 색을 두고 싶은데... 생각해보니까 그렇게 따지면 승인 버튼이 왼쪽에 있다가 오른쪽에 있다가 하는 것도 UX 측면에서 좋지 않은 것 같더라고요!
그래서 아래 이미지처럼 수정했는데 많이 이상할까요...?? 지금 반납 취소가 없긴 한데 스프린트 하면서 반납 취소를 추가하게 될지 안 추가할지도 중요한 결정사항이 될 것 같아요!!

어차피 복지부에서 사용할 서비스니까 오빠 의견이 가장 중요할 것 같습니다

[tnals0924]

• 반납 완료 버튼을 빨강, 파랑이 아니라 아예 다른 색으로 두면 다른 승인 버튼들이랑 위치를 맞추지 않아도 괜찮게 보일 거 같은데 어떻게 생각하시나요?

근데 색상 없는 상태로 하면 사용자가 글자 차이가 너무 없어서 헷갈릴 수 있다고 생각해서 웬만하면 색을 두고 싶은데... 생각해보니까 그렇게 따지면 승인 버튼이 왼쪽에 있다가 오른쪽에 있다가 하는 것도 UX 측면에서 좋지 않은 것 같더라고요! 그래서 아래 이미지처럼 수정했는데 많이 이상할까요...?? 지금 반납 취소가 없긴 한데 스프린트 하면서 반납 취소를 추가하게 될지 안 추가할지도 중요한 결정사항이 될 것 같아요!!

어차피 복지부에서 사용할 서비스니까 오빠 의견이 가장 중요할 것 같습니다

색상 없는 상태가 아닌 다른 색으로 두고 대여 취소 위치에 반납 완료를 두면 '반납 완료'와 '승인, 취소'의 개념이 서로 연관되어 있지 않아서 괜찮을 거라고 생각했습니다.
올려주신 사진은 디자인 상 반납 취소 버튼이 없어서 위치 자체가 좀 어색해보입니다.
위 사진이 반납 취소 추가를 고려했다는 점에서는 이점이 있지만 그 이점보다 UX상 버튼 1개가 맨 오른쪽에 있지 않아서 예상이 불가능하다는 단점이 더 크다고 생각합니다.
이에 대해 어떻게 생각하시나요?

[sinji2102]

• 반납 완료 버튼을 빨강, 파랑이 아니라 아예 다른 색으로 두면 다른 승인 버튼들이랑 위치를 맞추지 않아도 괜찮게 보일 거 같은데 어떻게 생각하시나요?

근데 색상 없는 상태로 하면 사용자가 글자 차이가 너무 없어서 헷갈릴 수 있다고 생각해서 웬만하면 색을 두고 싶은데... 생각해보니까 그렇게 따지면 승인 버튼이 왼쪽에 있다가 오른쪽에 있다가 하는 것도 UX 측면에서 좋지 않은 것 같더라고요! 그래서 아래 이미지처럼 수정했는데 많이 이상할까요...?? 지금 반납 취소가 없긴 한데 스프린트 하면서 반납 취소를 추가하게 될지 안 추가할지도 중요한 결정사항이 될 것 같아요!!
어차피 복지부에서 사용할 서비스니까 오빠 의견이 가장 중요할 것 같습니다

색상 없는 상태가 아닌 다른 색으로 두고 대여 취소 위치에 반납 완료를 두면 '반납 완료'와 '승인, 취소'의 개념이 서로 연관되어 있지 않아서 괜찮을 거라고 생각했습니다. 올려주신 사진은 디자인 상 반납 취소 버튼이 없어서 위치 자체가 좀 어색해보입니다. 위 사진이 반납 취소 추가를 고려했다는 점에서는 이점이 있지만 그 이점보다 UX상 버튼 1개가 맨 오른쪽에 있지 않아서 예상이 불가능하다는 단점이 더 크다고 생각합니다. 이에 대해 어떻게 생각하시나요?

색상 없는 상태가 아닌 다른 색으로 두더라도, 같은 위치에 다른 행동을 하는 버튼을 두는 것이 사용자에게 혼란을 야기할 수 있다고 생각했습니다. 사용자가 습관적으로 취소는 오른쪽. 이라고 생각할 수 있다고 생각할 수 있으니까요...

근데 생각해보니까 현재 디자인 자체가 조금 불편함이 있는 게, 사용자 경험 측면에서 긍정적인 응답을 오른쪽에 두는 것이 일반적인데 저희는 지금 왼쪽에 배치되어 있네요...

관련 아티클 첨부합니다
https://yozm.wishket.com/magazine/detail/1283/

아티클을 보다가 생각난 건데, 아예 두 버튼의 위치를 변경하는 것은 어떨까요?

예를 들자면
반납 승인
대여 취소 대여 승인

이런 형태로 하면 언급해 주신 버튼이 오른쪽에 있지 않아서 예상이 불가하다는 단점도 상쇄할 수 있을 것 같습니다.

[tnals0924]

• 반납 완료 버튼을 빨강, 파랑이 아니라 아예 다른 색으로 두면 다른 승인 버튼들이랑 위치를 맞추지 않아도 괜찮게 보일 거 같은데 어떻게 생각하시나요?

근데 색상 없는 상태로 하면 사용자가 글자 차이가 너무 없어서 헷갈릴 수 있다고 생각해서 웬만하면 색을 두고 싶은데... 생각해보니까 그렇게 따지면 승인 버튼이 왼쪽에 있다가 오른쪽에 있다가 하는 것도 UX 측면에서 좋지 않은 것 같더라고요! 그래서 아래 이미지처럼 수정했는데 많이 이상할까요...?? 지금 반납 취소가 없긴 한데 스프린트 하면서 반납 취소를 추가하게 될지 안 추가할지도 중요한 결정사항이 될 것 같아요!!
어차피 복지부에서 사용할 서비스니까 오빠 의견이 가장 중요할 것 같습니다

색상 없는 상태가 아닌 다른 색으로 두고 대여 취소 위치에 반납 완료를 두면 '반납 완료'와 '승인, 취소'의 개념이 서로 연관되어 있지 않아서 괜찮을 거라고 생각했습니다. 올려주신 사진은 디자인 상 반납 취소 버튼이 없어서 위치 자체가 좀 어색해보입니다. 위 사진이 반납 취소 추가를 고려했다는 점에서는 이점이 있지만 그 이점보다 UX상 버튼 1개가 맨 오른쪽에 있지 않아서 예상이 불가능하다는 단점이 더 크다고 생각합니다. 이에 대해 어떻게 생각하시나요?

색상 없는 상태가 아닌 다른 색으로 두더라도, 같은 위치에 다른 행동을 하는 버튼을 두는 것이 사용자에게 혼란을 야기할 수 있다고 생각했습니다. 사용자가 습관적으로 취소는 오른쪽. 이라고 생각할 수 있다고 생각할 수 있으니까요...

근데 생각해보니까 현재 디자인 자체가 조금 불편함이 있는 게, 사용자 경험 측면에서 긍정적인 응답을 오른쪽에 두는 것이 일반적인데 저희는 지금 왼쪽에 배치되어 있네요...

관련 아티클 첨부합니다 https://yozm.wishket.com/magazine/detail/1283/

아티클을 보다가 생각난 건데, 아예 두 버튼의 위치를 변경하는 것은 어떨까요?

예를 들자면 반납 승인 대여 취소 대여 승인

이런 형태로 하면 언급해 주신 버튼이 오른쪽에 있지 않아서 예상이 불가하다는 단점도 상쇄할 수 있을 것 같습니다.

오 그러면 제가 우려했던 것들이 모두 해결될 거 같습니다. 좋은 것 같아요~
말씀해주신대로 반영 부탁드려요!

[tnals0924]

굿