diff --git a/src/components/ErrorBoundary/ApiErrorBoundary.tsx b/src/components/ErrorBoundary/ApiErrorBoundary.tsx index 2e3a7d83..309f2669 100644 --- a/src/components/ErrorBoundary/ApiErrorBoundary.tsx +++ b/src/components/ErrorBoundary/ApiErrorBoundary.tsx @@ -4,7 +4,7 @@ import { Component, ReactElement, ReactNode } from 'react'; import { Navigate } from 'react-router-dom'; import ErrorFallback from './ErrorFallback'; -import UnauthorizedAlert from './UnauthorizedAlert'; +import StayDuringRoutingAlert from './StayDuringRoutingAlert'; interface FallbackProps { error: AxiosError; @@ -17,6 +17,8 @@ interface Props { fallback?: ReactElement; } +type AxiosErrorDetailType = 'auth-expired' | 'unauthorized' | 'not-found' | 'server'; + type State = | { error: null; @@ -28,7 +30,7 @@ type State = } | { error: AxiosError; - errorDetail: 'server' | 'unauthorized' | 'auth-expired'; + errorDetail: AxiosErrorDetailType; }; class ErrorBoundary extends Component { @@ -58,6 +60,13 @@ class ErrorBoundary extends Component { }; } + if (error.response?.status === 404) { + return { + error, + errorDetail: 'not-found', + }; + } + if (error.response?.status === 401) { if (!localStorage.getItem('userToken')) { return { @@ -102,6 +111,15 @@ class ErrorBoundary extends Component { return this.props.children; } + if (this.state.errorDetail === 'not-found') { + return ( + <> + + ; + + ); + } + if (this.state.errorDetail === 'unauthorized') { return ; } @@ -109,7 +127,7 @@ class ErrorBoundary extends Component { if (this.state.errorDetail === 'auth-expired') { return ( <> - + ); diff --git a/src/components/ErrorBoundary/UnauthorizedAlert.tsx b/src/components/ErrorBoundary/StayDuringRoutingAlert.tsx similarity index 82% rename from src/components/ErrorBoundary/UnauthorizedAlert.tsx rename to src/components/ErrorBoundary/StayDuringRoutingAlert.tsx index e2c18a39..3e5136de 100644 --- a/src/components/ErrorBoundary/UnauthorizedAlert.tsx +++ b/src/components/ErrorBoundary/StayDuringRoutingAlert.tsx @@ -8,9 +8,13 @@ interface OpenAlertProps { buttonContent?: string; } +interface Props { + content: string; +} + let isOpenAlert = false; -const UnauthorizedAlert = () => { +const StayDuringRoutingAlert = ({ content }: Props) => { const overlay = useOverlay({ exitOnUnmount: false, }); @@ -37,13 +41,13 @@ const UnauthorizedAlert = () => { if (isOpenAlert) return; openAlert({ - content: '인증 정보가 만료되었습니다. 다시 로그인해 주세요.', + content, }); isOpenAlert = true; - }, [openAlert]); + }, [openAlert, content]); return <>; }; -export default UnauthorizedAlert; +export default StayDuringRoutingAlert; diff --git a/src/pages/FeedDetail/components/CommentProfileInfo.tsx b/src/pages/FeedDetail/components/CommentProfileInfo.tsx index a357e18d..761b7fa1 100644 --- a/src/pages/FeedDetail/components/CommentProfileInfo.tsx +++ b/src/pages/FeedDetail/components/CommentProfileInfo.tsx @@ -5,35 +5,36 @@ import { formatCommentDate } from '../../Feed/utils/formatCommentDate'; import useNavigatePage from '../../hooks/useNavigatePage'; interface Props { - memberId: number; - imageUrl: string; - nickname: string; - mainSkill: string; + memberId: number | null; + imageUrl: string | null; + nickname: string | null; + mainSkill: string | null; createdAt: string; owner: boolean; } const CommentProfileInfo = ({ memberId, imageUrl, nickname, mainSkill, createdAt, owner }: Props) => { const { goProfilePage } = useNavigatePage(); + const isShouldNotRoute = owner || !memberId; const onClickProfileImage = () => { - if (owner) return; + if (isShouldNotRoute) return; goProfilePage(memberId); }; return ( - + - + - {nickname} + {nickname || '탈퇴한 회원'} - {mainSkill} + {mainSkill || '(알 수 없음)'} diff --git a/src/pages/FeedDetail/types/index.ts b/src/pages/FeedDetail/types/index.ts index 9582650c..de8aa3fb 100644 --- a/src/pages/FeedDetail/types/index.ts +++ b/src/pages/FeedDetail/types/index.ts @@ -21,11 +21,11 @@ export interface FeedDetailResponse { } export interface CommentParentResponse { - memberId: number; + memberId: number | null; parentCommentId: string; - nickname: string; - profileImageUrl: string; - memberMainSkill: string; + nickname: string | null; + profileImageUrl: string | null; + memberMainSkill: string | null; content: string; createdAt: string; likesCount: number; @@ -37,11 +37,11 @@ export interface CommentParentResponse { } export interface CommentChildResponse { - memberId: number; + memberId: number | null; childCommentId: string; - nickname: string; - profileImageUrl: string; - mainSkill: string; + nickname: string | null; + profileImageUrl: string | null; + mainSkill: string | null; content: string; createdAt: string; likesCount: number; diff --git a/src/pages/SignUp/SignUp.page.tsx b/src/pages/SignUp/SignUp.page.tsx index f24887b4..c84efc7b 100644 --- a/src/pages/SignUp/SignUp.page.tsx +++ b/src/pages/SignUp/SignUp.page.tsx @@ -140,8 +140,7 @@ const SignUpPage = () => { >