feat: doneeeeeeeeeeeeee (#59)

* feat: add action to hide dropbox * feat: add loading indicator when fetch location data * feat: Added error handling * feat: doneeeeeeeeeeeeeee --------- Co-authored-by: he2e2 <[email protected]>
BTS-Busan-Trip-Supporter · Sep 29, 2024 · c10ee7b · c10ee7b
1 parent 38f5fda
commit c10ee7b
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 101 deletions.
diff --git a/src/app/pages/travel-auto-page.tsx b/src/app/pages/travel-auto-page.tsx
@@ -70,7 +70,6 @@ export function TravelAutoPage() {
     const savedContent = sessionStorage.getItem('searchContent');
     if (savedContent) {
       setSearchContent(savedContent);
-      sessionStorage.removeItem('searchContent');
     }
   }, []);
 
@@ -220,6 +219,7 @@ function Results({
   selectedPlaces: Location[];
   createSchedule: () => void;
 }) {
+  const { createToast } = useToast();
   return (
     <styles.container>
       <styles.resultCon>
@@ -281,6 +281,10 @@ function Results({
             text='여행 완성'
             color='#5E5BDA'
             onClick={() => {
+              if (selectedPlaces.length === 0) {
+                createToast('info', '장소를 한 개 이상 선택해주세요');
+                return;
+              }
               createSchedule();
             }}
           />

diff --git a/src/app/pages/travel-page.tsx b/src/app/pages/travel-page.tsx
@@ -6,13 +6,19 @@ import { useState } from 'react';
 
 import { Background, CustomButton, SearchBox } from '@/components';
 import { useUserData } from '@/features/member';
+import { useToast } from '@/features/toast';
 
 export function TravelPage() {
   const [searchContent, setSearchContent] = useState('');
+  const { createToast } = useToast();
 
   const router = useRouter();
 
   const handleButtonClick = (route: string) => {
+    if (searchContent === '') {
+      createToast('info', '장소를 선택해보세요!');
+      return;
+    }
     router.replace(route);
     sessionStorage.setItem('searchContent', searchContent);
   };

diff --git a/src/app/pages/travel-traveler-page.tsx b/src/app/pages/travel-traveler-page.tsx
@@ -67,7 +67,6 @@ export function TravelerPage() {
     const savedContent = sessionStorage.getItem('searchContent');
     if (savedContent) {
       setLocation(savedContent);
-      sessionStorage.removeItem('searchContent');
     }
   }, []);
 

diff --git a/src/components/DropBox.tsx b/src/components/DropBox.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { useEffect, useRef } from 'react';
 
 import { DropBoxMenu } from '@/features/trip';
 
@@ -18,8 +19,25 @@ export function DropBox({
   setContent: (content: string) => void;
   setDropBoxVisible: (i: boolean) => void;
 }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handler = (event: MouseEvent) => {
+      if (
+        containerRef.current !== null &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setDropBoxVisible(false);
+      }
+    };
+
+    document.addEventListener('click', handler);
+    return () => {
+      document.removeEventListener('click', handler);
+    };
+  }, []);
+
   return (
-    <styles.wrapper>
+    <styles.wrapper ref={containerRef}>
       <styles.container>
         <div className='listWrapper'>
           <div className='listContainer'>

diff --git a/src/components/travel/DetailCard.tsx b/src/components/travel/DetailCard.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { CustomButton } from '../CustomButton';
 import { TimeCard } from '../TimeCard';
 
+import { Loading } from '@/components/travel/Loading';
 import { useTourSpotData } from '@/features/tour-spot';
 import type { TripItem } from '@/features/trip';
 
@@ -34,7 +35,7 @@ export function DetailCard({
 }) {
   const [time, setTime] = useState<Times>(place.time ?? '오전');
 
-  const { data: tourSpot } = useTourSpotData(
+  const { data: tourSpot, isLoading } = useTourSpotData(
     place.item.contentId,
     place.item.contentTypeId,
   );
@@ -105,6 +106,8 @@ export function DetailCard({
     setIsDetailVisible(false);
   };
 
+  if (isLoading) return <Loading type='detail' />;
+
   return (
     <styles.wrapper>
       <styles.placeCon>

diff --git a/src/components/travel/Loading.tsx b/src/components/travel/Loading.tsx
@@ -2,19 +2,23 @@
 
 import styled from '@emotion/styled';
 
-export function Loading({ type }: { type: 'record' | 'travel' }) {
+const typeMap: Record<'record' | 'travel' | 'detail', React.ReactElement> = {
+  record: <p>기록을 불러오는 중입니다</p>,
+  travel: (
+    <p>
+      흥미로운 여행지를
+      <br />
+      선택해보세요!
+    </p>
+  ),
+  detail: <p>잠시만 기다려주세요!</p>,
+};
+
+export function Loading({ type }: { type: 'record' | 'travel' | 'detail' }) {
   return (
     <styles.wrapper>
       <div>
-        {type === 'travel' ? (
-          <p>
-            흥미로운 여행지를
-            <br />
-            선택해보세요!
-          </p>
-        ) : (
-          <p>기록을 불러오는 중입니다</p>
-        )}
+        {typeMap[type]}
         <div className='loader' />
       </div>
     </styles.wrapper>

diff --git a/src/components/travel/traveler/TravelerActivityRecommendation.tsx b/src/components/travel/traveler/TravelerActivityRecommendation.tsx
@@ -50,7 +50,7 @@ export function TravelerActivityRecommendation({
   onNextPage: () => void;
   onPrevPage: () => void;
 }) {
-  const { isRecommendLoading, tourInfo, recommendContent, fillActivities } =
+  const { isLoading, tourInfo, recommendContent, fillActivities } =
     useTripStore();
 
   const [isDetailVisible, setIsDetailVisible] = useState(false);
@@ -65,7 +65,7 @@ export function TravelerActivityRecommendation({
 
   return (
     <styles.container>
-      {!isDetailVisible && !isRecommendLoading && (
+      {!isDetailVisible && !isLoading && (
         <styles.header>
           <styles.prevButton
             src='/chevron-left.svg'
@@ -75,15 +75,15 @@ export function TravelerActivityRecommendation({
         </styles.header>
       )}
       <ResultWrapper
-        isLoading={isRecommendLoading}
+        isLoading={isLoading}
         isDetailVisible={isDetailVisible}
         selectedPlace={selectedPlace}
         selectedPlaces={selectedPlaces}
         setSelectedPlaces={setSelectedPlaces}
         setIsDetailVisible={setIsDetailVisible}
         handleCardClick={handleCardClick}
       />
-      {!isRecommendLoading && !isDetailVisible && (
+      {!isLoading && !isDetailVisible && (
         <CustomButton
           color='#FF75C8'
           text='여행 완성'

diff --git a/src/components/travel/traveler/TravelerActivitySelection.tsx b/src/components/travel/traveler/TravelerActivitySelection.tsx
@@ -3,6 +3,7 @@
 import styled from '@emotion/styled';
 
 import { CustomButton, SearchBox } from '@/components';
+import { useToast } from '@/features/toast';
 import { postDayTrip } from '@/features/trip';
 import { useTripStore } from '@/features/trip/trip.slice';
 
@@ -45,11 +46,13 @@ export function TravelerActivitySelection({
   const {
     tourInfo,
     recommendContent,
-    setIsRecommendLoading,
+    setIsLoading,
     setRecommendContent,
     setRecommendedItems,
   } = useTripStore();
 
+  const { createToast } = useToast();
+
   return (
     <styles.container>
       <styles.header>
@@ -67,7 +70,8 @@ export function TravelerActivitySelection({
           setRecommendContent(value);
         }}
         onClick={() => {
-          setIsRecommendLoading(true);
+          setIsLoading(true);
+
           postDayTrip({
             tourDate: new Date().toISOString(),
             sigunguCode: String(
@@ -81,10 +85,17 @@ export function TravelerActivitySelection({
               )?.id ?? '1',
             ),
             dayTimes: ['MORNING', 'AFTERNOON', 'EVENING', 'NIGHT'],
-          }).then((res) => {
-            setRecommendedItems(res.data);
-            setIsRecommendLoading(false);
-          });
+          })
+            .then((res) => {
+              setRecommendedItems(res.data);
+            })
+            .catch(() => {
+              createToast('error', '오류가 발생했습니다. 다시 시도해주세요.');
+              onPrevPage();
+            })
+            .finally(() => {
+              setIsLoading(false);
+            });
 
           onNextPage();
         }}
@@ -93,7 +104,7 @@ export function TravelerActivitySelection({
         color='#FF75C8'
         text='알아서 해줘'
         onClick={() => {
-          setIsRecommendLoading(true);
+          setIsLoading(true);
           postDayTrip({
             tourDate: new Date().toISOString(),
             sigunguCode: String(
@@ -107,10 +118,15 @@ export function TravelerActivitySelection({
               )?.id ?? '1',
             ),
             dayTimes: ['MORNING', 'AFTERNOON', 'EVENING', 'NIGHT'],
-          }).then((res) => {
-            setRecommendedItems(res.data);
-            setIsRecommendLoading(false);
-          });
+          })
+            .then((res) => {
+              setRecommendedItems(res.data);
+              setIsLoading(false);
+            })
+            .catch(() => {
+              createToast('error', '오류가 발생했습니다. 다시 시도해주세요.');
+              onPrevPage();
+            });
 
           onNextPage();
         }}

diff --git a/src/components/travel/traveler/TravelerAddDays.tsx b/src/components/travel/traveler/TravelerAddDays.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { CustomButton } from '@/components';
 import { TravelerLocationConfirm } from '@/components/travel/traveler/TravelerLocationConfirm';
 import { TravelerLocationSearch } from '@/components/travel/traveler/TravelerLocationSearch';
+import { useToast } from '@/features/toast';
 import { getTourSpots, type GetTourSpotsDTO } from '@/features/tour-spot';
 import { TIME_STRING } from '@/features/trip';
 import { useTripStore } from '@/features/trip/trip.slice';
@@ -34,6 +35,8 @@ export function TravelerAddDays({
     removeActivity,
   } = useTripStore();
 
+  const { createToast } = useToast();
+
   return (
     <>
       {state.ui === 'main' && (
@@ -149,6 +152,8 @@ export function TravelerAddDays({
                 )
               ) {
                 setState((prev) => ({ ...prev, time }));
+              } else {
+                createToast('error', '이미 선택된 시간대입니다!');
               }
             }}
             onConfirm={() => {

diff --git a/src/components/travel/traveler/TravelerLocationSearch.tsx b/src/components/travel/traveler/TravelerLocationSearch.tsx
@@ -35,7 +35,7 @@ const styles = {
     flex-direction: column;
     gap: 2rem;
 
-    h1 {
+    h2 {
       font-family: Noto Sans KR;
       font-size: 23px;
       font-weight: 700;
@@ -52,7 +52,7 @@ const styles = {
     position: fixed;
     align-items: center;
     gap: 0.5rem;
-    transform: translate(-175%, 45%);
+    transform: translate(-110%, 45%);
   `,
 
   prevButton: styled.img`