Merge pull request #275 from Strong-Potato/269-feat-qa-develop

Feat: qa develop
Strong-Potato · Jan 28, 2024 · 52ce52d · 52ce52d
2 parents 4828bc5 + f1c2389
commit 52ce52d
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 58 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -24,7 +24,6 @@ function App() {
     '카카오톡으로 친구와 가족들을 여행에 초대해보세요',
     '요즘 인기 있는 장소를 검색해보세요',
   ];
-
   return (
     <Suspense
       fallback={

diff --git a/src/components/BottomSlide/BottomSlide.tsx b/src/components/BottomSlide/BottomSlide.tsx
@@ -9,7 +9,7 @@ import CloseIcon from '@/assets/close.svg?react';
 
 import {BottomSlideProps} from '../../types/bottomSlide';
 
-function BottomSlide({isOpen, onClose, children}: BottomSlideProps) {
+function BottomSlide({isOpen, onClose, children, isCloseBtn = true}: BottomSlideProps) {
   const containerStyle = {
     display: isOpen ? 'block' : 'none',
   };
@@ -26,11 +26,13 @@ function BottomSlide({isOpen, onClose, children}: BottomSlideProps) {
     <div className={styles.slideContainer} style={containerStyle}>
       <Slide ref={slideRef} className={styles.slide} direction='bottom' in={isOpen}>
         <div className={styles.slide__content}>
-          <div className={styles.closeButtonContainer}>
-            <button onClick={closeModal}>
-              <CloseIcon />
-            </button>
-          </div>
+          {isCloseBtn && (
+            <div className={styles.closeButtonContainer}>
+              <button onClick={closeModal}>
+                <CloseIcon />
+              </button>
+            </div>
+          )}
           <div>{children}</div>
         </div>
       </Slide>

diff --git a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx
@@ -23,9 +23,11 @@ function BottomFixedBtn({onOpen}: BottomFixedBtnProps) {
     actionButton: '로그인하기',
     isSmallSize: true,
     onClickAction: () => {
+      setIsModalOpen(false);
       navigate('/auth/login');
     },
   };
+
   const showNotLoginModal = () => {
     setIsModalOpen(true);
     setModalContent({...notLoginContent});

diff --git a/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx b/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx
@@ -6,24 +6,33 @@ import styles from './ShortReviews.module.scss';
 
 import Review from '@/components/Detail/Contents/Review/Review';
 
-import {IsLoginState, TabIndexState, TabYPosition} from '@/recoil/detail/detail';
+import {TabIndexState, TabYPosition} from '@/recoil/detail/detail';
 import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
 
 import {ContentsShortReviewsProps} from '@/types/detail';
+import {useNavigate} from 'react-router-dom';
+import {Cookies} from 'react-cookie';
 
 function ShortReviews({onOpen, reviewsRating, reviews}: ContentsShortReviewsProps) {
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalContent = useSetRecoilState(modalContentState);
-  const isLogin = useRecoilValue(IsLoginState);
   const setTabIndex = useSetRecoilState(TabIndexState);
   const tabPosition = useRecoilValue(TabYPosition);
 
+  const cookies = new Cookies();
+  const isLogin = cookies.get('isLogin');
+  const navigate = useNavigate();
+
   const notLoginContent = {
     title: '로그인이 필요한 기능입니다.',
     subText: '로그인하고 모든 서비스를 이용해 보세요! ',
     cancelText: '닫기',
     actionButton: '로그인하기',
     isSmallSize: true,
+    onClickAction: () => {
+      setIsModalOpen(false);
+      navigate('/auth/login');
+    },
   };
 
   const showNotLoginModal = () => {

diff --git a/src/components/Detail/Contents/Reviews/Reviews.tsx b/src/components/Detail/Contents/Reviews/Reviews.tsx
@@ -28,6 +28,7 @@ function Reviews({onOpen, reviewsRating, reviews, hasNextData, inViewRef}: Conte
     actionButton: '로그인하기',
     isSmallSize: true,
     onClickAction: () => {
+      setIsModalOpen(false);
       navigate('/auth/login');
     },
   };

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/Detail/Main/Title/TitleWishBtn/TitleWishBtn.tsx b/src/components/Detail/Main/Title/TitleWishBtn/TitleWishBtn.tsx
@@ -137,6 +137,7 @@ function TitleWishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}:
             </button>
             <button
               onClick={() => {
+                setIsModalOpen(false);
                 navigate('/auth/login');
                 document.body.style.removeProperty('overflow');
               }}

diff --git a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx
@@ -36,6 +36,7 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit
     actionButton: '로그인하기',
     isSmallSize: true,
     onClickAction: () => {
+      setIsModalOpen(false);
       navigate('/auth/login');
     },
   };

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);
@@ -43,7 +46,7 @@ function EditReviewBottomSlide({
 
   const checkBeforeExit = {
     title: '잠깐!',
-    subText: '지금 나가면 작성내용이 전부 삭제돼요',
+    subText: '지금 나가면 수정내용이 전부 삭제돼요',
     cancelText: '마저 작성할게요',
     actionButton: '나갈래요',
     isSmallSize: true,
@@ -63,23 +66,23 @@ function EditReviewBottomSlide({
 
   const handlePatchMyReview = async () => {
     setIsDisabled(true);
+
+    const presignedUrls = await s3Request.uploadImages(imageFileList as File[]);
+
     if (imageFileList) {
-      const presignedUrls = await s3Request.uploadImages(imageFileList as File[]);
-
-      if (imageFileList) {
-        presignedUrls.map((url: string, i: number) => {
-          presignedUrls[i] = url.split('?')[0];
-        });
-      }
-      setImageUrls(presignedUrls);
+      presignedUrls.map((url: string, i: number) => {
+        presignedUrls[i] = url.split('?')[0];
+      });
     }
+
     await patchMyReview.mutateAsync({
       reviewId,
       rating: starCount,
       content: text,
-      images: imageUrls,
+      images: imageFileList ? presignedUrls : imageUrls,
       visitedAt: `${time.getFullYear()}-${('00' + (time.getMonth() + 1).toString()).slice(-2)}-01`,
     });
+    toast('리뷰가 수정되었습니다.');
     slideOnClose();
     document.body.style.removeProperty('overflow');
   };
@@ -102,7 +105,7 @@ function EditReviewBottomSlide({
           }}
           className={styles.container__top__icon}
         >
-          <CloseIcon width='2rem' height='2rem' />
+          <CloseIcon width='2rem' height='2rem' onClick={slideOnClose} />
         </button>
         <div className={styles.container__top__title}>리뷰 수정</div>
       </div>

diff --git a/src/components/WishBtn/WishBtn.tsx b/src/components/WishBtn/WishBtn.tsx
@@ -135,6 +135,7 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
             </button>
             <button
               onClick={() => {
+                setIsModalOpen(false);
                 navigate('/auth/login');
                 document.body.style.removeProperty('overflow');
               }}

diff --git a/src/pages/User/MyReview/MyReview.tsx b/src/pages/User/MyReview/MyReview.tsx
@@ -98,15 +98,20 @@ function MyReview() {
 
               <p className={styles.myreview__content}>{content}</p>
 
-              {images && <ReviewImageSlider images={images} />}
+              <div style={{padding: '0 20px'}}>{images && <ReviewImageSlider images={images} />}</div>
             </li>
           )),
         )}
       </ul>
 
       {reviews && hasNextData && <ObserveTarget inViewRef={inViewRef} />}
 
-      <BottomSlide isOpen={isBottomSlideOpen} onClose={onBottomSlideClose} children={bottomSlideContent} />
+      <BottomSlide
+        isOpen={isBottomSlideOpen}
+        onClose={onBottomSlideClose}
+        children={bottomSlideContent}
+        isCloseBtn={false}
+      />
     </div>
   );
 }

diff --git a/src/sass/abstracts/_mixin.scss b/src/sass/abstracts/_mixin.scss
@@ -1,6 +1,6 @@
 //재사용 가능한 스타일 믹스인을 정의합니다.
-@use "./variables";
-@use "sass:map";
+@use './variables';
+@use 'sass:map';
 
 @mixin typography($name) {
   font-size: map-get(variables.$typography-font-size-map, $name);
@@ -33,8 +33,6 @@
 
   display: flex;
 
-  padding: 0 20px;
-
   transition: all 0.5s;
 }
 

diff --git a/src/types/bottomSlide.ts b/src/types/bottomSlide.ts
@@ -4,4 +4,5 @@ export interface BottomSlideProps {
   isOpen: boolean;
   onClose: () => void;
   children: ReactNode;
+  isCloseBtn?: boolean;
 }