라우터 구조 변경 (중첩 라우틱 적용, 레이아웃 믹스인 포함)

src/apis/climbing.ts

@@ -1,10 +1,6 @@
 import { AxiosResponse } from 'axios';
 import { authClient } from '@src/apis/index';
-import {
-  Climbing,
-  ClimbingResponse,
-  ReviewEmojiResponse,
-} from '@src/types/apis/climbing.d';
+import { Climbing } from '@src/types/climbing';
 
 const CLIMB_BASE_URL = '/climbs';
 const buildClimbUrl = (path: string = '') => `${CLIMB_BASE_URL}${path}`;

src/components/channel/SearchBottomsheet.tsx

@@ -3,7 +3,7 @@ import type { GetBookListRes } from '@src/types/apis/book';
 import { useState } from 'react';
 import useBook from '@src/hooks/query/useBook';
 import styled from 'styled-components';
-import { NoDataTextLayout } from '@src/styles/mixins';
+// import { NoDataTextLayout } from '@src/styles/mixins';
 import BookinfoItem from '@src/components/book/BookinfoItem';
 import { ReactComponent as IcnSearch } from '@src/assets/icons/md_outline_search.svg';
 

src/components/communityinfosetting/CommunityInfoSection.tsx

@@ -1,4 +1,3 @@
-import TitleAndFieldContainer from '@src/components/common/TitleAndFieldContainer';
 import CommunityInfoCard from '@src/components/common/CommunityInfoCard';
 
 export interface CommunityInfoProps {
@@ -18,15 +17,15 @@ const CommunityInfoSection = ({
 }: CommunityInfoProps) => {
   const subtitle = '공동체 정보';
   return (
-    <TitleAndFieldContainer title={subtitle}>
+    <div title={subtitle}>
       <CommunityInfoCard
         name={name}
         memberInfo={memberInfo}
         creationDate={creationDate}
         description={description}
         imageUrl={serverImg}
       />
-    </TitleAndFieldContainer>
+    </div>
   );
 };
 

src/components/communityinfosetting/CommunitySettingSection.tsx

@@ -1,10 +1,9 @@
 import CommunityButton from '@src/components/common/IconButton';
-import TitleAndFieldContainer from '@src/components/common/TitleAndFieldContainer';
 
 const CommunitySettingSection = ({ isOwner }: { isOwner?: boolean }) => {
   const subtitle = '공동체 설정';
   return (
-    <TitleAndFieldContainer title={subtitle}>
+    <div title={subtitle}>
       {isOwner && (
         <>
           <CommunityButton
@@ -26,7 +25,7 @@ const CommunitySettingSection = ({ isOwner }: { isOwner?: boolean }) => {
           onClick={() => alert('leaveCommunity')}
         />
       )}
-    </TitleAndFieldContainer>
+    </div>
   );
 };
 

src/components/communitysidebar/CommunitySideBar.tsx

@@ -1,7 +1,6 @@
 import type { ModalTransition } from '@src/types/modal';
 import styled from 'styled-components';
 import Scrim from '@src/components/common/Scrim';
-import TitleAndFieldContainer from '@src/components/common/TitleAndFieldContainer';
 import CommunityButton from '@src/components/common/IconButton';
 import { ReactComponent as BiCrown } from '@src/assets/icons/bi_crown.svg';
 import useCopyToClipboard from '@src/hooks/useCopyToClipboard';
@@ -52,16 +51,14 @@ const CommunitySideBar = () => {
           <img src={serverInfo?.serverImg ?? ''} alt='server profile' />
           <span>{serverInfo?.name}</span>
         </CommunityTitleContainer>
-        <TitleAndFieldContainer title='공동체 기능'>
+        <div title='공동체 기능'>
           <CommunityButton
             type='detailInfoSetting'
             onClick={handleClickInfoSetting}
           />
           <CommunityButton type='copyInvitation' onClick={handleCopy} />
-        </TitleAndFieldContainer>
-        <TitleAndFieldContainer
-          title={`멤버 목록 (${serverInfo?.memberCount})`}
-        >
+        </div>
+        <div title={`멤버 목록 (${serverInfo?.memberCount})`}>
           <MemberListContainer>
             {memberList?.members.map((member) => (
               <MemberItem
@@ -86,7 +83,7 @@ const CommunitySideBar = () => {
               </MemberItem>
             ))}
           </MemberListContainer>
-        </TitleAndFieldContainer>
+        </div>
       </SideBarContainer>
     </Scrim>
   );

src/pages/addcommunity/CreateNewCommunityPage.tsx

@@ -1,14 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Header from '@src/components/common/Header';
-import TitleAndFieldContainer from '@src/components/common/TitleAndFieldContainer';
-import InputField from '@src/components/common/InputField';
-import TextAreaField from '@src/components/common/TextAreaField';
 import Button from '@src/components/common/Button';
 import ImageUploadField from '@src/components/addcommunity/ImageUploadField';
 import { postServer } from '@src/apis/server';
 import { useMutation } from '@tanstack/react-query';
-import useToast from '@src/hooks/useToast';
 import { useNavigate } from 'react-router-dom';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import { encodeId } from '@src/utils/formatters';
@@ -22,7 +18,7 @@ const CreateNewCommunityPage = () => {
   const [communityDescription, setCommunityDescription] = useState<string>('');
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
 
-  const addToast = useToast();
+  // const addToast = useToast();
 
   const navigate = useNavigate();
 
@@ -33,7 +29,7 @@ const CreateNewCommunityPage = () => {
       serverImg: File | null;
     }) => postServer(data),
     onSuccess: (response) => {
-      addToast({ content: '공동체 생성 완료' });
+      // addToast({ content: '공동체 생성 완료' });
       setCommunityName('');
       setCommunityImage(null);
       setCommunityDescription('');
@@ -79,31 +75,31 @@ const CreateNewCommunityPage = () => {
       <Header text={headerText} headerType={headerType} />
       <Main>
         <div className='scroll-area'>
-          <TitleAndFieldContainer title='공동체 이름'>
-            <InputField
+          <div title='공동체 이름'>
+            <input
               value={communityName}
               placeholder='공동체 이름을 입력하세요'
               maxLength={20}
               onChange={handleNameChange}
             />
-          </TitleAndFieldContainer>
-          <TitleAndFieldContainer title='공동체 사진'>
+          </div>
+          <div title='공동체 사진'>
             <ImageUploadField
               previewImg={
                 communityImage ? URL.createObjectURL(communityImage) : ''
               }
               onFileChange={handleFileUpload}
             />
-          </TitleAndFieldContainer>
-          <TitleAndFieldContainer title='공동체 소개'>
-            <TextAreaField
+          </div>
+          <div title='공동체 소개'>
+            <textarea
               value={communityDescription}
               placeholder='사람들에게 공동체에 대해 조금 더 알려주세요.'
               maxLength={200}
               rows={6}
               onChange={handleDescriptionChange}
             />
-          </TitleAndFieldContainer>
+          </div>
         </div>
         <Button
           type='submit'
@@ -120,12 +116,11 @@ const CreateNewCommunityPage = () => {
 export default CreateNewCommunityPage;
 
 const Main = styled.main`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.25rem;
-  padding: 1.875rem 1.25rem 0;
-  width: 100%;
-  height: calc(100svh - 4.375rem);
-  background-color: ${({ theme }) => theme.colors.neutral50};
+  // display: flex;
+  // flex-direction: column;
+  // align-items: center;
+  // gap: 1.25rem;
+  // padding: 1.875rem 1.25rem 0;
+  // width: 100%;
+  // background-color: ${({ theme }) => theme.colors.neutral50};
 `;

src/pages/addcommunity/EnterInvitationPage.tsx

@@ -1,7 +1,5 @@
 import Header from '@src/components/common/Header';
 import styled from 'styled-components';
-import TitleAndFieldContainer from '@src/components/common/TitleAndFieldContainer';
-import InputField from '@src/components/common/InputField';
 import Button from '@src/components/common/Button';
 import React, { useEffect, useState } from 'react';
 import IntroSection from '@src/components/addcommunity/IntroSection';
@@ -50,8 +48,8 @@ const EnterInvitationPage = () => {
       <Main>
         <div className='scroll-area'>
           <IntroSection title={introTitleText} bodyLines={introBodyLines} />
-          <TitleAndFieldContainer title='초대 코드'>
-            <InputField
+          <div title='초대 코드'>
+            <input
               type='text'
               value={invitationCode}
               placeholder='초대장을 입력하세요.'
@@ -62,7 +60,7 @@ const EnterInvitationPage = () => {
                 초대 코드는 숫자와 영어 소문자를 혼합한 10-12자리입니다.
               </span>
             )}
-          </TitleAndFieldContainer>
+          </div>
         </div>
         <Button
           type='submit'

src/pages/book/RecordListPage.tsx

@@ -2,7 +2,7 @@ import type Record from '@src/types/record';
 import useRecord from '@src/hooks/query/useRecord';
 import { useState } from 'react';
 import styled from 'styled-components';
-import { NoDataTextLayout } from '@src/styles/mixins';
+// import { NoDataTextLayout } from '@src/styles/mixins';
 import Header from '@src/components/common/Header';
 import Li from '@src/components/book/RecordListItem';
 

src/pages/book/ReviewListPage.tsx

@@ -1,6 +1,6 @@
 import useRecord from '@src/hooks/query/useRecord';
 import styled from 'styled-components';
-import { NoDataTextLayout } from '@src/styles/mixins';
+// import { NoDataTextLayout } from '@src/styles/mixins';
 import Header from '@src/components/common/Header';
 import ReviewItem from '@src/components/book/ReviewItem';
 

src/pages/book/SearchPage.tsx

@@ -3,15 +3,16 @@ import { useNavigate, createSearchParams, useLocation } from 'react-router-dom';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import useBook from '@src/hooks/query/useBook';
 import styled from 'styled-components';
-import { NoDataTextLayout } from '@src/styles/mixins';
+// import { NoDataTextLayout } from '@src/styles/mixins';
 import BookinfoItem from '@src/components/book/BookinfoItem';
 import { ReactComponent as IcnSearch } from '@src/assets/icons/md_outline_search.svg';
 import { ReactComponent as IcnClose } from '@src/assets/icons/ck_close.svg';
 
 const SearchPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const keyword: string = new URLSearchParams(location.search).get('keyword') ?? '';
+  const keyword: string =
+    new URLSearchParams(location.search).get('keyword') ?? '';
 
   // API 요청
   const { bookList } = useBook({ keyword });

src/pages/communityinfosetting/CommunityInfoSettingPage.tsx

@@ -6,7 +6,6 @@ import styled from 'styled-components';
 import Header from '@src/components/common/Header';
 import CommunitySettingSection from '@src/components/communityinfosetting/CommunitySettingSection';
 import { useQuery } from '@tanstack/react-query';
-import { Server } from '@src/types/apis/server.d';
 import { AxiosError } from 'axios';
 import { getServerOne } from '@src/apis/server';
 import useLoaderData from '@src/hooks/useRoaderData';

src/router/RootLayout.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Bottomsheet from '@src/components/common/Bottomsheet';
+import Dialog from '@src/components/common/Dialog';
+import CommunitySideBar from '@src/components/communitysidebar/CommunitySideBar';
+import RootErrorBoundary from '@src/components/errorBoundary/RootErrorBoundary';
+import ErrorCatcher from '@src/components/errorBoundary/ErrorCatcher';
+import QueryClientBoundary from '@src/components/queryClient/QueryClientBoundary';
+import LoadingPage from '@src/pages/fallback/LoadingPage';
+
+export const RootLayout = () => (
+  <QueryClientBoundary>
+    <RootErrorBoundary>
+      <ErrorCatcher>
+        <React.Suspense fallback={<LoadingPage />}>
+          <Outlet />
+          <Bottomsheet />
+          <Dialog />
+          <CommunitySideBar />
+        </React.Suspense>
+      </ErrorCatcher>
+    </RootErrorBoundary>
+  </QueryClientBoundary>
+);

src/router/Router.tsx

@@ -1,14 +1,9 @@
-import React, { Suspense } from 'react';
-import { createBrowserRouter, Outlet } from 'react-router-dom';
+import React from 'react';
+import { createBrowserRouter } from 'react-router-dom';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import { checkAuthLoader, isParamLoader } from '@src/router/loader';
-import Bottomsheet from '@src/components/common/Bottomsheet';
-import Dialog from '@src/components/common/Dialog';
-import CommunitySideBar from '@src/components/communitysidebar/CommunitySideBar';
-import RootErrorBoundary from '@src/components/errorBoundary/RootErrorBoundary';
-import ErrorCatcher from '@src/components/errorBoundary/ErrorCatcher';
-import LoadingPage from '@src/pages/fallback/LoadingPage';
-import QueryClientBoundary from '@src/components/queryClient/QueryClientBoundary';
+import { RootLayout } from '@src/router/RootLayout';
+import { BottomButtonLayout, NoDataTextLayout } from '@src/styles/Layout';
 
 /* example */
 const RouterExamplePage = React.lazy(
@@ -102,24 +97,30 @@ const CommunityInfoSettingPage = React.lazy(
 
 const router = createBrowserRouter([
   {
-    element: (
-      <QueryClientBoundary>
-        <RootErrorBoundary>
-          <ErrorCatcher>
-            <Suspense fallback={<LoadingPage />}>
-              <Outlet />
-              <Bottomsheet />
-              <Dialog />
-              <CommunitySideBar />
-            </Suspense>
-          </ErrorCatcher>
-        </RootErrorBoundary>
-      </QueryClientBoundary>
-    ),
-    errorElement: <h1>Error</h1>,
+    element: <RootLayout />,
     loader: checkAuthLoader,
     children: [
-      /* example */
+      {
+        /* Button이 잇는 경우 Layout */
+        element: <BottomButtonLayout />,
+        children: [
+          {
+            path: ROUTE_PATH.createServer,
+            element: <CreateNewCommunityPage />,
+          },
+        ],
+      },
+      {
+        /* 데이터가 없는 경우 Layout */
+        element: <NoDataTextLayout />,
+        children: [
+          {
+            path: ROUTE_PATH.libraryBookSearch,
+            element: <SearchPage />,
+          },
+        ],
+      },
+      /* 이외의 경우 */
       {
         path: ROUTE_PATH.example,
         element: <RouterExamplePage />,
@@ -152,10 +153,7 @@ const router = createBrowserRouter([
         element: <LibraryHomePage />,
         loader: (args) => isParamLoader(args, 'memberId'),
       },
-      {
-        path: ROUTE_PATH.libraryBookSearch,
-        element: <SearchPage />,
-      },
+
       {
         path: ROUTE_PATH.libraryRecord,
         element: <RecordListPage />,