Feat: connect API in my review

src/api/detail.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import {MySpaces, placeInfoData, PlacesNearby, PostReview, ReviewsRating, Wishes} from '@/types/detail';
+import {MySpaces, PatchMyReview, placeInfoData, PlacesNearby, PostReview, ReviewsRating, Wishes} from '@/types/detail';
 
 // --------------------------- GET ---------------------------
 
@@ -123,3 +123,33 @@ export const deleteWishes = async (id: number) => {
     console.error(error);
   }
 };
+
+export const deleteMyReviews = async (id: number) => {
+  try {
+    const response = await axios.delete(`/api/reviews/${id}`, {
+      withCredentials: true,
+    });
+    console.log('axios delete success', response);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// --------------------------- PATCH ---------------------------
+
+export const patchMyReview = async ({reviewId, rating, content, images, visitedAt}: PatchMyReview) => {
+  try {
+    const response = await axios.patch(
+      '/api/reviews',
+      {reviewId, rating, content, images, visitedAt},
+      {
+        withCredentials: true,
+      },
+    );
+    console.log('axios 포스트 성공', response);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/components/BottomSlide/BottomSlide.module.scss

@@ -13,6 +13,7 @@
     justify-content: center;
     z-index: 101;
 
+    max-height: 95vh;
     &__content {
       width: 450px;
       border-radius: 16px 16px 0px 0px;

src/components/MyReview/ActionList/ActionList.tsx

@@ -1,15 +1,50 @@
-import styles from "./ActionList.module.scss";
+import styles from './ActionList.module.scss';
 
-import EditIcon from "@/assets/icons/pencil_with_line.svg?react";
-import TrashIcon from "@/assets/icons/trash_icon.svg?react";
+import EditIcon from '@/assets/icons/pencil_with_line.svg?react';
+import TrashIcon from '@/assets/icons/trash_icon.svg?react';
+import CustomToast from '@/components/CustomToast/CustomToast';
+import {useDeleteMyReview} from '@/hooks/User/useMyReview';
 
-import { ActionListProps } from "@/types/myReview";
+import {ActionListProps} from '@/types/myReview';
+import EditReviewBottomSlide from '../EditReviewBottomSlide/EditReviewBottomSlide';
+
+function ActionList({
+  onBottomSlideOpen,
+  setBottomSlideContent,
+  reviewId,
+  onBottomSlideClose,
+  starCountProps,
+  textProps,
+  timeProps,
+  imageUrlsProps,
+}: ActionListProps) {
+  const deleteReview = useDeleteMyReview();
+
+  const toast = CustomToast();
+
+  const handleDelete = async (id: number) => {
+    console.log(id);
+    await deleteReview.mutateAsync(id);
+    toast('리뷰가 삭제되었습니다.');
+    onBottomSlideClose();
+  };
 
-function ActionList({ reviewId }: ActionListProps) {
   return (
     <ul className={styles.container}>
       <li
         onClick={() => {
+          setBottomSlideContent(
+            <EditReviewBottomSlide
+              reviewId={reviewId}
+              slideOnClose={onBottomSlideClose}
+              starCountProps={starCountProps}
+              textProps={textProps}
+              timeProps={timeProps}
+              imageUrlsProps={imageUrlsProps}
+            />,
+          );
+          onBottomSlideClose();
+          onBottomSlideOpen();
           console.log(reviewId);
         }}
       >
@@ -18,11 +53,7 @@ function ActionList({ reviewId }: ActionListProps) {
         </div>
         <p>수정하기</p>
       </li>
-      <li
-        onClick={() => {
-          console.log(reviewId);
-        }}
-      >
+      <li onClick={() => handleDelete(Number(reviewId))}>
         <div className={styles.editIcon}>
           <TrashIcon />
         </div>

src/components/MyReview/EditReviewBottomSlide/DateBottomSlide/DateBottomSlide.module.scss

@@ -0,0 +1,41 @@
+@use "@/sass" as *;
+
+.slideContainer {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 100%;
+  height: 150%;
+
+  background-color: rgba(20, 20, 20, 0.8);
+  z-index: 3;
+
+  visibility: visible;
+  transition: all 0.2s ease-out;
+}
+
+.slide {
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+  max-height: 80rem;
+
+  &__content {
+    border: 1px solid black;
+    width: 100%;
+    height: 26rem;
+    overflow: scroll;
+    background-color: $neutral0;
+    padding: 24px 24px 40px 24px;
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

src/components/MyReview/EditReviewBottomSlide/DateBottomSlide/DateBottomSlide.tsx

@@ -0,0 +1,27 @@
+import { Slide } from "@chakra-ui/react";
+
+import styles from "./DateBottomSlide.module.scss";
+
+import { BottomSlideProps } from "@/types/bottomSlide";
+
+function DateBottomSlide({ isOpen, onClose, children }: BottomSlideProps) {
+  return (
+    <>
+      <div
+        className={styles.slideContainer}
+        style={{
+          visibility: isOpen ? "visible" : "hidden",
+        }}
+        onClick={() => {
+          document.body.style.removeProperty("overflow");
+          onClose();
+        }}
+      ></div>
+      <Slide className={styles.slide} direction="bottom" in={isOpen}>
+        <div className={styles.slide__content}>{children}</div>
+      </Slide>
+    </>
+  );
+}
+
+export default DateBottomSlide;

src/components/MyReview/EditReviewBottomSlide/DateScrollPicker/DateScrollPicker.module.scss

@@ -0,0 +1,26 @@
+@use "@/sass" as *;
+
+.datePickerWrapper {
+  width: 100%;
+  max-width: 45rem;
+  height: 100%;
+
+  position: fixed;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  z-index: 2;
+
+  transition: all 1s;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(20, 20, 20, 0.8);
+  z-index: 1;
+}

src/components/MyReview/EditReviewBottomSlide/DateScrollPicker/DateScrollPicker.tsx

@@ -0,0 +1,64 @@
+import DatePicker from 'react-mobile-datepicker';
+
+import {DateScrollPickerProps} from '@/types/detail';
+
+interface DateConfig {
+  year: {
+    format: string;
+    caption: string;
+    step: number;
+  };
+  month: {
+    format: string;
+    caption: string;
+    step: number;
+  };
+}
+function DateScrollPicker({time, setTime, isValued, setIsValued, slideOnClose}: DateScrollPickerProps) {
+  const handleCancel = () => {
+    slideOnClose();
+    // setIsOpen(false);
+  };
+
+  const handleSelect = (time: Date) => {
+    if (!isValued) {
+      setIsValued(true);
+    }
+    setTime(time);
+    slideOnClose();
+  };
+
+  const dateConfig: DateConfig = {
+    year: {
+      format: 'YYYY',
+      caption: 'Year',
+      step: 1,
+    },
+    month: {
+      format: 'MM',
+      caption: 'Mon',
+      step: 1,
+    },
+  };
+
+  return (
+    <>
+      <DatePicker
+        dateConfig={dateConfig}
+        theme={'ios'}
+        value={time}
+        min={new Date(1999, 0, 1)}
+        max={new Date()}
+        onSelect={handleSelect}
+        onCancel={handleCancel}
+        isPopup={false}
+        headerFormat={'YYYY년 MM월'}
+        showHeader={false}
+        confirmText='선택'
+        cancelText='취소'
+      />
+    </>
+  );
+}
+
+export default DateScrollPicker;

src/components/MyReview/EditReviewBottomSlide/DateWrapper/DateWrapper.module.scss

@@ -0,0 +1,45 @@
+@use "@/sass" as *;
+
+.container {
+  margin-top: 32px;
+  padding: 20px 16px;
+  border: 1px solid $neutral200;
+  border-radius: 8px;
+
+  width: 100%;
+
+  cursor: pointer;
+  &__dateWrapper {
+    @include typography(tabLabel);
+    color: $neutral900;
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.datePickerWrapper {
+  width: 100%;
+  max-width: 45rem;
+  height: 100%;
+
+  position: fixed;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  z-index: 2;
+
+  transition: all 1s;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(20, 20, 20, 0.8);
+  z-index: 1;
+}

src/components/MyReview/EditReviewBottomSlide/DateWrapper/DateWrapper.tsx

@@ -0,0 +1,33 @@
+import {RiCalendarCheckLine} from 'react-icons/ri';
+
+import styles from './DateWrapper.module.scss';
+
+interface DateWrapperProps {
+  onOpen?: () => void;
+  time: Date;
+  isValued: boolean;
+}
+
+function DateWrapper({onOpen, time, isValued}: DateWrapperProps) {
+  return (
+    <>
+      <div className={styles.container} onClick={onOpen}>
+        <div className={styles.container__dateWrapper}>
+          {isValued ? (
+            <>
+              <RiCalendarCheckLine fontSize='2.4rem' />
+              <span>{`${time.getFullYear()}년 ${time.getMonth() + 1}월 방문`}</span>
+            </>
+          ) : (
+            <>
+              <RiCalendarCheckLine fontSize='2.4rem' color='#CDCFD0' />
+              <span style={{color: '#CDCFD0'}}>언제 방문하셨나요?</span>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DateWrapper;