fix: 빌드 에러 수정

app/api/logout/route.ts

@@ -4,14 +4,9 @@ import { NextResponse } from 'next/server';
 import { fetchData } from '@/apis/fetch-data';
 
 export async function GET() {
-  try {
-    const data = await fetchData(`/logout`, 'GET');
-    cookies().delete('accessToken');
-    cookies().delete('refreshToken');
+  const data = await fetchData(`/logout`, 'GET');
+  cookies().delete('accessToken');
+  cookies().delete('refreshToken');
 
-    return NextResponse.json(data);
-  } catch (error) {
-    console.error('Error in DELETE request:', error);
-    return NextResponse.error();
-  }
+  return NextResponse.json(data);
 }

app/api/member/route.ts

@@ -15,13 +15,7 @@ export interface MemberProps {
 }
 
 export async function GET() {
-  try {
-    const data = await fetchData<MemberProps>('/member', 'GET');
+  const data = await fetchData<MemberProps>('/member', 'GET');
 
-    return NextResponse.json(data);
-  } catch (error) {
-    console.error('Error fetching member data:', error);
-
-    return NextResponse.error();
-  }
+  return NextResponse.json(data);
 }

app/delete-account/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { BackButton, HeaderBar } from '@/components/molecules';
+import { Step1 } from '@/features/setting/components';
+import { Step2 } from '@/features/setting/components';
+import { Step3 } from '@/features/setting/components';
+
+export default function Page() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [step, setStep] = useState(1);
+
+  useEffect(() => {
+    const queryStep = searchParams.get('step');
+    if (queryStep) {
+      setStep(Number(queryStep));
+    }
+  }, [searchParams]);
+
+  const handleListItemClick = () => {
+    setStep(2);
+    router.push('?step=2');
+  };
+
+  const getStepComponent = (step: number) => {
+    switch (step) {
+      case 1:
+        return <Step1 onClickListItem={handleListItemClick} />;
+      case 2:
+        return <Step2 />;
+      case 3:
+        return <Step3 />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <BackButton />
+        </HeaderBar.LeftContent>
+      </HeaderBar>
+      {getStepComponent(step)}
+    </div>
+  );
+}

app/delete-account/page.tsx

@@ -1,51 +1,16 @@
-'use client';
+import dynamic from 'next/dynamic';
+import React, { Suspense } from 'react';
 
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { LoadingArea } from '@/components/atoms';
 
-import { BackButton, HeaderBar } from '@/components/molecules';
-import Step1 from '@/features/setting/components/organisms/step-1';
-import Step2 from '@/features/setting/components/organisms/step-2';
-import Step3 from '@/features/setting/components/organisms/step-3';
+const StepComponent = dynamic(() => import('./index'), {
+  suspense: true,
+});
 
 export default function Page() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [step, setStep] = useState(1);
-
-  useEffect(() => {
-    const queryStep = searchParams.get('step');
-    if (queryStep) {
-      setStep(Number(queryStep));
-    }
-  }, [searchParams]);
-
-  const handleListItemClick = () => {
-    setStep(2);
-    router.push('?step=2');
-  };
-
-  const getStepComponent = (step: number) => {
-    switch (step) {
-      case 1:
-        return <Step1 onListItemClick={handleListItemClick} />;
-      case 2:
-        return <Step2 />;
-      case 3:
-        return <Step3 />;
-      default:
-        return null;
-    }
-  };
-
   return (
-    <div>
-      <HeaderBar>
-        <HeaderBar.LeftContent>
-          <BackButton />
-        </HeaderBar.LeftContent>
-      </HeaderBar>
-      {getStepComponent(step)}
-    </div>
+    <Suspense fallback={<LoadingArea />}>
+      <StepComponent />
+    </Suspense>
   );
 }