Feat: complete trip space page

src/chakra/chakraCustomTheme.ts

@@ -61,7 +61,7 @@ export const customTheme = extendTheme({
 
         "&__current-month": {
           display: "flex",
-          paddingLeft: "5.5rem",
+          paddingLeft: "calc((100% - 30rem)/2)",
           fontSize: "1.6rem",
           fontStyle: "normal",
           fontWeight: "700",

src/components/GlobalNavigationBar/GlobalNavigationBar.tsx

@@ -14,10 +14,10 @@ function GlobalNavigationBar() {
       <Link to="/">
         <AiOutlineHome fontSize="24px" color={!pathname && "#0086ff"} />
       </Link>
-      <Link to="/carryout">
+      <Link to="/trip">
         <AiOutlineCarryOut
           fontSize="24px"
-          color={pathname === "carryout" && "#0086ff"}
+          color={pathname === "trip" && "#0086ff"}
         />
       </Link>
       <Link to="/heart">

src/components/TripSpace/EditTripSpace/EditTripSpace.tsx

@@ -0,0 +1,32 @@
+import { useDisclosure } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+
+import styles from "./EditTripSpace.module.scss";
+
+import LeaveTripModal from "../LeaveTripModal/LeaveTripModal";
+
+function EditTripSpace() {
+  const navigate = useNavigate();
+  const {
+    isOpen: isModalOpen,
+    onOpen: onModalOpen,
+    onClose: onModalClose,
+  } = useDisclosure();
+
+  return (
+    <>
+      <div className={styles.ContentContainer}>
+        <button onClick={() => navigate("/trip/selectRegion")}>
+          여행도시 편집
+        </button>
+        <button onClick={() => navigate("/trip/selectDate")}>
+          여행날짜 수정
+        </button>
+        <button onClick={onModalOpen}>여행 나가기</button>
+      </div>
+      <LeaveTripModal isOpen={isModalOpen} onClose={onModalClose} />
+    </>
+  );
+}
+
+export default EditTripSpace;

src/components/TripSpace/LeaveTripModal/LeaveTripModal.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@chakra-ui/react";
+
+import { LeaveTripModalProps } from "@/types/modal";
+
+function LeaveTripModal({ isOpen, onClose }: LeaveTripModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
+      <ModalContent
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        gap="1.2rem"
+        borderRadius="16px"
+        bg="neutral.0"
+        p="32px"
+      >
+        <ModalHeader
+          fontSize="subTitle"
+          fontWeight="subTitle"
+          lineHeight="subTitle"
+          color="neutral.900"
+          p="0"
+        >
+          여행을 나가시겠어요?
+        </ModalHeader>
+        <ModalBody
+          fontSize="tabLabel"
+          fontWeight="tabLabel"
+          lineHeight="tabLabel"
+          color="neutral.400"
+          p="0"
+        >
+          <p>동행의 초대없이 다시 참여가 불가능합니다</p>
+        </ModalBody>
+        <ModalFooter display="flex" gap="8rem" p="0" mt="1.2rem">
+          <Button
+            variant="none"
+            fontSize="button"
+            fontWeight="button"
+            lineHeight="button"
+            color="neutral.400"
+            onClick={onClose}
+          >
+            취소
+          </Button>
+          <Button
+            variant="none"
+            fontSize="button"
+            fontWeight="button"
+            lineHeight="button"
+            color="primary.400"
+          >
+            확인
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default LeaveTripModal;

src/components/TripSpace/SelectHeader/SelectHeader.module.scss

@@ -1,6 +1,6 @@
 @use "@/sass" as *;
 
-header {
+.titleHeader {
   background-color: $neutral0;
   width: 100%;
   max-width: 45rem;

src/components/TripSpace/SelectHeader/SelectHeader.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import "./SelectHeader.module.scss";
+import styles from "./SelectHeader.module.scss";
 
 import BackIcon from "@/assets/back.svg?react";
 
@@ -10,7 +10,7 @@ function SelectHeader({ title }: SelectHeaderProps) {
   const navigate = useNavigate();
 
   return (
-    <header>
+    <header className={styles.titleHeader}>
       <nav>
         <button onClick={() => navigate(-1)}>
           <BackIcon />

src/components/TripSpace/CalendarModal/CalendarModal.module.scss → src/pages/Calendar/Calendar.module.scss

@@ -18,7 +18,8 @@
 
     .dateChoice {
       display: flex;
-      padding: 20px 60px;
+      padding: 22px 0;
+      padding-left: calc((100% - 32.7rem) / 2);
       align-items: center;
       gap: 8px;
 

src/components/TripSpace/CalendarModal/CalendarModal.tsx → src/pages/Calendar/Calendar.tsx

@@ -6,13 +6,13 @@ import DatePicker, { registerLocale } from "react-datepicker";
 import { BsCalendarCheck as CalendarIcon } from "react-icons/bs";
 
 import "react-datepicker/dist/react-datepicker.css";
-import styles from "./CalendarModal.module.scss";
+import styles from "./Calendar.module.scss";
 
-import { printDayNight } from "@/utils/printDayNight";
+import SelectHeader from "@/components/TripSpace/SelectHeader/SelectHeader";
 
-import SelectHeader from "../SelectHeader/SelectHeader";
+import { printDayNight } from "@/utils/printDayNight";
 
-function CalendarModal() {
+function Calendar() {
   registerLocale("ko", ko);
   const today = new Date();
   const [startDate, setStartDate] = useState<Date | null>(null);
@@ -83,4 +83,4 @@ function CalendarModal() {
   );
 }
 
-export default CalendarModal;
+export default Calendar;

src/pages/RegionSearch/RegionSearch.module.scss

@@ -19,12 +19,12 @@
     transition: all 0.5s;
   }
 
-  .contentsContainer {
+  .regionListsContainer {
     width: 100%;
     min-width: 36rem;
     max-width: 45rem;
     height: calc(100vh - 17rem);
-    margin-top: 17rem;
+    // margin-top: 17rem;
     margin-bottom: 15.5rem;
     position: sticky;
     top: 17rem;
@@ -36,7 +36,7 @@
       min-width: 36rem;
       max-width: 45rem;
       height: calc(100vh - 5rem);
-      margin-top: 5rem;
+      // margin-top: 5rem;
       margin-bottom: 15.5rem;
       position: sticky;
       top: 5rem;

src/pages/RegionSearch/RegionSearch.tsx

@@ -108,8 +108,8 @@ function RegionSearch() {
       <div
         className={
           isInputFocused || regionValue
-            ? styles.contentsContainer__focus
-            : styles.contentsContainer
+            ? styles.regionListsContainer__focus
+            : styles.regionListsContainer
         }
       >
         {regions.length ? (

src/pages/Trip/Trip.module.scss

@@ -2,7 +2,8 @@
 
 .container {
   margin-top: 56px;
-  width: 45rem;
+  width: 100%;
+  min-width: 36rem;
   max-width: 45rem;
   background-color: $primary200;
   position: relative;
@@ -21,6 +22,7 @@
   //바텀패딩을 추가해야 탭 보더래디우스 뒤에 색이 보여요,,ㅠ
   .iconTab {
     width: 100%;
+    min-width: 36rem;
     max-width: 45rem;
     padding: 16px 16px 25px;
 
@@ -40,6 +42,7 @@
   .header {
     color: $neutral0;
     width: 100%;
+    min-width: 36rem;
     max-width: 45rem;
     padding-bottom: 5px;
     //position:fixed;

src/pages/Trip/Trip.tsx

@@ -18,7 +18,7 @@ import styles from "./Trip.module.scss";
 
 import BottomSlide from "@/components/BottomSlide/BottomSlide";
 import SlideBar from "@/components/SideBar/SideBar";
-import EditBottomSlideContent from "@/components/TripSpace/EditBottomSlideContent/EditBottomSlideContent";
+import EditTripSpace from "@/components/TripSpace/EditTripSpace/EditTripSpace";
 import FriendList from "@/components/TripSpace/FriendList/FriendList";
 import InviteFriends from "@/components/TripSpace/InviteFriends/InviteFriends";
 import VoteTabPanel from "@/components/VoteTabPanel/VoteTabPanel";
@@ -152,7 +152,7 @@ function Trip() {
         <BottomSlide
           isOpen={isBottomSlideOpen}
           onClose={onBottomSlideClose}
-          children={<EditBottomSlideContent />}
+          children={<EditTripSpace />}
         />
         <BottomSlide
           isOpen={isInviteOpen}

src/routes/MainRouter/MainRouter.tsx

@@ -1,24 +1,25 @@
 import { Route, Routes } from "react-router-dom";
 
 import Alarm from "@/pages/Alarm/Alarm";
+import Calendar from "@/pages/Calendar/Calendar";
 import Detail from "@/pages/Detail/Detail";
 import Home from "@/pages/Home/Home";
 import Login from "@/pages/Login/Login";
-import Signup from "@/pages/Signup/Signup";
+import RegionSearch from "@/pages/RegionSearch/RegionSearch";
 import SearchFromHome from "@/pages/SearchFromHome/SearchFromHome";
 import AgreePrivacy from "@/pages/Signup/Agree/AgreePrivacy";
 import AgreeService from "@/pages/Signup/Agree/AgreeService";
+import Signup from "@/pages/Signup/Signup";
 import Trip from "@/pages/Trip/Trip";
 import Vote from "@/pages/Vote/Vote";
 import Dashboard from "@/routes/Dashboard/Dashboard";
 
-
 function MainRouter() {
   return (
     <Routes>
       <Route element={<Dashboard />}>
         <Route index element={<Home />} />
-        <Route path="/carryout" element={<Trip />} />
+        <Route path="/trip" element={<Trip />} />
         <Route path="/heart" element={<Home />} />
         <Route path="/user" element={<Home />} />
       </Route>
@@ -30,6 +31,8 @@ function MainRouter() {
       <Route path="/signup/agreeService" element={<AgreeService />} />
       <Route path="/alarm" element={<Alarm />} />
       <Route path="/home/search" element={<SearchFromHome />} />
+      <Route path="/trip/selectDate" element={<Calendar />} />
+      <Route path="/trip/selectRegion" element={<RegionSearch />} />
     </Routes>
   );
 }

src/types/modal.ts

@@ -0,0 +1,7 @@
+export interface ModalProps {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export type LeaveTripModalProps = Omit<ModalProps, "onOpen">;