[Fix] - 검색 페이지 탭바 width 수정, 여행기 수정페이지에서 이미지 최적화 안됨 (#462)

* fix(SearchPage): 검색 페이지 탭바 width 수정

* fix(TravelogueEditPage): 여행기 수정페이지에서 썸네일 업로드 최적화 추가

frontend/src/components/pages/search/SearchPage.styled.ts

@@ -26,8 +26,10 @@ export const MainPageTraveloguesList = styled.ul`
 export const TabStyle = css`
   position: fixed;
   z-index: 1000;
-  width: 45rem;
+  width: 100%;
   height: 5rem;
+  max-width: 45rem;
+  margin: auto;
 
   background-color: ${PRIMITIVE_COLORS.white};
 `;

frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx

@@ -33,6 +33,7 @@ import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import { extractID } from "@utils/extractId";
+import resizeAndConvertImage from "@utils/resizeAndConvertImage";
 
 import * as S from "./TravelogueEditPage.styled";
 
@@ -81,7 +82,11 @@ const TravelogueEditPage = () => {
   const { mutateAsync: mutateAddImage, isPaused } = usePostUploadImages();
 
   const handleChangeThumbnail = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const thumbnail = await mutateAddImage(Array.from(e.target.files as FileList));
+    const files = Array.from(e.target.files as FileList);
+
+    const processedFiles = await Promise.all(files.map((file) => resizeAndConvertImage(file)));
+
+    const thumbnail = await mutateAddImage(processedFiles);
     setThumbnail(thumbnail[0]);
   };