Pre-loved-Project · ghdtnals · Dec 11, 2025 · Dec 9, 2025 · Dec 9, 2025 · Dec 9, 2025
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -1,9 +1,11 @@
 "use client";
+
 import ServerErrorPage from "@/shared/error/ui/500";
+
 export default function GlobalError({ error }: { error: Error }) {
   return (
-    <html>
-      <body>
+    <html lang="kr">
+      <body className="mx-auto max-w-[1200px] bg-[#1c1c22] pt-[70px] md:pt-20 xl:pt-[100px]">
         <ServerErrorPage message={error.message} />
       </body>
     </html>

diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx
@@ -17,15 +17,16 @@ export default async function Page() {
   const queryClient = new QueryClient();
 
   try {
-    await queryClient.fetchQuery({
-      queryKey: ["userProfile"],
-      queryFn: getMyProfile,
-    });
-
-    await queryClient.fetchQuery({
-      queryKey: ["myPosts", DEFAULT_TAB],
-      queryFn: () => getMyPosts(DEFAULT_TAB),
-    });
+    await Promise.all([
+      queryClient.fetchQuery({
+        queryKey: ["userProfile"],
+        queryFn: getMyProfile,
+      }),
+      queryClient.fetchQuery({
+        queryKey: ["myPosts", DEFAULT_TAB],
+        queryFn: () => getMyPosts(DEFAULT_TAB),
+      }),
+    ]);
   } catch (e) {
     handleError(e);
   }

diff --git a/src/features/editPost/lib/usePostEditModal.ts b/src/features/editPost/lib/usePostEditModal.ts
@@ -43,7 +43,7 @@ export const usePostEditModal = (handlers?: {
         handlers?.onFailure?.();
 
         openModal("normal", {
-          message: "게시물 수정 중 오류가 발생했습니다. " + message,
+          message: "게시물 수정을 실패했습니다.",
           buttonText: "확인",
           onClick: () => closeModal(),
         });

diff --git a/src/features/editProfile/lib/useProfileEditModal.ts b/src/features/editProfile/lib/useProfileEditModal.ts
@@ -0,0 +1,56 @@
+"use client";
+
+import { useModalStore } from "@/shared/model/modal.store";
+
+export const useEditProfileModal = (
+  userProfile?: {
+    userId: number;
+    nickname: string;
+    introduction?: string;
+    imageUrl?: string;
+    category?: string;
+  },
+  handlers?: {
+    onSuccess?: () => void;
+    onFailure?: () => void;
+  },
+) => {
+  const { openModal, closeModal } = useModalStore();
+
+  const openEditProfileModal = () => {
+    if (!userProfile) return;
+
+    openModal("editProfile", {
+      ...userProfile,
+      onClose: () => closeModal(),
+
+      onSave: async () => {
+        closeModal();
+
+        handlers?.onSuccess?.();
+
+        setTimeout(() => {
+          openModal("normal", {
+            message: "프로필이 성공적으로 수정되었습니다.",
+            buttonText: "확인",
+            onClick: () => closeModal(),
+          });
+        }, 100);
+      },
+
+      onError: () => {
+        closeModal();
+
+        handlers?.onFailure?.();
+
+        openModal("normal", {
+          message: "프로필 수정에 실패했습니다.",
+          buttonText: "확인",
+          onClick: () => closeModal(),
+        });
+      },
+    });
+  };
+
+  return { openEditProfileModal };
+};
diff --git a/src/features/like/lib/useLike.ts b/src/features/like/lib/useLike.ts
@@ -1,8 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateFavorite } from "../api/updateFavorite";
+import { useModalStore } from "@/shared/model/modal.store";
 
 export function useLike(postingId?: number) {
   const queryClient = useQueryClient();
+  const { openModal, closeModal } = useModalStore();
 
   const mutation = useMutation({
     mutationFn: async (liked: boolean) => {
@@ -33,7 +35,13 @@ export function useLike(postingId?: number) {
 
     onError: (err, newLiked, context) => {
       if (!postingId || !context?.previousData) return;
+      openModal("normal", {
+        message: "좋아요 처리 중 오류가 발생했습니다.",
+        onClick: () => closeModal(),
+      });
       queryClient.setQueryData(["postDetail", postingId], context.previousData);
+
+      console.error(err);
     },
   });
 

diff --git a/src/shared/api/fetcher.server.ts b/src/shared/api/fetcher.server.ts
@@ -1,10 +1,15 @@
 import { headers } from "next/headers";
-import { NotFoundError, ServerError, AuthorizationError } from "../error/error";
+import {
+  NotFoundError,
+  ServerError,
+  AuthorizationError,
+  BaseError,
+} from "../error/error";
 import { getBaseUrl } from "./config";
 
 export async function serverFetch<T>(
   endpoint: string,
-  options: RequestInit,
+  options: RequestInit = {},
 ): Promise<T> {
   const { headers: extraHeaders = {}, ...restOptions } = options;
 
@@ -22,28 +27,29 @@ export async function serverFetch<T>(
     },
     cache: "no-store",
     ...restOptions,
-  });
-
-  if (res.status === 401) {
-    throw new AuthorizationError(
-      "세션이 만료되었습니다.\n다시 로그인 해주세요.",
+  }).catch(() => {
+    throw new ServerError(
+      "네트워크 오류가 발생했습니다.\n인터넷 연결을 확인하고 다시 시도해주세요.",
+      res.status,
     );
-  }
+  });
 
   if (!res.ok) {
-    if (res.status === 404) throw new NotFoundError();
-    if (res.status >= 500) throw new ServerError();
+    let message = `요청 실패 (${res.status})`;
 
-    let message = `API Error ${res.status}`;
     try {
       const data = await res.json();
-      message = data.message ?? data.detail ?? message;
+      if (typeof data === "object" && data?.message) {
+        message = data.message;
+      }
     } catch {
-      const text = await res.text();
-      if (text) message = text;
+      // 기본 메시지
     }
 
-    throw new ServerError(message);
+    if (res.status === 401) throw new AuthorizationError();
+    if (res.status === 404) throw new NotFoundError();
+    if (res.status >= 500) throw new ServerError(message, res.status);
+    throw new BaseError(message, res.status);
   }
 
   return res.json() as Promise<T>;

diff --git a/src/shared/api/fetcher.ts b/src/shared/api/fetcher.ts
@@ -1,4 +1,9 @@
-import { AuthorizationError, NotFoundError, ServerError } from "../error/error";
+import {
+  AuthorizationError,
+  NotFoundError,
+  ServerError,
+  BaseError,
+} from "../error/error";
 
 export async function apiFetch<T>(
   endpoint: string,
@@ -16,26 +21,32 @@ export async function apiFetch<T>(
     ...restOptions,
   });
 
-  if (res.status === 401 && !noAuth) {
-    throw new AuthorizationError(
-      "세션이 만료되었습니다.\n다시 로그인 해주세요.",
-    );
-  }
-
   if (!res.ok) {
-    if (res.status === 404) throw new NotFoundError();
-    if (res.status >= 500) throw new ServerError();
+    let message = `요청 실패 (${res.status})`;
 
-    let message = `API Error ${res.status}`;
     try {
       const data = await res.json();
-      message = data.message ?? data.detail ?? message;
+      if (typeof data === "object" && data?.message) {
+        message = data.message;
+      }
     } catch {
-      const text = await res.text();
-      if (text) message = text;
+      // 기본 메시지
+    }
+
+    if (res.status === 401 && !noAuth) {
+      throw new AuthorizationError(
+        "세션이 만료되었습니다.\n다시 로그인 해주세요.",
+      );
     }
 
-    throw new ServerError(message);
+    if (res.status === 404) {
+      throw new NotFoundError();
+    }
+
+    if (res.status >= 500) {
+      throw new ServerError(message, res.status);
+    }
+    throw new BaseError(message, res.status);
   }
 
   return res.json() as Promise<T>;

diff --git a/src/shared/error/error.ts b/src/shared/error/error.ts
@@ -1,10 +1,10 @@
 export class BaseError extends Error {
   constructor(
     message: string,
-    public readonly status?: number,
+    public readonly status: number,
   ) {
     super(message);
-    this.name = this.constructor.name;
+    this.name = new.target.name;
   }
 }
 
@@ -21,7 +21,7 @@ export class NotFoundError extends BaseError {
 }
 
 export class ServerError extends BaseError {
-  constructor(message = "서버 오류가 발생했습니다.") {
-    super(message, 500);
+  constructor(message = "서버 오류가 발생했습니다.", status: number) {
+    super(message, status);
   }
 }
diff --git a/src/shared/error/ui/500.tsx b/src/shared/error/ui/500.tsx
@@ -12,10 +12,19 @@ export default function ServerErrorPage({ message }: { message?: string }) {
 
   return (
     <div className="flex flex-col items-center justify-center py-20 text-white">
-      <h1 className="text-3xl font-bold">서버 오류 발생</h1>
-      <p className="mt-4 text-lg opacity-80">
-        {message ?? "잠시 후 다시 시도해주세요."}
+      <h1 className="text-3xl font-bold">문제가 발생했어요</h1>
+
+      <p className="mt-4 text-center text-lg whitespace-pre-line opacity-80">
+        {message ??
+          "일시적인 문제로 페이지를 불러오지 못했어요.\n잠시 후 다시 시도해주세요."}
       </p>
+
+      <button
+        onClick={() => window.location.reload()}
+        className="mt-8 rounded-md bg-[#383848] px-5 py-2 text-white hover:cursor-pointer hover:bg-[#4a4a5a]"
+      >
+        새로고침
+      </button>
     </div>
   );
 }