[#269, #277, #302] ssr 제거 및 private 페이지 검증 수정 (#322)

packages/app/next.config.js

@@ -11,14 +11,6 @@ const nextConfig = {
     formats: ['image/avif', 'image/webp'],
     domains: [process.env.IMAGE_SERVER_DOMAIN],
   },
-  async rewrites() {
-    return [
-      {
-        source: '/server/:path*', // 프론트엔드에서 요청하는 경로에 대한 리다이렉트
-        destination: `${process.env.SERVER_URL}/:path*`, // 백엔드 도메인
-      },
-    ]
-  },
 }
 
 module.exports = withBundleAnalyzer(nextConfig)

packages/app/package.json

@@ -17,9 +17,9 @@
     "@sms/shared": "workspace:*",
     "@tanstack/react-query": "^5.37.1",
     "axios": "^1.3.5",
-    "axios-retry": "^3.7.0",
+    "cookies": "^0.9.1",
     "file-saver": "^2.0.5",
-    "jsonwebtoken": "^9.0.1",
+    "jsonwebtoken": "^9.0.2",
     "lottie-web": "^5.12.2",
     "next": "13.3.0",
     "next-redux-wrapper": "^8.1.0",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.5.2",
+    "@types/cookies": "^0.9.0",
     "@types/file-saver": "^2.0.5",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "^18.15.11",

packages/app/src/api/axiosApi.ts

@@ -1,29 +1,10 @@
 import axios from 'axios'
 import qs from 'qs'
 import ParamsFilter from '@lib/ParamsFilter'
-import axiosRetry from 'axios-retry'
 
 const axiosApi = axios.create({
-  'axios-retry': {
-    retries: 3,
-    retryCondition: (e) => e.response?.status === 401,
-  },
   paramsSerializer: (params) =>
     qs.stringify(ParamsFilter(params), { arrayFormat: 'repeat' }),
 })
 
-axiosRetry(axiosApi, {
-  retries: 3,
-  retryDelay: (retryCount) => {
-    return retryCount * 1000
-  },
-  shouldResetTimeout: true,
-  retryCondition: (error) => {
-    return (
-      axiosRetry.isNetworkOrIdempotentRequestError(error) ||
-      error.response?.status === 401
-    )
-  },
-})
-
 export default axiosApi

packages/app/src/api/index.ts

@@ -1,2 +1 @@
 export { default as axiosApi } from './axiosApi'
-export { default as rtkApi } from './rtkApi'

packages/app/src/features/auth/dtos/index.ts

@@ -0,0 +1,3 @@
+export { default as LoggedInResDto } from './res/LoggedInResDto'
+
+export type { LoggedInResType } from './res/LoggedInResDto'

packages/app/src/features/auth/dtos/res/LoggedInResDto.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod'
+import Role from '@/types/Role'
+
+const RoleSchema = z.enum([
+  Role.ROLE_STUDENT,
+  Role.ROLE_TEACHER,
+  Role.ROLE_DIRECTOR,
+  Role.ROLE_HOMEROOM,
+  Role.ROLE_PRINCIPAL,
+  Role.ROLE_DEPUTY_PRINCIPAL,
+])
+
+export const successDto = z.object({
+  isLoggedIn: z.literal(true),
+  role: RoleSchema,
+})
+
+export const failDto = z.object({
+  isLoggedIn: z.literal(false),
+})
+
+const LoggedInResDto = z.discriminatedUnion('isLoggedIn', [successDto, failDto])
+
+export type LoggedInResType = z.infer<typeof LoggedInResDto>
+
+export default LoggedInResDto

packages/app/src/features/auth/hook/useAuth.tsx

@@ -3,17 +3,13 @@ import env from '@lib/env'
 import { useEffect } from 'react'
 import login from '@features/auth/service/login'
 import { useToast } from '@features/toast'
