release: v1.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-travel-log",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/__test__/NavigationBar.test.tsx

@@ -40,16 +40,16 @@ describe('내비게이션 바 스냅샷 테스트', () => {
     mockUsePathname.mockReturnValue('/test');
 
     const { getByText } = render(<NavigationBar />);
-    expect(getByText('여행하기')).toBeInTheDocument();
+    expect(getByText('놀러가기')).toBeInTheDocument();
     expect(getByText('기록하기')).toBeInTheDocument();
   });
 
-  test('pathname이 / 경우 여행하기 메뉴가 활성화 되어야 합니다.', () => {
+  test('pathname이 / 경우 놀러가기 메뉴가 활성화 되어야 합니다.', () => {
     mockUsePathname.mockReturnValue('/');
     render(<NavigationBar />);
 
     expect(screen.getByAltText('travel-active-menu')).toBeInTheDocument();
-    expect(screen.getByText('여행하기')).toHaveStyle('color: #605EFF');
+    expect(screen.getByText('놀러가기')).toHaveStyle('color: #605EFF');
   });
 
   test('pathname이 /record인 경우 기록하기 메뉴가 활성화 되어야 합니다.', () => {
@@ -60,11 +60,11 @@ describe('내비게이션 바 스냅샷 테스트', () => {
     expect(screen.getByText('기록하기')).toHaveStyle('color: #605EFF');
   });
 
-  test('여행하기 메뉴에 클릭 이벤트가 발생한 경우 router가 / 로 replace 되어야 합니다.', () => {
+  test('놀러가기 메뉴에 클릭 이벤트가 발생한 경우 router가 / 로 replace 되어야 합니다.', () => {
     mockUsePathname.mockReturnValue('/');
 
     const { getByText } = render(<NavigationBar />);
-    fireEvent.click(getByText('여행하기'));
+    fireEvent.click(getByText('놀러가기'));
 
     expect(mockRouter.replace).toHaveBeenCalledWith('/');
   });

src/app/pages/travel-page.tsx

@@ -34,11 +34,15 @@ export function TravelPage() {
           <br />
           어디가실 계획인가요?
         </h2>
-        <SearchBox setContent={setSearchContent} dropBoxType='regionType' />
+        <SearchBox
+          setContent={setSearchContent}
+          dropBoxType='regionType'
+          placeholder='가고 싶은 곳을 입력하세요.'
+        />
         <styles.btnCon>
           <CustomButton
             color='#FF75C8'
-            text='알아서 해줘'
+            text='선택 완료'
             onClick={() => {
               handleButtonClick('/travel/auto');
             }}

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,19 +140,25 @@
           <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':
         return (
           <TravelerTravelArrange
             onNextPage={() => {
-              router.replace('/');
+              router.replace('/record');
             }}
-            onPrevPage={() => dispatch({ type: 'PREV' })}
           />
         );
       default:
         return <></>;
     }
   };
 

src/components/NavigationBar.tsx

@@ -49,12 +49,12 @@ export function NavigationBar() {
           {pathName === '/' || pathName.startsWith('/travel') ? (
             <styles.menu $active>
               <styles.icon src='/travel-active.png' alt='travel-active-menu' />
-              여행하기
+              놀러가기
             </styles.menu>
           ) : (
             <styles.menu>
               <styles.icon src='/travel.png' alt='travel-menu' />
-              여행하기
+              놀러가기
             </styles.menu>
           )}
         </button>

src/components/SearchBox.tsx

@@ -9,10 +9,14 @@ export function SearchBox({
   onClick,
   setContent,
   dropBoxType,
+  placeholder,
+  className,
 }: {
   onClick?: () => void;
   setContent?: (value: string) => void;
   dropBoxType?: 'travelType' | 'regionType';
+  placeholder?: string;
+  className?: string;
 }) {
   const [value, setValue] = useState<string | null>(null);
   const [dropBoxVisible, setDropBoxVisible] = useState(false);
@@ -27,9 +31,11 @@ export function SearchBox({
       onClick={() => {
         if (dropBoxType !== undefined) setDropBoxVisible(true);
       }}
+      className={className}
     >
       <styles.searchInput
-        placeholder='키워드나 활동을 찾아보세요.'
+        readOnly={dropBoxType != null}
+        placeholder={placeholder || '키워드나 활동을 찾아보세요.'}
         value={value ?? ''}
         onChange={
           dropBoxType === undefined

src/components/TravelLog.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { Loading } from './travel/Loading';
 import { ReviewCard } from './travel/ReviewCard';
 
+import { useToast } from '@/features/toast';
 import {
   type TourActivityDTO,
   translateDayTime,
@@ -30,6 +31,7 @@ const groupByDayNumber = (
 export function TravelLog({ selectedTravel }: { selectedTravel: number }) {
   const router = useRouter();
   const [selectedDay, setSelectedDay] = useState<number | null>(null);
+  const { createToast } = useToast();
 
   const { data: tripSchedule, status } = useTripSchedule(selectedTravel);
   const [groupedData, setGroupedData] = useState<
@@ -52,21 +54,38 @@ export function TravelLog({ selectedTravel }: { selectedTravel: number }) {
       ...prev,
       [id]: review,
     }));
-    updateReview({
-      tourActivityId: id,
-      history: review,
-    });
+    updateReview(
+      {
+        tourActivityId: id,
+        history: review,
+      },
+      {
+        onSuccess: () => {
+          createToast(
+            review != null ? 'success' : 'error',
+            review != null
+              ? '한 줄 평이 저장되었습니다!'
+              : '한 줄 평이 삭제되었습니다.',
+          );
+        },
+      },
+    );
   };
 
   const handleSetRecommend = (id: number, recommend: boolean | null) => {
     setRecommends((prev) => ({
       ...prev,
       [id]: recommend,
     }));
-    updateRecommend({
-      tourActivityId: id,
-      recommend,
-    });
+    updateRecommend(
+      {
+        tourActivityId: id,
+        recommend,
+      },
+      {
+        onSuccess: () => createToast('success', '저장되었습니다!'),
+      },
+    );
   };
 
   useEffect(() => {
@@ -120,6 +139,11 @@ export function TravelLog({ selectedTravel }: { selectedTravel: number }) {
                       onClick={() => {
                         setSelectedDay(dayNumber);
                         setCurrentPage(0);
+                        createToast(
+                          'info',
+                          '여행에 대한 한 줄 평과 좋아요를 남겨보세요!',
+                          5000,
+                        );
                       }}
                     >
                       기록하기
@@ -130,7 +154,9 @@ export function TravelLog({ selectedTravel }: { selectedTravel: number }) {
                       <li key={activity.id}>
                         <div className='contents'>
                           <styles.pin src='/gray-pin.svg' alt='gray-pin-icon' />
-                          <p className='name'>{activity.spotName}</p>
+                          <styles.name $isHistory={activity.history}>
+                            {activity.spotName}
+                          </styles.name>
                           <span className='dotted-line' />
                           <p className='time'>
                             {translateDayTime(activity.dayTime)}
@@ -221,6 +247,10 @@ interface ActiveProp {
   $active: boolean;
 }
 
+interface History {
+  $isHistory?: string | null;
+}
+
 const styles = {
   wrapper: styled.div`
     flex: 1 0 0;
@@ -322,21 +352,6 @@ const styles = {
         align-items: center;
       }
 
-      .name {
-        color: #7d7d7d;
-        font-family: 'Noto Sans KR';
-        font-size: 0.9375rem;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        letter-spacing: -0.01875rem;
-
-        max-width: 50%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       .dotted-line {
         flex-grow: 1;
         border-bottom: 1px dashed #d3d3d3;
@@ -354,6 +369,24 @@ const styles = {
     }
   `,
 
+  name: styled.p<History>`
+    color: #7d7d7d;
+    font-family: 'Noto Sans KR';
+    font-size: 0.9375rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: -0.01875rem;
+
+    background-color: ${(props) =>
+      props.$isHistory != null ? '#f5fca6' : 'transparent'};
+
+    max-width: 50%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,
+
   pin: styled.img`
     width: 0.3125rem;
     height: 0.875rem;

src/components/profile/EditPasswordSection.tsx

@@ -3,13 +3,13 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 
-import { useChangePassword } from '@/features/member';
+import { putPassword } from '@/features/member/member.api';
+import { useToast } from '@/features/toast';
 
 export function EditPasswordSection({ onClick }: { onClick: () => void }) {
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
-
-  const { mutate: changePWD } = useChangePassword();
+  const { createToast } = useToast();
 
   return (
     <styles.container>
@@ -37,8 +37,14 @@ export function EditPasswordSection({ onClick }: { onClick: () => void }) {
       </ul>
       <styles.submitButton
         onClick={() => {
-          changePWD({ oldPassword, newPassword });
-          onClick();
+          putPassword(oldPassword, newPassword)
+            .then(() => {
+              createToast('success', '비밀번호가 변경되었습니다.');
+            })
+            .catch(() => {
+              createToast('error', '현재 비밀번호가 일치하지 않습니다.');
+            })
+            .finally(onClick);
         }}
       >
         확인