35일차

35일차도 DB설계와 댓글 모달 만드는 것을 진행했다. DB설계에는 일차가 길어질수록 점점 힘이 빠져서 오늘은 주로 듣는 걸 위주로 진행이 됐다. 그래서 댓글 모달을 위주로 기록을 해보려 한다.

댓글 모달

댓글 모달은 얼추 기능을 만들었다. 크게 두가지로 첫 번째는 댓글을 다는 기능이고 두 번째는 답글을 다는 기능이다. 아직 DB는 존재하지 않기 때문에 표시만 되도록 해서 만들었다.

현재 모습

댓글 달기

댓글 달기의 모습이다. 댓글을 달면 잘 추가되는 걸 볼 수 있다.

답글 달기

답글 달기는 댓글을 클릭하고 들어가서 달 수 있도록 되어 있다. 그래서 클릭하고 들어가서 답글을 달면 이미지와 같이 나온다.

코드

모든 코드를 보여주기에는 양이 너무 많다. 그래서 일단 컴포넌트화 한 부분들을 보면 다음과 같다.

1. 댓글 컴포넌트 : 댓글이 표시되는 부분
2. 댓글폼 컴포넌트 : 댓글을 입력하는 폼 부분
3. 댓글/답글 섹션 컴포넌트 : 댓글과 답글 모달에 해당하는 부분

이렇게 나누었다. 그래서 재사용이 매우 간편했고, 작은 부분을 조금씩 수정해가면서 사용하면 된다.

CommentForm.tsx

import React, { FC, useState, ChangeEvent, FormEvent } from "react";

interface CommentFormProps {
  handleComment: (comment: string) => void;
  handleClose: () => void;
}

const CommentForm: FC<CommentFormProps> = ({ handleComment, handleClose }) => {
  const [comment, setComment] = useState("");

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    handleComment(comment);
    setComment("");
    handleClose();
  };

  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setComment(e.target.value);
  };

  return (
    <div className="flex w-full h-25 flex-col space-x-4 items-start rounded-lg border text-gray-500 ">
      <div className="flex ml-4 mt-2">
        <div className="w-7 h-7 bg-white border border-gray-300 rounded-full"></div>
        <div className="ml-2 text-gray-500 mb-1 pt-[3px]">Username</div>
      </div>
      <div className="flex w-full mb-2">
        <form onSubmit={handleSubmit} className="w-full flex pr-8">
          <textarea
            className="w-11/12 h-10 p-2 resize-none border-none rounded text-black"
            value={comment}
            onChange={handleInputChange}
            placeholder="댓글을 입력해주세요."
          />
          <div className="flex m-auto ml-2 justify-end w-40 pt-1">
            <button
              type="submit"
              className="w-4/5 h-7 text-sm bg-blue-500 text-white rounded-md float-right"
            >
              업로드
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CommentForm;

지금은 Typescript와 TailwindCSS를 사용하고 있다. 그래서 className 부분이 굉장히 지저분하다. 그래도 하나하나 살펴보면 우선 Typescript에 해당하는 부분들과 이벤트 핸들러들이 존재한다. 그리고 컴포넌트가 있다.

정리하기

댓글 모달은 크게 어려움은 없었다. 피그마 버전이 계속 생기면서 짜잘하게 수정을 했지만 괜찮았다. 일단은 껍데기만 만들고 나중에 기능들을 추가하면 그 때는 어려울 것 같지만 괜찮다. 하나하나 배우면서 해나갈 수 있어서 즐거운 프로젝트를 하고 있다.

KPT

한 주가 굉장히 빠르게 지나갔다. 매일 DB 설계 회의를 진행하고 부족한 부분을 공부하면서 보내다보니 아직 정리를 못한 것도 많고 순식간에 하루하루가 지나갔다.

그래서 너무 많은 걸 느끼게 된 한 주였고 더 잘해보자 생각했다.

이번 주 KPT는 다음과 같다.

Keep

1. 기록하기
2. 공부하기
3. 협업 중요시 생각하기

Problem

1. 깃에 대한 무지함
2. 아직은 필요한 의존도

Try

1. 깃 공부하고 정리하기
2. 맡은 부분 확실하게 하기

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프