feat: apply feedback points

src/app/pages/travel-traveler-page.tsx

@@ -34,20 +34,20 @@
       NEXT: 'traveler-add-days',
     },
     'traveler-add-days': {
-      NEXT: 'traveler-activity-selection',
+      NEXT: 'traveler-travel-schedule-confirm',
       PREV: 'traveler-schedule-selection',
     },
     'traveler-activity-selection': {
       NEXT: 'traveler-activity-recommendation',
-      PREV: 'traveler-add-days',
+      PREV: 'traveler-travel-schedule-confirm',
     },
     'traveler-activity-recommendation': {
       NEXT: 'traveler-travel-schedule-confirm',
       PREV: 'traveler-activity-selection',
     },
     'traveler-travel-schedule-confirm': {
       NEXT: 'traveler-travel-schedule-arrange',
-      PREV: 'traveler-activity-selection',
+      PREV: 'traveler-add-days',
     },
     'traveler-travel-schedule-arrange': {
       PREV: 'traveler-travel-schedule-confirm',
@@ -61,14 +61,15 @@
 };
 
 export function TravelerPage() {
-  const { tourInfo, isAllTravelSchedulesFilled, setLocation } = useTripStore();
+  const { tourInfo, isAllTravelSchedulesFilled, setLocation, setSelectedDay } =
+    useTripStore();
 
   useEffect(() => {
     const savedContent = sessionStorage.getItem('searchContent');
     if (savedContent) {
       setLocation(savedContent);
     }
   }, []);
 
   const [uiState, dispatch] = useReducer(
     uiReducer,
@@ -139,6 +140,13 @@
           <TravelerScheduleConfirm
             onNextPage={() => dispatch({ type: 'NEXT' })}
             onPrevPage={() => dispatch({ type: 'PREV' })}
+            onRecommendPage={(day) => {
+              setSelectedDay(day);
+              dispatch({
+                type: 'NEXT',
+                payload: { nextState: 'traveler-activity-selection' },
+              });
+            }}
           />
         );
       case 'traveler-travel-schedule-arrange':
@@ -147,11 +155,10 @@
             onNextPage={() => {
               router.replace('/record');
             }}
-            onPrevPage={() => dispatch({ type: 'PREV' })}
           />
         );
       default:
         return <></>;
     }
   };
 

src/components/SearchBox.tsx