-import useLocalStorage from '@features/global/hooks/useLocalStorage'
-import Token from '@lib/Token'
 import useLoading from '@features/modal/hooks/useLoading'
 
 const useAuth = () => {
   const router = useRouter()
   const code = router.query.code?.toString() || ''
   const { addToast } = useToast()
   const { loadingWrap, loadingClose } = useLoading()
-  const [_, setAccessExpires] = useLocalStorage(Token.ACCESS_TOKEN_EXP, '')
-  const [__, setRefreshExpires] = useLocalStorage(Token.REFRESH_TOKEN_EXP, '')
 
   useEffect(() => {
     if (!code) return
@@ -25,8 +21,6 @@ const useAuth = () => {
       }
       const redirectUrl =
         res.role === 'ROLE_TEACHER' ? '/register/teacher' : '/register'
-      setAccessExpires(res.accessTokenExp)
-      setRefreshExpires(res.refreshTokenExp)
       addToast('success', '로그인에 성공했습니다')
       await router.push(res.isExist ? '/' : redirectUrl)
       loadingClose()

packages/app/src/features/auth/hook/useLogout.tsx

@@ -4,17 +4,14 @@ import { useDialog } from '@hooks'
 import { useToast } from '@features/toast'
 import { useDispatch } from 'react-redux'
 import { actions } from '@features/student/stores'
-import { rtkApi } from '@api'
-import useLocalStorage from '@features/global/hooks/useLocalStorage'
-import Token from '@lib/Token'
+import useLoggedInMutation from '@features/auth/queries/useLoggedInMutation'
 
 const useLogout = () => {
   const { dialog } = useDialog()
   const { addToast } = useToast()
   const dispatch = useDispatch()
   const router = useRouter()
-  const [_, setAccess] = useLocalStorage(Token.ACCESS_TOKEN_EXP, '')
-  const [__, setRefresh] = useLocalStorage(Token.REFRESH_TOKEN_EXP, '')
+  const mutate = useLoggedInMutation()
 
   const onLogout = async () => {
     if (
@@ -28,12 +25,9 @@ const useLogout = () => {
     const res = await logout()
     if (res) return addToast('error', res)
 
-    setAccess('')
-    setRefresh('')
+    mutate()
     addToast('success', '로그아웃에 성공했습니다')
     dispatch(actions.resetPage())
-    dispatch(actions.resetStudents())
-    dispatch(rtkApi.util.resetApiState())
 
     router.push('/')
   }

packages/app/src/features/auth/hook/useWithdraw.tsx

@@ -4,13 +4,11 @@ import { useToast } from '@features/toast'
 import { useDialog } from '@hooks'
 import { useDispatch } from 'react-redux'
 import { actions } from '@features/student/stores'
-import useLoggedIn from './useLoggedIn'
 
 const useWithdraw = () => {
   const { dialog } = useDialog()
   const { addToast } = useToast()
   const dispatch = useDispatch()
-  const { refetchLoggedIn } = useLoggedIn({})
   const router = useRouter()
 
   const onWithdraw = async () => {
@@ -29,7 +27,6 @@ const useWithdraw = () => {
     dispatch(actions.resetPage())
     dispatch(actions.resetStudents())
     router.push('/')
-    refetchLoggedIn()
   }
 
   return { onWithdraw }

packages/app/src/features/auth/lib/clearAuthCookies.ts

@@ -0,0 +1,9 @@
+import Token from '@lib/Token'
+import Cookies from 'cookies'
+
+const clearAuthCookies = (cookies: Cookies) => {
+  cookies.set(Token.ACCESS_TOKEN, '', { maxAge: -1 })
+  cookies.set(Token.REFRESH_TOKEN, '', { maxAge: -1 })
+}
+
+export default clearAuthCookies

packages/app/src/features/auth/lib/getRole.ts

@@ -0,0 +1,23 @@
+import { decode } from 'jsonwebtoken'
+import { z } from 'zod'
+import Role from '@/types/Role'
+
+const RoleSchema = z.enum([
+  Role.ROLE_STUDENT,
+  Role.ROLE_TEACHER,
+  Role.ROLE_DIRECTOR,
+  Role.ROLE_HOMEROOM,
+  Role.ROLE_PRINCIPAL,
+  Role.ROLE_DEPUTY_PRINCIPAL,
+])
+
+const getRole = (token: string) => {
+  const payload = decode(token, { json: true })
+
+  const result = RoleSchema.safeParse(payload?.ROLE)
+  if (!result.success) return
+
+  return result.data
+}
+
+export default getRole