Feat/liked person modal

[kimyoungyin]

개요

• 좋아요한 사람 모달

작업사항

• 좋아요한 사람 모달 api 호출하여 리스트를 모달 내에 렌더링합니다.
• 각 유닛에 대해 팔로우/언팔로우가 가능하도록 구현하였습니다.

주요 변경 로직

1) 모달 스크롤

• 모달: height는 400px로, width는 window의 너비가 735 이하이면 260px, 아니면 400px로 구현되었습니다.
• wrapper: height는 unit의 총 height와 동일합니다.
• 고정된 height(400px)로 인해 해당 글에 대해 일정 개수 이상의 좋아요한 사람 unit이 있다면 스크롤이 가능합니다.

2) 각 유닛 팔로우/언팔로우

각 유닛은 isLoading state를 가지며, 비동기 작업 중에 true가 되어, 그동안 버튼은 <Loading /> 컴포넌트가 렌더링되고, 버튼 클릭이 disabled됩니다.

• 자기 자신인 경우: 팔로우 버튼 자체를 렌더링하지 않음
  

• 팔로우하는 유저: 흰색 버튼 "팔로잉"
  

• 언팔로우 시도 시 '언팔로우 모달'이 떠서 한 번 더 확인 과정을 거친 후 언팔로우 api 호출(현재는 그냥 바로 언팔로우)

• 팔로우하지 않은 유저: 파란색 버튼 "팔로우"
  

3) hoverModal

• 이미지나 username에 hover 시 hoverModal이 렌더링
• ModalCard 중 WithBackdrop의 z-index를 수정 가능하도록 하여 언팔로잉 모달 > 미니프로필(HoverModal) > 좋아요한 사람 모달(LikedPeopleModal) > Header 순으로 보이도록 수정
• 댓글 '좋아요' 버튼에 연결