diff --git a/apps/jurumarble/src/app/test/page.tsx b/apps/jurumarble/src/app/test/page.tsx new file mode 100644 index 00000000..81446095 --- /dev/null +++ b/apps/jurumarble/src/app/test/page.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { getTestUserAPI, getUserInfoAPI } from "lib/apis/user"; +import Path from "lib/Path"; +import { queryKeys } from "lib/queryKeys"; +import userStorage from "lib/utils/userStorage"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; + +// const getQuery = [queryKeys.LOGIN_INFO]; + +function TestPage() { + const router = useRouter(); + + // const { userInfo } = useGetUserInfo(); + // if (!userInfo) return null; + // const { gender, yearOfBirth, mbti } = userInfo!; + // const isRegister = gender && yearOfBirth && mbti; + + // const { data: loginInfo } = useQuery(getQuery, getTestUserAPI); + + useEffect(() => { + const testUserLogin = async () => { + try { + const { accessToken } = await getTestUserAPI(); + userStorage.set({ accessToken }); + const userInfo = await getUserInfoAPI(); + if (userInfo.gender && userInfo.yearOfBirth && userInfo.mbti) { + router.push(Path.MAIN_PAGE); + } else router.push(Path.REGISTER_PAGE); + } catch (error) { + alert("에러가 발생하였습니다."); + } + }; + testUserLogin(); + // if (loginInfo?.accessToken) { + // userStorage.set({ accessToken: loginInfo.accessToken }); + // if (isRegister) router.push(Path.MAIN_PAGE); + // else { + // router.replace(Path.REGISTER_PAGE); + // } + // } + }, []); + + return <>잠시만 기다려주십시오.; +} + +export default TestPage; diff --git a/apps/jurumarble/src/components/AuthProcess.tsx b/apps/jurumarble/src/components/AuthProcess.tsx index 97323ccf..75d50015 100644 --- a/apps/jurumarble/src/components/AuthProcess.tsx +++ b/apps/jurumarble/src/components/AuthProcess.tsx @@ -1,15 +1,69 @@ "use client"; -import { useRouter } from "next/navigation"; -import useGetUserInfo from "services/useGetUserInfo"; +import { usePathname, useRouter } from "next/navigation"; import Path from "lib/Path"; +import { useEffect } from "react"; +import { isLogin } from "lib/utils/auth"; +import { getUserInfoAPI } from "lib/apis/user"; + +const LOGIN_BLOCK_PATHS = [ + Path.LOGIN_PAGE, + /** + * @NOTE 회원가입 페이지를 막을 경우 테스트 페이지에서 회원가입 페이지로 + * 리다이렉트 됐을 때, 다시 메인페이지로 리다이렉트 되는 문제가 발생함. + */ + // Path.REGISTER_PAGE, + Path.KAKAO_LOGIN_PROCESS, + Path.NAVER_LOGIN_PROCESS, + Path.TEST_PAGE, +]; +const GUEST_BLOCK_PATHS = [ + Path.MY_PAGE, + Path.POST_PAGE, + Path.PROFILE_EDIT, + Path.NOTIFICATION_PAGE, + Path.STAMP_PAGE, +]; function AuthProcess() { - const { userInfo } = useGetUserInfo(); - if (!userInfo) return null; - const { gender, yearOfBirth, mbti } = userInfo!; + // const { userInfo } = useGetUserInfo(); + // const { gender, yearOfBirth, mbti } = userInfo ?? {}; const router = useRouter(); - if (!(gender && yearOfBirth && mbti)) router.replace(Path.REGISTER_PAGE); + const pathname = usePathname(); + + // const isRegister = gender && yearOfBirth && mbti; + + useEffect(() => { + const registerCheck = async () => { + try { + const userInfo = await getUserInfoAPI(); + if (!(userInfo.gender && userInfo.yearOfBirth && userInfo.mbti)) { + router.push(Path.REGISTER_PAGE); + } + } catch (error) { + alert("에러가 발생하였습니다."); + } + }; + + if (isLogin()) { + // if (!isRegister) { + // router.replace(Path.REGISTER_PAGE); + // return; + // } + registerCheck(); + + /** + * @TODO any 타입 제거 + */ + if (LOGIN_BLOCK_PATHS.includes(pathname as any)) { + router.push(Path.MAIN_PAGE); + } + } else { + if (GUEST_BLOCK_PATHS.includes(pathname as any)) { + router.push(Path.LOGIN_PAGE); + } + } + }, [pathname, router]); return <>; } diff --git a/apps/jurumarble/src/lib/Path.ts b/apps/jurumarble/src/lib/Path.ts index 2953bd1a..67466c16 100644 --- a/apps/jurumarble/src/lib/Path.ts +++ b/apps/jurumarble/src/lib/Path.ts @@ -6,6 +6,7 @@ const Path = { LOGIN_PAGE: "/login", KAKAO_LOGIN_PROCESS: "/login/kakao-login-process", NAVER_LOGIN_PROCESS: "/login/naver-login-process", + TEST_PAGE: "/test", // logged In REGISTER_PAGE: "/register", diff --git a/apps/jurumarble/src/lib/apis/user.ts b/apps/jurumarble/src/lib/apis/user.ts index 57b73dd5..9089b388 100644 --- a/apps/jurumarble/src/lib/apis/user.ts +++ b/apps/jurumarble/src/lib/apis/user.ts @@ -1,4 +1,5 @@ import { GENDER } from "lib/constants"; +import { baseApi } from "./http/base"; import { http } from "./http/http"; type GenderType = keyof typeof GENDER; @@ -14,7 +15,7 @@ export interface GetUserInfoResponse { userId: number; } -export const getUserInfo = async () => { +export const getUserInfoAPI = async () => { const response = await http.get("api/users"); return response.data; }; @@ -30,3 +31,14 @@ export const addUserInfoAPI = async (params: AddUserInfoRequest) => { const response = await http.put("api/users/additional-info", params); return response.data; }; + +interface GetTestUserResponse { + accessToken: string; + refreshToken: string; + newUser: boolean; +} + +export const getTestUserAPI = async () => { + const response = await baseApi.get("api/users/test"); + return response.data; +}; diff --git a/apps/jurumarble/src/lib/queryKeys.ts b/apps/jurumarble/src/lib/queryKeys.ts index c2e45a43..5fcf8f19 100644 --- a/apps/jurumarble/src/lib/queryKeys.ts +++ b/apps/jurumarble/src/lib/queryKeys.ts @@ -23,6 +23,7 @@ export const queryKeys = { DRINKS_MAP: "drinksMap" as const, DRINKS_INFO: "drinksInfo" as const, NOTIFICATION_LIST: "notificationList" as const, + LOGIN_INFO: "loginInfo" as const, }; export const reactQueryKeys = { diff --git a/apps/jurumarble/src/lib/utils/auth.ts b/apps/jurumarble/src/lib/utils/auth.ts index d8849550..d1b5fddc 100644 --- a/apps/jurumarble/src/lib/utils/auth.ts +++ b/apps/jurumarble/src/lib/utils/auth.ts @@ -2,14 +2,18 @@ import Path from "lib/Path"; import userStorage from "./userStorage"; export function logout() { - userStorage.remove(); - window.location.replace(Path.MAIN_PAGE); + if (typeof window !== "undefined") { + userStorage.remove(); + window.location.replace(Path.MAIN_PAGE); + } } export function isLogin() { - const user = userStorage.get(); - if (!user) return false; + if (typeof window !== "undefined") { + const user = userStorage.get(); + if (!user) return false; - const { accessToken } = user; - return !!accessToken; + const { accessToken } = user; + return !!accessToken; + } } diff --git a/apps/jurumarble/src/lib/utils/userStorage.ts b/apps/jurumarble/src/lib/utils/userStorage.ts index 6dc96059..ffb89fbe 100644 --- a/apps/jurumarble/src/lib/utils/userStorage.ts +++ b/apps/jurumarble/src/lib/utils/userStorage.ts @@ -6,21 +6,27 @@ interface Token { const userStorage = { get() { - const user = localStorage.getItem(USER_STORAGE_KEY); - try { - if (!user) return null; - const parsedUser = JSON.parse(user) as Token; - return parsedUser; - } catch (e) { - localStorage.removeItem(USER_STORAGE_KEY); - return null; + if (typeof window !== "undefined") { + const user = localStorage.getItem(USER_STORAGE_KEY); + try { + if (!user) return null; + const parsedUser = JSON.parse(user) as Token; + return parsedUser; + } catch (e) { + localStorage.removeItem(USER_STORAGE_KEY); + return null; + } } }, set(user: Token) { - localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user)); + if (typeof window !== "undefined") { + localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user)); + } }, remove() { - localStorage.removeItem(USER_STORAGE_KEY); + if (typeof window !== "undefined") { + localStorage.removeItem(USER_STORAGE_KEY); + } }, }; diff --git a/apps/jurumarble/src/services/useGetUserInfo.ts b/apps/jurumarble/src/services/useGetUserInfo.ts index 42c7dc87..f43a2982 100644 --- a/apps/jurumarble/src/services/useGetUserInfo.ts +++ b/apps/jurumarble/src/services/useGetUserInfo.ts @@ -1,11 +1,11 @@ import { queryKeys } from "lib/queryKeys"; import { useQuery } from "@tanstack/react-query"; -import { getUserInfo, GetUserInfoResponse } from "lib/apis/user"; +import { getUserInfoAPI, GetUserInfoResponse } from "lib/apis/user"; const getQueryKey = [queryKeys.USER_INFO]; export default function useGetUserInfo() { - const { data: userInfo } = useQuery(getQueryKey, getUserInfo, { + const { data: userInfo } = useQuery(getQueryKey, getUserInfoAPI, { placeholderData: () => ({ gender: "MALE", nickname: "",