[전공자들 7] 6일차 - 댓글 숨기기, 답글 닉네임 @태그 붙이기

화면작업은 거의 막바지에 접어들었다. 이제 로그인/회원가입 등등만 하면 끝나는데 

오늘은 드디어 야심차게 기획했지만 미뤄뒀던 피드 페이지를 만들 차례..

프론트적으로 가장 중요한 작업은 두가지정도 있었다. 

---

댓글 숨기기 

리스트 형식의 게시판은 어차피 글제목 클릭을 통해 세부화면으로 넘어가기 때문에 댓글 숨기기 기능이 필요하진 않았지만 피드형식의 게시판엔 댓글을 모두 노출시키기엔 너무 스크롤이 많이 생겨서 불편할 것 같았다. 

 

그래서 이렇게 처음엔 댓글이 숨겨져 있다가 댓글버튼을 클릭하면

이런식으로 아래에 댓글창과 댓글작성칸을 띄우기로 했다. 

 

늘 그렇듯이 useState를 사용해 onCilck()이벤트가 발생할 때마다 토글을 만들면 되지 않을까 했지만 곧 한가지 문제점을  떠올렸다. 게시글은 각각 독립적이어야 하는데 변수 하나로 토글을 만들게 되면 한 댓글보기 버튼을 누르면 모든 댓글이 다 함께 보였다가 숨겨졌다가 세트처럼 동작하게 될 것임이 분명했다.

 

그래서 게시글의 아이디(고유한 번호)로 boolean 변수를 생성해서 관리하기로 했다.

const [commentsVisible, setCommentsVisible] = useState({}); 

const toggleComments = (articleNum) => { 
    setCommentsVisible({
      ...commentsVisible,
      [articleNum]: !commentsVisible[articleNum] ?? false,
    })
  }

 <button onClick={() => { toggleComments(item.num) }}>댓글(2)</button>

 

각 게시글의 댓글보기 버튼을 누를 때마다 게시글의 번호를 받아와서 commentsVisible이라는 객체에 업데이트 시킨다. 만약 없으면 false를 기본으로 설정하여 숨겨진 상태에서 처음 눌렀을 때 토글될 수 있도록 했다. 

 

 

---

답글 남기기

그리고 또 하나 욕심낸 기능이 있다... 

바로 댓글 - 답글 기능인데 답글을 달 때 어떤 사람의 글에 답글을 다는 건지 @태그 형식으로 닉네임을 붙여주는 기능..!

 

이런식으로 답글작성 버튼을 누르면 그 댓글의 번호에 해당하는 댓글쓴이의 닉네임을 받아와서 표시하는 기능인데 결과적으로 말하자면 반은 성공하고 반은 실패했다..

 

먼저, 댓글은 <textarea>태그를 이용해서 구현해야했는데 답글을 누를 때마다 닉네임을 받아와서 textarea에 표시할 수 있는 속성은 value와 defaultValue 두 가지가 있었다. 

하지만 두 가지 다 내 요구를 충족시키진 못했다

 

1. 닉네임은 파란색 글씨로 표시되어야 함

2. 버튼을 누를 때마다 닉네임이 자동완성됨

3. 닉네임이 자동완성된 후 다음부분부터는 사용자가 텍스트를 입력할 수 있어야 함

4. 임의로 텍스트를 수정하다가 @닉네임 부분을 지웠을 경우 답글작성 버튼을 누르면 다시 자동완성이 되어야 함

 

네가지를 생각했었는데, 먼저 value속성을 사용해 업데이트 시키는 방법은 2번,4번 조건만 만족시켰다. 

하지만 value를 지정해 값을 업데이트시키면, readonly상태로 변해버려서 사용자가 수정할 수가 없었다.

두번째로 defaultValue 속성을 사용했는데, 3번만 만족시켰다.

처음 렌더링이 될 때만 초기화하고 그 후로는 다시 답글작성 버튼을 눌러도 자동완성이 되지 않았다 ㅠ

 

2,3,4조건 중 3번이 너무 결정적인 조건이었어서 결국 defaultValue를 사용했다. 

 

1번은 애초에 textarea라는 태그의 특성상 특정 부분에만 스타일을 적용시키기가 매우 어려웠고, 

특히나 사용자가 지울 수 있는 텍스트로 만드려고 하니 더더욱 불가능하다고 판단했다,,

그래서 그냥 등록한 후 (보여지는 화면에서만 답글내용이 @닉네임으로 시작하고 닉네임이 댓글작성자와 똑같을 경우) 텍스트에 색표시를 하기로 타협했다.