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

.vscode/settings.json

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

src/apis/apis.ts

@@ -41,20 +41,10 @@ export const getRegister = (code: string) =>
     `/users/login/oauth/kakao?code=${code}&redirectURI=${KAKAO_REDIRECT_URI}`
   );
 
-export const patchLogout = (accessToken: string, refreshToken: string) =>
-  publicApi.patch('/users/logout', {
-    accessToken: `Bearer ${accessToken}`,
-    refreshToken: `Bearer ${refreshToken}`,
-  });
+export const patchLogout = () => publicApi.patch('/users/logout');
 
-export const patchDeleteAccount = (
-  accessToken: string,
-  refreshToken: string,
-  withdrawalReason: string
-) =>
+export const patchDeleteAccount = (withdrawalReason: string) =>
   publicApi.patch('/users/deleteAccount', {
-    accessToken: `Bearer ${accessToken}`,
-    refreshToken: `Bearer ${refreshToken}`,
     withdrawalReason,
   });
 

src/apis/config/privateApi.ts

@@ -1,14 +1,9 @@
 import axios from 'axios';
 
 import { CustomInstance } from './type';
+import { ACCESS_TOKEN, ERROR_UNAUTHORIZED, ERROR_UNSUPPORTED_MEDIA_TYPE } from '@/constants';
 import { BASE_API_URL } from '@/constants/env';
