Merge branch '177-feat-add-s3-api-apply-presigned-url' of https://git…

…hub.com/Strong-Potato/TripVote-FE into 177-feat-add-s3-api-apply-presigned-url

src/api/detail.ts

@@ -0,0 +1,86 @@
+import {MySpaces, PlacesNearby, Reviews, ReviewsRating, Wishes, placeInfoData} from '@/types/detail';
+import axios from 'axios';
+
+// --------------------------- GET ---------------------------
+
+export const getPlaceInfo = async (id: number, typeId: number): Promise<placeInfoData> => {
+  const response = await axios.get('/api/places/info', {
+    params: {placeId: id, placeTypeId: typeId},
+  });
+
+  return response.data;
+};
+
+export const getReviewsRating = async (id: number, typeId: number, title: string): Promise<ReviewsRating> => {
+  const response = await axios.get('/api/reviews/rating', {
+    params: {placeId: id, contentTypeId: typeId, placeTitle: title},
+  });
+
+  return response.data;
+};
+
+export const getReviews = async (id: number, typeId: number, title: string): Promise<Reviews> => {
+  const response = await axios.get('/api/reviews', {
+    params: {placeId: id, contentTypeId: typeId, placeTitle: title},
+  });
+
+  return response.data;
+};
+
+export const getIsWish = async (id: number, setIsWish: React.Dispatch<React.SetStateAction<boolean>>) => {
+  const response = await axios.get(`/api/wishes/${id}`, {
+    withCredentials: true,
+  });
+
+  setIsWish(response.data.data);
+
+  return response.data;
+};
+
+export const getPlacesNearby = async (
+  page: number,
+  size: number,
+  areaCode: number,
+  sigunguCode: number,
+  placeTypeId: number,
+  sort: string,
+  categoryCode: string,
+): Promise<PlacesNearby> => {
+  const response = await axios.get('/api/places/nearby', {
+    params: {
+      page: page,
+      size: size,
+      areaCode: areaCode,
+      sigunguCode: sigunguCode,
+      placeTypeId: placeTypeId,
+      sort: sort,
+      categoryCode: categoryCode,
+    },
+  });
+
+  return response.data;
+};
+
+export const getMySpaces = async (page: number, size: number, sort: string): Promise<MySpaces> => {
+  const response = await axios.get('/api/members/my-spaces/upcoming', {
+    params: {
+      page: page,
+      size: size,
+      sort: sort,
+    },
+  });
+
+  return response.data;
+};
+
+// --------------------------- POST ---------------------------
+
+export const PostWishes = async ({placeId, contentTypeId}: Wishes) => {
+  try {
+    const response = await axios.post('/api/wishes', {placeId, contentTypeId});
+    console.log('axios 포스트 성공', response);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/chakra/chakraCustomTheme.ts

@@ -1,11 +1,12 @@
 import {extendTheme} from '@chakra-ui/react';
-
 import {avatarTheme} from './avatarCustom';
 import {buttonTheme} from './buttonCustom';
 import {checkboxTheme} from './checkboxCustom';
+import {drawerTheme} from './drawerCustom';
 import {modalTheme} from './modalCustom';
 import {tabsTheme} from './tabsCustom';
 import {tagTheme} from './tagCustom';
+
 export const customTheme = extendTheme({
   styles: {
     global: {
@@ -215,6 +216,7 @@ export const customTheme = extendTheme({
     Modal: modalTheme,
     Checkbox: checkboxTheme,
     Button: buttonTheme,
+    Drawer: drawerTheme,
   },
 
   fonts: {

src/chakra/drawerCustom.ts

@@ -0,0 +1,23 @@
+import {drawerAnatomy} from '@chakra-ui/anatomy';
+import {createMultiStyleConfigHelpers} from '@chakra-ui/react';
+
+const {defineMultiStyleConfig} = createMultiStyleConfigHelpers(drawerAnatomy.keys);
+
+export const drawerTheme = defineMultiStyleConfig({
+  sizes: {
+    mapModal: {
+      dialogContainer: {
+        width: '100%',
+        maxWidth: '45rem',
+        minWidth: '36rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+
+        overflow: 'clip',
+      },
+      dialog: {
+        width: '100%',
+      },
+    },
+  },
+});

src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.tsx

@@ -1,28 +1,35 @@
-import { useDisclosure } from "@chakra-ui/react";
-import { useState } from "react";
-import { CiEdit } from "react-icons/ci";
-import { useRecoilValue } from "recoil";
+import {useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
+import {CiEdit} from 'react-icons/ci';
+import {useRecoilValue} from 'recoil';
 
-import styles from "./RegistrationSlide.module.scss";
+import styles from './RegistrationSlide.module.scss';
 
-import CustomToast from "@/components/CustomToast/CustomToast";
+import CustomToast from '@/components/CustomToast/CustomToast';
 
-import CloseIcon from "@/assets/close.svg?react";
-import { isRegistrationSelectedState } from "@/recoil/detail/detail";
+import CloseIcon from '@/assets/close.svg?react';
+import {isRegistrationSelectedState} from '@/recoil/detail/detail';
 
-import RegistrationListItem from "./RegistrationListItem/RegistrationListItem";
-import RegistrationModal from "./RegistrationModal/RegistrationModal";
-import RegistrationTripSpace from "./RegistrationTripSpace/RegistrationTripSpace";
+import RegistrationListItem from './RegistrationListItem/RegistrationListItem';
+import RegistrationModal from './RegistrationModal/RegistrationModal';
+import RegistrationTripSpace from './RegistrationTripSpace/RegistrationTripSpace';
 
-import { RegistrationSlideProps } from "@/types/detail";
+import {RegistrationSlideProps} from '@/types/detail';
+import {useGetSpacesCity} from '@/hooks/Detail/useSpaces';
 
-function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
+function RegistrationSlide({slideOnClose}: RegistrationSlideProps) {
   const isValuedArray = useRecoilValue<string[]>(isRegistrationSelectedState);
-  const [TripSelected, setTripSelected] = useState<string>("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [TripSelected, setTripSelected] = useState<string>('');
+  const {isOpen, onOpen, onClose} = useDisclosure();
   const toast = CustomToast();
 
-  // useEffect fetchData
+  const {
+    data: {
+      data: {spaces: spaces},
+    },
+  } = useGetSpacesCity(0, 15, '');
+
+  console.log(spaces);
 
   const exArray = [];
 
@@ -32,10 +39,10 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
         <button
           onClick={() => {
             slideOnClose();
-            document.body.style.removeProperty("overflow");
+            document.body.style.removeProperty('overflow');
           }}
         >
-          <CloseIcon width="2rem" height="2rem" />
+          <CloseIcon width='2rem' height='2rem' />
         </button>
         <div className={styles.container__createBtn}>
           {TripSelected ? (
@@ -45,12 +52,12 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
                 console.log(1);
               }}
             >
-              <CiEdit fontSize="2.2rem" />
+              <CiEdit fontSize='2.2rem' />
               <span>새 투표 생성</span>
             </button>
           ) : (
             <button className={styles.container__createBtn__notValued} disabled>
-              <CiEdit fontSize="2.2rem" color="#CDCFD0" />
+              <CiEdit fontSize='2.2rem' color='#CDCFD0' />
               <span>새 투표 생성</span>
             </button>
           )}
@@ -65,29 +72,16 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
                 <span>후보로 등록할 투표 제목을 선택해주세요</span>
               </div>
               <div className={styles.container__voteList}>
-                <RegistrationListItem
-                  title="맛집 어디갈까"
-                  isSelectedProps={true}
-                />
+                <RegistrationListItem title='맛집 어디갈까' isSelectedProps={true} />
                 {/*  초과 글씨 ... 처리 해야함*/}
-                <RegistrationListItem
-                  title="둘째 날 숙소 어디서 묵지?"
-                  isSelectedProps={false}
-                />
-                <RegistrationListItem
-                  title="루프탑 카페 정하자~"
-                  isSelectedProps={false}
-                />
+                <RegistrationListItem title='둘째 날 숙소 어디서 묵지?' isSelectedProps={false} />
+                <RegistrationListItem title='루프탑 카페 정하자~' isSelectedProps={false} />
               </div>
             </div>
           ) : (
             <div className={styles.container__voteNotValued}>
-              <p className={styles.container__voteNotValued__top}>
-                생성된 투표가 없습니다.
-              </p>
-              <p className={styles.container__voteNotValued__bottom}>
-                투표 생성을 눌러 새로운 투표를 만들어주세요!
-              </p>
+              <p className={styles.container__voteNotValued__top}>생성된 투표가 없습니다.</p>
+              <p className={styles.container__voteNotValued__bottom}>투표 생성을 눌러 새로운 투표를 만들어주세요!</p>
             </div>
           )
         ) : (
@@ -99,14 +93,14 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
           className={styles.container__bottomFixedBtn}
           style={
             isValuedArray.length > 0
-              ? { backgroundColor: "#2388FF", color: "#FFFFFF" }
-              : { backgroundColor: "#E3E5E5", color: "#979C9E" }
+              ? {backgroundColor: '#2388FF', color: '#FFFFFF'}
+              : {backgroundColor: '#E3E5E5', color: '#979C9E'}
           }
           onClick={() => {
             if (isValuedArray.length > 0) {
-              toast("이 장소가 후보로 등록되었습니다.");
+              toast('이 장소가 후보로 등록되었습니다.');
               slideOnClose();
-              document.body.style.removeProperty("overflow");
+              document.body.style.removeProperty('overflow');
             }
           }}
         >

src/components/Detail/Contents/Contents.tsx

@@ -1,69 +1,82 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import { useEffect } from "react";
-import { useRecoilState, useSetRecoilState } from "recoil";
+import {Tab, TabList, TabPanel, TabPanels, Tabs} from '@chakra-ui/react';
+import {useEffect} from 'react';
+import {useRecoilState, useSetRecoilState} from 'recoil';
 
-import styles from "./Contents.module.scss";
+import styles from './Contents.module.scss';
 
-import { TabIndexState, TabYPosition } from "@/recoil/detail/detail";
+import {TabIndexState, TabYPosition} from '@/recoil/detail/detail';
 
-import Information from "./Information/Information";
-import Reviews from "./Reviews/Reviews";
+import Information from './Information/Information';
+import Reviews from './Reviews/Reviews';
+import {placeInfoDataPlace} from '@/types/detail';
+import {useGetReviews} from '@/hooks/Detail/useReviews';
+import {useParams} from 'react-router-dom';
 
-import { ContentsProps } from "@/types/detail";
+interface ContentsProps {
+  data: placeInfoDataPlace;
+  onOpen: () => void;
+  reviewsRating: {
+    rating: number;
+    userRatingCount: number;
+  };
+}
 
-function Contents({ onOpen }: ContentsProps) {
+function Contents({data, onOpen, reviewsRating}: ContentsProps) {
   const [tabIndex, setTabIndex] = useRecoilState(TabIndexState);
   const setTabPosition = useSetRecoilState(TabYPosition);
 
+  const {id: params} = useParams();
+
   const handleTabsChange = (index: number) => {
     setTabIndex(index);
   };
 
+  const {
+    data: {
+      data: {reviews: reviews},
+    },
+  } = useGetReviews(Number(params?.split(' ')[0]), Number(params?.split(' ')[1]), data.title);
+  console.log(reviews, '!!');
+
   useEffect(() => {
-    const tabRef = document.getElementById("tab");
+    const tabRef = document.getElementById('tab');
 
     if (tabRef) {
-      setTabPosition(tabRef.getBoundingClientRect().top + window.scrollY - 32);
+      setTabPosition(tabRef.getBoundingClientRect().top + window.scrollY - 56);
     }
   });
 
   return (
-    <Tabs
-      isFitted
-      className={styles.container}
-      index={tabIndex}
-      onChange={handleTabsChange}
-      id="tab"
-    >
+    <Tabs isFitted className={styles.container} index={tabIndex} onChange={handleTabsChange} id='tab'>
       <TabList>
         <Tab
-          fontSize="1.4rem"
-          fontWeight="700"
-          lineHeight="2.2rem"
-          color="#CDCFD0"
-          borderColor="#fff"
-          _selected={{ color: "#1D2433", borderColor: "#2388FF" }}
+          fontSize='1.4rem'
+          fontWeight='700'
+          lineHeight='2.2rem'
+          color='#CDCFD0'
+          borderColor='#fff'
+          _selected={{color: '#1D2433', borderColor: '#2388FF'}}
         >
           상품정보
         </Tab>
         <Tab
-          fontSize="1.4rem"
-          fontWeight="700"
-          lineHeight="2.2rem"
-          color="#CDCFD0"
-          borderColor="#fff"
-          _selected={{ color: "#1D2433", borderColor: "#2388FF" }}
+          fontSize='1.4rem'
+          fontWeight='700'
+          lineHeight='2.2rem'
+          color='#CDCFD0'
+          borderColor='#fff'
+          _selected={{color: '#1D2433', borderColor: '#2388FF'}}
         >
           리뷰
         </Tab>
       </TabList>
 
       <TabPanels>
-        <TabPanel padding="0">
-          <Information onOpen={onOpen} />
+        <TabPanel padding='0'>
+          <Information onOpen={onOpen} data={data} reviewsRating={reviewsRating} reviews={reviews} />
         </TabPanel>
-        <TabPanel padding="0">
-          <Reviews onOpen={onOpen} />
+        <TabPanel padding='0'>
+          <Reviews onOpen={onOpen} reviewsRating={reviewsRating} reviews={reviews} />
         </TabPanel>
       </TabPanels>
     </Tabs>