feat : oauth page

Team-INSERT · Jan 3, 2025 · ebc0b33 · ebc0b33
1 parent 3d7ee32
commit ebc0b33
Show file tree

Hide file tree

Showing 15 changed files with 337 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,9 +2,10 @@ import type { Metadata } from 'next';
 import './globals.css';
 import classNames from 'classnames';
 import { pretendard } from '@/styles/fonts';
+import TanstackQueryProvider from '@/providers/TanstackQueryProvider';
 
 export const metadata: Metadata = {
-  title: '역사의 고서',
+  title: '부마위키 | 역사의 고서',
   description: '우리의 손으로 써내려 나가는 역사의 고서, 부마위키',
 };
 
@@ -15,7 +16,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={classNames(pretendard.variable, 'max-w-screen h-screen')}>{children}</body>
+      <body className={classNames(pretendard.variable, 'max-w-screen h-screen')}>
+        <TanstackQueryProvider>{children}</TanstackQueryProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/oauth/_entities/api/axios.ts b/app/oauth/_entities/api/axios.ts
@@ -0,0 +1,11 @@
+import { http, refreshTokenHeader } from '@/modules/services';
+
+export const requestLogin = async (authCode: string) => {
+  const { data } = await http.post('/auth/oauth/bsm', {}, { headers: { authCode } });
+  return data;
+};
+
+export const requestLogout = async () => {
+  const { data } = await http.delete('/auth/bsm/logout', refreshTokenHeader());
+  return data;
+};
diff --git a/app/oauth/_entities/api/mutation.ts b/app/oauth/_entities/api/mutation.ts
@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
+import { requestLogin, requestLogout } from './axios';
+import { Storage } from '@/modules/services';
+import { Bumawiki } from '@/modules/constants';
+
+export const useLoginMutation = () => {
+  return useMutation({
+    mutationFn: requestLogin,
+    onSuccess: ({ accessToken, refreshToken }) => {
+      Storage.setItem(Bumawiki.token.access, accessToken);
+      Storage.setItem(Bumawiki.token.refresh, refreshToken);
+      window.history.go(-2);
+    },
+  });
+};
+
+export const useLogoutMutation = () => {
+  return useMutation({
+    mutationFn: requestLogout,
+    onSuccess: window.location.reload,
+    onSettled: () => {
+      Storage.delItem(Bumawiki.token.access);
+      Storage.delItem(Bumawiki.token.refresh);
+    },
+  });
+};
diff --git a/app/oauth/_entities/model/index.ts b/app/oauth/_entities/model/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/app/oauth/_features/index.ts b/app/oauth/_features/index.ts
@@ -0,0 +1 @@
+export { AuthenticationPage } from './ui/AuthenticationPage';
diff --git a/app/oauth/_features/lib/withAuthentication.tsx b/app/oauth/_features/lib/withAuthentication.tsx
@@ -0,0 +1,24 @@
+import { useLoginMutation } from '../../_entities/api/mutation';
+import { useMount } from '@/hooks/useMount';
+import { useSearchParams } from 'next/navigation';
+import React, { useEffect } from 'react';
+
+export const withAuthentication = <P extends object>(Component: React.ComponentType<P>) => {
+  const WrappedComponent: React.FC<P> = (props) => {
+    const { mutate: login } = useLoginMutation();
+    const isMounted = useMount();
+    const authCode = useSearchParams().get('code') || '';
+
+    useEffect(() => {
+      if (isMounted) login(authCode);
+    }, [isMounted, authCode, login]);
+
+    return <Component {...props} />;
+  };
+
+  WrappedComponent.displayName = `withAuthentication(${
+    Component.displayName || Component.name || 'Component'
+  })`;
+
+  return WrappedComponent;
+};
diff --git a/app/oauth/_features/ui/AuthenticationPage.tsx b/app/oauth/_features/ui/AuthenticationPage.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { MoonLoader } from 'react-spinners';
+import { withAuthentication } from '../lib/withAuthentication';
+
+export const AuthenticationPage = withAuthentication(() => {
+  return (
+    <main className="flex flex-col items-center justify-center w-full h-screen gap-4">
+      <MoonLoader size={40} color="#274168" />
+      <span className="text-label-medium font-semibold">로그인 중...</span>
+    </main>
+  );
+});
diff --git a/app/oauth/page.tsx b/app/oauth/page.tsx
@@ -0,0 +1,18 @@
+import { Suspense } from 'react';
+import { AuthenticationPage } from './_features';
+import { Metadata, NextPage } from 'next';
+
+export const metadata: Metadata = {
+  title: '부마위키 | 로그인',
+  description: '로그인 후 부마위키 문서에 직접 기여해보세요.',
+};
+
+const Page: NextPage = () => {
+  return (
+    <Suspense>
+      <AuthenticationPage />
+    </Suspense>
+  );
+};
+
+export default Page;
diff --git a/next.config.ts b/next.config.ts
@@ -12,7 +12,7 @@ const nextConfig: NextConfig = {
     return [
       {
         source: '/insert-proxy/:path*',
-        destination: 'https://buma.wiki/api/path*',
+        destination: 'https://buma.wiki/api/:path*',
         basePath: false,
       },
     ];

diff --git a/package.json b/package.json
@@ -9,10 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.62.12",
+    "axios": "^1.7.9",
     "classnames": "^2.5.1",
     "next": "15.1.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-spinners": "^0.15.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { AuthenticationPage } from './ui/AuthenticationPage';