반응형 스타일 구현

[dudwns]

📑 이슈 번호

#312

🚧 구현 내용

• PC에서도 서비스를 원활하게 이용할 수 있도록 전체적인 UI에 반응형 스타일을 적용하였습니다.
• 기존 모바일 UI는 변화 없습니다.

메인 페이지

스페이스 상세 페이지

댓글 페이지

스페이스 설정 페이지

스페이스 검색 페이지

유저 검색 페이지

알림 페이지

프로필 페이지

프로필 스페이스 페이지

스페이스 생성 페이지, 사이드 바

🚨 특이 사항

메인 페이지 무한 스크롤 렌더링 이슈

• 메인 화면 스페이스 리스트에 반응형 스타일을 적용하면서 그리드 레이아웃으로 변경하였습니다.

• 하지만 화면이 넓은 디바이스로 처음 서비스에 들어왔을 때 observer target을 인식하지 못하여 무한 스크롤이 불가능한 문제가 발생했습니다.

• 따라서 기존 observer target을 더 보기 버튼으로 변경하고 기존 무한 스크롤 방식은 유지하되 넓은 디바이스에서 접속 시에는 버튼을 클릭하여 api 추가 호출이 가능하도록 구현하였습니다.

• 처음 호출하는 스페이스 리스트의 개수를 증가시키면 되는 방법도 있지만 일단 프론트 측에서 해결하는 것이 좋을 것 같아 이와 같은 방법을 적용하였습니다.