fix: 페이지를 나가도 글이 캐싱되어 있는 문제 수정

Author: mingkyeongg

src/hooks/usePrompt.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useBlocker } from 'react-router-dom';
 
 // should be isDirty
-export const usePrompt = (when: boolean) => {
+export const usePrompt = (when: boolean, onLeave?: () => void) => {
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
     return when && currentLocation.pathname !== nextLocation.pathname;
   });
@@ -14,15 +14,15 @@ export const usePrompt = (when: boolean) => {
 
   useEffect(() => {
     if (blocker.state !== 'blocked') return;
-    console.log(when);
     if (!when) return;
 
     if (window.confirm('정말로 이동하시겠습니까?')) {
+      onLeave?.();
       blocker.proceed();
     } else {
       blocker.reset();
     }
-  }, [blocker.state]);
+  }, [blocker.state, when, onLeave]);
 
   useEffect(() => {
     if (when) {

src/pages/Posting/Posting.tsx

@@ -15,7 +15,7 @@ import ArticleFeedbackPanel from '@/components/features/Feedback/ArticleFeedback
 import PostEditor from '@/components/features/Post/PostEditor';
 import { CommonLayout } from '@/components/layout/CommonLayout';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { RiErrorWarningFill } from 'react-icons/ri';
 import {
   Navigate,
@@ -107,7 +107,14 @@ const Posting = () => {
   const buttonFontSize = isMobile ? '12px' : '16px';
   const [progress, setProgress] = useState(0);
 
-  usePrompt(!disablePrompt);
+  const clearPostingCache = useCallback(() => {
+    sessionStorage.removeItem(`posting-articleId-${id}`);
+    sessionStorage.removeItem(`posting-content-${id}`);
+    sessionStorage.removeItem(`posting-title-${id}`);
+    setPostImages([]);
+  }, [id, setPostImages]);
+
+  usePrompt(!disablePrompt, clearPostingCache);
 
   useEffect(() => {
     document.documentElement.scrollTo({ top: 0, left: 0, behavior: 'instant' });
@@ -250,9 +257,7 @@ const Posting = () => {
     const savedId = await handleSaveArticle();
 
     if (savedId) {
-      sessionStorage.removeItem(`posting-articleId-${id}`);
-      sessionStorage.removeItem(`posting-content-${id}`);
-      sessionStorage.removeItem(`posting-title-${id}`);
+      clearPostingCache();
       setDashboardView('article');
       setSelectedPostId(savedId);
       setDisablePrompt(true);