Merge pull request #219 from Strong-Potato/216-feat-home-login-modal

Feat: home login modal
Strong-Potato · Jan 27, 2024 · 4b06530 · 4b06530
2 parents 164eeb0 + 6591c2d
commit 4b06530
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 62 deletions.
diff --git a/src/api/detail.ts b/src/api/detail.ts
@@ -25,9 +25,8 @@ export const getIsWish = async (id: number) => {
     const response = await axios.get(`/api/wishes/${id}`, {
       withCredentials: true,
     });
-    console.log(response.data);
-
-    return response.data;
+    const data: boolean = response.data;
+    return data;
   } catch (error) {
     if (axios.isAxiosError(error)) {
       console.log(error);

diff --git a/src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.tsx b/src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.tsx
@@ -14,7 +14,7 @@ interface PropsType {
 function RecommendedItem({data}: PropsType) {
   const location = areas.filter((area) => area.areaCode === data.areaCode)[0].name;
   return (
-    <Link to={`/detail/${data.id} ${data.contentTypeId}`} className={styles.container}>
+    <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.container}>
       <img className={styles.item_img} src={data.thumbnail} alt={`${data.title}의 사진`} />
       <div className={styles.text_box}>
         <span className={styles.item_title}>{data.title}</span>

diff --git a/src/components/Home/TripSpaceAtHome/NullTrip/NullTrip.module.scss b/src/components/Home/TripSpaceAtHome/NullTrip/NullTrip.module.scss
@@ -8,7 +8,7 @@
   height: 9rem;
 
   display: flex;
-  gap: 16px;
+  gap: 10px;
 
   border: 1px solid $neutral200;
   border-radius: 1.6rem;
@@ -86,3 +86,22 @@
     font-size: 1.5rem;
   }
 }
+.title {
+  @include typography(subTitle);
+  color: $neutral900;
+  margin-bottom: 8px;
+}
+.subText {
+  @include typography(tabLabel);
+  color: $neutral400;
+}
+.buttons__cancel {
+  @include typography(button);
+  width: 50%;
+  color: $neutral400;
+}
+.buttons__action {
+  @include typography(button);
+  width: 50%;
+  color: $primary400;
+}
diff --git a/src/components/Home/TripSpaceAtHome/NullTrip/NullTrip.tsx b/src/components/Home/TripSpaceAtHome/NullTrip/NullTrip.tsx
@@ -1,29 +1,69 @@
+import {Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay} from '@chakra-ui/react';
+import {useState} from 'react';
+import {Cookies} from 'react-cookie';
 import {MdArrowForwardIos} from 'react-icons/md';
-import {Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 import styles from './NullTrip.module.scss';
 
 import tripImg from '@/assets/homeIcons/home/tripHome.svg';
 
 function NullTrip() {
+  const navigate = useNavigate();
+  const cookie = new Cookies().get('isLogin');
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
   const dataNull = {
     tripTitle: '아직 여행 일정이 없어요',
     tripDay: '새로운 여행 일정을 만들어보세요!',
   };
 
+  function moveTo() {
+    if (cookie) {
+      navigate('/trip');
+    } else {
+      setIsModalOpen(true);
+    }
+  }
+
   return (
-    <Link to='/auth/login' replace={true} className={styles.container}>
-      <div className={styles.img_box}>
-        <img className={styles.trip_img} src={tripImg} alt={'트립보트 사진'} />
+    <>
+      <div className={styles.container} onClick={moveTo}>
+        <div className={styles.img_box}>
+          <img className={styles.trip_img} src={tripImg} alt={'트립보트 사진'} />
+        </div>
+        <p className={styles.text_box}>
+          <span className={styles.trip_title}>{dataNull.tripTitle}</span>
+          <span className={styles.trip_day}>{dataNull.tripDay}</span>
+        </p>
+        <div className={styles.arrow}>
+          <MdArrowForwardIos />
+        </div>
       </div>
-      <p className={styles.text_box}>
-        <span className={styles.trip_title}>{dataNull.tripTitle}</span>
-        <span className={styles.trip_day}>{dataNull.tripDay}</span>
-      </p>
-      <div className={styles.arrow}>
-        <MdArrowForwardIos />
-      </div>
-    </Link>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} variant='alertModal'>
+        <ModalOverlay />
+        <ModalContent style={{margin: '288px 48px auto'}}>
+          <ModalBody>
+            <p className={styles.title}>로그인이 필요한 기능입니다.</p>
+            <span className={styles.subText}>로그인하고 모든 서비스를 이용해 보세요!</span>
+          </ModalBody>
+
+          <ModalFooter>
+            <button onClick={() => setIsModalOpen(false)} className={styles.buttons__cancel}>
+              닫기
+            </button>
+            <button
+              onClick={() => {
+                navigate('/auth/login');
+              }}
+              className={styles.buttons__action}
+            >
+              로그인하기
+            </button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
 

diff --git a/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.module.scss b/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.module.scss
@@ -40,3 +40,22 @@
     }
   }
 }
+.title {
+  @include typography(subTitle);
+  color: $neutral900;
+  margin-bottom: 8px;
+}
+.subText {
+  @include typography(tabLabel);
+  color: $neutral400;
+}
+.buttons__cancel {
+  @include typography(button);
+  width: 50%;
+  color: $neutral400;
+}
+.buttons__action {
+  @include typography(button);
+  width: 50%;
+  color: $primary400;
+}
diff --git a/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.tsx b/src/components/Home/VoteAtHome/VoteCard/CardNull/CardNull.tsx
@@ -1,36 +1,73 @@
-import { MdArrowForwardIos } from "react-icons/md";
-import { Link } from "react-router-dom";
+import {Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay} from '@chakra-ui/react';
+import {useState} from 'react';
+import {Cookies} from 'react-cookie';
+import {MdArrowForwardIos} from 'react-icons/md';
+import {useNavigate} from 'react-router-dom';
 
-import styles from "./CardNull.module.scss";
+import styles from './CardNull.module.scss';
 
-import useComponentSize from "@/hooks/useComponetSize";
+import useComponentSize from '@/hooks/useComponetSize';
 
 function CardNull() {
   const [componentRef, size] = useComponentSize();
   const responsivePadding = size.width - 360 <= 0 ? 0 : size.width - 360;
   const contentsPadding = `30px ${responsivePadding / 8 + 24}px`;
+  const navigate = useNavigate();
+  const cookie = new Cookies().get('isLogin');
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  function moveTo() {
+    if (cookie) {
+      navigate('/trip');
+    } else {
+      setIsModalOpen(true);
+    }
+  }
 
   return (
-    <div className={styles.vote_box} ref={componentRef}>
-      <div className={styles.contents} style={{ padding: contentsPadding }}>
-        <div className={styles.left}>
-          <p className={styles.text}>
-            친구들과 함께
-            <br />
-            여행 장소를 정해보세요
-          </p>
-          <Link to="/votes/11">
-            <button>
+    <>
+      <div className={styles.vote_box} ref={componentRef}>
+        <div className={styles.contents} style={{padding: contentsPadding}}>
+          <div className={styles.left}>
+            <p className={styles.text}>
+              친구들과 함께
+              <br />
+              여행 장소를 정해보세요
+            </p>
+            <button onClick={moveTo}>
               <span>투표 만들기</span>
               <p>
                 <MdArrowForwardIos />
               </p>
             </button>
-          </Link>
+          </div>
+          <img className={styles.right} src='/mapIconHome.png'></img>
         </div>
-        <img className={styles.right} src="/mapIconHome.png"></img>
       </div>
-    </div>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} variant='alertModal'>
+        <ModalOverlay />
+        <ModalContent style={{margin: '288px 48px auto'}}>
+          <ModalBody>
+            <p className={styles.title}>로그인이 필요한 기능입니다.</p>
+            <span className={styles.subText}>로그인하고 모든 서비스를 이용해 보세요!</span>
+          </ModalBody>
+
+          <ModalFooter>
+            <button onClick={() => setIsModalOpen(false)} className={styles.buttons__cancel}>
+              닫기
+            </button>
+            <button
+              onClick={() => {
+                navigate('/auth/login');
+              }}
+              className={styles.buttons__action}
+            >
+              로그인하기
+            </button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
 

diff --git a/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.tsx b/src/components/SearchFromHome/SearchHome/HotItems/HotItem/HotItem.tsx
@@ -20,7 +20,7 @@ function HotItem({data}: PropsData) {
   const imgSrc = data.thumbnail ? data.thumbnail : nullImg;
 
   return (
-    <Link to={`/detail/${data.id} ${data.contentTypeId}`} className={styles.container}>
+    <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.container}>
       <img src={imgSrc} alt={`${data.title}의 사진`} style={{padding: data.thumbnail ? 0 : '30px'}} />
       <p className={styles.text_box}>
         <span className={styles.title}>{title}</span>

diff --git a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.module.scss b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.module.scss
@@ -22,6 +22,8 @@
 
     border-radius: 8px;
 
+    background-color: $neutral200;
+
     transition: 0.3s all linear;
   }
 

diff --git a/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx b/src/components/SearchFromHome/SearchList/Map/MapItems/MapItem/MapItem.tsx
@@ -4,6 +4,7 @@ import styles from './MapItem.module.scss';
 
 import WishBtn from '@/components/WishBtn/WishBtn';
 
+import nullImg from '@/assets/homeIcons/search/nullImg.svg';
 import areas from '@/utils/areas.json';
 import {translateCategoryToStr} from '@/utils/translateSearchData';
 
@@ -17,10 +18,15 @@ interface PropsType {
 function MapItem({data, categoryChange}: PropsType) {
   const location = areas.filter((area) => area.areaCode === data.location.areaCode)[0].name;
   const category = translateCategoryToStr(data.contentTypeId);
+  const imgSrc = data.thumbnail ? data.thumbnail : nullImg;
 
   return (
-    <Link to={`/detail/${data.id} ${data.contentTypeId}`} className={styles.container}>
-      <img src={data.thumbnail} alt={`${data.title}의 사진`} style={{opacity: categoryChange ? 0 : 1}} />
+    <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.container}>
+      <img
+        src={imgSrc}
+        alt={`${data.title}의 사진`}
+        style={{opacity: categoryChange ? 0 : 1, padding: data.thumbnail ? 0 : '30px'}}
+      />
       <p className={styles.text} style={{opacity: categoryChange ? 0 : 1}}>
         <span className={styles.title}>{data.title}</span>
         <span className={styles.info}>

diff --git a/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx b/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.tsx
@@ -24,7 +24,7 @@ function SearchItem({forSearch, data, categoryChange}: PropsType) {
   const imgSrc = data.thumbnail ? data.thumbnail : nullImg;
 
   return (
-    <Link to={`/detail/${data.id} ${data.contentTypeId}`} className={styles.container}>
+    <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.container}>
       <div className={styles.itemBox}>
         <img
           src={imgSrc}

diff --git a/src/components/WishBtn/WishBtn.tsx b/src/components/WishBtn/WishBtn.tsx
@@ -1,15 +1,14 @@
+import {Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay} from '@chakra-ui/react';
 import {useEffect, useState} from 'react';
+import {Cookies} from 'react-cookie';
 import {FaHeart, FaRegHeart} from 'react-icons/fa';
 
-import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
+import styles from './WishBtn.module.scss';
 
-import CustomToast from '../CustomToast/CustomToast';
+import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
 import {useDebounceBoolean} from '@/hooks/useDebounce';
-import {Cookies} from 'react-cookie';
 
-import {Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay} from '@chakra-ui/react';
-
-import styles from './WishBtn.module.scss';
+import CustomToast from '../CustomToast/CustomToast';
 
 interface WishBtnProps {
   placeId: number;
@@ -33,13 +32,15 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
 
   const [isWish, setIsWish] = useState<boolean>(false);
 
-  if (isLogin) {
-    const {
-      data: {data: wish},
-    } = useGetIsWish(placeId);
+  const wish = useGetIsWish(placeId, isLogin);
 
-    setIsWish(wish);
-  }
+  useEffect(() => {
+    if (isLogin) {
+      if (typeof wish === 'boolean') {
+        setIsWish(wish);
+      }
+    }
+  }, []);
 
   const postWishes = usePostWishes();
   const deleteWishes = useDeleteWishes();
@@ -115,7 +116,7 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
               닫기
             </button>
             <button onClick={() => {}} className={styles.buttons__action}>
-              로그인하
+              로그인하기
             </button>
           </ModalFooter>
         </ModalContent>

diff --git a/src/components/WishItem/WishItem.tsx b/src/components/WishItem/WishItem.tsx
@@ -26,7 +26,7 @@ function WishItem({filter, data, categoryChange}: PropsType) {
   const imgSrc = data.thumbnail ? data.thumbnail : nullImg;
 
   return (
-    <Link to={`/detail/${data.id} ${data.contentTypeId}`} className={styles.container}>
+    <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.container}>
       <div className={styles.itemBox}>
         <img
           src={imgSrc}

diff --git a/src/hooks/Detail/useWish.ts b/src/hooks/Detail/useWish.ts
@@ -1,12 +1,13 @@
-import {useSuspenseQuery} from '@tanstack/react-query';
+import {useQuery} from '@tanstack/react-query';
 
 import {deleteWishes, getIsWish, postWishes} from '@/api/detail';
 
 import {useCustomMutation} from '../Votes/vote';
 
-export const useGetIsWish = (id: number) => {
-  return useSuspenseQuery({
+export const useGetIsWish = (id: number, enabled: boolean) => {
+  return useQuery({
     queryKey: ['isWish', id],
+    enabled,
     queryFn: () => getIsWish(id),
   });
 };

diff --git a/src/pages/Wishes/Wishes.module.scss b/src/pages/Wishes/Wishes.module.scss
@@ -1,6 +1,8 @@
 @use '@/sass' as *;
 
 .container {
+  position: relative;
+
   width: 100%;
   height: calc(100% - 56px);
 
@@ -45,7 +47,7 @@
     align-items: center;
     gap: 16px;
 
-    margin-top: 83px;
+    margin-top: 150px;
 
     color: $neutral300;