[Feature] - 여행기 및 여행 계획 수정 페이지 구현

frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx

@@ -9,6 +9,8 @@ import { Input } from "@components/common/Input/Input.styled";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
+import { extractLastPath } from "@utils/extractId";
+
 import Header from "../Header";
 import * as S from "./SearchHeader.styled";
 
@@ -21,7 +23,7 @@ const SearchHeader = () => {
 
   const encodedKeyword =
     location.pathname.split("/").length > MIN_KEYWORD_LENGTH
-      ? location.pathname.split("/").pop()
+      ? extractLastPath(location.pathname)
       : "";
 
   const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : "";

frontend/src/components/common/ModalBottomSheet/BackDrop/BackDrop.styled.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 
 export const BackDrop = styled.div`
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: ${({ theme }) => theme.zIndex.overlay};
 

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

@@ -22,6 +22,8 @@ export const Default: Story = {
   args: {
     mainText: "여행기를 등록할까요?",
     subText: "등록한 후에도 다시 여행기를 수정할 수 있어요.",
+    secondaryButtonLabel: "취소",
+    primaryButtonLabel: "확인",
     isOpen: true,
     onClose: () => {},
     onConfirm: () => {},

frontend/src/components/common/ModalBottomSheet/ModalBottomSheet.tsx

@@ -11,6 +11,8 @@ export interface ModalBottomSheetProps {
   mainText: string;
   subText: string;
   isOpen: boolean;
+  primaryButtonLabel: string;
+  secondaryButtonLabel: string;
   onClose: () => void;
   onConfirm: () => void;
 }
@@ -19,6 +21,8 @@ const ModalBottomSheet = ({
   mainText,
   subText,
   isOpen,
+  primaryButtonLabel,
+  secondaryButtonLabel,
   onClose,
   onConfirm,
 }: ModalBottomSheetProps) => {
@@ -32,10 +36,10 @@ const ModalBottomSheet = ({
         <Content mainText={mainText} subText={subText} />
         <Footer>
           <Button variants="secondary" onClick={onClose}>
-            취소
+            {secondaryButtonLabel}
           </Button>
           <Button variants="primary" onClick={onConfirm}>
-            확인
+            {primaryButtonLabel}
           </Button>
         </Footer>
       </Container>

frontend/src/components/pages/search/fallback/SearchFallback.styled.ts → frontend/src/components/common/SearchFallback/SearchFallback.styled.ts

@@ -1,17 +1,24 @@
 import styled from "@emotion/styled";
 
+import { SPACING } from "@styles/tokens";
+
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - 6rem);
-  gap: ${({ theme }) => theme.spacing.l};
+  gap: ${SPACING.l};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 100%;
 `;
 
 export const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: ${({ theme }) => theme.spacing.m};
+  gap: ${SPACING.m};
 `;

frontend/src/components/common/index.ts

@@ -25,3 +25,5 @@ export { default as Modal } from "./Modal/Modal";
 export * from "./Header/index";
 export { default as Checkbox } from "./Checkbox/Checkbox";
 export { default as Chip } from "./Chip/Chip";
+export { default as SearchFallback } from "./SearchFallback/SearchFallback";
+export { default as FloatingButton } from "./FloatingButton/FloatingButton";

frontend/src/components/layout/AppLayout/AppLayout.tsx

@@ -4,6 +4,8 @@ import { DefaultHeader, HomePageHeader, SearchHeader } from "@components/common"
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
+import { extractLastPath } from "@utils/extractId";
+
 import * as S from "./AppLayout.styled";
 
 const MIN_KEYWORD_LENGTH = 2;
@@ -13,9 +15,7 @@ const AppLayout = () => {
   const pathName = location.pathname;
 
   const encodedKeyword =
-    location.pathname.split("/").length > MIN_KEYWORD_LENGTH
-      ? location.pathname.split("/").pop()
-      : "";
+    location.pathname.split("/").length > MIN_KEYWORD_LENGTH ? extractLastPath(pathName) : "";
   const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : "";
 
   const getHeader = (pathName: string) => {

frontend/src/components/pages/main/MainPage.styled.ts

@@ -10,6 +10,7 @@ export const MainPageContentContainer = styled.div`
 
   margin-top: ${SPACING.m};
   padding: ${SPACING.m};
+  min-height: calc(100vh - 7.6rem);
 `;
 
 export const MainPageHeaderContainer = styled.div`
@@ -19,9 +20,16 @@ export const MainPageHeaderContainer = styled.div`
   gap: ${SPACING.s};
 `;
 
+export const SearchFallbackWrapper = styled.div`
+  flex: 1;
+  position: relative;
+`;
+
 export const MainPageTraveloguesList = styled.ul`
   display: flex;
+  flex: 1;
   flex-direction: column;
+  justify-content: center;
 
   gap: ${SPACING.m};
 `;

frontend/src/components/pages/main/MainPage.tsx

@@ -2,14 +2,15 @@ import { css } from "@emotion/react";
 
 import useInfiniteTravelogues from "@queries/useInfiniteTravelogues";
 
-import { Chip, Text } from "@components/common";
-import FloatingButton from "@components/common/FloatingButton/FloatingButton";
+import { Chip, FloatingButton, SearchFallback, Text } from "@components/common";
 import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard";
 
 import { useDragScroll } from "@hooks/useDragScroll";
 import useIntersectionObserver from "@hooks/useIntersectionObserver";
 import useTagSelection from "@hooks/useTagSelection";
 
+import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
+
 import * as S from "./MainPage.styled";
 import TravelogueCardSkeleton from "./TravelogueCard/skeleton/TravelogueCardSkeleton";
 
@@ -25,12 +26,14 @@ const MainPage = () => {
 
   const { lastElementRef } = useIntersectionObserver(fetchNextPage);
 
+  const hasTravelogue = travelogues.length > 0;
+
   return (
     <S.MainPageContentContainer>
       <S.MainPageHeaderContainer>
         <Text textType="title">지금 뜨고 있는 여행기</Text>
         <Text textType="detail" css={S.subTitleColorStyle}>
-          다른 이들의 여행을 한 번 구경해보세요.
+          {`다른 이들의 여행을 한 번 구경해보세요. (태그는 최대 ${FORM_VALIDATIONS_MAP.tags.maxCount}개까지 가능해요!)`}
         </Text>
       </S.MainPageHeaderContainer>
 
@@ -58,21 +61,27 @@ const MainPage = () => {
         </S.MainPageTraveloguesList>
       )}
       <S.MainPageTraveloguesList>
-        {travelogues.map(
-          ({ authorProfileUrl, authorNickname, id, title, thumbnail, likeCount, tags }) => (
-            <TravelogueCard
-              key={id}
-              travelogueOverview={{
-                authorProfileUrl,
-                id,
-                title,
-                thumbnail,
-                likeCount,
-                authorNickname,
-                tags,
-              }}
-            />
-          ),
+        {hasTravelogue ? (
+          travelogues.map(
+            ({ authorProfileUrl, authorNickname, id, title, thumbnail, likeCount, tags }) => (
+              <TravelogueCard
+                key={id}
+                travelogueOverview={{
+                  authorProfileUrl,
+                  id,
+                  title,
+                  thumbnail,
+                  likeCount,
+                  authorNickname,
+                  tags,
+                }}
+              />
+            ),
+          )
+        ) : (
+          <S.SearchFallbackWrapper>
+            <SearchFallback title="휑" text="다른 태그를 선택해 주세요!" />
+          </S.SearchFallbackWrapper>
         )}
       </S.MainPageTraveloguesList>
       <FloatingButton />

frontend/src/components/pages/search/SearchPage.styled.ts

@@ -1,24 +1,25 @@
 import styled from "@emotion/styled";
 
+import { SPACING } from "@styles/tokens";
+
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 1.6rem;
+  gap: ${SPACING.m};
 
-  gap: ${({ theme }) => theme.spacing.s};
+  margin-top: ${SPACING.m};
+  min-height: calc(100vh - 6rem);
+  padding: ${SPACING.m};
+`;
 
-  h1 {
-    ${({ theme }) => theme.typography.mobile.title};
-  }
+export const SearchFallbackWrapper = styled.div`
+  flex: 1;
+  position: relative;
 `;
 
 export const MainPageTraveloguesList = styled.ul`
   display: flex;
   flex-direction: column;
 
-  gap: ${({ theme }) => theme.spacing.m};
-`;
-
-export const MainPageContentContainer = styled.div`
-  padding-top: 1.6rem;
+  gap: ${SPACING.m};
 `;

frontend/src/components/pages/search/SearchPage.tsx

@@ -4,22 +4,22 @@ import { css } from "@emotion/react";
 
 import useInfiniteSearchTravelogues from "@queries/useInfiniteSearchTravelogues";
 
-import { Text } from "@components/common";
-import FloatingButton from "@components/common/FloatingButton/FloatingButton";
+import { FloatingButton, SearchFallback, Text } from "@components/common";
 import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard";
 
 import useIntersectionObserver from "@hooks/useIntersectionObserver";
 
+import { extractLastPath } from "@utils/extractId";
+
 import TravelogueCardSkeleton from "../main/TravelogueCard/skeleton/TravelogueCardSkeleton";
 import * as S from "./SearchPage.styled";
-import SearchFallback from "./fallback/SearchFallback";
 
 const SearchPage = () => {
   const SKELETON_COUNT = 5;
 
   const location = useLocation();
   const encodedKeyword =
-    location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : "";
+    location.pathname.split("/").length > 2 ? extractLastPath(location.pathname) : "";
   const keyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : "";
 
   const { travelogues, status, fetchNextPage } = useInfiniteSearchTravelogues(keyword);
@@ -28,18 +28,32 @@ const SearchPage = () => {
 
   if (!keyword) {
     return (
-      <SearchFallback title="보고 싶은 여행기를 검색해주세요!" text="여행기 키워드를 입력해봐요!" />
+      <S.Layout>
+        <S.SearchFallbackWrapper>
+          <SearchFallback
+            title="보고 싶은 여행기를 검색해주세요!"
+            text="여행기 키워드를 입력해봐요!"
+          />
+        </S.SearchFallbackWrapper>
+      </S.Layout>
     );
   }
 
   if (travelogues.length === 0 && status === "success") {
-    return <SearchFallback title="휑" text="검색 결과가 없어요." />;
+    return (
+      <S.Layout>
+        {keyword && <Text textType="title">{`"${keyword}" 검색 결과`}</Text>}
+        <S.SearchFallbackWrapper>
+          <SearchFallback title="휑" text="검색 결과가 없어요." />
+        </S.SearchFallbackWrapper>
+      </S.Layout>
+    );
   }
 
   return (
     <S.Layout>
       <FloatingButton />
-      <S.Layout>{keyword && <Text textType="title">{`"${keyword}" 검색 결과`}</Text>}</S.Layout>
+      {keyword && <Text textType="title">{`"${keyword}" 검색 결과`}</Text>}
       {status === "pending" && (
         <S.MainPageTraveloguesList>
           {Array.from({ length: SKELETON_COUNT }, (_, index) => (