Error & Not working

이제 자유게시판 포트폴리오작업은 마무리 짓고,
중고마켓으로 넘어갈 차례다.

그 중 아직 해결하지 못한 문제

1. 게시글 수정 시 제목,내용,비밀번호가 빈칸일 때
   각각 에러메시지를 띄워야 한다.(비밀번호는 모달로!)
2. 게시글을 수정하면 주소툴팁과 이미지만 새로고침을 해야 수정적용이 되는 문제
3. 이미지를 넣으면 validation과 상관없이 게시판 틀을 벗어나서 화면이 커지는 문제

알고보니 3문제 다 간단히 해결할 수 있는 문제였는데,
그런 방법을 생각하지 못했다는 거시^^;;;

1️⃣ 번 문제 해결방법

이걸 구현하고 싶은데 코드리뷰에도 해당 내용은 없어서 참고할 수 있는 곳이 없었고,
그냥 이 방법 저 방법 써가면서 맞게 작성한건지도 모르겠꼬ㅋㅋㅋ 심지어 chatGPT한테도 물어보고 했는데도 해결이 안되서 무진장 답답했다.

  const onClickUpdate = async (): Promise<void> => {
    // const variables = { number: Number(router.query.number) };
    // if (!title || props.data?.fetchBoard.writer) {
    // if (!title) {
    //   setIsActive(false);
    //   setTitleError("제목을 입력해주세요");
    //   return;
    // }
   	// if (!title) {
    // setTitleError("제목을 입력해주세요.");
    // return;
  //  } else if (title === //props.data?.fetchBoard.title && contents === props.data?.fetchBoard.contents && youtubeUrl === props.data?.fetchBoard.youtubeUrl && address === props.data?.fetchBoard.boardAddress?.address && addressDetail === props.data?.fetchBoard.boardAddress?.addressDetail && zipcode === props.data?.fetchBoard.boardAddress?.zipcode//) {
//    Modal.error({
//      content: "수정한 내용이 없습니다!",
//    });
//    return;
//  } else {
//    setTitleError("");
//  }
	//if (props.data?.fetchBoard) {
	//  if (props.data?.fetchBoard.title === "") {
//    setTitleError("제목을 입력해주세요");
//  } else {
//    setTitleError("");
//  }
// } else {
//  console.log("게시물 정보를 불러오는 중입니다.");
// }
   	// if (props.data?.fetchBoard.title) {
    //   // if (!title) {
    //   setIsActive(false);
    //   setTitleError("제목을 입력해주세요");
    //   return;
    // } else {
    //   setTitleError("");
    // }
    // }

저것보다 원래 주석처리는 더 많음ㅋㅋ
해보고 안되면 주석처리
응~ 안되? 주석처리ㅋ

그래서 결국 다른 페어분께 여쭤봤는데
아,,,,,
state초기값에 isEdit를 해서 삼항연산자를 사용하는 방법을 말씀해주셨다,,,
이런 방법이,,,
이건 왜 생각을 못했을까 🙀

따라서 아래는 변경된 코드

  // const [writer, setWriter] = useState("");
  // const [password, setPassword] = useState("");
  // const [title, setTitle] = useState("");
  // const [contents, setContents] = useState("");
  // const [youtubeUrl, setYoutubeUrl] = useState("");
  // const [address, setAddress] = useState("");
  // const [zipcode, setZipcode] = useState("");
  // const [addressDetail, setAddressDetail] = useState("");
  const [writer, setWriter] = useState(
    props.isEdit ? props.data?.fetchBoard.writer : ""
  );
  const [password, setPassword] = useState("");
  const [title, setTitle] = useState(
    props.isEdit ? props.data?.fetchBoard.title : ""
  );
  const [contents, setContents] = useState(
    props.isEdit ? props.data?.fetchBoard.contents : ""
  );
  const [youtubeUrl, setYoutubeUrl] = useState(
    props.isEdit ? props.data?.fetchBoard.youtubeUrl : ""
  );
  const [address, setAddress] = useState(
    props.data?.fetchBoard.boardAddress?.address
      ? props.data?.fetchBoard.boardAddress?.address
      : ""
  );
  const [zipcode, setZipcode] = useState(
    props.data?.fetchBoard.boardAddress?.zipcode
      ? props.data?.fetchBoard.boardAddress?.zipcode
      : ""
  );
  const [addressDetail, setAddressDetail] = useState( props.data?.fetchBoard.boardAddress?.addressDetail
      ? props.data?.fetchBoard.boardAddress?.addressDetail
      : ""
  );

isEdit일 때 받아온 데이터를 보여주고
아니라면 빈값을 보여주도록 작성한다.

  //수정하기
  const onClickUpdate = async (): Promise<void> => {
    // const variables = { number: Number(router.query.number) };
    const currentFiles = JSON.stringify(fileUrls); //현재파일
    const defaultFiles = JSON.stringify(props.data?.fetchBoard.images); //초기값 넣어주고
    const isChangedFiles = currentFiles !== defaultFiles;
    if (!title) {
      setTitleError("제목을 입력해주세요");
    }
    if (!contents) {
      setContentsError("내용을 입력해주세요");
    }
    if (!password) {
      Modal.error({
        content: "비밀번호를 입력해주세요!",
      });
      return;
    }
    if (
      title === props.data?.fetchBoard.title &&
      contents === props.data?.fetchBoard.contents &&
      youtubeUrl === props.data?.fetchBoard.youtubeUrl &&
      address === props.data?.fetchBoard.boardAddress?.address &&
      addressDetail === props.data?.fetchBoard.boardAddress?.addressDetail &&
      zipcode === props.data?.fetchBoard.boardAddress.zipcode
    ) {
      Modal.error({
        content: "수정한 내용이 없습니다.!",
      });
      return;
    }

그리고 수정하기 버튼을 클릭했을 때 일어나는 함수에서
조건문으로 제목과 내용이 빈값이라면 에러메시지를 띄우고
비밀번호가 빈값이라면 모달에러를 띄워주도록 했다.
또 다른 조건문으로
현재의 입력값이 받아온 데이터값과 일치한다면
수정이 안됬다는 뜻이고
이때 모달로 "수정한 내용이 없습니다.!"라고 띄워주도록 했다.

콘솔로 띄워보면

console.log(props, props.isEdit, props.data?.fetchBoard.writer, writer);

isEdit 가 false일 경우
isEdit 가 true일 경우
해당결과에 따라 출력되는 것을 확인할 수 있다.

2️⃣ 번 문제 해결방법

하,, 2번 문제는 게시물을 등록하고 목록페이지로 이동했을 때 처음 한 번에 리스트업이 되지 않고 새로고침을 해야 수정이 되는 문제가 발생했었는데,
그 때 문제랑 똑같았다,,,,,,,,,
이놈의 refetch가 왜 한번에 바로 안되는건지ㅠㅠㅠㅠㅠ

결국 리스트에서 사용했었던 useEffect를
상세보기 페이지에서도 똑같이 적용을 해주었다,,,,
아니 근데 내가 궁금한건,,,,,,
왜 useEffect를 써서 강제로 새로고침하지 않아도 화면에 노출이 되도록 해야하는 건지,,,,
원인을 진짜 찾고싶은데ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
뭐 물어봐도 안알려주니,,,,,;
때가 되면 알것이다 뭐 그런건가,,,,,,,,
답답해,,,빨리 알고싶은데,,,,
어쨌든 따라서 변경된 코드는 이와 같다.

 useEffect(() => {
    refetch({ page: 1 });
  }, []);

쏘 심플

여기에 +
이미지를 등록하고 나서 상세페이지로 갔을 때
등록한 이미지의 개수만큼 화면에 나타나야 하는데

 useEffect(() => {
    const images = props.data?.fetchBoard.images;
    if (images !== undefined && images !== null) setFileUrls([...images]);
  }, [props.data]);

새로고침을 해도 이미지가 원하는 개수만큼 나타나지 않았다.
그래서

   useEffect(() => {
       if (props.data?.fetchBoard.images?.length) {
       //이미지가 비었는지 확인하고
           setFileUrls([...props.data?.fetchBoard.images]);
     }
   }, [props.data]); //의존성배열로 여기가 바뀌면 다시 실행됨

이 코드로 바꿔주니 원하는 대로 나옴!
그러나 위에서 상세보기 페이지 자체에 useEffect 처리를 해주고 나니 이번엔 기존의 이미지 + 수정된 이미지가 합쳐져서 나오게 됬다.
다시 아래 코드를 주석처리하고 원래코드를 적용하니 잘 나옴!!

3️⃣ 번 문제 해결방법

이건 생각보다 간단하게 해결한 문제!
https://developer.mozilla.org/ko/docs/Web/CSS/background-size 참고해서
overflow:auto 같이 적용해주니 해결!