Refactor/#143: 회원 탈퇴 기능 수정 사항 대응 (#145)

* refactor: 삭제된 게시글 및 탈퇴한 회원 프로필 페이지 접근 시 404 에러 대응 * refactor: 회원가입 페이지 Profile Image null 처리 방식 변경 * refactor: 탈퇴한 회원 서버 수정 사항 대응 * refactor: 메인 스킬 - 에서 (알 수 없음)으로 변경 (기획서 반영)
ConceptBe · May 2, 2024 · ce608d0 · ce608d0
1 parent 534f41d
commit ce608d0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 26 deletions.
diff --git 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<FallbackProps>;
 }
 
+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<Props, State> {
@@ -58,6 +60,13 @@ class ErrorBoundary extends Component<Props, State> {
         };
       }
 
+      if (error.response?.status === 404) {
+        return {
+          error,
+          errorDetail: 'not-found',
+        };
+      }
+
       if (error.response?.status === 401) {
         if (!localStorage.getItem('userToken')) {
           return {
@@ -102,14 +111,23 @@ class ErrorBoundary extends Component<Props, State> {
       return this.props.children;
     }
 
+    if (this.state.errorDetail === 'not-found') {
+      return (
+        <>
+          <StayDuringRoutingAlert content="삭제되었거나 존재하지 않는 페이지입니다." />
+          <Navigate to="/" />;
+        </>
+      );
+    }
+
     if (this.state.errorDetail === 'unauthorized') {
       return <Navigate to="/login" />;
     }
 
     if (this.state.errorDetail === 'auth-expired') {
       return (
         <>
-          <UnauthorizedAlert />
+          <StayDuringRoutingAlert content="인증 정보가 만료되었습니다. 다시 로그인해 주세요." />
           <Navigate to="/login" />
         </>
       );

diff --git a/...nents/ErrorBoundary/UnauthorizedAlert.tsx → .../ErrorBoundary/StayDuringRoutingAlert.tsx b/...nents/ErrorBoundary/UnauthorizedAlert.tsx → .../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
@@ -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 (
-    <Flex gap={10} onClick={onClickProfileImage} cursor={owner ? '' : 'pointer'}>
+    <Flex gap={10} onClick={onClickProfileImage} cursor={isShouldNotRoute ? '' : 'pointer'}>
       <Box width={36} height={36} overflow="hidden" borderRadius="0 150px 150px 0">
-        <ImageView src={imageUrl} alt="프로필" defaultSrc={PNGDefaultProfileInfo36} />
+        <ImageView src={imageUrl || PNGDefaultProfileInfo36} alt="프로필" defaultSrc={PNGDefaultProfileInfo36} />
       </Box>
       <Flex paddingTop={2} direction="column" gap={4}>
         <Text font="suit14m" color="b4">
-          {nickname}
+          {nickname || '탈퇴한 회원'}
         </Text>
         <Flex wrap="wrap" alignItems="center" gap={4}>
           <FixedSizeText font="suit12r" color="b9">
-            {mainSkill}
+            {mainSkill || '(알 수 없음)'}
           </FixedSizeText>
           <TextDivider left={2} right={2} color="l2" />
           <Text font="suit12r" color="b9">

diff --git 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
@@ -140,8 +140,7 @@ const SignUpPage = () => {
             >
               <Box width={100} height={100} overflow="hidden" borderRadius="0 150px 150px 0">
                 <ImageView
-                  // memberInfo.profileImageUrl이 없을 경우 defaultSrc 요소를 보이기 위해 `|| 'error'` 추가
-                  src={memberInfo?.profileImageUrl || 'error'}
+                  src={memberInfo?.profileImageUrl || PNGDefaultProfileInfo100}
                   alt="프로필 이미지"
                   defaultSrc={PNGDefaultProfileInfo100}
                 />