diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx index 4ee4bbae..89d680e5 100644 --- a/src/app/Routes.tsx +++ b/src/app/Routes.tsx @@ -14,7 +14,7 @@ const CommentPage = lazy(() => import('@/pages/comment/CommentPage')); const CommentReportPage = lazy( () => import('@/pages/comment-report/CommentReportPage'), ); -const EditPage = lazy(() => import('@/pages/edit-post/EditPostPage')); +const EditPostPage = lazy(() => import('@/pages/edit-post/EditPostPage')); const LoginPage = lazy(() => import('@/pages/login/LoginPage')); const LoginOauthKakaoPage = lazy( () => import('@/pages/login/LoginOauthKakaoPage'), @@ -37,15 +37,20 @@ export default function Routes() { return ( + {/* 공개 페이지 */} } /> + {/* 로그인한 유저만 접근 가능한 페이지 */} + } > } /> } /> - } /> + } /> } /> } /> } /> @@ -55,27 +60,30 @@ export default function Routes() { } /> } /> + {/* 로그인 안한 유저만 접근 가능한 페이지 */} } > } /> - - } - > } /> + {/* 가입이 완료되지 않은 유저만 접근 가능한 페이지 */} } + element={ + + } > + } /> } /> - } /> } /> diff --git a/src/features/user/queries/useUser.tsx b/src/features/user/queries/useUser.tsx index cc5ee960..3d69a43a 100644 --- a/src/features/user/queries/useUser.tsx +++ b/src/features/user/queries/useUser.tsx @@ -1,26 +1,23 @@ import { useQuery } from '@tanstack/react-query'; -import { AxiosError } from 'axios'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { axiosInstance } from '@/common/libs/axios'; import { User } from '@/features/user/types'; +import { userLocalStorage } from '@/features/user/utils/user-local-storage'; import { GetUserResponse } from './dto/get-user'; +async function getUser() { + const res = await axiosInstance.get('/user'); + return res.data; +} + export function useUser() { - const { data, isLoading } = useQuery({ + const { data, isLoading, isError } = useQuery({ queryKey: ['user'], - queryFn: async () => { - try { - const res = await axiosInstance.get('/user'); - return res.data; - } catch (e) { - if (e instanceof AxiosError && e.response?.status === 401) { - return null; - } else { - throw e; - } - } - }, - staleTime: 1000 * 60 * 60, // 1시간 + queryFn: getUser, + refetchOnMount: false, + refetchOnWindowFocus: false, + refetchOnReconnect: false, + initialData: userLocalStorage.getUser(), }); const user: User | null = useMemo( @@ -42,7 +39,7 @@ export function useUser() { } : null, job: data.job, - worryCategories: data.userWorryCategories.map((category) => ({ + worryCategories: data.userWorryCategories?.map((category) => ({ value: category.worryCategory.id, label: category.worryCategory.label, })), @@ -52,6 +49,20 @@ export function useUser() { [data], ); + useEffect(() => { + if (!user) { + userLocalStorage.removeUser(); + } else { + userLocalStorage.saveUser(user); + } + }, [user]); + + useEffect(() => { + if (isError) { + userLocalStorage.removeUser(); + } + }, [isError]); + return { user, isLoggedIn: !!user, diff --git a/src/features/user/utils/user-local-storage.ts b/src/features/user/utils/user-local-storage.ts new file mode 100644 index 00000000..029ae77a --- /dev/null +++ b/src/features/user/utils/user-local-storage.ts @@ -0,0 +1,16 @@ +import { User } from '../types'; + +const USER_LOCAL_STORAGE_KEY = 'GOCHAM-USER'; + +export const userLocalStorage = { + saveUser: (user: User) => { + localStorage.setItem(USER_LOCAL_STORAGE_KEY, JSON.stringify(user)); + }, + getUser: (): User | null => { + const user = localStorage.getItem(USER_LOCAL_STORAGE_KEY); + return user ? JSON.parse(user) : null; + }, + removeUser: () => { + localStorage.removeItem(USER_LOCAL_STORAGE_KEY); + }, +}; diff --git a/src/pages/comment-report/CommentReportPage.tsx b/src/pages/comment-report/CommentReportPage.tsx index b8b9b7ea..cf9ee5ea 100644 --- a/src/pages/comment-report/CommentReportPage.tsx +++ b/src/pages/comment-report/CommentReportPage.tsx @@ -5,11 +5,10 @@ import { TopAppBar } from '@/common/components/layout'; import { Button } from '@/common/components/ui/buttons'; import { LoadingSpinner } from '@/common/components/ui/loading'; import { REPORT_COMMENT_REASON_OPTIONS } from '@/common/constants/options'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { useReportComment } from '@/features/report/queries'; import { useUser } from '@/features/user/queries/useUser'; -function CommentReportPage() { +export default function CommentReportPage() { const { id } = useParams(); const { user } = useUser(); const [selectedReasonId, setSelectedReasonId] = useState(); @@ -120,5 +119,3 @@ function CommentReportPage() { ); } - -export default withAuth(CommentReportPage, { block: 'unauthenticated' }); diff --git a/src/pages/edit-post/EditPostPage.tsx b/src/pages/edit-post/EditPostPage.tsx index 62489065..8fc2c59d 100644 --- a/src/pages/edit-post/EditPostPage.tsx +++ b/src/pages/edit-post/EditPostPage.tsx @@ -4,13 +4,12 @@ import { useNavigate, useParams } from 'react-router-dom'; import { TopAppBar } from '@/common/components/layout'; import { LoadingSpinner } from '@/common/components/ui/loading'; import { Popup } from '@/common/components/ui/modal'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { PostForm } from '@/features/posts/components/post-form/PostForm'; import { useEditPost, useGetPost } from '@/features/posts/queries'; import { PostFormData } from '@/features/posts/types/post-form'; import { useUser } from '@/features/user/queries/useUser'; -function EditPostPage() { +export default function EditPostPage() { const queryClient = useQueryClient(); const { id } = useParams(); const [modalOpen, setModalOpen] = useState(false); @@ -146,5 +145,3 @@ function EditPostPage() { ); } - -export default withAuth(EditPostPage, { block: 'unauthenticated' }); diff --git a/src/pages/feed-report/FeedReportPage.tsx b/src/pages/feed-report/FeedReportPage.tsx index fb51dd68..18217c1f 100644 --- a/src/pages/feed-report/FeedReportPage.tsx +++ b/src/pages/feed-report/FeedReportPage.tsx @@ -5,12 +5,11 @@ import { TopAppBar } from '@/common/components/layout'; import { Button } from '@/common/components/ui/buttons'; import { LoadingSpinner } from '@/common/components/ui/loading'; import { REPORT_FEED_REASON_OPTIONS } from '@/common/constants/options'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { useGetPost } from '@/features/posts/queries'; import { useReportPost } from '@/features/report/queries'; import { useUser } from '@/features/user/queries/useUser'; -function FeedPage() { +export default function FeedPage() { const { id } = useParams(); const { user } = useUser(); const { data: post } = useGetPost(Number(id)); @@ -99,5 +98,3 @@ function FeedPage() { ); } - -export default withAuth(FeedPage, { block: 'unauthenticated' }); diff --git a/src/pages/feed/FeedPage.tsx b/src/pages/feed/FeedPage.tsx index b9967108..2d50436c 100644 --- a/src/pages/feed/FeedPage.tsx +++ b/src/pages/feed/FeedPage.tsx @@ -3,14 +3,13 @@ import { Suspense, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { PageWrapper, TopAppBar } from '@/common/components/layout'; import { POST_TYPE } from '@/common/constants/post-type'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { PostDetailList, PostDetailListSkeleton, } from '@/features/posts/components/post-detail'; import { selectedVoteOptionIdAtom } from '@/features/vote/states/selected-vote-option'; -function FeedPage() { +export default function FeedPage() { const params = useParams(); const postType = (params.route as POST_TYPE) || POST_TYPE.ALL; const setSelectedVoteOptionId = useSetAtom(selectedVoteOptionIdAtom); @@ -39,5 +38,3 @@ function FeedPage() { ); } - -export default withAuth(FeedPage, { block: 'unauthenticated' }); diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx index dc1835d9..adddfd14 100644 --- a/src/pages/login/LoginPage.tsx +++ b/src/pages/login/LoginPage.tsx @@ -2,9 +2,8 @@ import { useNavigate } from 'react-router-dom'; import Kakao from '@/common/assets/images/login/kakao.svg'; import LoginWrapper from '@/common/assets/images/login/loginWrapper.svg'; import BackIcon from '@/common/components/icons/BackIcon'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; -function LoginPage() { +export default function LoginPage() { const navigate = useNavigate(); if (!window.Kakao.isInitialized()) { @@ -76,5 +75,3 @@ function LoginPage() { ); } - -export default withAuth(LoginPage, { block: 'activated' }); diff --git a/src/pages/register/CollectInformationPage.tsx b/src/pages/register/CollectInformationPage.tsx index 945ef518..87a14810 100644 --- a/src/pages/register/CollectInformationPage.tsx +++ b/src/pages/register/CollectInformationPage.tsx @@ -2,7 +2,6 @@ import { useAtom } from 'jotai'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import BackIcon from '@/common/components/icons/BackIcon'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { useAcceptTerms } from '@/features/auth/queries'; import { registerDataAtom } from '@/features/register/states/register-data'; import CollectNicknameAgeGender from '@/features/user/components/CollectNicknameAgeGender/CollectNicknameAgeGender'; @@ -10,7 +9,7 @@ import CollectRegionJobCategory from '@/features/user/components/CollectRegionJo import { useEditProfile } from '@/features/user/queries/useEditProfile'; import { useUser } from '@/features/user/queries/useUser'; -function CollectInformationPage() { +export default function CollectInformationPage() { const navigate = useNavigate(); const [page, setPage] = useState(1); const [registerData, setRegisterData] = useAtom(registerDataAtom); @@ -124,5 +123,3 @@ function CollectInformationPage() { ); } - -export default withAuth(CollectInformationPage, { block: 'activated' }); diff --git a/src/pages/register/RegisterTermPage.tsx b/src/pages/register/RegisterTermPage.tsx index 84026b67..385616f3 100644 --- a/src/pages/register/RegisterTermPage.tsx +++ b/src/pages/register/RegisterTermPage.tsx @@ -2,11 +2,10 @@ import { useAtom } from 'jotai'; import { useNavigate } from 'react-router-dom'; import BackIcon from '@/common/components/icons/BackIcon'; import { Button } from '@/common/components/ui/buttons'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { registerDataAtom } from '@/features/register/states/register-data'; import { TermCheckbox } from '@/pages/register/components/TermCheckbox'; -function RegisterTermPage() { +export default function RegisterTermPage() { const navigate = useNavigate(); const [registerData, setRegisterData] = useAtom(registerDataAtom); const { accept } = registerData; @@ -88,5 +87,3 @@ function RegisterTermPage() { ); } - -export default withAuth(RegisterTermPage, { block: 'activated' }); diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx index b8c7d836..66d5fd19 100644 --- a/src/pages/settings/SettingsPage.tsx +++ b/src/pages/settings/SettingsPage.tsx @@ -4,9 +4,8 @@ import { useNavigate } from 'react-router-dom'; import BackIcon from '@/common/components/icons/BackIcon'; import { TopAppBar } from '@/common/components/layout'; import { Popup } from '@/common/components/ui/modal'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; -function SettingsPage() { +export default function SettingsPage() { const navigate = useNavigate(); const queryClient = useQueryClient(); const [logoutModalOpen, setLogoutModalOpen] = useState(false); @@ -87,5 +86,3 @@ function SettingsPage() { ); } - -export default withAuth(SettingsPage, { block: 'unauthenticated' }); diff --git a/src/pages/unregister/UnregisterPage.tsx b/src/pages/unregister/UnregisterPage.tsx index a909d9ee..ac3dc1fc 100644 --- a/src/pages/unregister/UnregisterPage.tsx +++ b/src/pages/unregister/UnregisterPage.tsx @@ -4,12 +4,11 @@ import { useNavigate } from 'react-router-dom'; import { TopAppBar } from '@/common/components/layout'; import { Button } from '@/common/components/ui/buttons'; import { Popup } from '@/common/components/ui/modal'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { PostVoteInput } from '@/features/posts/components/post-form'; import { useUnregister } from '@/features/user/queries/useUnregister'; import { useUser } from '@/features/user/queries/useUser'; -function UnregisterPage() { +export default function UnregisterPage() { const { user } = useUser(); const [reason, setReason] = useState(''); const [modalOpen, setModalOpen] = useState(false); @@ -112,4 +111,3 @@ function UnregisterPage() { ); } -export default withAuth(UnregisterPage, { block: 'unauthenticated' }); diff --git a/src/pages/user/UserPage.tsx b/src/pages/user/UserPage.tsx index c84003ca..ec2fff05 100644 --- a/src/pages/user/UserPage.tsx +++ b/src/pages/user/UserPage.tsx @@ -8,14 +8,13 @@ import { usePullToRefresh } from '@/common/hooks/usePullToRefresh'; import { useScrollRestoration } from '@/common/hooks/useScrollRestoration'; import { useScrollToTop } from '@/common/hooks/useScrollToTop'; import { assignMultipleRefs } from '@/common/utils/dom/assign-multiple-refs'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { PostCardList } from '@/features/posts/components/post-card/PostCardList'; import { PostCardListSkeleton } from '@/features/posts/components/post-card/PostCardListSkeleton'; import { selectedPostTypeAtom } from '@/features/posts/states/selected-post-type'; import { PostTypeTabList } from '@/features/user/components/PostTypeTabList'; import { UserPageHeader } from '@/pages/user/components/UserPageHeader'; -function UserPage() { +export default function UserPage() { const queryClient = useQueryClient(); const [selectedPostType, setSelectedPostType] = useAtom(selectedPostTypeAtom); const { ref: scrollToTopRef, scrollToTop } = useScrollToTop(); @@ -74,5 +73,3 @@ function UserPage() { ); } - -export default withAuth(UserPage, { block: 'unauthenticated' }); diff --git a/src/pages/write/WritePage.tsx b/src/pages/write/WritePage.tsx index 0a9f456d..f013b656 100644 --- a/src/pages/write/WritePage.tsx +++ b/src/pages/write/WritePage.tsx @@ -5,7 +5,6 @@ import { TopAppBar } from '@/common/components/layout'; import { Popup } from '@/common/components/ui/modal'; import { scrollRestorationAtom } from '@/common/states/scroll-restoration'; import getFutureDateTime from '@/common/utils/getFutureDateTime'; -import { withAuth } from '@/features/auth/components/withAuth/withAuth'; import { PostForm } from '@/features/posts/components/post-form/PostForm'; import { useAddPost } from '@/features/posts/queries'; import { PostFormData } from '@/features/posts/types/post-form'; @@ -13,7 +12,7 @@ import { useUser } from '@/features/user/queries'; import { PostUploadSuccess } from '@/pages/write/components/PostUploadSuccess'; import { PostUploading } from '@/pages/write/components/PostUploading'; -function WritePage() { +export default function WritePage() { const [modalOpen, setModalOpen] = useState(false); const navigate = useNavigate(); const { mutate: addPost, isLoading, isSuccess, data } = useAddPost(); @@ -121,5 +120,3 @@ function WritePage() { ); } - -export default withAuth(WritePage, { block: 'unauthenticated' });