인증/인가에 따른 라우팅 구현, API 통신 실패 및 존재하지 않는 페이지(Not Found)에 대한 Fallback UI 구현

frontend/src/components/PostForm/index.tsx

@@ -1,7 +1,7 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 
 import React, { HTMLAttributes, useContext, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
 
 import { PostInfo } from '@type/post';
 
@@ -20,9 +20,11 @@ import SquareButton from '@components/common/SquareButton';
 import TimePickerOptionList from '@components/common/TimePickerOptionList';
 import WritingVoteOptionList from '@components/optionList/WritingVoteOptionList';
 
+import { PATH } from '@constants/path';
 import { POST_DESCRIPTION_MAX_LENGTH, POST_TITLE_MAX_LENGTH } from '@constants/post';
 
 import { changeCategoryToOption } from '@utils/post/changeCategoryToOption';
+import { checkWriter } from '@utils/post/checkWriter';
 import { addTimeToDate, formatTimeWithOption } from '@utils/post/formatTime';
 import { getDeadlineTime } from '@utils/post/getDeadlineTime';
 
@@ -43,13 +45,15 @@ const CATEGORY_COUNT_LIMIT = 3;
 
 export default function PostForm({ data, mutate, isError, error }: PostFormProps) {
  const {
+ postId,
  title,
  content,
  category: categoryIds,
  createTime,
  deadline,
  voteInfo,
  imageUrl,
+ writer,
  } = data ?? {};
 
  const navigate = useNavigate();
@@ -142,6 +146,8 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
  }
  };
 
