fetchData 에러 처리 전환 후속 안정화: 에러 UX 복구·지도 누수·개별 버그·정리

.env.example

@@ -0,0 +1,14 @@
+# 백엔드 API 베이스 URL (예: https://api.k-pullup.com/api/v1)
+# 서버 실행 컨텍스트에서 사용. 미설정 시 SSR/CI 에서 undefined 요청이 발생할 수 있음.
+NEXT_PUBLIC_BASE_URL=
+
+# Kakao Maps / Kakao SDK 앱 키
+NEXT_PUBLIC_APP_KEY=
+NEXT_PUBLIC_REST_API_KEY=
+NEXT_PUBLIC_REST_INTEGRITY_VALUE=
+
+# Google Analytics 측정 ID (선택)
+NEXT_PUBLIC_GOOGLE_ANALYTICS=
+
+# Google AdSense 퍼블리셔 ID (선택)
+NEXT_PUBLIC_GOOGLE_AD_CID=

.storybook/main.ts

@@ -23,6 +23,6 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/nextjs"),
     options: {},
   },
-  staticDirs: ["..\\public"],
+  staticDirs: ["../public"],
 };
 export default config;

app/(home)/page.tsx

@@ -16,7 +16,10 @@ import { headers } from "next/headers";
 import { type Device } from "../mypage/page";
 
 const Home = async () => {
-  const [images, moment] = await Promise.all([newPictures(), getAllMoment()]);
+  const [images, moment] = await Promise.all([
+    newPictures().catch(() => [] as NewPictures[]),
+    getAllMoment().catch(() => []),
+  ]);
 
   const headersList = headers();
   const userAgent = headersList.get("user-agent");

app/admin/admin-client.tsx

@@ -124,17 +124,7 @@ const AdminClient = ({ data }: { data: AllReportRes }) => {
         setProcessingIds((prev) => new Set(prev).add(reportId));
 
         try {
-          const response = await approveReport(reportId);
-
-          if (!response.ok) {
-            closeAlert();
-            openAlert({
-              title: "승인할 수 없습니다.",
-              description: "잠시 후 다시 시도해주세요.",
-              onClick: () => {},
-            });
-            return;
-          }
+          await approveReport(reportId);
 
           closeAlert();
           openAlert({
@@ -175,17 +165,7 @@ const AdminClient = ({ data }: { data: AllReportRes }) => {
         setProcessingIds((prev) => new Set(prev).add(reportId));
 
         try {
-          const response = await denyReport(reportId);
-
-          if (!response.ok) {
-            closeAlert();
-            openAlert({
-              title: "거절할 수 없습니다.",
-              description: "잠시 후 다시 시도해주세요.",
-              onClick: () => {},
-            });
-            return;
-          }
+          await denyReport(reportId);
 
           closeAlert();
           openAlert({

app/admin/page.tsx

@@ -1,25 +1,35 @@
 import getAllReports from "@/lib/api/report/get-all-reports";
-import AdminClient from "./admin-client";
-import { cookies } from "next/headers";
 import myInfo from "@/lib/api/user/myInfo";
+import guardServerFetch from "@lib/server-fetch-guard";
+import { cookies } from "next/headers";
+import AdminClient from "./admin-client";
 
 const AdminPage = async () => {
   const cookieStore = cookies();
   const decodeCookie = decodeURIComponent(cookieStore.toString());
 
-  const data = await getAllReports(decodeCookie);
-  const user = await myInfo(decodeCookie);
-
-  const noUser = !user || user.error;
+  const { status, data: user } = await guardServerFetch(() =>
+    myInfo(decodeCookie)
+  );
 
-  if (noUser) {
+  if (status !== "ok" || !user || !user.chulbong) {
     return (
       <h1 className="text-xl font-bold text-center mt-14">
         접근 권한이 없습니다.
       </h1>
     );
   }
 
+  const { data } = await guardServerFetch(() => getAllReports(decodeCookie));
+
+  if (!data) {
+    return (
+      <h1 className="text-xl font-bold text-center mt-14">
+        데이터를 불러올 수 없습니다.
+      </h1>
+    );
+  }
+
   return <AdminClient data={data} />;
 };
 

app/mypage/bookmark/page.tsx

@@ -5,6 +5,7 @@ import WarningText from "@common/warning-text";
 import AuthError from "@layout/auth-error";
 import NotFound from "@layout/not-found";
 import getDeviceType from "@lib/get-device-type";
+import guardServerFetch from "@lib/server-fetch-guard";
 import BookmarkList from "@pages/mypage/bookmark/bookmark-list";
 import { cookies, headers } from "next/headers";
 import { type Device } from "../page";
@@ -19,9 +20,11 @@ const RankingPage = async () => {
 
   const deviceType: Device = getDeviceType(userAgent as string);
 
-  const markers = await favorites(decodeCookie);
+  const { status, data: markers } = await guardServerFetch(() =>
+    favorites(decodeCookie)
+  );
 
-  if (markers.error === "No authorization token provided") {
+  if (status === "unauthorized") {
     return (
       <AuthError
         headerTitle="즐겨찾기"
@@ -33,7 +36,7 @@ const RankingPage = async () => {
     );
   }
 
-  if (!markers.data || markers.data.length <= 0) {
+  if (!markers?.data || markers.data.length <= 0) {
     return (
       <NotFound
         headerTitle="즐겨찾기"

app/mypage/locate/page.tsx

@@ -5,6 +5,7 @@ import Text from "@common/text";
 import AuthError from "@layout/auth-error";
 import NotFound from "@layout/not-found";
 import getDeviceType from "@lib/get-device-type";
+import guardServerFetch from "@lib/server-fetch-guard";
 import RegisteredLocateList from "@pages/mypage/locate/registered-locate-list";
 import { cookies, headers } from "next/headers";
 import { type Device } from "../page";
@@ -19,18 +20,20 @@ const RankingPage = async () => {
 
   const deviceType: Device = getDeviceType(userAgent as string);
 
-  const markers = await myRegisteredLocation({
-    pageParam: 1,
-    cookie: decodeCookie,
-  });
+  const { status, data: markers } = await guardServerFetch(() =>
+    myRegisteredLocation({
+      pageParam: 1,
+      cookie: decodeCookie,
+    })
+  );
 
-  if (markers.error === "No authorization token provided") {
+  if (status === "unauthorized") {
     return (
       <AuthError
         headerTitle="내가 등록한 위치"
         hasBackButton
         errorTitle="로그인 후 철봉 위치를 등록해보세요."
-        returnUrl="mypage/locate"
+        returnUrl="/mypage/locate"
         deviceType={deviceType}
       />
     );