TIL_221227 프로젝트 끝! 댓글 삭제 어찌저찌 했지만.. 수정은 아직 못하겠다 😭

ui가 보여지는 로직이 이해가 안됨

=> 이것이 바로 dispatch임을 프로젝트가 끝날 때 쯤에야 알았다.
내가 정확히 뭘하고 있는건지 코드를 짜다가 잊어버릴 때가 많았다.
그럴 때 일수록 console.log를 찍는 연습을 많이해야 한다.

추가, 삭제까지는 할 수 있음

• 근데 비밀번호 입력 받는건 해본적이 없어서 너무 어려움 ㅠ

// 비밀번호 입력창을 컨트롤 하는 애

[isDelete, setIsDelete] = useState(false);

isDelete가 실행이 되게 하려면 setIsDelete로 컨트롤

handlerSetIsDelete가 true일때랑 false

트루일 때는 디스패치

폴스일 때는 setIsDelete에 따라서 true로 만들어주기

삭제 버튼 -> setIsDelete(true)

isDelete가 true냐 false냐..

npx json-server --watch db.json --port 8080

댓글 쓰기

dev 꼭 확인하기 !!!

브랜치에 커밋 쌓이니까 삭제하라고 했었음

const [isOpen, setIsOpen] = useState(false);// ArticleDetailPage.jsx

const [isOpen, setIsOpen] = useState(false);
const handleModalClose = () => setIsOpen(false);
const handleCommentDelete = (id) => () => {
setIsOpen(true);
setArticleId(id);
};

const handleModalCheckPasswordClick = () => {
const res = articleComment.filter((item) => item.password === pwValue);
if (res.length > 0) {
// 비밀번호 일치하는지 찾는 거
dispatch(__deleteArticleComment(articleId));
setPwValue("");
setIsOpen(false);
} else {
alert("비밀번호가 틀렸습니다.");
setIsOpen(false);
return;
}
};

<Modal
open={isOpen}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"

  >

삭제

1. 비밀번호 입력 후 삭제 클릭

2. 비밀번호가 맞으면

3. 삭제

4. 비밀번호 입력 후 삭제 클릭

5. 비밀번호가 틀리면

6. 비밀번호가 틀립니다. alert뜨고 확인누르면

7. 리턴

수정

1. 비밀번호 입력 후 수정 클릭
2. 비밀번호가 맞으면 - 비밀번호 맞는지 아닌지 판별은 가능 ! ⇒ 이상한 오류 판별은 가능한데 1,2을 입력하면 인덱스값이 각각 1, 4까지 나옴

commentPassword가 같으면 onBoardComment 수정창이 뜨게

1. 수정할 내용을 입력하세요. 인풋창으로 변경

2. 수정완료버튼 클릭

3. 코멘트에 변경된 내용 뜨게

4. 비밀번호 입력 후 수정클릭

5. 비밀번호가 틀리면

6. 비밀번호가 틀립니다. alert뜨고 확인누르면

7. 리턴

boardComments에서 onBoardComment 변경하기

// const [isDelete, setIsDelete] = useState(false);
  // const handlerIsDelete = () => {
  //   {
  //     activeInput && (
  //       <Input type="input" onClick={hideModalHandler}>
  //         삭제
  //       </Input>
  //     );
  //   }
  // };