문제

게시글 작성 중 변경사항이 없는데도 계속 임시저장이 됩니다.
특히 문제는 게시글 작성 중 잠시 다른 탭에 갔다 왔을 때 임시저장 토스트가 와르르 뜹니다.

예전부터 고질적으로 느꼈던 문제인데 나름대로 문제점을 찾아 해결을 해보았습니다.

문제가 되는 부분

postId가 존재하지 않는 첫 임시저장 시에는 return 문이 없어서 함수 마지막에 있는 setLastSavedData가 실행됩니다.

if (!postId) {
    const response = await writePost({
      variables: {
        title,
        body: markdown,
        tags,
        is_markdown: true,
        is_temp: true,
        is_private: false,
        url_slug: escapeForUrl(title),
        thumbnail: null,
        meta: {},
        series_id: null,
        token: null,
      },
});

하지만 postId가 존재하는 임시저장의 경우 return 문이 있어 setLastSavedData가 실행되지 않습니다.

if (isTemp && postId) {
    await editPost({
      variables: {
        id: postId,
        title,
        body: markdown,
        is_markdown: true,
        is_temp: true,
        is_private: false,
        url_slug: escapeForUrl(title),
        thumbnail: null,
        meta: {},
        series_id: null,
        tags,
        token: null,
      },
    });
    notifySuccess();
    // 여기서 리턴되어 밑에 있는 setLastSavedData가 실행되지 않습니다.
    return;
  }

따라서 자동저장을 하는 부분이 계속 실행되게 됩니다.


useEffect(() => {
// lastSavedData가 동일하기 때문에 계속 changed 된 상태로 동작합니다.
const changed = !shallowEqual(lastSavedData, { title, body: markdown });
if (changed) {
  const timeoutId = setTimeout(() => {
    if (!postId && !title && markdown.length < 30) return;
    onTempSave(true);
  }, 10 * 1000);

  return () => {
    clearTimeout(timeoutId);
  };
}
}, [title, postId, onTempSave, lastSavedData, markdown]);


# 변경사항
문제가 되는 부분이었던 postId가 존재하는 임시저장 안에 setLastSavedData를 넣어주었습니다.

```js
 if (isTemp && postId) {
        setLastSavedData({
          title,
          body: markdown,
        });
        await editPost({
          variables: {

velopert / velog-client

게시글 작성 시 변경사항이 없는데도 계속 임시저장이 되는 이슈 #565

문제

문제가 되는 부분