+ if (postId && writer && !checkWriter(writer.id)) return <Navigate to={PATH.HOME} />;
+
  return (
  <>
  <S.HeaderWrapper>

frontend/src/components/common/Error/Error.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Error from '.';
+
+const meta: Meta<typeof Error> = {
+ component: Error,
+};
+
+export default meta;
+type Story = StoryObj<typeof Error>;
+
+export const Default: Story = {
+ render: () => <Error />,
+};

frontend/src/components/common/Error/index.tsx

@@ -0,0 +1,19 @@
+import IconButton from '../IconButton';
+
+import * as S from './style';
+
+export default function Error() {
+ return (
+ <S.Wrapper>
+ <S.Title>⚠ 잠시 후 다시 시도해주세요.</S.Title>
+ <S.Description>요청 사항을 처리하는데 실패했습니다.</S.Description>
+ <S.Direction>
+ <S.Text>
+ <IconButton category="retry" />
+ 다시시도
+ </S.Text>
+ <S.RetryText>오류가 지속되는 경우 votogether@gmail.com 로 문의해주세요.</S.RetryText>
+ </S.Direction>
+ </S.Wrapper>
+ );
+}

frontend/src/components/common/Error/style.ts

@@ -0,0 +1,71 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ position: relative;
+`;
+
+export const HeaderWrapper = styled.div`
+ width: 100%;
+
+ position: fixed;
+
+ z-index: ${theme.zIndex.header};
+
+ @media (min-width: ${theme.breakpoint.md}) {
+ display: none;
+ }
+`;
+
+export const Title = styled.h1`
+ width: 90%;
+ margin-top: 60px;
+
+ font-size: 20px;
+ text-align: center;
+`;
+
+export const Description = styled.p`
+ width: 90%;
+ margin: 20px 0;
+
+ font: var(--text-body);
+ text-align: center;
+`;
+
+export const Direction = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+`;
+
+export const Text = styled.p`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ font: var(--text-body);
+ text-decoration: underline;
+
+ cursor: pointer;
+`;
+
+export const RetryText = styled.p`
+ color: gray;
+ font: var(--text-caption);
+`;
+
+export const ButtonWrapper = styled.div`
+ width: 120px;
+ height: 50px;
+`;

frontend/src/components/common/IconButton/index.tsx

@@ -2,11 +2,12 @@ import { ButtonHTMLAttributes } from 'react';
 
 import backIcon from '@assets/back.svg';
 import categoryIcon from '@assets/category.svg';
+import retryIcon from '@assets/retry.svg';
 import searchIcon from '@assets/search_white.svg';
 
 import * as S from './style';
 
-type IconCategory = 'category' | 'back' | 'search';
+type IconCategory = 'category' | 'back' | 'search' | 'retry';
 
 const ICON_CATEGORY: Record<IconCategory, { name: string; url: string }> = {
  category: {
@@ -21,6 +22,10 @@ const ICON_CATEGORY: Record<IconCategory, { name: string; url: string }> = {
  name: '검색',
  url: searchIcon,
  },
+ retry: {
+ name: '다시시도',
+ url: retryIcon,
+ },
 };
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

frontend/src/components/post/PostList/index.tsx

@@ -12,8 +12,6 @@ import Skeleton from '@components/common/Skeleton';
 import { SORTING_OPTION, STATUS_OPTION } from '@components/post/PostListPage/constants';
 import type { PostSorting, PostStatus } from '@components/post/PostListPage/types';
 
-import { SORTING, STATUS } from '@constants/post';
-
 import EmptyPostList from '../EmptyPostList';
 
 import * as S from './style';

frontend/src/hooks/context/auth.tsx

@@ -31,7 +31,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  if (userInfo && loggedInfo.isLoggedIn) {
  setLoggedInfo(origin => ({ ...origin, userInfo }));
  }
- }, [userInfo]);
+ }, [loggedInfo.isLoggedIn, userInfo]);
 
  useEffect(() => {
  const accessToken = getCookieToken().accessToken;

frontend/src/pages/Error/Error.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Error from '.';
+
+const meta: Meta<typeof Error> = {
+ component: Error,
+};
+
+export default meta;
+type Story = StoryObj<typeof Error>;
+
+export const Default: Story = {
+ render: () => <Error />,
+};

frontend/src/pages/Error/index.tsx

@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+
+import Layout from '@components/common/Layout';
+import SquareButton from '@components/common/SquareButton';
+
+import * as S from './style';
+
+export default function Error({ message }: { message?: string }) {
+ const navigate = useNavigate();
+
+ return (
+ <Layout isSidebarVisible={false}>
+ <S.Wrapper>
+ <S.Description>{message ? message : '요청 중 오류가 발생했습니다.'}</S.Description>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="fill"
+ onClick={() => {
+ navigate('/');
+ }}
+ >
+ 홈으로 가기
+ </SquareButton>
+ <SquareButton
+ theme="gray"
+ onClick={() => {
+ navigate(-1);
+ }}
+ >
+ 다시 시도
+ </SquareButton>
+ </S.ButtonWrapper>
+ </S.Wrapper>
+ </Layout>
+ );
+}

frontend/src/pages/Error/style.ts

@@ -0,0 +1,38 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 40px;
+
+ position: relative;
+`;
+
+export const HeaderWrapper = styled.div`
+ width: 100%;
+
+ position: fixed;
+
+ z-index: ${theme.zIndex.header};
+`;
+
+export const Description = styled.p`
+ width: 90%;
+ margin-top: 60px;
+
+ font: var(--text-title);
+ text-align: center;
+`;
+
+export const ButtonWrapper = styled.div`
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+
+ width: 280px;
+ height: 50px;
+`;

frontend/src/pages/MyInfo/index.tsx

@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { User } from '@type/user';
+
 import { AuthContext } from '@hooks/context/auth';
 import { useToggle } from '@hooks/useToggle';
 
@@ -18,12 +20,8 @@ export default function MyInfo() {
  const navigate = useNavigate();
  const { isOpen, openComponent, closeComponent } = useToggle();
 
- const { userInfo } = useContext(AuthContext).loggedInfo;
-
- if (!userInfo) {
- navigate('/');
- return <></>;
- }
+ const { loggedInfo } = useContext(AuthContext);
+ const { userInfo } = loggedInfo;
 
  return (
  <Layout isSidebarVisible={true}>
@@ -39,7 +37,7 @@ export default function MyInfo() {
  </NarrowTemplateHeader>
  </S.HeaderWrapper>
  <S.ProfileSection>
- <UserProfile userInfo={userInfo} />
+ <UserProfile userInfo={userInfo ?? ({} as User)} />
  </S.ProfileSection>
  <S.UserControlSection>
  <Accordion title="닉네임 변경">

frontend/src/pages/NotFound/NotFound.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import NotFound from '.';
+
+const meta: Meta<typeof NotFound> = {
+ component: NotFound,
+};
+
+export default meta;
+type Story = StoryObj<typeof NotFound>;
+
+export const Default: Story = {
+ render: () => <NotFound />,
+};

frontend/src/pages/NotFound/index.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+
+import IconButton from '@components/common/IconButton';
+import Layout from '@components/common/Layout';
+import LogoButton from '@components/common/LogoButton';
+import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
+import SquareButton from '@components/common/SquareButton';
+
+import * as S from './style';
+
+export default function NotFound() {
+ const navigate = useNavigate();
+ return (
+ <Layout isSidebarVisible={false}>
+ <S.Wrapper>
+ <S.HeaderWrapper>
+ <NarrowTemplateHeader>
+ <IconButton
+ category="back"
+ onClick={() => {
+ navigate(-1);
+ }}
+ />
+ </NarrowTemplateHeader>
+ </S.HeaderWrapper>
+ <S.Title>404</S.Title>
+ <LogoButton content="icon" style={{ width: '150px', height: '150px' }} />
+ <S.Description>요청하신 페이지를 찾을 수 없어요.</S.Description>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="fill"
+ onClick={() => {
+ navigate('/');
+ }}
+ >
+ 홈으로 가기
+ </SquareButton>
+ </S.ButtonWrapper>
+ </S.Wrapper>
+ </Layout>
+ );
+}