Feat: slideModal img 100% & edit review toast

Strong-Potato · Jan 28, 2024 · a5ed4a0 · a5ed4a0
1 parent dddc178
commit a5ed4a0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 32 deletions.
diff --git a/src/components/Detail/Main/SlideModal/SlideModal.module.scss b/src/components/Detail/Main/SlideModal/SlideModal.module.scss
@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .slideIndex {
   @include typography(button);
@@ -19,6 +19,7 @@
     height: 50rem;
     img {
       position: absolute;
+      width: 100%;
       top: 50%;
       transform: translateY(-50%);
     }

diff --git a/src/components/Detail/Main/SlideModal/SlideModal.tsx b/src/components/Detail/Main/SlideModal/SlideModal.tsx
@@ -8,15 +8,12 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { Thumbs } from "swiper/modules";
-import { Swiper, SwiperSlide } from "swiper/react";
+} from '@chakra-ui/react';
+import {useEffect, useState} from 'react';
+import {Thumbs} from 'swiper/modules';
+import {Swiper, SwiperSlide} from 'swiper/react';
 
-// Import Swiper styles
-// import "swiper/css";
-// import "swiper/css/thumbs";
-import styles from "./SlideModal.module.scss";
+import styles from './SlideModal.module.scss';
 
 interface SlideModalProps {
   isOpen: boolean;
@@ -26,13 +23,7 @@ interface SlideModalProps {
   setImageIndex: React.Dispatch<React.SetStateAction<number>>;
 }
 
-function SlideModal({
-  isOpen,
-  onClose,
-  images,
-  imageIndex,
-  setImageIndex,
-}: SlideModalProps) {
+function SlideModal({isOpen, onClose, images, imageIndex, setImageIndex}: SlideModalProps) {
   const [thumbsSwiper, setThumbsSwiper] = useState<any>();
   const [swiperIndex, setSwiperIndex] = useState(0);
 
@@ -41,27 +32,21 @@ function SlideModal({
   }, [imageIndex]);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="imageModal">
+    <Modal isOpen={isOpen} onClose={onClose} size='imageModal'>
       <ModalOverlay onClick={onClose} />
       <ModalContent>
         <ModalHeader>
-          <ModalCloseButton
-            fontSize="2rem"
-            top="16px"
-            left="20px"
-            color="#fff"
-          />
+          <ModalCloseButton fontSize='2rem' top='16px' left='20px' color='#fff' />
           <span className={styles.slideIndex}>
             {swiperIndex + 1}/{images.length}
           </span>
         </ModalHeader>
-        <ModalBody p="0">
+        <ModalBody p='0'>
           <Swiper
             initialSlide={imageIndex}
             spaceBetween={10}
             thumbs={{
-              swiper:
-                thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
+              swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
             }}
             // onSlideChange={(swiper) => console.log(swiper.activeIndex)}
             modules={[Thumbs]}
@@ -83,7 +68,7 @@ function SlideModal({
           <Swiper
             onSwiper={setThumbsSwiper}
             spaceBetween={8}
-            slidesPerView={"auto"}
+            slidesPerView={'auto'}
             watchSlidesProgress={true}
             modules={[Thumbs]}
             className={styles.bottomSlide}
@@ -92,11 +77,7 @@ function SlideModal({
               images.map((image, i) => (
                 <SwiperSlide
                   key={`bottomSlide_${i}`}
-                  className={
-                    i === swiperIndex
-                      ? styles.swiperSlideActive
-                      : styles.swiperSlide
-                  }
+                  className={i === swiperIndex ? styles.swiperSlideActive : styles.swiperSlide}
                 >
                   <img src={image} />
                 </SwiperSlide>

diff --git a/src/components/MyReview/EditReviewBottomSlide/EditReviewBottomSlide.tsx b/src/components/MyReview/EditReviewBottomSlide/EditReviewBottomSlide.tsx
@@ -18,6 +18,7 @@ import {EditReviewBottomSlideProps} from '@/types/detail';
 
 import {s3Request} from '@/api/s3';
 import {usePatchMyReview} from '@/hooks/User/useMyReview';
+import CustomToast from '@/components/CustomToast/CustomToast';
 
 function EditReviewBottomSlide({
   reviewId,
@@ -35,6 +36,8 @@ function EditReviewBottomSlide({
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalContent = useSetRecoilState(modalContentState);
 
+  const toast = CustomToast();
+
   const [starCount, setStarCount] = useState<number>(starCountProps);
   const [text, setText] = useState<string>(textProps);
   const [time, setTime] = useState<Date>(timeProps);
@@ -80,6 +83,7 @@ function EditReviewBottomSlide({
       images: imageUrls,
       visitedAt: `${time.getFullYear()}-${('00' + (time.getMonth() + 1).toString()).slice(-2)}-01`,
     });
+    toast('리뷰가 수정되었습니다.');
     slideOnClose();
     document.body.style.removeProperty('overflow');
   };