@@ -34,6 +34,7 @@ export function SearchBox({
       className={className}
     >
       <styles.searchInput
+        readOnly={dropBoxType != null}
         placeholder={placeholder || '키워드나 활동을 찾아보세요.'}
         value={value ?? ''}
         onChange={

src/components/travel/traveler/TravelerActivityRecommendation.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { CustomButton, LoadingCard } from '@/components';
 import { DetailCard, Loading } from '@/components/travel';
+import { useToast } from '@/features/toast';
 import type { TripItem } from '@/features/trip';
 import { useTripStore } from '@/features/trip/trip.slice';
 
@@ -50,7 +51,7 @@ export function TravelerActivityRecommendation({
   onNextPage: () => void;
   onPrevPage: () => void;
 }) {
-  const { isLoading, tourInfo, recommendContent, fillActivities } =
+  const { isLoading, tourInfo, recommendContent, fillActivities, selectedDay } =
     useTripStore();
 
   const [isDetailVisible, setIsDetailVisible] = useState(false);
@@ -63,6 +64,17 @@ export function TravelerActivityRecommendation({
     setIsDetailVisible(true);
   };
 
+  const { createToast } = useToast();
+
+  useEffect(() => {
+    if (!isLoading)
+      createToast(
+        'info',
+        '기존 계획에 특정 시간대가 추가되어있다면, 추천에서 해당 시간대를 추가하더라도 추가되지 않습니다.',
+        5000,
+      );
+  }, [isLoading]);
+
   return (
     <styles.container>
       {!isDetailVisible && !isLoading && (
@@ -88,7 +100,10 @@ export function TravelerActivityRecommendation({
           color='#FF75C8'
           text='여행 완성'
           onClick={() => {
+            if (!selectedDay) return;
+
             fillActivities(
+              selectedDay,
               selectedPlaces.map((place) => ({
                 dayTime: convertTimeString(place.time ?? '오전'),
                 orderIndex: 0,

src/components/travel/traveler/TravelerAddDays.tsx

@@ -7,10 +7,21 @@ 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 {
+  getTourSpotContents,
+  getTourSpots,
+  type GetTourSpotsDTO,
+} from '@/features/tour-spot';
+import { postDayTrip, TIME_STRING } from '@/features/trip';
 import { useTripStore } from '@/features/trip/trip.slice';
 
+interface Location {
+  contentId: string;
+  contentTypeId: string;
+  title: string;
+  imageUrl: string;
+}
+
 export function TravelerAddDays({
   onPrevPage,
   onNextPage,
@@ -33,10 +44,13 @@ export function TravelerAddDays({
     removeTour,
     addActivity,
     removeActivity,
+    setIsLoading,
   } = useTripStore();
 
   const { createToast } = useToast();
 
+  const [locations, setLocations] = useState<Location[]>([]);
+
   return (
     <>
       {state.ui === 'main' && (
@@ -112,18 +126,45 @@ export function TravelerAddDays({
       )}
       {state.ui === 'search' && (
         <TravelerLocationSearch
+          locations={locations}
           onClick={() => {
             if (!state.location) return;
 
-            getTourSpots(state.location, tourInfo.sigunguCode ?? '').then(
-              (res) => {
-                setState((prev) => ({
-                  ...prev,
-                  ui: 'confirm',
-                  tourSpotDto: res,
-                }));
-              },
-            );
+            setLocations([]);
+            setIsLoading(true);
+            getTourSpots(state.location, tourInfo.sigunguCode ?? '')
+              .then((res) => {
+                const { contentId, contentTypeId, sigunguCode } = res.data;
+
+                getTourSpotContents(contentId, contentTypeId)
+                  .then((content) => ({ data: content.data }))
+                  .then((contentData) => {
+                    postDayTrip({
+                      contentTypeId,
+                      dayTimes: ['MORNING', 'AFTERNOON', 'EVENING', 'NIGHT'],
+                      sigunguCode,
+                      tourDate: new Date().toISOString(),
+                    })
+                      .then((recommend) => {
+                        setLocations((prev) => [
+                          ...prev,
+                          ...recommend.data.filter(
+                            (v) => v.contentId !== contentData.data.contentId,
+                          ),
+                          {
+                            contentId: contentData.data.contentId,
+                            contentTypeId: contentData.data.contentTypeId,
+                            title: contentData.data.title,
+                            imageUrl: contentData.data.firstImage,
+                          },
+                        ]);
+                      })
+                      .finally(() => setIsLoading(false));
+                  });
+              })
+              .catch(() => {
+                setIsLoading(false);
+              });
           }}
           onContentChange={(value) =>
             setState((prev) => ({ ...prev, location: value }))
@@ -134,6 +175,21 @@ export function TravelerAddDays({
               ui: 'main',
             }));
           }}
+          onItemClick={(location) => {
+            setState((prev) => ({
+              ...prev,
+              ui: 'confirm',
+              tourSpotDto: {
+                status: 'success',
+                data: {
+                  title: location.title,
+                  contentId: location.contentId,
+                  contentTypeId: location.contentTypeId,
+                  sigunguCode: tourInfo.sigunguCode ?? '1',
+                },
+              },
+            }));
+          }}
         />
       )}
       {state.ui === 'confirm' &&
@@ -180,6 +236,7 @@ export function TravelerAddDays({
               });
 
               setState(() => ({ ui: 'main' }));
+              setLocations([]);
             }}
             onPrevPage={() => {
               setState((prev) => ({ ...prev, ui: 'search' }));

src/components/travel/traveler/TravelerLocationSearch.tsx

@@ -3,16 +3,33 @@
 import styled from '@emotion/styled';
 
 import { SearchBox } from '@/components';
+import { Loading } from '@/components/travel';
+import { useTripStore } from '@/features/trip/trip.slice';
+
+interface Location {
+  contentId: string;
+  contentTypeId: string;
+  title: string;
+  imageUrl: string;
+}
 
 export function TravelerLocationSearch({
+  locations,
   onClick,
   onContentChange,
   onPrevPage,
+  onItemClick,
 }: {
+  locations: Location[];
   onClick: () => void;
   onContentChange: (value: string) => void;
   onPrevPage: () => void;
+  onItemClick: (lcoation: Location) => void;
 }) {
+  const { isLoading } = useTripStore();
+
+  if (isLoading) return <Loading type='travel' />;
+
   return (
     <styles.container>
       <styles.header>
@@ -28,10 +45,38 @@ export function TravelerLocationSearch({
         onClick={onClick}
         placeholder='장소를 입력해주세요.'
       />
+      {locations.length > 0 ? (
+        <styles.results>
+          {locations.map((location) => (
+            <LocationItem
+              key={location.title}
+              location={location}
+              onClick={() => onItemClick(location)}
+            />
+          ))}
+        </styles.results>
+      ) : (
+        <styles.empty>검색을 해주세요!</styles.empty>
+      )}
     </styles.container>
   );
 }
 
+function LocationItem({
+  location: { title, imageUrl },
+  onClick,
+}: {
+  location: Location;
+  onClick: () => void;
+}) {
+  return (
+    <styles.locationItem onClick={onClick}>
+      <img src={imageUrl} alt={imageUrl} />
+      <p>{title}</p>
+    </styles.locationItem>
+  );
+}
+
 const styles = {
   container: styled.div`
     flex-grow: 1;
@@ -53,14 +98,46 @@ const styles = {
 
   header: styled.div`
     display: flex;
-    position: fixed;
     align-items: center;
     gap: 0.5rem;
-    transform: translate(-110%, 45%);
   `,
 
   prevButton: styled.img`
     width: 1rem;
     height: 1rem;
   `,
+
+  results: styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: 2rem;
+  `,
+
+  locationItem: styled.div`
+    width: calc(50% - 1rem);
+    height: 100px;
+
+    img {
+      width: 100%;
+      height: 90%;
+
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0px 1px 4px 0px #6e80913d;
+
+      object-fit: cover;
+      object-position: center;
+    }
+  `,
+
+  empty: styled.p`
+    font-family: Noto Sans KR;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 33.3px;
+    text-align: center;
+
+    color: #505050;
+  `,
 };