🎀 Wedding-card #6. Main Page - comment

📌 comment(댓글) 기능

시중에(?) 널려있는 모바일 청첩장에서 제일 바꾸고 싶었던 기능..
대부분 어떤 글쓰는 형식의 폼에 내용을 입력하면
신랑/신부의 이메일로 전송되게 하는 기능을 사용하고 있었다.

근데 누가.. 그걸 굳이.. 이메일로 축하메세지를 보내고 있을까 싶어서..
인스타그램처럼 다른사람들도 누군가의 축하메세지를 함께 공유해도 좋지 않을까 싶어서
댓글처럼 보이게 만들기로 했다!

---

1. 댓글 폼 만들기

우선 여러개의 input을 관리하는 작업을 많이 해보지 않았기 때문에
codesandbox에서 연습을 먼저 해보았다..
인스타처럼 이름(bold체) 댓글내용 폼으로 만들어야 했기 때문에

• 이름 : username
• 내용 : content

라는 이름으로 input 2개 만들기!

그래서 완성한 코드는

export default function CommentComponent() {
  const [inputs, setInputs] = useState({
    username: "",
    content: "",
  });
  
  const handleChange = () => {
    const {name, value} = e.target; //e.target에서 name과 value를 추출(?)
    setInputs({
      ...inputs, // 기존 input 객체를 복사
      [name] : value, // name 키를 가진 값을 value값으로 설정
    });
  };
  
  const handleSubmit = () => {
    e.preventDefault();
    if(!inputs.username || !inputs.content) return null; // 빈칸일경우엔 반응 없음
    addTweet(inputs) // 댓글 추가되는 함수 - 밑에서 자세히 정리
    setInputs({
      username: "",
      content: "",
    });
  };
  
  ...
  return (
    ...
    <form>
      <NameInput 
    	name="username"
    	placeholder="이름을 넣어주세요"
    	value={inputs.username}
		onChange={handleChange}
	  />
      <ContentInput 
		name="content"
		placeholder="댓글 달기..."
		value={inputs.content}
		onChange={handleChange}
	  />
      <button type="submit">게시</button>
    </form>

2. 댓글 추가하는 코드 작성

서버와의 연결, 배열에서 추가되는 코드, props타입 등등 여러가지를 합쳐서 생각하다보니
조금 어려웠던 부분....ㅠㅠ

1. 우선 MainPage에서 서버에서 받아온 state값인 comments를 props로 받아오기
2. comments를 map함수로 돌려 새로운 comment배열을 만들기
3. comment배열을 CommentOutput이라는 각 댓글의 view를 담당하는 컴포넌트에 props로 넘겨주기
4. 새로운 comment에서 username은 이름, text는 댓글 내용으로,
   댓글처럼 만들어주는 컴포넌트를 랜더링 시켜주기

이때, 추가해주는 함수에 새 comment배열을 인자로 넘겨줄 때
서버에서 넘겨준 값과 동일하게 넘겨주어야 한다(고 ethan이 말했던 것 같다..)

코드를 보자면

type CommentOutputProps = {
  comment: CommentType;
};

// 개별 댓글의 component
function CommentOutput(props: CommentOutputProps) {
  const { comment } = props;
  return (
    <SingleComment>
      <div>
        <span style={{ fontWeight: "bold", marginRight: "8px" }}>
          {comment.username}
        </span>
        <span>{comment.text}</span>
      </div>
    </SingleComment>
  );
}

// 댓글 추가하는 함수(addTweet)의 타입
type AddComment = (state: InputState) => void;

type CommentStateProps = {
  comments: CommentType[];
};
export default function CommentComponent() {
  ...
  const dispatch = useDispatch();

  const addTweet: AddComment = (args) => {
    const { username, content } = args;
    const comment = {
      postId: "",
      username: username,
      text: content,
    };
    dispatch(addComment(comment));
    fetch("서버주소/addComment", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(comment),
    })
      .then((response) => response.json())
  };
  
  return (
    <Container>
      {comments.map((comment) => {
    	return <CommentOutput comment={comment} />;
      )}
    ...   
    </Container>
  );
}

아직도 POST 메소드로 서버에 데이터를 보내는 작업이 익숙하지 않지만,
좋아요 기능과는 다르게 body에 comment라는 값을 보내야 한다는걸 알게 되었다.
좀 더 연습해봐야겠지만, postman에서 어떤 정보를 어떻게 봐야 하는지도 조금은 알게 되었으니
다음 작업때는 그래도 좀 익숙하게 할 수 있도록
더 공부해야겠다.

3. 리팩토링

작업을 어느정도 하다보니 댓글 길이나 양이 늘어나면 문제가 생겼다.

• 길이가 길어질 경우, 이름과 댓글내용의 공간이 나누어져있기 때문에
  
  이런식으로 이름이 밑으로 내려가버리는 현상이...
  어찌저찌 한줄로 랜더링이 되더라도, 인스타그램처럼

  사용자이름 안녕내이름은---이야만나서반가워
  이렇게 랜더링되야되는데 어렵네

이름 밑으로도 내용이 들어가야 하는데 구역이 나누어져서 자꾸만

이렇게밖에...

그래서 엄청 오랫동안 삽질을 했는데, ethan이 한방에 해결해버려서 어이가 없었다..
방법은 block요소인p태그로 이름/댓글내용 을 inline요소인span태그를 감싸니 바로 가능해졌다...
이게 다 css지식이 얕은 탓이라고 생각하고
더 공부하기로..!

• 양이 늘어날 경우, 첫 랜더링 화면에서 스크롤 길이가 너무 길어짐

테스트를 한다고 서버에 연결한채로 계속 댓글을 추가하다가
40개가 넘어버렸는데, 그렇게 되니까 첫 랜더링 화면인 Mainpage가 너무 지져분해보였다.
그래서 인스타그램처럼 댓글을 접어서 숨겨버리기로 했다.
물론 똑같이 페이지 이동처럼 보이게는 아니지만
버튼을 클릭함으로서 댓글이 접혔다/펴지는 폴더기능을 구현해보았다.

isActive라는 상태값(boolean)을 사용해서 클릭할 때마다 상태가 바뀌도록 코드를 짰다.
동시에 댓글부분 component에 visible이라는 props를 전달해서
visible값이 false일 경우 display: none, visibility: hidden으로 설정하는
css 요소를 조정하였다.

...
<CommentBox>
 <FolderSpan onClick={handleFolder}>
   댓글 {count}개 {visible ? "접기" : "모두 보기"}
 </FolderSpan>
    {visible
      ? comments.map((comment) => {
      return <CommentOutput comment={comment} />;
    })
    : null}
</CommentBox>
<CommentFooter visible={visible}>
  ...
</CommentFooter>

그리고 추가로 댓글이 접혀있을 땐 comment의 length를 통해 갯수를 표시해주었다.

이렇게 작업을 하고 나니 또 생기는 욕심..
댓글을 펼쳤을 때, 바로 이름 input으로 포커스를 맞추고 싶었는데
useRef로 작업했던 적이 있었는데 잘 안되는거다...
그러다가 useEffect와 합쳐서 스크롤을 맨 아래로 내린 뒤 포커스를 주는 방법을 찾았다.

...
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  if(visible) {
    window.scrollTo(0, document.body.scrollHeight);
    if(inputRef.current) inputRef.current?.focus();
  }
}, [visible]);
...
<input 
  ref={inputRef}
  name="username"
  ...
