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

[prkgnt]

문제

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

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

문제가 되는 부분

• 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를 넣어주었습니다.

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

[winverse]

감사합니다! 해당 부분에 버그가 있어서 함께 수정되었습니다. PR #568