🥞 오늘 한 일

• 최종 프로젝트
  • 로그인된 유저 ID 적용
    • 게시물 작성 시 적용
    • 공구 신청 시 적용 (+ 로그인된 사람만 신청 가능)
    • 작성자만 수정 삭제하도록 구현
    • 작성자일 시 공구 종료, 작성자 아닐 시 공구 신청 버튼 나오도록 구현
  • 글 작성, 수정 페이지 UI 제작 (와이어프레임 기반)
  • 게시물 작성, 수정 시 많은 useState를 하나의 useState로 변경
  • 공구템 리스트가 4개 배수일 경우 더 가져올 리스트가 없어도 더보기 버튼이 남아있는 오류 해결

🍽️ 트러블 슈팅

게시물 작성, 수정 시 많은 useState를 하나의 useState로 변경

게시물 작성 시 들어가야할 내용이 꽤 많아서, useState가 너무 많아 이 많은 상태들을 하나의 useState로 관리하는 방법을 적용시켜보았다. 기존 useState들은 아래와 같았다.

// GroupWriteForm.tsx
const [title, setTitle] = useState<string>("");
const [startDate, setStartDate] = useState<string>("");
const [endDate, setEndDate] = useState<string>("");
const [peopleNum, setPeopleNum] = useState<number>(0);
const [price, setPrice] = useState<number>(0);
const [imgUrl, setImgUrl] = useState<string>("");
const [content, setContent] = useState<string>("");
const [item, setItem] = useState<string>("");
const [link, setLink] = useState<string>("");

척 보기에도 상당히 많은 useState를 사용하고 있는 것을 볼 수 있었다. 위 코드를 아래와 같이 수정했다.

// GroupWriteForm.tsx
const [imgUrl, setImgUrl] = useState<string>("");
const [inputs, setInputs] = useState<TGroupWriteInputs>({
  title: "",
  startDate: "",
  endDate: "",
  content: "",
  item: "",
  link: "",
  peopleNum: 0,
  price: 0,
});
const onChange = (
  e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
  const { value, name } = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
};

<input
  name="title"
  placeholder="제목을 입력하세요."
  value={inputs.title}
  onChange={onChange}
  className="border-b-[1px] w-full border-black"
  />

imgUrl의 경우 로직이 조금 달라서 예외로 하고, 다른 상태들을 하나의 useState 안에 모았다. 그리고 onChange 함수를 제작해 name 및 value를 받아 변경된 input 내 name의 value가 바뀌도록 했고, 따라서 input에 name도 적용하여 name 값을 전해줄 수 있게 변경하였다. 이 방식으로 진행하니 훨씬 보기에도 수월해서 앞으로도 사용할 방법인 것 같다.

🍴 돌아보기

생각보다 디테일하게 수정할 것이 많아 새로운 것에 들어가기가 어려웠던 날이었다. 때문에 아쉬웠지만 꼭 해야하는 부분들이었기 때문에 후회하지는 않는다... 다만 더 시간을 알차게 사용해야겠다는 생각은 들었다. 꼭 좋은 프로젝트로 만들자...!

🍳 내일 목표

• 최종 프로젝트
  • 변경된 디자인 기반 수정
  • 결제 기능 고민해보기