노트 변경 사항 저장하기

이제 노트가 폼에 로드되므로, 해당 노트에 대한 변경 사항을 저장하는 기능을 구현해 보겠습니다.

Change indicator src/containers/Notes.tsx 파일의 handleSubmit 함수를 다음 코드로 교체하세요.

function saveNote(note: NoteType) {
  return API.put("notes", `/notes/${id}`, {
    body: note,
  });
}

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  let attachment;

  event.preventDefault();

  if (file.current && file.current.size > config.MAX_ATTACHMENT_SIZE) {
    alert(
      `파일 크기가 ${
        config.MAX_ATTACHMENT_SIZE / 1000000
      } MB보다 작아야 합니다.`
    );
    return;
  }

  setIsLoading(true);

  try {
    if (file.current) {
      attachment = await s3Upload(file.current);
    } else if (note && note.attachment) {
      attachment = note.attachment;
    }

    await saveNote({
      content: content,
      attachment: attachment,
    });
    nav("/");
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
}

Change indicator 그리고 헤더에 s3Upload 헬퍼 메서드를 포함시킵니다:

import { s3Upload } from "../lib/awsLib";

위 코드는 NewNote 컨테이너에서 했던 작업과 매우 유사한 몇 가지 작업을 수행합니다.

  1. 업로드할 파일이 있는 경우 s3Upload를 호출하여 파일을 업로드하고 S3에서 받은 키를 저장합니다. 파일이 없는 경우 기존의 첨부 파일 객체인 note.attachment를 그대로 저장합니다.

  2. 노트를 저장하기 위해 useParams 훅에서 얻은 id를 사용하여 /notes/:id로 노트 객체와 함께 PUT 요청을 보냅니다. AWS Amplify의 API.put() 메서드를 사용합니다.

  3. 성공 시 사용자를 홈페이지로 리디렉션합니다.

이제 브라우저로 전환하여 몇 가지 변경 사항을 저장해 보세요.

노트 페이지 저장 스크린샷

새로운 첨부 파일을 업로드할 때 이전 첨부 파일을 삭제하지 않는다는 것을 눈치채셨을 겁니다. 간단하게 하기 위해 이 부분은 여러분에게 맡기겠습니다. 이 작업은 꽤 간단할 것입니다. S3에서 파일을 삭제하는 방법은 AWS Amplify API 문서를 참조하세요.

다음으로, 사용자가 노트를 삭제할 수 있도록 해 보겠습니다.