Merge pull request #194 from Strong-Potato/158-feat-add-branch-proces…

…s-in-trip-page Feat: add branch process in trip page
Strong-Potato · Jan 26, 2024 · e5d66c1 · e5d66c1
2 parents 4d6deee + a756c37
commit e5d66c1
Show file tree

Hide file tree

Showing 28 changed files with 676 additions and 338 deletions.
diff --git a/src/api/spaces.ts b/src/api/spaces.ts
@@ -1,7 +1,6 @@
 import axios from 'axios';
 
-import {Region} from '@/types/regionSearch';
-import {SpaceDateParams, SpaceRegionParams, SpaceResponse} from '@/types/route';
+import {ExitSpaceParams, journeyParams, PlaceParams, SpaceDateParams, SpaceRegionParams} from '@/types/route';
 
 export const spacesRequest = {
   getUpcoming: async () => {
@@ -38,16 +37,62 @@ export const spacesRequest = {
   },
 };
 
-// [GET] 지역 리스트
-export const getRegions = async (): Promise<Region[]> => {
+// [GET] 지역 리스트 조회
+export const getRegions = async () => {
   const response = await axios.get(`/api/spaces/city`);
   return response.data.data.cities;
 };
 
-// [GET] 단일 여행 스페이스
-export const getSpace = async (spaceId: number): Promise<SpaceResponse> => {
-  const response = await axios.get(`/api/spaces/${spaceId}`, {withCredentials: true});
-  return response.data;
+// [GET] 단일 여행 스페이스 조회
+export const getSpace = async (spaceId: number) => {
+  try {
+    const response = await axios.get(`/api/spaces/${spaceId}`, {withCredentials: true});
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// [GET] 최근 여행 스페이스 조회
+export const getRecentSpace = async () => {
+  try {
+    const response = await axios.get(`/api/spaces/recent`, {withCredentials: true});
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// [GET] 여행 일정 조회
+export const getJourneys = async (spaceId: number) => {
+  try {
+    const response = await axios.get(`/api/spaces/${spaceId}/journey`, {withCredentials: true});
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// [POST] 일정 추가
+export const postPlaces = async ({spaceId, journeyId, placeIds}: PlaceParams) => {
+  try {
+    const response = await axios.post(`/api/spaces/${spaceId}/places`, {journeyId: journeyId, placeIds: placeIds});
+    console.log('[SUCCESS]', response);
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// [PUT] 일정 수정
+export const putPlaces = async ({spaceId, places}: journeyParams) => {
+  try {
+    const response = await axios.put(`/api/spaces/${spaceId}/places`, {places: places});
+    console.log('[SUCCESS]', response);
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 // [PUT] 지역 선택
@@ -71,3 +116,25 @@ export const putDates = async ({spaceId, startDate, endDate}: SpaceDateParams) =
     console.error(error);
   }
 };
+
+// [PUT] 여행 나가기
+export const putExitSpace = async ({spaceId}: ExitSpaceParams) => {
+  try {
+    const response = await axios.put(`/api/spaces/${spaceId}/exit`);
+    console.log('[SUCCESS]', response);
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// [DELETE] 일정 삭제
+export const deletePlaces = async ({spaceId, places}: journeyParams) => {
+  try {
+    const response = await axios.delete(`/api/spaces/${spaceId}/places`, {params: {places: places}});
+    console.log('[SUCCESS]', response);
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
diff --git a/src/chakra/avatarCustom.ts b/src/chakra/avatarCustom.ts
@@ -1,29 +1,34 @@
-import { avatarAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import {avatarAnatomy} from '@chakra-ui/anatomy';
+import {createMultiStyleConfigHelpers} from '@chakra-ui/react';
 
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(avatarAnatomy.keys);
+const {definePartsStyle, defineMultiStyleConfig} = createMultiStyleConfigHelpers(avatarAnatomy.keys);
 
 const tabsVoteCard = definePartsStyle({
   container: {
-    w: "24px",
-    h: "24px",
-    border: "1px solid #fff",
+    w: '24px',
+    h: '24px',
+    border: '1px solid #fff',
   },
   excessLabel: {
-    w: "39px",
-    h: "24px",
-    borderRadius: "75px",
-    border: "1px solid #2388FF",
-    color: "#2388FF",
-    bg: "#fff",
+    w: '39px',
+    h: '24px',
+    borderRadius: '75px',
+    border: '1px solid #2388FF',
+    color: '#2388FF',
+    bg: '#fff',
 
-    fontSize: "captionSmall",
-    fontWeight: "captionSmall",
-    lineHeight: "captionSmall",
+    fontSize: 'captionSmall',
+    fontWeight: 'captionSmall',
+    lineHeight: 'captionSmall',
+  },
+});
+
+const spaceAvatar = definePartsStyle({
+  excessLabel: {
+    display: 'none !important',
   },
 });
 
 export const avatarTheme = defineMultiStyleConfig({
-  variants: { tabsVoteCard },
+  variants: {tabsVoteCard, spaceAvatar},
 });
diff --git a/src/components/GlobalNavigationBar/GlobalNavigationBar.tsx b/src/components/GlobalNavigationBar/GlobalNavigationBar.tsx
@@ -1,39 +1,27 @@
-import { AiOutlineCarryOut, AiOutlineHome } from "react-icons/ai";
-import { FaRegHeart } from "react-icons/fa";
-import { LuUser2 } from "react-icons/lu";
-import { Link, useLocation } from "react-router-dom";
+import {AiOutlineCarryOut, AiOutlineHome} from 'react-icons/ai';
+import {FaRegHeart} from 'react-icons/fa';
+import {LuUser2} from 'react-icons/lu';
+import {Link, useLocation} from 'react-router-dom';
 
-import styles from "./GlobalNavigationBar.module.scss";
+import styles from './GlobalNavigationBar.module.scss';
 
 function GlobalNavigationBar() {
   const location = useLocation();
-  const pathname = location.pathname.split("/")[1];
+  const pathname = location.pathname.split('/')[1];
 
   return (
     <div className={styles.container}>
-      <Link to="/">
-        <AiOutlineHome
-          fontSize="24px"
-          color={!pathname ? "#0086ff" : "rgba(35, 39, 47, 1)"}
-        />
+      <Link to='/'>
+        <AiOutlineHome fontSize='24px' color={!pathname ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
-      <Link to="/trip/1">
-        <AiOutlineCarryOut
-          fontSize="24px"
-          color={pathname === "trip" ? "#0086ff" : "rgba(35, 39, 47, 1)"}
-        />
+      <Link to='/trip'>
+        <AiOutlineCarryOut fontSize='24px' color={pathname === 'trip' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
-      <Link to="/heart">
-        <FaRegHeart
-          fontSize="24px"
-          color={pathname === "heart" ? "#0086ff" : "rgba(35, 39, 47, 1)"}
-        />
+      <Link to='/heart'>
+        <FaRegHeart fontSize='24px' color={pathname === 'heart' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
-      <Link to="/user">
-        <LuUser2
-          fontSize="24px"
-          color={pathname === "user" ? "#0086ff" : "rgba(35, 39, 47, 1)"}
-        />
+      <Link to='/user'>
+        <LuUser2 fontSize='24px' color={pathname === 'user' ? '#0086ff' : 'rgba(35, 39, 47, 1)'} />
       </Link>
     </div>
   );

diff --git a/src/components/MapZoomIn/RouteMapSlide/RouteMapSlide.tsx b/src/components/MapZoomIn/RouteMapSlide/RouteMapSlide.tsx
@@ -50,9 +50,9 @@ const RouteMapSlide = ({
         breakpoints={{400: {slidesPerView: 1.2}}}
       >
         {journeys[activeDay].places.map((place, j) => (
-          <SwiperSlide key={`${journeys[activeDay].id}-${j}`} className={styles.swiperSlideItem}>
+          <SwiperSlide key={`${journeys[activeDay].journeyId}-${j}`} className={styles.swiperSlideItem}>
             <PlaceCard
-              key={`${journeys[activeDay].id}-${place.id}-${j}`}
+              key={`${journeys[activeDay].journeyId}-${place.selectedId}-${j}`}
               order={j + 1}
               name={place.place.title}
               category={place.place.category}

diff --git a/src/components/Route/DayRoute/DayRoute.tsx b/src/components/Route/DayRoute/DayRoute.tsx
@@ -8,7 +8,7 @@ import styles from './DayRoute.module.scss';
 
 import BottomSlide from '@/components/BottomSlide/BottomSlide';
 
-import {findShortestPath} from '@/utils/optimizePlace';
+import {setRouteDate} from '@/utils/formatDate';
 
 import AddPlace from '../AddPlace/AddPlace';
 import DraggablePlaceCard from '../DraggablePlaceCard/DraggablePlaceCard';
@@ -31,7 +31,7 @@ function DayRoute({day, date, placeList, editMode, selectedPlaces, handlePlaceSe
 
   const findCard = useCallback(
     (id: number) => {
-      const card = placeCards.filter((item) => item.id == id)[0];
+      const card = placeCards.filter((item) => item.selectedId == id)[0];
       return {
         card,
         index: placeCards.indexOf(card),
@@ -58,7 +58,7 @@ function DayRoute({day, date, placeList, editMode, selectedPlaces, handlePlaceSe
   const [, drop] = useDrop(() => ({accept: 'CARD'}));
 
   useEffect(() => {
-    console.log(placeList);
+    console.log('placeList', placeList);
   }, [placeList]);
 
   return (
@@ -67,7 +67,7 @@ function DayRoute({day, date, placeList, editMode, selectedPlaces, handlePlaceSe
         <header className={styles.dayHeader}>
           <div className={styles.dayContainer}>
             <span className={styles.dayTitle}>DAY {day}</span>
-            <span className={styles.dayDate}>{date}</span>
+            <span className={styles.dayDate}>{setRouteDate(date)}</span>
           </div>
           <button className={styles.editButton} onClick={onOpen}>
             <PlusIcon size='2.4rem' />
@@ -81,12 +81,14 @@ function DayRoute({day, date, placeList, editMode, selectedPlaces, handlePlaceSe
             {placeCards.length ? (
               placeCards.map((place) => (
                 <DraggablePlaceCard
-                  key={place.id}
-                  id={place.id}
-                  order={place.Order + 1}
+                  key={place.selectedId}
+                  selectedId={place.selectedId}
+                  order={place.order}
                   name={place.place.title}
                   category={place.place.category}
-                  address={`${place.place.address}, ${place.place.addressDetail}`}
+                  address={`${place.place.address} ${place.place.addressDetail}`}
+                  contentTypeId={place.place.contentTypeId}
+                  placeId={place.place.placeId}
                   editMode={editMode}
                   selectedPlaces={selectedPlaces}
                   onSelect={handlePlaceSelection}
@@ -124,7 +126,7 @@ function DayRoute({day, date, placeList, editMode, selectedPlaces, handlePlaceSe
               <button
                 className={styles.wrapperButton__accept}
                 onClick={() => {
-                  setPlaceCards(findShortestPath(placeList));
+                  // setPlaceCards(findShortestPath(placeList));
                   setIsOptimize(false);
                 }}
               >

diff --git a/src/components/Route/DeletePlacesModal/DeletePlacesModal.tsx b/src/components/Route/DeletePlacesModal/DeletePlacesModal.tsx
@@ -0,0 +1,55 @@
+import {Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay} from '@chakra-ui/react';
+
+import {DeletePlacesModalProps} from '@/types/modal';
+
+function DeletePlacesModal({isOpen, onClose, placeList}: DeletePlacesModalProps) {
+  const deletePlaces = () => {
+    console.log('삭제', placeList);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size='lg' isCentered>
+      <ModalOverlay />
+      <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
+            onClick={deletePlaces}
+            variant='none'
+            fontSize='button'
+            fontWeight='button'
+            lineHeight='button'
+            color='primary.400'
+          >
+            삭제하기
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default DeletePlacesModal;