게시글 작성 시 상세 게시글/카테고리 fetch하는 것을 컴포넌트 분리하여 Suspense와 에러 바운더리를 적용 (#362)

* fix: 우스가 수정한 코드 도입

* refactor: 좁은 헤더 템플릿에 children 옵셔널로 수정

* feat: (#328) 글 수정페이지를 위해 빈헤더가 포함된 에러바운더리 생성

- 폼으로 수정페이지에 헤더가 함께있어 분리할 수 없음
- 때문에 에러바운더리에서 헤더 영역을 보존하기 위해 에러바운더리와 UI만 다른

* fix: 에러바운더리 수정에 대하여 미반영으로 인한 오류 해결

* design: 스타일드 컴포넌트 오타 수정

* feat: 글 작성/수정 컴포넌트 페이지로 변경 및 수정페이지 서스펜스/에러바운더리 적용

- 이름 -page로 수정
- editPostPage는 서스펜스와 에러바운더리를 적용
- 서스펜스/에러바운더리에 따른 UI는 빈헤더 렌더링

* refactor: (#328) 글 작설/수정 폼에서 카테고리 셀렉터 분리

* feat: (#328) 카테고리 셀렉터 에러바운더리로 감싸기

* refactor: (#328) 변경했지만 미적용된 isLoggedIn 변수명 수정

* refactor: (#328) 불필요한 코드 삭제

* fix: (#328) 상세 게시물 리액트 쿼리 캐시 무효화 잘못 설정한 부분 삭제

* 성별, 나이 수정 기능 구현 (#339)

* feat: (#360) 전체 게시글 목록 조회 시 카테고리도 함께 조회할 수 있도록 변경 (#361)

* 내가 쓴 게시글 목록 조회 기능  (#295)

* feat : (#289) QueryDSl 적용 (다즐 코드 복사)

* feat : (#289) 회원 본인이 작성한 게시글 목록 조회 api 구현

* test : (#289) 테스트 코드 추가

* feat : (#289) swagger 추가

* refactor : (#289) final 추가

* style: (#289) 개행 수정

* refactor: (#289) swagger 수정

* refactor: (#289) 개행 수정

* refactor: (#289) any()에 클래스 명시

* refactor: (#289) result 개수 검증 추가

* refactor: (#289) 개행 추가

* refactor: (#289) thread sleep 제거

* refactor: (#289) 개행 수정

* refactor: (#289) assertAll 묶기

* feat: (#289) 카테고리 정렬 추가

* refactor: (#289) thread sleep 관련 throws InterruptedException 제거

* test: (#289) 테스트코드 추가

* refactor: (#289) 메서드 이름 수정

* refactor: (#289) 테스트 코드 검증 추가

* test: (#290) 충돌 해결

* (회원) 게시글 검색 기능 (#314)

* refactor : (#290) (회원) 게시글 검색 기능 api 추가

* test : (#290) 테스트 코드 추가

* feat : (#290) swagger 추가

* style : (#290) 개행 추가

* refactor: (#289) swagger 예외 응답 어노테이션 추가

* refactor: (#289) 개행, assertAll사용, 클래스이름 대문자, //given 리펙터링

* test: (#289) 제목 + 내용에 둘 다 포함되어있는 키워드 검색 테스트 추가

* test: (#290) 테스트 코드 추가

* refactor: (#290) 충돌 해결

* refactor: (#290) 충돌 해결

* feat: (#313) 비회원으로 게시글 검색하는 api 추가 (#363)

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

* chore: (#183) 불필요한 모듈 삭제

* refactor: (#183) 의존성 배열 추가

* feat: (#253) NotFound 컴포넌트 구현

* feat: (#183) PrivateRoute 구현 및 필요한 페이지에 적용

* feat: (#253) 헤더 및 로고 추가

* feat: (#325) Error 컴포넌트 구현 및 소셜 로그인 요청 실패 케이스에 적용

* refactor: (#325) 다시 시도 라는 문구로 수정

* chore: (#325) 불필요한 코드 삭제

* feat: (#325) Error 컴포넌트 구현 및 get 요청 실패 케이스에 적용

* feat: (#325) IconButton에 retry 아이콘 추가 및 Error 컴포넌트 디자인 수정

* refactor: (#325) Redirection 페이지에 로그인 요청에 대한 로딩 및 에러 컴포넌트 적용, errorElement 삭제

* refactor: (#183) 전역 상태 대신 cookie 유무로 navigate하도록 수정

* refactor: (#183) navigate 대신 Navigate로 수정, 권한 관련 props 추가

* feat: (#183) 작성자인 경우에만 글 수정, 투표 통계 페이지 접근하도록 라우팅 설정

* refactor: (#183) Navigate 불필요한 속성 제거, 페이지 접근 불가능한 경우 alert 구현

* refactor: (#183) props에 할당한 값에 대한 타입 단언 대신, 조건부로 대체 컴포넌트 렌더링하도록 수정

* refactor: (#183) Error 컴포넌트 이름 ErrorMessage로 수정, Error 페이지 및 ErrorMessage 컴포넌트 텍스트 수정

* 카테고리 목록 fetch하는 것을 컴포넌트 분리하여 Suspense와 에러 바운더리를 적용 (#352)

* refactor: (#324) 대쉬보드에서 카테고리를 불러오고 밖에서 suspense를 이용하도록 수정
대쉬보드 스토리북 사용하지 않는 코드 삭제

* feat: (#324) 에러 바운더리에서 에러 메세지를 렌더하도록 수정
대쉬보드에서 카테고리 불러오는 것을 실패할 때 에러바운더리에서 에러를 잡도록 구현

* fix: (#324) MSW에서 카테고리 리스트를 불러올 때 딜레이가 너무 길어 실패하는 것을 수정

* refactor: (#324) 현재 선택된 게시글 종류 보여주는 로직 PostList,Layout에서 Dashboard로 이동

* refactor: (#324) CategorySection 컴포넌트에서 카테고리 목록을 불러와 보여주도록 구현

* refactor: (#324) ??로 카테고리 리스트가 없다면 빈 배열로 설정하는 중복되는 코드를 제거

* refactor: (#324) 사용하지 않는 코드 삭제 및 스타일드 컴포넌트명 변경

* api 오류 났을 때 토스트 띄우기  (#353)

* fix: (#326) 토스트가 안닫히는 오류 수정

* feat: (#326) 게시물 상세페이지 내 안내 토스트 설정 및 삭제시 홈으로 이동 처리

- 게시물 삭제 실패 시 안내메세지
- 게시물 삭제 불가 시 정책 안내메세지
- 게시물 수정 불가 시 정책 안내메세지
- 게시물 신고 실패 시 안내메세지
- 게시물 신고 성공 시 안내메세지

* refactor: (#326)  토스트 메세지를 토스트 훅과 통합 및 무한토스트 오류 해결

* feat: (#326) 글작성/수정 실패 시 토스트 컴포넌트 등장 구현 및 토스트 훅 수정

* feat: (#326) 글작성/수정 시 입력 예외처리에 해당하는 경우 토스트로 안내 구현

* feat: (#326) 글작성 폼 컴포넌트 토스트 useEffect 의존성 배열 수정

* feat: (#326) 댓글작성 실패 시 토스트 컴포넌트 등장 구현

* feat: 유저신고 > 닉네임 신고로 수정

* design: 메뉴 컴포넌트 뒤가 보여 background-color 수정

* feat: (#326) 댓글삭제 실패, 신고 시 토스트 컴포넌트 등장 구현

* feat: (#326) 투표 실패, 투표 수정 실패 시 토스트 컴포넌트 등장 구현

* feat: (#326) 카테고리 선호/선호취소 실패시 토스트 컴포넌트 등장 구현

* feat: (#326) 댓글 수정 실패 시 토스트 등장 구현

- 낙관적 업데이트로 되어있는 코드라서 어떻게 해야 할지 추후 논의 후 수정할 수 있음
- 낙관적 업데이트와 양자택일이 될 것이라 예상
- 기존 수정버튼을 누르면 무조건 action이 null이 되며 input이 사라졌던 흐름 수정
- 현재 수정을 누르고 api가 성공하면 input 폼을 없앰
- 현재 수정을 누르고 api가 실패하면 input 폼을 유지하고 토스트를 띄움

* fix: 게시글 작성시 본문 사진 url이 공백인 오류,  url로 수정

* refactor: 댓글수정 낙관적 업데이트 삭제

* fix: (#326) 댓글 수정해도 반영이 안되는 오류 수정

- 낙관적 업데이트 수정 중 잘못된 data를 입력되는 부분 수정 누락

* fix: push가 안 되어 원격저장소와 동기화

* feat: 글 수정 시 마감시간 정책 적용 및 안내

* refactor: (#326) 동일 코드 삭제 및 유사코드 조건문 형식 통일

* refactor: (#326) 타입 컨벤션에 맞춰 수정

* 게시글 전체 조회 시 이미지 경로 포함하도록 수정 (#364)

* chore: (#346) 코드 컨벤션 수정

* refactor: (#346) 게시글 응답 imageUrl 포함시키도록 수정

* fix: (#346) 빈 이미지 처리 수정

* feat: 글 작성/수정 컴포넌트 페이지로 변경 및 수정페이지 서스펜스/에러바운더리 적용

- 이름 -page로 수정
- editPostPage는 서스펜스와 에러바운더리를 적용
- 서스펜스/에러바운더리에 따른 UI는 빈헤더 렌더링

* 개인정보(성별/나이) 등록 페이지 구현, 회원탈퇴 및 닉네임 변경 API 함수에 UI와 연결 (#359)

* feat: (#344) 회원탈퇴 및 닉네임 변경 API를 UI에 연결

* refactor: (#344) 정책 관련 값 상수화, useText hook의 handleTextChange limit 타입 수정

* refactor: (#344) API 변동사항에 맞게 타입 변경

* refactor: (#344) NICKNAME 객체 상수로 수정

* chore: (#344) 페이지명 PersonalInfoCollect -> RegisterPersonalInfo 로 수정

* feat: (#344) 개인정보 등록 페이지 path 선언, 개인정보 업데이트 mocking 함수 구현

* feat: (#344) API fetch 함수 연결, 디자인 수정

* refactor: (#344) 유저정보 조회 API 변동사항 반영

* chore: (#344) 성별 위치 변경

* chore: (#344) 불필요한 코드 ㄷ삭제

* feat: (#344) 유저 정보 성공 시 쿼리 무효화 및 회원탈퇴 시 로그아웃하도록 구현

* feat: (#344) 생년월일 숫자가 아닌 경우 alert 띄우기

* design: (#344) input type 숫자인 경우 화살표 보이지 않도록 수정

* refactor: 중복 코드 삭제

Co-authored-by: jero_kang <inyeong-kang@users.noreply.github.com>

* fix: 유저정보 변수 잘못 기재되어있어 수정

---------

Co-authored-by: JeongHun Yu <jeomxon@gmail.com>
Co-authored-by: lookh <103165859+aiaiaiai1@users.noreply.github.com>
Co-authored-by: jero_kang <81199414+inyeong-kang@users.noreply.github.com>
Co-authored-by: 김영길/KIM YOUNG GIL <80146176+Gilpop8663@users.noreply.github.com>
Co-authored-by: 최우창 <clllickme@naver.com>
Co-authored-by: jero_kang <inyeong-kang@users.noreply.github.com>

frontend/src/components/PostForm/CategoryWrapper/index.tsx

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+
+import { AuthContext } from '@hooks/context/auth';
+import { useCategoryList } from '@hooks/query/category/useCategoryList';
+
+import MultiSelect from '@components/common/MultiSelect';
+import { Option } from '@components/common/MultiSelect/types';
+
+import { changeCategoryToOption } from '@utils/post/changeCategoryToOption';
+
+interface CategoryWrapperProps {
+ multiSelectHook: {
+ selectedOptionList: Option[];
+ handleOptionAdd: (newItem: Option) => void;
+ handleOptionDelete: (optionId: number) => void;
+ };
+}
+
+export default function CategoryWrapper({ multiSelectHook }: CategoryWrapperProps) {
+ const { selectedOptionList, handleOptionAdd, handleOptionDelete } = multiSelectHook;
+ const { isLoggedIn } = useContext(AuthContext).loggedInfo;
+ const { data: categoryList } = useCategoryList(isLoggedIn);
+
+ const categoryOptionList = changeCategoryToOption(categoryList ?? []);
+
+ return (
+ <MultiSelect
+ selectedOptionList={selectedOptionList}
+ optionList={categoryOptionList}
+ handleOptionAdd={handleOptionAdd}
+ handleOptionDelete={handleOptionDelete}
+ placeholder="카테고리를 선택해주세요."
+ />
+ );
+}

frontend/src/components/PostForm/index.tsx

@@ -1,21 +1,20 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 
-import React, { HTMLAttributes, useContext, useState } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 
 import { PostInfo } from '@type/post';
 
-import { AuthContext } from '@hooks/context/auth';
-import { useCategoryList } from '@hooks/query/category/useCategoryList';
 import { useContentImage } from '@hooks/useContentImage';
 import { useMultiSelect } from '@hooks/useMultiSelect';
 import { useText } from '@hooks/useText';
 import { useToast } from '@hooks/useToast';
 import { useToggle } from '@hooks/useToggle';
 import { useWritingOption } from '@hooks/useWritingOption';
 
+import ErrorBoundary from '@pages/ErrorBoundary';
+
 import Modal from '@components/common/Modal';
-import MultiSelect from '@components/common/MultiSelect';
 import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
 import SquareButton from '@components/common/SquareButton';
 import TimePickerOptionList from '@components/common/TimePickerOptionList';
@@ -25,12 +24,12 @@ import WritingVoteOptionList from '@components/optionList/WritingVoteOptionList'
 import { PATH } from '@constants/path';
 import { CATEGORY_COUNT_LIMIT, POST_CONTENT, POST_TITLE } 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';
 import { checkIrreplaceableTime } from '@utils/time';
 
+import CategoryWrapper from './CategoryWrapper';
 import { DEADLINE_OPTION, DeadlineOption } from './constants';
 import ContentImagePart from './ContentImageSection';
 import * as S from './style';
@@ -56,11 +55,8 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  const navigate = useNavigate();
  const writingOptionHook = useWritingOption(voteInfo?.options);
  const contentImageHook = useContentImage(imageUrl);
- const { isLoggedIn: isLogged } = useContext(AuthContext).loggedInfo;
- const { data: categoryList } = useCategoryList(isLogged);
  const { isToastOpen, openToast, toastMessage } = useToast();
  const [selectTimeOption, setSelectTimeOption] = useState<DeadlineOption | '사용자지정'>();
-
  const { isOpen, openComponent, closeComponent } = useToggle();
  const [time, setTime] = useState({
  day: 0,
@@ -86,12 +82,7 @@ export default function PostForm({ data, mutate }: PostFormProps) {
 
  const { text: writingTitle, handleTextChange: handleTitleChange } = useText(title ?? '');
  const { text: writingContent, handleTextChange: handleContentChange } = useText(content ?? '');
- const { selectedOptionList, handleOptionAdd, handleOptionDelete } = useMultiSelect(
- categoryIds ?? [],
- CATEGORY_COUNT_LIMIT
- );
-
- const categoryOptionList = changeCategoryToOption(categoryList ?? []);
+ const multiSelectHook = useMultiSelect(categoryIds ?? [], CATEGORY_COUNT_LIMIT);
 
  const handleDeadlineButtonClick = (option: DeadlineOption) => {
  const targetTime = formatTimeWithOption(option);
@@ -150,6 +141,7 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  });
 
  //예외처리
+ const { selectedOptionList } = multiSelectHook;
  if (selectedOptionList.length < 1) return openToast('카테고리를 최소 1개 골라주세요.');
  if (selectedOptionList.length > 3) return openToast('카테고리를 최대 3개 골라주세요.');
  if (writingTitle.trim() === '') return openToast('제목은 필수로 입력해야 합니다.');
@@ -192,13 +184,9 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  <form id="form-post" onSubmit={handlePostFormSubmit}>
  <S.Wrapper>
  <S.LeftSide $hasImage={!!contentImageHook.contentImage}>
- <MultiSelect
- selectedOptionList={selectedOptionList}
- optionList={categoryOptionList}
- handleOptionAdd={handleOptionAdd}
- handleOptionDelete={handleOptionDelete}
- placeholder="카테고리를 선택해주세요."
- />
+ <ErrorBoundary>
+ <CategoryWrapper multiSelectHook={multiSelectHook} />
+ </ErrorBoundary>
  <S.Title
  value={writingTitle}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>

frontend/src/components/PostForm/style.ts

@@ -39,7 +39,7 @@ export const Wrapper = styled.div`
 
  @media (min-width: ${theme.breakpoint.md}) {
  grid-template-columns: 1fr 300px;
- padding: 30px 80px 20px 8cqb;
+ padding: 30px 80px 20px 80px;
  }
 
  @media (min-width: ${theme.breakpoint.lg}) {

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
 import * as S from './style';
 
-export default function NarrowTemplateHeader({ children }: { children: ReactNode }) {
+export default function NarrowTemplateHeader({ children }: PropsWithChildren) {
  return <S.Container>{children}</S.Container>;
 }

frontend/src/hooks/query/post/usePostDetail.ts

@@ -13,9 +13,7 @@ export const usePostDetail = (isGuest: boolean, postId: number) => {
  [QUERY_KEY.POST_DETAIL, postId],
  () => fetchApi(postId),
  {
- onSuccess: data => {
- return data;
- },
+ suspense: true,
  }
  );
 

frontend/src/pages/ErrorBoundaryWithNarrowHeader.tsx

@@ -0,0 +1,21 @@
+import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
+
+import ErrorBoundary from './ErrorBoundary';
+import * as S from './ErrorBoundaryWithNarrowHeaderStyle';
+
+class ErrorBoundaryWithNarrowHeader extends ErrorBoundary {
+ render() {
+ if (this.state.hasError) {
+ return (
+ <>
+ <NarrowTemplateHeader />
+ <S.Wrapper>{this.state.errorMessage}</S.Wrapper>
+ </>
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundaryWithNarrowHeader;

frontend/src/pages/ErrorBoundaryWithNarrowHeaderStyle.ts

@@ -0,0 +1,15 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Wrapper = styled.div`
+ padding: 50px 10px 20px 10px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ padding: 30px 40px 20px 40px;
+ }
+
+ @media (min-width: ${theme.breakpoint.md}) {
+ padding: 30px 80px 20px 80px;
+ }
+`;

frontend/src/pages/MyInfo/index.tsx

@@ -64,7 +64,7 @@ export default function MyInfo() {
  </NarrowTemplateHeader>
  </S.HeaderWrapper>
  <S.ProfileSection>
- {loggedInfo.userInfo ? <UserProfile userInfo={userInfo} /> : <GuestProfile />}
+ {loggedInfo.userInfo ? <UserProfile userInfo={loggedInfo.userInfo} /> : <GuestProfile />}
  </S.ProfileSection>
  <S.UserControlSection>
  <Accordion title="닉네임 변경">

frontend/src/pages/post/CreatePost/index.tsx → frontend/src/pages/post/CreatePostPage/index.tsx

@@ -8,7 +8,7 @@ import Layout from '@components/common/Layout';
 import Toast from '@components/common/Toast';
 import PostForm from '@components/PostForm';
 
-export default function CreatePost() {
+export default function CreatePostPage() {
  const navigate = useNavigate();
 
  const { mutate, isSuccess, isError, error } = useCreatePost();

frontend/src/pages/post/EditPost/index.tsx → frontend/src/pages/post/EditPostPage/EditPost/index.tsx

@@ -5,7 +5,6 @@ import { useEditPost } from '@hooks/query/post/useEditPost';
 import { usePostDetail } from '@hooks/query/post/usePostDetail';
 import { useToast } from '@hooks/useToast';
 
-import Layout from '@components/common/Layout';
 import Toast from '@components/common/Toast';
 import PostForm from '@components/PostForm';
 
@@ -16,7 +15,6 @@ export default function EditPost() {
 
  const { postId } = useParams();
 
- //해당 페이지는 게스트는 접근할 수 없으므로 필수적으로 true
  const { data } = usePostDetail(true, Number(postId));
  const { mutate, isSuccess, isError, error } = useEditPost(Number(postId));
  const { isToastOpen, openToast, toastMessage } = useToast();
@@ -36,13 +34,13 @@ export default function EditPost() {
  }, [isError, error, openToast]);
 
  return (
- <Layout isSidebarVisible={false}>
+ <>
  <PostForm data={data} mutate={mutate} />
  {isToastOpen && (
  <Toast size="md" position="bottom">
  {toastMessage}
  </Toast>
  )}
- </Layout>
+ </>
  );
 }

frontend/src/pages/post/EditPostPage/EditPostPage.stories.tsx

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

frontend/src/pages/post/EditPostPage/index.tsx

@@ -0,0 +1,31 @@
+import { Suspense } from 'react';
+
+import ErrorBoundaryWithNarrowHeader from '@pages/ErrorBoundaryWithNarrowHeader';
+
+import Layout from '@components/common/Layout';
+import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
+import Skeleton from '@components/common/Skeleton';
+
+import EditPost from './EditPost';
+import * as S from './style';
+
+export default function EditPostPage() {
+ return (
+ <Layout isSidebarVisible={false}>
+ <ErrorBoundaryWithNarrowHeader>
+ <Suspense
+ fallback={
+ <>
+ <NarrowTemplateHeader />
+ <S.SkeletonWrapper>
+ <Skeleton isLarge={true} />
+ </S.SkeletonWrapper>
+ </>
+ }
+ >
+ <EditPost />
+ </Suspense>
+ </ErrorBoundaryWithNarrowHeader>
+ </Layout>
+ );
+}

frontend/src/pages/post/EditPostPage/style.ts

@@ -0,0 +1,23 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const SkeletonWrapper = styled.div`
+ padding: 50px 10px 20px 10px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ padding: 30px 40px 20px 40px;
+ }
+
+ @media (min-width: ${theme.breakpoint.md}) {
+ padding: 30px 80px 20px 80px;
+ }
+`;
+
+export const HeaderButton = styled.button`
+ width: 30px;
+
+ color: white;
+
+ cursor: pointer;
+`;

frontend/src/pages/post/PostDetail/index.tsx

@@ -66,9 +66,7 @@ export default function PostDetailPage() {
  return (
  <Layout isSidebarVisible={true}>
  <S.HeaderContainer>
- <NarrowTemplateHeader>
- <></>
- </NarrowTemplateHeader>
+ <NarrowTemplateHeader />
  </S.HeaderContainer>
  <S.MainContainer>
  {isLoading && 'loading'}

frontend/src/routes/router.tsx

@@ -5,8 +5,8 @@ import Redirection from '@pages/auth/Redirection';
 import Home from '@pages/Home';
 import MyInfo from '@pages/MyInfo';
 import NotFound from '@pages/NotFound';
-import CreatePost from '@pages/post/CreatePost';
-import EditPost from '@pages/post/EditPost';
+import CreatePostPage from '@pages/post/CreatePostPage';
+import EditPostPage from '@pages/post/EditPostPage';
 import PostDetailPage from '@pages/post/PostDetail';
 import RegisterPersonalInfo from '@pages/user/RegisterPersonalInfo';
 import VoteStatisticsPage from '@pages/VoteStatistics';
@@ -36,15 +36,15 @@ const router = createBrowserRouter([
  path: 'write',
  element: (
  <PrivateRoute>
- <CreatePost />
+ <CreatePostPage />
  </PrivateRoute>
  ),
  },
  {
  path: 'write/:postId',
  element: (
  <PrivateRoute>
- <EditPost />
+ <EditPostPage />
  </PrivateRoute>
  ),
  },