Open kimyoungyin opened 2 years ago
좋아요한 사람 모달 api 호출하여 리스트를 모달 내에 렌더링합니다.
각 유닛에 대해 팔로우/언팔로우가 가능하도록 구현하였습니다.
모달: height는 400px로, width는 window의 너비가 735 이하이면 260px, 아니면 400px로 구현되었습니다.
window
wrapper: height는 unit의 총 height와 동일합니다.
고정된 height(400px)로 인해 해당 글에 대해 일정 개수 이상의 좋아요한 사람 unit이 있다면 스크롤이 가능합니다.
각 유닛은 isLoading state를 가지며, 비동기 작업 중에 true가 되어, 그동안 버튼은 <Loading /> 컴포넌트가 렌더링되고, 버튼 클릭이 disabled됩니다.
isLoading
true
<Loading />
disabled
자기 자신인 경우: 팔로우 버튼 자체를 렌더링하지 않음
팔로우하는 유저: 흰색 버튼 "팔로잉"
[x] 언팔로우 시도 시 '언팔로우 모달'이 떠서 한 번 더 확인 과정을 거친 후 언팔로우 api 호출(현재는 그냥 바로 언팔로우)
팔로우하지 않은 유저: 파란색 버튼 "팔로우"
[x] 이미지나 username에 hover 시 hoverModal이 렌더링
[x] ModalCard 중 WithBackdrop의 z-index를 수정 가능하도록 하여 언팔로잉 모달 > 미니프로필(HoverModal) > 좋아요한 사람 모달(LikedPeopleModal) > Header 순으로 보이도록 수정
ModalCard
WithBackdrop
HoverModal
LikedPeopleModal
Header
[x] 댓글 '좋아요' 버튼에 연결
개요
작업사항
좋아요한 사람 모달 api 호출하여 리스트를 모달 내에 렌더링합니다.
각 유닛에 대해 팔로우/언팔로우가 가능하도록 구현하였습니다.
주요 변경 로직
1) 모달 스크롤
모달: height는 400px로, width는
window의 너비가 735 이하이면 260px, 아니면 400px로 구현되었습니다.wrapper: height는 unit의 총 height와 동일합니다.
고정된 height(400px)로 인해 해당 글에 대해 일정 개수 이상의 좋아요한 사람 unit이 있다면 스크롤이 가능합니다.
2) 각 유닛 팔로우/언팔로우
자기 자신인 경우: 팔로우 버튼 자체를 렌더링하지 않음
팔로우하는 유저: 흰색 버튼 "팔로잉"
팔로우하지 않은 유저: 파란색 버튼 "팔로우"
3) hoverModal
[x] 이미지나 username에 hover 시 hoverModal이 렌더링
[x]
ModalCard중WithBackdrop의 z-index를 수정 가능하도록 하여 언팔로잉 모달 > 미니프로필(HoverModal) > 좋아요한 사람 모달(LikedPeopleModal) >Header순으로 보이도록 수정[x] 댓글 '좋아요' 버튼에 연결