feat: Applied feedback

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,7 +34,11 @@ export function TravelPage() {
           <br />
           어디가실 계획인가요?
         </h2>
-        <SearchBox setContent={setSearchContent} dropBoxType='regionType' />
+        <SearchBox
+          setContent={setSearchContent}
+          dropBoxType='regionType'
+          placeholder='가고 싶은 곳을 입력하세요.'
+        />
         <styles.btnCon>
           <CustomButton
             color='#FF75C8'

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,10 @@ export function SearchBox({
       onClick={() => {
         if (dropBoxType !== undefined) setDropBoxVisible(true);
       }}
+      className={className}
     >
       <styles.searchInput
-        placeholder='키워드나 활동을 찾아보세요.'
+        placeholder={placeholder || '키워드나 활동을 찾아보세요.'}
         value={value ?? ''}
         onChange={
           dropBoxType === undefined

src/components/TravelLog.tsx

@@ -130,7 +130,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 +223,10 @@ interface ActiveProp {
   $active: boolean;
 }
 
+interface History {
+  $isHistory?: string | null;
+}
+
 const styles = {
   wrapper: styled.div`
     flex: 1 0 0;
@@ -322,21 +328,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 +345,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);
         }}
       >
         확인

src/components/profile/EditProfileSection.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 
 import { useChangeUserName, type User } from '@/features/member';
+import { useToast } from '@/features/toast';
 
 export function EditProfileSection({
   user,
@@ -49,6 +50,7 @@ function ProfileInfo({
 function ListItem({ menu, content }: { menu: string; content?: string }) {
   const [value, setValue] = useState<string>();
   const { mutate: changeUserName } = useChangeUserName();
+  const { createToast } = useToast();
   return (
     <li>
       <p>{menu}</p>
@@ -62,7 +64,13 @@ function ListItem({ menu, content }: { menu: string; content?: string }) {
       {menu === '닉네임' && (
         <styles.changeButton
           onClick={() => {
-            if (value) changeUserName(value);
+            if (value)
+              changeUserName(value, {
+                onSuccess: () =>
+                  createToast('success', '변경이 완료되었습니다.'),
+                onError: () =>
+                  createToast('error', '변경하려는 이름이 너무 깁니다.'),
+              });
           }}
         >
           변경하기
@@ -141,6 +149,7 @@ const styles = {
   `,
 
   changeButton: styled.button`
+    min-width: 3.33rem;
     padding: 0.15rem 0.38rem;
     border-radius: 0.25rem;
     border: 0.4px solid #c9c9c9;
@@ -188,7 +197,7 @@ const styles = {
 
       input {
         border: none;
-        width: 50%;
+        flex: 1;
         height: 100%;
         color: #b5b5b5;
         text-align: right;

src/components/travel/traveler/TravelerActivitySelection.tsx

@@ -64,7 +64,7 @@ export function TravelerActivitySelection({
       </styles.header>
       <styles.caption>나머지 일정도 추천해드릴게요.</styles.caption>
       <styles.description>어떤 활동을 하고 싶으세요?</styles.description>
-      <SearchBox
+      <styles.SearchBox
         dropBoxType='travelType'
         setContent={(value) => {
           setRecommendContent(value);
@@ -100,37 +100,6 @@ export function TravelerActivitySelection({
           onNextPage();
         }}
       />
-      <styles.CustomButton
-        color='#FF75C8'
-        text='알아서 해줘'
-        onClick={() => {
-          setIsLoading(true);
-          postDayTrip({
-            tourDate: new Date().toISOString(),
-            sigunguCode: String(
-              types.regionType.find(
-                (region) => region.type === tourInfo.locationName,
-              )?.id ?? '1',
-            ),
-            contentTypeId: String(
-              types.travelType.find(
-                (region) => region.type === recommendContent,
-              )?.id ?? '1',
-            ),
-            dayTimes: ['MORNING', 'AFTERNOON', 'EVENING', 'NIGHT'],
-          })
-            .then((res) => {
-              setRecommendedItems(res.data);
-              setIsLoading(false);
-            })
-            .catch(() => {
-              createToast('error', '오류가 발생했습니다. 다시 시도해주세요.');
-              onPrevPage();
-            });
-
-          onNextPage();
-        }}
-      />
     </styles.container>
   );
 }
@@ -185,4 +154,8 @@ const styles = {
     width: 1rem;
     height: 1rem;
   `,
+
+  SearchBox: styled(SearchBox)`
+    margin-bottom: auto;
+  `,
 };

src/components/travel/traveler/TravelerLocationSearch.tsx

@@ -23,7 +23,11 @@ export function TravelerLocationSearch({
         />
       </styles.header>
       <h2>미리 계획한 장소를 입력하세요.</h2>
-      <SearchBox setContent={onContentChange} onClick={onClick} />
+      <SearchBox
+        setContent={onContentChange}
+        onClick={onClick}
+        placeholder='장소를 입력해주세요.'
+      />
     </styles.container>
   );
 }

src/features/member/member.hook.ts

@@ -71,7 +71,7 @@ export const useChangePassword = () =>
       oldPassword: string;
       newPassword: string;
     }) => putPassword(oldPassword, newPassword),
-    onSuccess: (data) => data.data,
+    onSuccess: (data) => data,
   });
 
 export const useAuth = () => {

src/providers/AuthProvider.tsx

@@ -120,7 +120,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       async (error) => {
         if (
           error.response?.status === 500 &&
-          error.response?.data.data === '필터 내부의 예외가 발생했습니다.'
+          error.response?.data.data === '필터 내부의 예외가 발생했습니다.' &&
+          !error.response?.request.responseURL.endsWith('namechange')
         ) {
           createToast('error', '서버와의 통신에 실패하였습니다.');
         }