/>

4. toast message 기능

좋아요 기능에서도 말했지만, 서버와 연동해서 view를 보여주다보니
서버에 업로드 되는 사이에 사용자에게 작업이 진행중이라거나, 완료되었다는 표시를 해주는게 필요했다.
그래서 토스트메세지를 띄워주기로 하고 직접 구현해보기로 했다.

isActive라는 상태값, 그 값을 변경할 수 있는 setIsActive함수를 만들어서
ToastMessage 컴포넌트에 props로 전달하였다.
그리고 게시를 클릭하면 토스트 메세지가 띄워지도록 button컴포넌트에
onClick={() => setIsActive(true)}
코드를 추가해주었다.

// ToastMessage.tsx
type ToastProps = {
  children: string;
  isActive: boolean;
  setIsActive: (a: boolean) => void;
};

export default function ToastMessage(props: ToastProps) {
  const { children, isActive, setIsActive } = props;
  // 3초후에 메세지 사라지게 하기
  useEffect(() => {
    if (isActive === true) {
      setTimeout(() => {
        setIsActive(false);
      }, 3000);
    }
  });
  return (
    <Fragment>
      {isActive ? (
        <Toast show={true}>{children}</Toast>
      ) : (
        <Toast show={false} />
      )}
    </Fragment>
  );
}

5. 결과물

덕분에 작업하였습니다 :)

• https://onelight-stay.tistory.com/214
• https://r4bb1t.tistory.com/48
• https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page