Merge branch 'dev' of https://github.com/Strong-Potato/TripVote-FE in…

…to 153-design-change-a-map-pin-in-vote-page

package.json

@@ -30,6 +30,7 @@
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
+    "react-intersection-observer": "^9.5.3",
     "react-kakao-maps-sdk": "^1.1.24",
     "react-mobile-datepicker": "^4.0.2",
     "react-router-dom": "^6.21.1",

src/App.tsx

@@ -12,7 +12,6 @@ import MainRouter from './routes/MainRouter/MainRouter';
 window.Kakao.init(import.meta.env.VITE_KAKAO_KEY);
 
 const queryClient = new QueryClient();
-
 queryClient.setDefaultOptions({
   queries: {
     refetchOnWindowFocus: false,

src/api/auth.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+export const authRequest = {
+  withdrawal: async (password?: string) =>
+    await axios.post(
+      '/api/members/sign-out',
+      {
+        password,
+      },
+      {withCredentials: true},
+    ),
+};

src/api/detail.ts

@@ -1,6 +1,7 @@
-import {MySpaces, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes, placeInfoData} from '@/types/detail';
 import axios from 'axios';
 
+import {MySpaces, placeInfoData, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes} from '@/types/detail';
+
 // --------------------------- GET ---------------------------
 
 export const getPlaceInfo = async (id: number, typeId: number): Promise<placeInfoData> => {
@@ -27,13 +28,10 @@ export const getReviews = async (id: number, typeId: number, title: string): Pro
   return response.data;
 };
 
-export const getIsWish = async (id: number, setIsWish: React.Dispatch<React.SetStateAction<boolean>>) => {
+export const getIsWish = async (id: number) => {
   const response = await axios.get(`/api/wishes/${id}`, {
     withCredentials: true,
   });
-
-  setIsWish(response.data.data);
-
   console.log(response.data);
 
   return response.data;

src/api/review.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export const reviewRequest = {
+  getMyReview: async ({pageParam}: {pageParam: number}) => {
+    try {
+      const res = await axios.get('/api/members/my-reviews', {
+        params: {
+          size: 5,
+          page: pageParam,
+        },
+        withCredentials: true,
+      });
+      console.log(res);
+
+      return res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+};

src/api/s3.ts

@@ -24,12 +24,12 @@ export const s3Request = {
     }
   },
 
-  uploadImages: async (images: FileList[]) => {
+  uploadImages: async (images: File[]) => {
     try {
       // 이미지 당 presigned url 발급
       const res = await axios.post(
         '/api/s3/presigned',
-        images.map((image) => image[0].name),
+        images.map((image) => image.name),
       );
       const presignedUrls = await res.data.data.elements.map((element: PresignedUrlElement) => element.preSignedUrl);
       console.log('api/s3/presigned response', res);

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 () => {
@@ -13,6 +12,21 @@ export const spacesRequest = {
     }
   },
 
+  getOutdated: async ({pageParam}: {pageParam: number}) => {
+    try {
+      const res = await axios.get('/api/members/my-spaces/outdated', {
+        params: {
+          size: 5,
+          page: pageParam,
+        },
+        withCredentials: true,
+      });
+      return res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+
   post: async () => {
     try {
       const res = await axios.post('/api/spaces', {withCredentials: true});
@@ -23,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] 지역 선택
@@ -56,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);
+  }
+};

src/api/wishes.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import {Dispatch} from 'react';
+
+import {DataType} from '@/types/home';
+import {Wishes} from '@/types/wish';
+
+export async function getUserWishes(set: Dispatch<Wishes | undefined>) {
+  try {
+    const fetchData = await axios.get('/api/members/my-places');
+    const data: DataType<Wishes> = fetchData.data;
+    set(data.data);
+  } catch (error) {
+    console.log(error);
+  }
+}

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},
 });

src/components/Auth/Input/Input.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .email,
 .sertCode,
@@ -124,6 +124,7 @@
     height: 7.2rem;
     padding: 8px;
     border-radius: 50%;
+    border: 1px solid $neutral200;
 
     &__camera {
       background-color: $neutral100;

src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx

@@ -23,7 +23,6 @@ const SelectButton = ({data}: Propstype) => {
     e.preventDefault();
     setIsClicked((prev) => !prev);
     toggleItemInNewArray(data);
-    console.log(data);
   };
 
   useEffect(() => {

src/components/Detail/Contents/ReviewBottomSlide/ImagesWrapper/ImagesWrapper.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   margin-top: 32px;
@@ -20,8 +20,13 @@
       position: relative;
       display: flex;
       gap: 8px;
+      padding: 10px 0;
+
+      overflow-x: auto;
+      overflow-y: visible;
 
       &__addBox {
+        flex: 0 0 7.6rem;
         width: 7.6rem;
         height: 7.6rem;
         background-color: $neutral100;
@@ -36,9 +41,7 @@
       }
 
       &__box {
-        width: 7.6rem;
-        height: 7.6rem;
-
+        flex: 0 0 7.6rem;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -62,4 +65,8 @@
       }
     }
   }
+
+  &__imageInput {
+    display: none;
+  }
 }