오늘 한 작업
- 로컬 상세 페이지 댓글 기능 구현 및 css 조정
원래라면 내 담당 기능에 맞게 지역 목록 페이지의 시군구 필터링을 구현했어야 했지만, 지역 상세 페이지를 맡은 팀원과 협의해 나는 지역 상세 페이지의 댓글 기능을 구현하고(?) 팀원은 반대로 지역 목록 시군구 필터링을 구현하게 됐다. 어쩌다보니 이렇게 됐지만 오히려 좋았다.
팀원 분은 내가 구현했던 무한스크롤 기능을 만져볼 수 있다고 좋아하셨고, 나도 댓글 기능을 구현하게 되어서 해봤던 기능을 다시 하면서 많은 걸 배울 수 있었다.
댓글 삭제 시 피드 목록으로 이동하지 않도록 수정하기
배경
댓글 삭제 시 피드 목록으로 이동하는 문제가 발생했음. 원래 의도는 피드 게시글 삭제 시 피드 목록으로 이동시키는 것이었지만, 댓글 삭제 시에도 동일한 동작이 발생하여 UX에 문제가 있었음.
문제 원인
피드 게시글 삭제 시 피드 목록으로 이동시키기 위해 작성한 DeletePrompt 컴포넌트가 댓글 삭제 시에도 동일하게 동작함. 이 컴포넌트를 피드 게시글, 피드 댓글, 로컬 상세 댓글 삭제 시 모두 사용하면서 발생한 문제임.
해결 방법
DeletePrompt 컴포넌트에 isComment prop을 추가하여 댓글 삭제와 게시글 삭제를 구분함. 댓글 삭제 시에는 현재 페이지에 머무르고, 피드 게시글 삭제 시에만 피드 목록으로 이동하도록 처리함.
구현 방법
isComment Prop 추가: DeletePrompt 컴포넌트에 isComment라는 prop을 추가하여 삭제 요청이 댓글인지 게시글인지 구분함.
handleConfirm 함수 수정:
isComment가 false이고 현재 경로가 피드 상세 페이지가 아닐 때만 피드 목록으로 이동하도록 조건을 수정함.
댓글 삭제의 경우 isComment를 true로 설정하여 현재 페이지에 머무르도록 처리함.
사용 예시 🔽
// 댓글 삭제 시
toast(
<DeletePrompt
onConfirm={() => handleDeleteComment(commentId)}
isComment={true}
/>,
{
// ... 토스트 옵션
}
);
// 피드 게시글 삭제 시
toast(
<DeletePrompt
onConfirm={() => handleDeletePost(postId)}
isComment={false}
/>,
{
// ... 토스트 옵션
}
);
이렇게 수정함으로써, 댓글 삭제 시 현재 페이지에 머무르게 하고, 피드 게시글 삭제 시에만 피드 목록으로 이동하도록 처리함.
요약
- 문제: 댓글 삭제 시 피드 목록으로 이동하는 불필요한 동작 발생
- 해결: DeletePrompt 컴포넌트에 isComment prop을 추가하여 삭제 유형에 따른 이동 로직을 수정함
이번 경험을 통해 피드 삭제와 댓글 삭제 로직을 구분하여 최종프로젝트에서의 사용자 경험을 개선함.
overflow-y-auto 사용과 그 효과 (Tailwind CSS)
배경
프로젝트에서 긴 콘텐츠가 페이지를 넘어가는 경우, 스크롤바를 추가해 사용자가 콘텐츠를 편리하게 탐색할 수 있도록 해야 했음. Tailwind CSS를 사용해 이 문제를 해결함.
문제
긴 콘텐츠가 화면을 넘어갈 때, 스크롤바가 자동으로 나타나지 않아 일부 콘텐츠가 보이지 않는 문제가 발생함. overflow-y-scroll 클래스를 사용하면 항상 스크롤바가 나타나는 불편함이 있었음.
해결 방법
Tailwind CSS의 overflow-y-auto 클래스를 사용해 스크롤이 필요한 경우에만 스크롤바가 나타나도록 처리함.
구현 방법
overflow-y-auto 클래스: 콘텐츠가 요소의 높이를 초과할 때만 세로 스크롤바가 나타나게 함. 초과하지 않으면 스크롤바가 보이지 않음.
<div class="overflow-y-auto max-h-96">
<!-- 긴 콘텐츠가 여기에 들어감 -->
</div>
효과:
콘텐츠가 요소의 높이를 초과할 때만 스크롤바가 나타나며, 불필요한 스크롤바가 표시되지 않음. 사용자에게 깔끔한 UI를 제공할 수 있었음.
요약
- 문제: 긴 콘텐츠가 화면을 넘어가도 스크롤바가 나타나지 않거나, 항상 스크롤바가 표시되는 불편함이 있었음.
- 해결: Tailwind CSS의 overflow-y-auto 클래스를 사용해 콘텐츠가 높이를 초과할 때만 스크롤바가 나타나도록 처리함.
- 결과: 불필요한 스크롤바 표시 없이 사용자 경험을 개선할 수 있었음.
이를 통해 Tailwind CSS에서 스크롤바를 관리하는 방법을 더 잘 이해하게 되었고, 적절한 상황에서 overflow-y-auto 클래스를 사용하는 것이 중요함을 확인함.
