[FE] fix : ErrorPage과 App의 레이아웃(=DOM 구조)다른 오류 수정 (#614)

* design: breadCrumb 높이 theme 오류 수정

* chore: breadCrumb 관련한 MainContainer props명 수정

* refactor: Topbar에서 사용하지 않는 코드및 컴포넌트 삭제

- 삭제된 컴포넌트: Sidebar, SidebarOpenButtion

* refactor: PageLayout을 공통된 레이아웃으로 사용하도록 리팩토링

- Topbar, BreadCrumb, Main 추가
- children으로 필요한 Main의 하위 컴포넌트 받도록 함
- BreadCrumb 필요에 따라 화면에 보여지도록 props 추가

frontend/src/App.tsx

@@ -1,28 +1,11 @@
 import { Outlet } from 'react-router';
 
-import { PageLayout, Sidebar, Topbar, SideModal, Footer, Main } from './components';
-import Breadcrumb from './components/common/Breadcrumb';
-import { useSidebar } from './hooks';
-import useBreadcrumbPaths from './hooks/useBreadcrumbPaths';
+import { PageLayout } from './components';
 
 const App = () => {
-  const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar();
-
-  const breadcrumbPathList = useBreadcrumbPaths();
-
   return (
     <PageLayout>
-      {/* {isSidebarModalOpen && (
-        <SideModal isSidebarHidden={isSidebarHidden} closeModal={closeSidebar}>
-          <Sidebar closeSidebar={closeSidebar} />
-        </SideModal>
-      )} */}
-      <Topbar openSidebar={openSidebar} />
-      {breadcrumbPathList.length > 1 && <Breadcrumb pathList={breadcrumbPathList} />}
-      <Main isBreadCrumb={!!(breadcrumbPathList.length > 1)}>
-        <Outlet />
-      </Main>
-      <Footer />
+      <Outlet />
     </PageLayout>
   );
 };

frontend/src/components/layouts/Main/index.tsx

@@ -3,12 +3,12 @@ import { EssentialPropsWithChildren } from '@/types';
 import * as S from './styles';
 
 interface MainProps {
-  isBreadCrumb?: boolean;
+  isShowBreadCrumb?: boolean;
 }
 
-const Main = ({ children, isBreadCrumb }: EssentialPropsWithChildren<MainProps>) => {
+const Main = ({ children, isShowBreadCrumb }: EssentialPropsWithChildren<MainProps>) => {
   return (
-    <S.MainContainer $isBreadCrumb={isBreadCrumb}>
+    <S.MainContainer $isShowBreadCrumb={isShowBreadCrumb}>
       <S.Contents>{children}</S.Contents>
     </S.MainContainer>
   );

frontend/src/components/layouts/Main/styles.ts

@@ -2,12 +2,12 @@ import { css, Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 interface MainContainerProps {
-  $isBreadCrumb?: boolean;
+  $isShowBreadCrumb?: boolean;
 }
-const calculateMinHeight = ({ $isBreadCrumb, ...theme }: MainContainerProps & Theme) => {
+const calculateMinHeight = ({ $isShowBreadCrumb, ...theme }: MainContainerProps & Theme) => {
   const topbarHeight = theme.componentHeight.topbar;
   const footerHeight = theme.componentHeight.footer;
-  const breadCrumbHeight = $isBreadCrumb ? theme.componentHeight.breadCrumb : '0rem';
+  const breadCrumbHeight = $isShowBreadCrumb ? theme.componentHeight.breadCrumb : '0rem';
 
   return `calc(100vh - ${topbarHeight} - ${footerHeight} - ${breadCrumbHeight})`;
 };
@@ -17,7 +17,7 @@ export const MainContainer = styled.div<MainContainerProps>`
   align-items: center;
   justify-content: center;
 
-  min-height: ${({ theme, $isBreadCrumb }) => css(calculateMinHeight({ $isBreadCrumb, ...theme }))};
+  min-height: ${({ theme, $isShowBreadCrumb }) => css(calculateMinHeight({ $isShowBreadCrumb, ...theme }))};
   margin-bottom: ${({ theme }) => theme.componentHeight.footer};
 `;
 

frontend/src/components/layouts/PageLayout/index.tsx

@@ -1,13 +1,29 @@
-import { PropsWithChildren } from 'react';
-
 import { TopButton } from '@/components/common';
+import Breadcrumb from '@/components/common/Breadcrumb';
+import useBreadcrumbPaths from '@/hooks/useBreadcrumbPaths';
+import { EssentialPropsWithChildren } from '@/types';
+
+import Footer from '../Footer';
+import Main from '../Main';
+import Topbar from '../Topbar';
 
 import * as S from './styles';
 
-const PageLayout = ({ children }: PropsWithChildren) => {
+interface PageLayoutProps {
+  isNeedBreadCrumb?: boolean;
+}
+const PageLayout = ({ children, isNeedBreadCrumb = true }: EssentialPropsWithChildren<PageLayoutProps>) => {
+  const breadcrumbPathList = useBreadcrumbPaths();
+  const isShowBreadCrumb = isNeedBreadCrumb && breadcrumbPathList.length > 1;
+
   return (
     <S.Layout>
-      <S.Wrapper>{children}</S.Wrapper>
+      <S.Wrapper>
+        <Topbar />
+        {isShowBreadCrumb && <Breadcrumb pathList={breadcrumbPathList} />}
+        <Main isShowBreadCrumb={isShowBreadCrumb}>{children}</Main>
+        <Footer />
+      </S.Wrapper>
       <TopButton />
     </S.Layout>
   );

frontend/src/components/layouts/Topbar/index.tsx

@@ -1,30 +1,16 @@
-// import UserProfileIcon from '../../../assets/userProfile.svg';
-// import { SearchInput } from '../../common';
-
 import UndraggableWrapper from '@/components/common/UndraggableWrapper';
 
 import Logo from './components/Logo';
-import SidebarOpenButton from './components/SidebarOpenButton';
 import * as S from './styles';
 
-// const USER_SEARCH_PLACE_HOLDER = '사용자를 입력해주세요';
-
-interface TopbarProps {
-  openSidebar: () => void;
-}
-const Topbar = ({ openSidebar }: TopbarProps) => {
+const Topbar = () => {
   return (
     <S.Layout>
       <S.Container>
-        {/* <SidebarOpenButton openSidebar={openSidebar} /> */}
         <UndraggableWrapper>
           <Logo />
         </UndraggableWrapper>
       </S.Container>
-      <S.Container>
-        {/* <SearchInput $width="30rem" $height="3.6rem" placeholder={USER_SEARCH_PLACE_HOLDER} /> */}
-        {/* <S.UserProfile src={UserProfileIcon} alt="로그인한 사용자 깃허브 프로필" /> */}
-      </S.Container>
     </S.Layout>
   );
 };

frontend/src/components/layouts/index.tsx

@@ -1,5 +1,4 @@
 export { default as Main } from './Main';
 export { default as PageLayout } from './PageLayout';
-export { default as Sidebar } from './Sidebar';
 export { default as Topbar } from './Topbar';
 export { default as Footer } from './Footer';

frontend/src/pages/ErrorPage/index.tsx

@@ -1,32 +1,22 @@
 import { useNavigate } from 'react-router';
 
-import { Main, PageLayout, SideModal, Sidebar, Topbar, ErrorSection } from '@/components';
+import { PageLayout, ErrorSection } from '@/components';
 import { ROUTE_ERROR_MESSAGE } from '@/constants';
-import { useSidebar } from '@/hooks';
 
 const ErrorPage = () => {
-  const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar();
   const navigate = useNavigate();
 
   const handleReload = () => {
     navigate(0);
   };
 
   const handleGoHome = () => {
-    navigate('/'); // TODO: 홈 페이지 경로가 결정되면 변경 필요
+    navigate('/');
   };
 
   return (
-    <PageLayout>
-      {isSidebarModalOpen && (
-        <SideModal isSidebarHidden={isSidebarHidden} closeModal={closeSidebar}>
-          <Sidebar closeSidebar={closeSidebar} />
-        </SideModal>
-      )}
-      <Topbar openSidebar={openSidebar} />
-      <Main>
-        <ErrorSection errorMessage={ROUTE_ERROR_MESSAGE} handleReload={handleReload} handleGoHome={handleGoHome} />
-      </Main>
+    <PageLayout isNeedBreadCrumb={false}>
+      <ErrorSection errorMessage={ROUTE_ERROR_MESSAGE} handleReload={handleReload} handleGoHome={handleGoHome} />
     </PageLayout>
   );
 };

frontend/src/styles/theme.ts

@@ -13,7 +13,7 @@ export const sidebarWidth: ThemeProperty<string> = {
 export const componentHeight = {
   footer: '6rem',
   topbar: '7rem',
-  breadCrumb: '43rem',
+  breadCrumb: '4.3rem',
 };
 
 export const breakpoints: ThemeProperty<string> = {