리액트 숙련 - [과제] 아티스트 컬렉션 만들기 (5)

삭제기능

  const deleteBtn = () => {
   
      // 선택된 아이템을 제외한 새로운 배열 생성
      const newLetters = letters.filter((item) => item.id !== foundData.id);
      // 메인 페이지로 가기
      navigate("/");
      // 상태 업데이트
      setLetters(newLetters);
    }

☞ 정상적으로 다 돌아가는 로직이였고.. 알고보니
Home에 있는 useEffect때문에 계속 리렌더링이 되는거였다.

삭제 다하면 팬레터가 없다고 출력하기

      {letters.length === 0 ? (
        <h6>남겨진 팬레터가 없습니다.</h6>
      ) : (
        <List selectedMember={selectedMember} letters={letters} />
      )}

☞ 남겨진 팬레터가 없는건 letters의 길이가 0이면 하도록 삼항연산자를 이용해서 구현했다.

삭제할때 확인하기

  const deleteBtn = () => {
    // 삭제 확인하기  window.confirm
    const alertDelete = window.confirm("정말 삭제할래요?");
    if (alertDelete) {
      // 선택된 아이템을 제외한 새로운 배열 생성
      const newLetters = letters.filter((item) => item.id !== foundData.id);
      // 메인 페이지로 가기
      navigate("/");
      // 상태 업데이트
      setLetters(newLetters);
    }
  };

☞ 제천 튜터님이 window.confirm이 있다고 알려주셔서 찾아서 적용함

수정기능

와... 막막했다. 진짜 진심
제처튜터님께 삭제관련 질문하면서 약간의 팁을 부탁드렸다. 고민해봐도 너무 안되서.. 일단 수정 중인지 아닌지 알려주는 스테이트가 필요하고 버튼도 수정 삭제가 아닌 완료 취소가 되어야하는거라 하셔서 열심히 해봤다.

//수정기능을 위한 스테이트
  //수정 중인지 아닌지 알려주는 스테이트
  const [edit, setEdit] = useState(false);

  //수정 중일때 상태 관리하는 스테이트
  const [editing, setEditing] = useState("");

  const modifyBtn = () => {
    setEdit(true);
    setEditing(foundData.content);
  };

  const cancelBtn = () => {
    setEdit(false);
    setEditing("");
  };

  const saveBtn = () => {
    if (editing === foundData.content) {
      alert("아무런 수정사항이 없어요!");
    } else {
      const updateLetters = letters.map((item) =>
        item.id === foundData.id ? { ...item, content: editing } : item
      );
      setLetters(updateLetters);
      navigate("/");
      setEdit(false);
      setEditing("");
    }
    console.log(editing);
  };


//리턴 아래
return (
    <>
      <Bg src={backgroundImage} />
      <DetailBox>
        <Link to={"/"}>
          <BackBtn>&larr; 메인으로</BackBtn>
        </Link>

        <BigBox>
          {/*<h3>{foundData.id}</h3>*/}

          <Avatar>
            <img src={foundData.avatar} alt="사진" />
          </Avatar>
          <h2>To. {foundData.writedTo}</h2>
          {/*<LetterContents>{foundData.content}</LetterContents>*/}
          {edit ? (
            <EditTextArea
              value={editing}
              autoFocus
              onChange={(e) => setEditing(e.target.value)}
            />
          ) : (
            <LetterContents>{foundData.content}</LetterContents>
          )}

          <h3>Written By {foundData.nickname}</h3>
          <h3>{foundData.createdAt}</h3>
        </BigBox>
        <ModfiyRemoveBtn>
          {edit ? (
            <>
              <button onClick={saveBtn}>완료</button>
              <button onClick={cancelBtn}>취소</button>
            </>
          ) : (
            <>
              <button onClick={modifyBtn}>수정</button>
              <button onClick={deleteBtn}>삭제</button>
            </>
          )}
        </ModfiyRemoveBtn>
      </DetailBox>
    </>
  );
}

일단, 삼항연산자로 Edit 스테이트가 true 일때 수정 삭제/ 완료 취소가 되도록 하고 위에 출력되는 부분도 삼항연산자로 하고 textarea도 해줬다.

자잘한 UI 수정

배경색이나 등등 조금씩 css를 바꿨다.

귀여운게 최고

와.. 귀여운게 최고지
양 옆이 허전해서 배경이 아닌 img 로 사진을 올려줬다,
둘다 포지션 앱솔루트로 띄어주고 z-index로 뭘 앞으로 보낼지 정했다.

내일은 다시 context 강의 보고 context와 리덕스만 하면 완료다...
와 너무 어렵고 참, 힘들긴한데 그래도 뿌듯하다...