210805(목) - 페이지 이름 수정, 마이 페이지(내가 쓴 글, 댓글 단 글, 좋아요 누른 글) 레이아웃 구현

1. 페이지 이름 수정

2. 마이 페이지(내가 쓴 글, 댓글 단 글, 좋아요 누른 글) 레이아웃 구현

---

1. 페이지 이름 수정

페이지의 네이밍 중에서 '좋아요 표시한 글'이 '좋아요 누른 글'로 변경되었다. 기존의 명확성과 간결성, 통일성을 고려해서 생각한 이름이었는데, 결과적으로는 훨씬 마음에 든다. 글자 수가 줄어들어 다른 네이밍들과 격차가 줄었고, 이전보다 부드러운 느낌을 준다는 점이 마음에 든다. 또한, 내가 글 '쓰고', 댓글을 '달고', 좋아요를 '누르는' 등 행위가 담겨 있어서 통일성도 함께 가져갈 수 있다는 생각이 든다.

2. 마이 페이지(내가 쓴 글, 댓글 단 글, 좋아요 누른 글) 레이아웃 구현

일단 UX Writing이 수정되었다. 메뉴 중에서 좋아요 

내가 쓴 글, 댓글 단 글, 좋아요 누른 글 레이아웃을 구현했다. 내가 쓴 글은 기존의 글들을 그대로 보여주는 형태라서 달라지는 점이 없었다.

형태 및 UX를 고려했던 부분은 나머지 메뉴인데, 먼저 좋아요 누른 글이다.

좋아요 누른 글 페이지

이 페이지에서 기존에 원했던 방향은 이미 눌러진 좋아요를 누르면 alert가 뜨고 그 결과에 따라서 좋아요가 취소되거나 최소 되지 않는 것이다. 물론 취소되면 화면이 다시 렌더링 되면서 목록에 업데이트된다. 결과적으로 이 방향으로 하지 못했는데, 좋아요를 눌렀을 때 로직이 useLike 훅 안에 묶여 있었기 때문에 많은 수정이 필요하다고 느꼈기 때문이다. 차선책으로 좋아요 취소 버튼을 만들어 confirm으로 사용자의 응답을 받았다. 응답에 따라서 다시 렌더링 되는 부분은 컴포넌트에 다시 데이터를 호출하는 함수를 parameter로 넘기면 컴포넌트가 독립적이지 못하다는 느낌 때문에 location.reload()로 해결했다. 사실 강제로 다시 로드시키므로 썩 좋은 방법은 아닌 것 같지만, 업데이트 후 깜빡여서 사용자에게 일종의 텀을 주게 되므로 나쁘지 않지 않을까는 내 생각. 추가적으로 기존의 좋아요를 눌렀을 때 이벤트가 실행되던 부분(좋아요가 클릭되거나 취소되던 부분)은 컴포넌트 prop으로 path를 넘겨 좋아요 누른 글에서 온 경우 이벤트가 전파되지 않도록 막았다.

댓글 단 글 페이지

댓글 단 글의 레이아웃이다. 기존의 디자인은 한 게시물에 여러 개의 댓글이 달려 있는 경우, 동일한 게시물에 여러 댓글이 달리더라도 각 댓글에 댓글 1 + 게시물 1의 형식을 지켰는데, 같은 게시물에 여러 개의 댓글을 작성한 경우 그렇게 보여줄 필요가 있냐는 피드백을 받았다. 각 댓글에 필요한 기능이 있는 게 아니라서 피드백을 받아 위와 같이 최종 수정했다.

unsplash

댓글 단 글 페이지 디자인을 엘라가 unsplash 페이지처럼 해달라고 그랬다ㅎㅎ 이런 디자인은 masonry 디자인이라고 한다는데 아직은 무리일 것 같다고 했다ㅎㅎ '아직'이 맞겠지?ㅠ