diff --git a/src/app/(main)/_components/Header/ProfileButton/ProfileDropdownMenu/LogoutButton/index.tsx b/src/app/(main)/_components/Header/ProfileButton/ProfileDropdownMenu/LogoutButton/index.tsx index dc8d50c..c582f99 100644 --- a/src/app/(main)/_components/Header/ProfileButton/ProfileDropdownMenu/LogoutButton/index.tsx +++ b/src/app/(main)/_components/Header/ProfileButton/ProfileDropdownMenu/LogoutButton/index.tsx @@ -3,13 +3,16 @@ import { useRouter } from 'next/navigation' import { useAuthStore } from '@/store/auth' +import { useMyInfoStore } from '@/store/myInfo' export const LogoutButton = () => { const router = useRouter() const clearAccessToken = useAuthStore((state) => state.clearAccessToken) + const clearMyInfo = useMyInfoStore((state) => state.clearMyInfo) const onClick = () => { clearAccessToken() + clearMyInfo() router.refresh() } diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx index a74cc55..62e71dd 100644 --- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx +++ b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx @@ -1,6 +1,6 @@ 'use client' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' import { Button } from '@/components/ui/button' import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage' @@ -13,20 +13,25 @@ const ActivityErrorFallback = ({ resetErrorBoundary, }: FallbackProps) => { const pathName = usePathname() + const router = useRouter() if (error?.message === DATA_ERROR_MESSAGES.ACTIVITY_NOT_FOUND) { const semesterName = getSemesterNameFromPath(pathName) const currentSemester = useCurrentSemester(semesterName) - const { status } = useGetActivities(Number(currentSemester.semesterId)) + const {} = useGetActivities(Number(currentSemester.semesterId)) - if (status === 'pending') return
loading...
resetErrorBoundary() } return ( -
-

{error?.message}

- +
+
{error?.message}
+
+ + +
) } diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx index 9a94302..9267a41 100644 --- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx +++ b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx @@ -16,7 +16,6 @@ export const ActivitySection = ({ const { data: activities, status } = useGetActivities(semesterId) const currentActivity = useCurrentActivity(semesterId, activityId) - if (status === 'pending') return
loading...
if (!activities?.length) return
활동이 없습니다.
return ( diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx index afd76e2..cadbaca 100644 --- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx +++ b/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx @@ -1,16 +1,22 @@ -import Link from 'next/link' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' import { Button } from '@/components/ui/button' +import { useMyInfoStore } from '@/store/myInfo' export const CreateBoardButton = () => { const pathName = usePathname() + const router = useRouter() + const { role } = useMyInfoStore((state) => state.getMyInfo()) return (
- - - +
) } diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/create-board/_components/CreateBoardForm/SelectMemberField/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/create-board/_components/CreateBoardForm/SelectMemberField/index.tsx index ab37382..1bb9073 100644 --- a/src/app/(main)/activity/[semesterName]/[activityId]/create-board/_components/CreateBoardForm/SelectMemberField/index.tsx +++ b/src/app/(main)/activity/[semesterName]/[activityId]/create-board/_components/CreateBoardForm/SelectMemberField/index.tsx @@ -21,13 +21,12 @@ type SelectMemberFieldProps = { } export const SelectMemberField = ({ name, label }: SelectMemberFieldProps) => { - const { users, status } = useGetUsers() + const { users } = useGetUsers() const form = useFormContext() const [selectedMember, setSelectedMember] = useState([]) - if (status === 'pending') return
loading...
- if (!users) return
?
+ if (!users) return
유저가 없습니다.
return ( { name={name} render={({ field }) => ( -
- +
+ { const router = useRouter() const { execute, result, isExecuting } = useAction(loginAction) const setAccessToken = useAuthStore((state) => state.setAccessToken) + const setMyInfo = useMyInfoStore((state) => state.setMyInfo) const form = useForm({ defaultValues: { @@ -38,9 +41,17 @@ export const LoginForm = () => { } useEffect(() => { - if (result.data?.status === 200) { + if (result.data?.isSuccess) { setAccessToken(result.data.token) - router.push('/') + + const fetchAndStoreMyInfo = async () => { + const myInfo = await getMyInfo() + setMyInfo({ userName: myInfo.userName, role: myInfo.role }) + } + + fetchAndStoreMyInfo().then(() => { + router.push('/') + }) } }) diff --git a/src/constant/errorMessage.ts b/src/constant/errorMessage.ts index 114d389..0daec87 100644 --- a/src/constant/errorMessage.ts +++ b/src/constant/errorMessage.ts @@ -14,3 +14,7 @@ export const DATA_ERROR_MESSAGES = { ACTIVITY_NOT_FOUND: '활동을 불러오는 데 오류가 발생했습니다.', BOARD_DETAIL_NOT_FOUND: '게시판 정보를 불러오는 데 오류가 발생했습니다.', } + +export const ACCESS_ERROR_MESSAGE = { + UNAUTHORIZED_ERROR: '해당 페이지에 접근 할 권한이 없습니다.', +} diff --git a/src/service/data/activity.ts b/src/service/data/activity.ts index e48e02f..96a75fb 100644 --- a/src/service/data/activity.ts +++ b/src/service/data/activity.ts @@ -1,4 +1,4 @@ -import { queryOptions, useQuery } from '@tanstack/react-query' +import { queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query' import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage' import { queryClient } from '@/service/components/ReactQueryClientProvider' @@ -12,7 +12,7 @@ const activitiesQuery = (semesterId: number) => }) export const useGetActivities = (semesterId: number) => { - return useQuery(activitiesQuery(semesterId)) + return useSuspenseQuery(activitiesQuery(semesterId)) } export const useCurrentActivity = (semesterId: number, activityId: number) => { diff --git a/src/service/data/user.ts b/src/service/data/user.ts index 38d3c60..f01115a 100644 --- a/src/service/data/user.ts +++ b/src/service/data/user.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query' +import { useSuspenseQuery } from '@tanstack/react-query' import { getUsers } from '@/service/server/user' @@ -7,7 +7,7 @@ export const useGetUsers = () => { data: users, status, error, - } = useQuery({ + } = useSuspenseQuery({ queryKey: ['users', 'active'], queryFn: async () => getUsers(), }) diff --git a/src/service/server/index.ts b/src/service/server/index.ts new file mode 100644 index 0000000..f5e0d77 --- /dev/null +++ b/src/service/server/index.ts @@ -0,0 +1,16 @@ +import { AUTHORIZATION_API } from '@/service/config' +import { Role } from '@/types/user' + +type MyInfoResponse = { + userId: string + studentNumber: number + userName: string + role: Role + regDate: string +} + +export const getMyInfo = async () => { + const response = await AUTHORIZATION_API.get('/users/me') + + return response.data +} diff --git a/src/service/server/login.ts b/src/service/server/login.ts index d2cb90b..f455f34 100644 --- a/src/service/server/login.ts +++ b/src/service/server/login.ts @@ -24,7 +24,7 @@ export const loginAction = actionClient const accessToken = res.headers['authorization'] - return { status: res.status, token: accessToken } + return { isSuccess: true, token: accessToken } } catch (error) { if (error instanceof AxiosError) { const res = error.response diff --git a/src/service/server/user/index.ts b/src/service/server/user/index.ts index a6dc15e..f35a3a0 100644 --- a/src/service/server/user/index.ts +++ b/src/service/server/user/index.ts @@ -1,8 +1,17 @@ +import { AxiosError } from 'axios' + +import { ACCESS_ERROR_MESSAGE } from '@/constant/errorMessage' import { AUTHORIZATION_API } from '@/service/config' import { User } from '@/types/user' export const getUsers = async () => { - const response = await AUTHORIZATION_API.get('/private/users') + try { + const response = await AUTHORIZATION_API.get('/private/users') - return response.data + return response.data + } catch (error) { + if (error instanceof AxiosError) { + throw new Error(ACCESS_ERROR_MESSAGE.UNAUTHORIZED_ERROR) + } + } } diff --git a/src/store/myInfo.ts b/src/store/myInfo.ts new file mode 100644 index 0000000..99a816a --- /dev/null +++ b/src/store/myInfo.ts @@ -0,0 +1,31 @@ +import { create } from 'zustand' +import { createJSONStorage, persist } from 'zustand/middleware' + +import { Role } from '@/types/user' + +export type MyInfo = { + userName: string + role?: Role +} + +interface MyInfoProps { + myInfo: MyInfo + setMyInfo: (myInfo: MyInfo) => void + clearMyInfo: () => void + getMyInfo: () => MyInfo +} + +export const useMyInfoStore = create( + persist( + (set, get) => ({ + myInfo: { userName: '', role: undefined }, + setMyInfo: (myInfo) => set({ myInfo }), + clearMyInfo: () => set({ myInfo: { userName: '', role: undefined } }), + getMyInfo: () => get().myInfo, + }), + { + name: 'my-info', + storage: createJSONStorage(() => sessionStorage), + }, + ), +) diff --git a/src/types/user.ts b/src/types/user.ts index 97b7223..5c6b0ae 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -4,6 +4,8 @@ export type User = { userName: string } +export type Role = '해구르르' | '팀장' | '일반' + export type ActiveUser = User & { - role: '해구르르' | '팀장' | '일반' + role: Role }