-
-function getAccesstoken() {
-  if (typeof window !== 'undefined') {
-    const item = localStorage.getItem('accesstoken');
-    return item;
-  }
-}
+import { getClientCookie, removeClientCookie } from '@/utils';
 
 const privateApi: CustomInstance = axios.create({
   baseURL: `${BASE_API_URL}/api`,
@@ -18,24 +13,20 @@ const privateApi: CustomInstance = axios.create({
 privateApi.interceptors.response.use(
   (response) => response.data,
   (error) => {
-    if (error.response.status === 401) {
+    const status = error.response.status;
+    if (status === ERROR_UNAUTHORIZED || status === ERROR_UNSUPPORTED_MEDIA_TYPE) {
       alert('세션이 만료되었어요. 다시 로그인이 필요해요!');
-    } else {
-      alert('오류가 발생했어요. 다시 시도해주세요');
+      removeClientCookie(ACCESS_TOKEN);
     }
-    location.href = '/auth/logout';
+    location.href = '/';
     return Promise.reject(error);
   }
 );
 
 privateApi.interceptors.request.use(
   (config) => {
-    const accessToken = getAccesstoken();
-
-    if (accessToken) {
-      config.headers.Authorization = `Bearer ${accessToken}`;
-    }
-
+    const accessToken = getClientCookie(ACCESS_TOKEN);
+    config.headers.Authorization = `Bearer ${accessToken}`;
     return config;
   },
   (error) => {

src/apis/queries.ts

@@ -54,10 +54,7 @@ export const usePoseFeedQuery = (
   );
 };
 
-export const useBookmarkFeedQuery = (
-  accesstoken: string,
-  options?: UseInfiniteQueryOptions<PoseFeedContents>
-) =>
+export const useBookmarkFeedQuery = (options?: UseInfiniteQueryOptions<PoseFeedContents>) =>
   useSuspenseInfiniteQuery<PoseFeedContents>(
     ['bookmarkFeed'],
     ({ pageParam = 0 }) => getBookmarkFeed(pageParam),

src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx

@@ -1,13 +1,11 @@
+'use client';
+
 import BookmarkEmpty from './BookmarkEmpty';
 import { useBookmarkFeedQuery } from '@/apis';
 import FeedSection from '@/components/Feed/FeedSection';
 
-interface BookmarkSecionI {
-  accesstoken: string;
-}
-
-export default function BookmarkSecion({ accesstoken }: BookmarkSecionI) {
-  const query = useBookmarkFeedQuery(accesstoken);
+export default function BookmarkSecion() {
+  const query = useBookmarkFeedQuery();
 
   return (
     <FeedSection query={query}>

src/app/(Main)/mypose/bookmark/page.tsx

@@ -1,12 +1,11 @@
-'use client';
-
 import BookmarkEmpty from './BookmarkEmpty';
 import BookmarkSecion from './BookmarkSecion';
-import useUserState from '@/context/userState';
+import { ACCESS_TOKEN } from '@/constants';
+import { getServerCookie } from '@/utils';
 
-export default function BookmarkPage() {
-  const { token } = useUserState();
+export default async function BookmarkPage() {
+  const token = await getServerCookie(ACCESS_TOKEN);
 
-  if (token) return <BookmarkSecion accesstoken={token?.accessToken} />;
-  else return <BookmarkEmpty />;
+  if (token) return <BookmarkSecion />;
+  return <BookmarkEmpty />;
 }

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/(Sub)/menu/MenuListSection.tsx

@@ -4,11 +4,12 @@ import Link from 'next/link';
 
 import LogoutModal from '@/components/Login/LogoutModal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
+import { ACCESS_TOKEN } from '@/constants';
 import { menuList } from '@/constants/data';
-import useUserState from '@/context/userState';
+import { getClientCookie } from '@/utils';
 
 export default function MenuListSection() {
-  const { isLogin } = useUserState();
+  const token = getClientCookie(ACCESS_TOKEN);
   const { open } = useOverlay();
 
   function handleLogout() {
@@ -30,12 +31,12 @@ export default function MenuListSection() {
           <div key={idx} className="py-12" />
         )
       )}
-      {isLogin && (
+      {token && (
         <>
-          <div className="cursor-pointer py-12" onClick={handleLogout}>
+          <div className="py-12 cursor-pointer" onClick={handleLogout}>
             <span id="subtitle-1">로그아웃</span>
           </div>
-          <Link href={'/menu/withdraw'} className="cursor-pointer py-12">
+          <Link href={'/menu/withdraw'} className="py-12 cursor-pointer">
             <span id="subtitle-1" className="text-tertiary">
               탈퇴하기
             </span>

src/app/(Sub)/menu/page.tsx

@@ -1,13 +1,11 @@
-'use client';
-
 import MenuListSection from './MenuListSection';
 import Header from '@/components/Header';
 import LoginSection from '@/components/Login/LoginSection';
 
-export default function MenuPage() {
+export default async function MenuPage() {
   return (
     <div className="px-20">
-      <Header close={true} title="메뉴" />
+      <Header close title="메뉴" />
       <LoginSection />
       <MenuListSection />
     </div>

src/app/auth/AuthComponent.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { getRegister } from '@/apis';
+import { ACCESS_TOKEN, EMAIL, NICKNAME } from '@/constants';
+import useDidMount from '@/hooks/useDidMount';
+import { setClientCookie } from '@/utils';
+
+interface AuthComponentProps {
+  code: string;
+}
+
+export default function AuthComponent({ code }: AuthComponentProps) {
+  const router = useRouter();
+
+  useDidMount(async () => {
+    try {
+      const {
+        token: { accessToken },
+        email,
+        nickname,
+      } = await getRegister(code);
+
+      setClientCookie(ACCESS_TOKEN, accessToken);
+      setClientCookie(EMAIL, email);
+      setClientCookie(NICKNAME, nickname);
+
+      alert(`로그인에 성공했어요!`);
+      router.push('/');
+    } 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,32 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { patchDeleteAccount } from '@/apis';
+import { ACCESS_TOKEN } from '@/constants';
+import useDidMount from '@/hooks/useDidMount';
+import { getClientCookie, removeClientCookie } from '@/utils';
+
+export default function WithdrawComponent() {
+  const router = useRouter();
+  const token = getClientCookie(ACCESS_TOKEN);
+  const withdrawalReason = useSearchParams().get('reason');
+
+  useDidMount(async () => {
+    if (token && withdrawalReason) {
+      const response = await patchDeleteAccount(withdrawalReason);
+      console.log(response);
+    }
+
+    // 회원탈퇴 api 될 떄 까지만
+    // if (token) {
+    //   patchLogout(token.accessToken, token.refreshToken).then(() => {
+    //     alert('로그아웃 되었습니다');
+    //   });
+    // }
+    removeClientCookie(ACCESS_TOKEN);
+    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 />;
 }

src/components/Feed/BookmarkButton.tsx

@@ -6,16 +6,17 @@ import { Icon } from '../Button/Icon';
 import { deleteBookmark, postBookmark } from '@/apis';
 import LoginModal from '@/components/Login/LoginModal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
+import { ACCESS_TOKEN } from '@/constants';
 import { ICON } from '@/constants/icon';
-import useUserState from '@/context/userState';
+import { getClientCookie } from '@/utils';
 
 interface BookmarkButtonI {
   poseId: number;
   isMarked: boolean;
 }
 export default function BookmarkButton({ poseId, isMarked }: BookmarkButtonI) {
   const { open } = useOverlay();
-  const { token } = useUserState();
+  const token = getClientCookie(ACCESS_TOKEN);
   const [marked, setMarked] = useState(isMarked);
 
   function onClick() {