[Deploy] 11

app/entities/post/detail/PostHeader.tsx

@@ -47,10 +47,10 @@ const PostHeader = ({
   return (
     <div
       className={
-        'post-header h-[220px] md:h-[292px] relative overflow-hidden w-full text-center'
+        'post-header h-[220px] md:h-[292px] relative overflow-hidden w-full text-center bg-gray-400/50'
       }
     >
-      <h1 className={'font-bold mb-4 pt-10 md:pt-20 text-3xl lg:text-5xl'}>
+      <h1 className={'font-bold mb-4 pt-10 md:pt-20 text-3xl lg:text-5xl '}>
         {displayTitle}
         {!isTypingComplete && (
           <span className="inline-block w-1 h-6 ml-1 bg-black animate-blink" />

app/entities/post/write/BlogForm.tsx

@@ -12,6 +12,7 @@ import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import LoadingSpinner from '@/app/entities/common/Loading/LoadingSpinner';
 import axios from 'axios';
 import useToast from '@/app/hooks/useToast';
+import { useBlockNavigate } from '@/app/hooks/useBlockNavigate';
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
 
@@ -32,6 +33,8 @@ const BlogForm = ({ postBlog, postId }: BlogFormProps) => {
   const buttonStyle = `font-bold py-2 px-4 rounded mr-2 disabled:bg-opacity-75 `;
   const NICKNAME = '개발자 서정우';
 
+  useBlockNavigate({ title, content: content || '' });
+
   useEffect(() => {
     if (postId) {
       getPostDetail();

app/hooks/useBlockNavigate.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+interface PostForm {
+  title: string;
+  content: string;
+}
+
+export const useBlockNavigate = (formData: PostForm, alertMessage?: string) => {
+  const [isDirty, setIsDirty] = useState(false);
+
+  useEffect(() => {
+    if (formData.title || formData.content) {
+      setIsDirty(true);
+    }
+  }, [formData]);
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        const message = alertMessage || '변경사항이 적용되지 않을 수 있습니다.';
+        e.returnValue = message;
+        return message;
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [isDirty]);
+};

app/page.tsx

@@ -91,7 +91,7 @@ export default function Home() {
             posts &&
             posts.slice(0, 3).map((post) => (
               <Link
-                href={`/posts/${post._id}`}
+                href={`/posts/${post.slug}`}
                 key={post._id}
                 className="group cursor-pointer"
               >