[Feat/#23] 대여기록 페이지 퍼블리싱 및 alert창 구현

[hyeonjin6530]

📌 관련 이슈번호

• Closes [ Feat ] 대여기록 페이지 구현 #23

🎟️ PR 유형

어떤 변경 사항이 있나요?

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

Check List

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

✅ Key Changes

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

1. 작업 내용

📢 To Reviewers

• 하다보니 스크롤 상황에서 헤더가 고정이 되지 않고 같이 스크롤 되는 현상을 발견했습니다. 확인부탁드려요!
• 드롭다운 메뉴가 열리는 거 까지 가능한데 다시 닫히는 게 안되더라구용 이걸 해결하려면 아래와 같이 코드를 변경하는 것이 좋을 거 같다는 생각을 하게 되었는데 드롭다운이 사용되는 모든 곳에서 수정을 진행하여 할 거 같아서 혹시 어떻게 하는게 좋을지 아이디어 공유 부탁드려용

📸 스크린샷

• 전체 화면

• 상태가 많은 편인 거 같은데 괜찮을까요!

• alert 창 (대여중 -> 반납하기)

• alert 창 (승인대기중 -> 취소하기)

• alert 창 (반납대기중 -> 취소하기)

🔗 참고 자료

[sinji2102]

고생하셨습니다!! 모바일 레이아웃 변경도 해주시다니... 최고예용 🫶

헤더 움직이는 이슈는 API 연결하면서 제가 이슈 하나 파서 수정하겠습니다!

[sinji2102]

p1) 이 부분이 아마 드롭다운을 여는 버튼인 것 같은데... 저도 드롭다운이 안 닫히는 문제를 겪었는데 현진님이 추천해 주신 코드로 수정해도 같은 문제가 반복되더라고요! 제 예상에서는 아마 이벤트 버블링으로 인한 이슈인 것 같은데... 뒤에 투명 배경을 하나 더 삽입하는 방법으로 고칠 수 있을 것 같긴 한데 아직 시도는 해보지 못해서... 제가 리팩토링 때 수정하겠습니다!

현진님 코멘트가 저한테 안 보였어서.... 머지하구 다른 부분에 코드들이 쓰이고 있어서 리팩토링 할 때 같이 수정하겠습니다! 일단 제가 발견한 해결책은

 <button
          type="button"
          onClick={isDropdownVisible ? undefined : handleDropdown}
          className={`flex items-center gap-2.5 ${isDropdownVisible && 'pointer-events-none'}`}
        >

위처럼 className에 드롭다운 속성에 따라 버튼을 클릭할 수 없도록 막으면 이벤트 버블링....을 일단 막는 거처럼 보이게 할 수 있을 것 같아요!

[hyeonjin6530]

헉 감사합니다!!😍 알려주신 방법으로 적용해서 머지 하겠습니다🥰🥰

[hyeonjin6530]

앗 그리고 history 페이지 코드에서 타입 관련해서 경고가 떠있을텐데 해당 내용은 api 연결 하면서 수정하도록 하겠습니다!!