메인 페이지
메인 페이지에서는 먼저 왼쪽 네비바에서 카테고리 선택을 통해 OOTD 게시물을 확인 가능합니다.
선택한 카테고리는 세션 스토리지 및 zustand로 전역 상태로 관리되므로 새로고침 및 다른 페이지로 가도 유지됩니다.
게시물은 최대 10개씩 로딩되고 react-query의 useInfiniteQuery 훅을 사용해서 무한 스크롤로 로딩되도록 구현했습니다. 로딩 시 스켈레톤 UI를 통해 좀 더 부드러운 사용자 경험을 고려했습니다.
해당 게시물에 좋아요 및 게시자를 팔로우할 수 있고 사진을 클릭하면 게시물 상세 페이지로 이동합니다. 이 때 중첩 라우팅을 통해 게시물마다 다른 url을 가지도록 하였습니다.
오른쪽 네비바에서는 모든 유저 목록을 확인 가능하며 온라인인 유저를 실시간으로 확인 가능합니다.
실시간으로 확인하는 기능은 react-query의 useQuery 훅 내 refetchInterval 속성을 통해 2초마다 데이터를 업데이트하여 구현했습니다.
검색바를 통해 api의 사용자 검색이 가능하고 유저 항목을 클릭하면 해당 유저 상세 페이지로 이동합니다. 이 때도 중첩 라우팅이 사용됩니다.
메인 페이지에서 화면이 작아짐에 따라 왼쪽 및 오른쪽 네비바가 사라지도록 반응형 디자인도 고려해보았습니다. CSS 트랜지션 및 transform 등을 통해 자연스러운 애니메이션을 구현해보았습니다.
상세 페이지 모달
포스트 상세 페이지 모달에서는 포스트 작성자 정보, 포스트 사진, 내용, 작성 시간, 댓글 및 좋아요 정보를 확인할 수 있습니다.
작성자 및 댓글, 좋아요 정보에 있는 유저 닉네임을 클릭하게 되면 해당 유저 상세 페이지로 이동할 수 있습니다.
작성자를 팔로우 및 포스트를 좋아요할 수 있고 해당 변경 사항이 뒷배경 메인페이지에도 바로 연동이 됩니다. mutate 함수가 동작하고 onSuccess 함수 내에서 post 정보를 불러오는 쿼리를 refetch함으로써 구현했습니다.
댓글 입력창으로 통해 댓글을 입력할 수 있고 해당 댓글 내용이 곧바로 표시될 수 있도록 역시 포스트 상세 정보를 refetch하도록 구현했습니다.
자신이 작성한 댓글이거나 관리자 계정은 댓글에 마우스를 hover하게 되면 빨간색 x 버튼을 통해 댓글을 삭제할 수 있습니다.
포스트 상세 정보 데이터는 useParams를 통해 url의 포스트 id를 통해 새로고침 시 곧바로 불러올 수 있도록 구현했습니다.
오른쪽 상단의 세개의 점 버튼을 클릭하면 자신의 게시물을 볼 때는 게시물 삭제, 수정 버튼이 다른 사람의 게시물을 볼 때는 팔로우 취소 버튼이 나타나는 추가 동작 모달을 구현했습니다.
포스트 상세 페이지 모달과 추가 동작 모달의 렌더링 위치는 react portal을 사용해 body 최하위 자식 요소로 설정하게 하여 어떤 페이지에서도 이벤트 버블링이 일어나지 않도록 최적화했습니다.
상세 페이지 모달에서도 화면이 작아짐에 따라 사진과 내용 배치가 바뀌도록 반응형 디자인을 고려해보았습니다.
