Refactor: 회원가입 페이지 컴포넌트 리팩토링 : RSC, RCC 분리, async-await문으로 리팩토링

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/app/(Main)/talk/page.tsx

@@ -1,5 +1,5 @@
-import TalkSection from './components/TalkSection';
-import TitleSection from './components/TitleSection';
+import TalkSection from './TalkSection';
+import TitleSection from './TitleSection';
 import { PageAnimation } from '@/components/PageAnimation';
 
 export default function Talk() {

src/app/auth/AuthComponent.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { getRegister } from '@/apis';
+import useUserState from '@/context/userState';
+import useDidMount from '@/hooks/useDidMount';
+
+interface AuthComponentProps {
+  code: string;
+}
+
+export default function AuthComponent({ code }: AuthComponentProps) {
+  const { setUser } = useUserState();
+  const router = useRouter();
+
+  useDidMount(async () => {
+    try {
+      const response = await getRegister(code);
+      setUser(response);
+      localStorage.setItem('accesstoken', response.token.accessToken);
+      alert(`로그인에 성공했어요!`);
+      router.back();
+    } catch (error) {
+      router.push('/');
+    }
+  });
+
+  return null;
+}

src/app/auth/logout/LogoutComponent.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { patchLogout } from '@/apis';
+import useUserState from '@/context/userState';
+import useDidMount from '@/hooks/useDidMount';
+
+export default function LogoutComponent() {
+  const { token, clearUser } = useUserState();
+  const router = useRouter();
+
+  useDidMount(async () => {
+    if (token) {
+      await patchLogout(token.accessToken, token.refreshToken);
+      alert('로그아웃 되었습니다');
+    }
+    clearUser();
+    localStorage.removeItem('accesstoken');
+    router.back();
+  });
+
+  return null;
+}

src/app/auth/logout/page.tsx

@@ -1,25 +1,5 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-
-import { patchLogout } from '@/apis';
-import useUserState from '@/context/userState';
+import LogoutComponent from './LogoutComponent';
 
 export default function Page() {
-  const { token, clearUser } = useUserState();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (token) {
-      patchLogout(token.accessToken, token.refreshToken).then(() => {
-        alert('로그아웃 되었습니다');
-      });
-    }
-    clearUser();
-    localStorage.removeItem('accesstoken');
-    router.back();
-  });
-
-  return;
+  return <LogoutComponent />;
 }

src/app/auth/page.tsx

@@ -1,26 +1,16 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+import { redirect } from 'next/navigation';
 
-import { getRegister } from '@/apis';
-import useUserState from '@/context/userState';
+import AuthComponent from './AuthComponent';
 
-export default function Page() {
-  const code = useSearchParams().get('code');
-  const { setUser } = useUserState();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (code) {
-      getRegister(code).then((response) => {
-        setUser(response);
-        localStorage.setItem('accesstoken', response.token.accessToken);
-        alert(`로그인에 성공했어요!`);
-        router.back();
-      });
-    }
-  });
+interface AuthPageProps {
+  searchParams: {
+    code: string;
+  };
+}
 
-  return;
+export default function AuthPage({ searchParams: { code } }: AuthPageProps) {
+  if (!code) redirect('/');
+  return <AuthComponent code={code} />;
 }

src/app/auth/withdraw/WithdrawComponent.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { patchDeleteAccount } from '@/apis';
+import useUserState from '@/context/userState';
+import useDidMount from '@/hooks/useDidMount';
+
+export default function WithdrawComponent() {
+  const router = useRouter();
+  const { token, clearUser } = useUserState();
+  const withdrawalReason = useSearchParams().get('reason');
+
+  useDidMount(async () => {
+    if (token && withdrawalReason) {
+      const response = await patchDeleteAccount(
+        token.accessToken,
+        token.refreshToken,
+        withdrawalReason
+      );
+      console.log(response);
+    }
+
+    // 회원탈퇴 api 될 떄 까지만
+    // if (token) {
+    //   patchLogout(token.accessToken, token.refreshToken).then(() => {
+    //     alert('로그아웃 되었습니다');
+    //   });
+    // }
+    clearUser();
+    localStorage.removeItem('accesstoken');
+    router.replace('/menu');
+  });
+
+  return null;
+}

src/app/auth/withdraw/page.tsx

@@ -1,34 +1,5 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
-
-import { patchDeleteAccount, patchLogout } from '@/apis';
-import useUserState from '@/context/userState';
+import WithdrawComponent from './WithdrawComponent';
 
 export default function Page() {
-  const router = useRouter();
-  const { token, clearUser } = useUserState();
-  const withdrawalReason = useSearchParams().get('reason');
-
-  useEffect(() => {
-    if (token && withdrawalReason) {
-      patchDeleteAccount(token.accessToken, token.refreshToken, withdrawalReason).then(
-        (response) => {
-          console.log(response);
-        }
-      );
-    }
-    // 회원탈퇴 api 될 떄 까지만
-    // if (token) {
-    //   patchLogout(token.accessToken, token.refreshToken).then(() => {
-    //     alert('로그아웃 되었습니다');
-    //   });
-    // }
-    clearUser();
-    localStorage.removeItem('accesstoken');
-    router.replace('/menu');
-  });
-
-  return;
+  return <WithdrawComponent />;
 }