fix: 유저태그 해시태그 타입가드 설정, 리뷰 작성 이미지 사이즈 조절, 기타 css 수정

src/api/review/createReview.ts

@@ -2,7 +2,6 @@ import { Travel } from '@/@types/travel';
 import { http } from '../fetcher';
 
 interface WritableTravelResponse {
-  status: string;
   content: Travel[];
   total: number;
   currentPage: number;
@@ -11,7 +10,7 @@ interface WritableTravelResponse {
 
 export const getWritableTravelReview = (size: number, page: number) => {
   return http.get<WritableTravelResponse>(
-    `/travels/reviews/pending?size=${size}&page=${page}`,
+    `/travels/reviews/pending?limit=${size}&page=${page}`,
   );
 };
 

src/components/card/travel/TravelPlanCard.tsx

@@ -8,8 +8,8 @@ const TravelPlanCard = ({
   description,
 }: Omit<TravelPlan, 'tripDay' | 'tripOrderNumber'>) => {
   return (
-    <div className="aspect-[249/204] max-w-[546px] overflow-hidden rounded bg-background-alternative sm:flex sm:aspect-[538/130]">
-      <div className="flex h-[50%] w-full flex-shrink-0 overflow-hidden sm:h-full sm:w-[50%]">
+    <div className="max-w-[546px] overflow-hidden rounded bg-background-alternative sm:flex sm:aspect-[538/130]">
+      <div className="flex aspect-[249/100] h-[50%] w-full flex-shrink-0 overflow-hidden sm:h-full sm:w-[50%]">
         <Image
           src={image}
           alt={`${destination} 일정 이미지`}
@@ -19,14 +19,12 @@ const TravelPlanCard = ({
         />
       </div>
 
-      <div className="flex flex-col items-start justify-center px-3 py-4 sm:px-5 xl:w-[50%]">
-        <div className="heading-1-b flex items-center gap-1">
+      <div className="relative flex flex-col items-start justify-start overflow-scroll px-3 py-4 custom-scrollbar sm:px-5 xl:w-[50%]">
+        <div className="heading-1-b flex w-full items-start gap-1">
           <LocationIcon fill="#6B7280" stroke="#6B7280" />
           <span>{destination}</span>
         </div>
-        <div className="body-2-r line-clamp-2 pt-1 sm:line-clamp-none">
-          {description}
-        </div>
+        <div className="body-2-r">{description}</div>
       </div>
     </div>
   );

src/components/card/user/UserCard.tsx

@@ -27,11 +27,9 @@ const UserCard = ({
 
       <div className="flex items-center justify-center gap-1.5">
         {hashTags
-          .split('#')
+          ?.split('#')
           .filter((str) => str.trim() !== '')
-          .map((str) => (
-            <UserTag label={str} key={str} />
-          ))}
+          .map((str) => <UserTag label={str} key={str} />)}
       </div>
     </Link>
   );

src/components/common/skeleton/travelList/SkeletonTravelList.tsx

@@ -3,8 +3,8 @@ import SkeletonTravelCardBig from '../card/SkeletonTravelCardBig';
 const SkeletonTravelList = () => {
   return (
     <div className="grid h-full w-full gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:gap-6 2xl:grid-cols-4">
-      {[1, 2, 3, 4].map((v) => (
-        <SkeletonTravelCardBig key={v} />
+      {Array.from({ length: 12 }, (_, i) => (
+        <SkeletonTravelCardBig key={i} />
       ))}
     </div>
   );

src/components/review/new/SelectTravel.tsx

@@ -21,7 +21,9 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
   const {
     data: travels,
     isLoading,
+    isFetching,
     isError,
+    error,
     hasNextPage,
     fetchNextPage,
   } = useCreateReviewSelectTravel();
@@ -58,19 +60,24 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
   }, []);
 
   useEffect(() => {
-    if (inView && hasNextPage) {
+    if (inView && hasNextPage && !isFetching) {
       fetchNextPage();
     }
-  }, [inView, hasNextPage, fetchNextPage]);
+  }, [inView, hasNextPage, fetchNextPage, isFetching]);
 
   if (isLoading) {
     return (
       <div className="flex h-5 w-5 flex-col items-center justify-center gap-5 p-8">
-        <SpinnerIcon className="animate-spin" />
+        로딩중
       </div>
     );
   }
-  if (isError) return <div>에러</div>;
+
+  if (isError) return <div>에러{error?.message}</div>;
+
+  if (travels?.pages[0].content.length === 0) {
+    return <div key="no-travel">다녀온 여행이 없어요</div>;
+  }
 
   return (
     <div className="mt-4">
@@ -104,31 +111,27 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
             <span className="w-full overflow-y-scroll custom-scrollbar">
               {travels &&
                 travels.pages.map((page) =>
-                  page.content.length === 0 ? (
-                    <div key="no-travel">다녀온 여행이 없어요</div>
-                  ) : (
-                    page.content.map((travel) => (
-                      <button
-                        key={travel.travelId}
-                        type="button"
-                        aria-label={`${travel.travelName} 선택하기`}
-                        onClick={() =>
-                          handleSelect(travel.travelId, travel.travelName)
-                        }
-                        className="group flex max-h-16 w-full cursor-pointer items-center gap-1.5 px-3 py-1.5 text-interaction-inactive"
+                  page.content.map((travel) => (
+                    <button
+                      key={travel.travelId}
+                      type="button"
+                      aria-label={`${travel.travelName} 선택하기`}
+                      onClick={() =>
+                        handleSelect(travel.travelId, travel.travelName)
+                      }
+                      className="group flex max-h-16 w-full cursor-pointer items-center gap-1.5 px-3 py-1.5 text-interaction-inactive"
+                    >
+                      <CheckIcon
+                        className={`${selectedTravel.travelId === travel.travelId ? 'visible' : 'invisible'}`}
+                        aria-hidden="true"
+                      />
+                      <span
+                        className={`w-[95%] overflow-hidden truncate group-hover:text-label-neutral ${selectedTravel.travelId === travel.travelId ? 'text-label-neutral' : ''}`}
                       >
-                        <CheckIcon
-                          className={`${selectedTravel.travelId === travel.travelId ? 'visible' : 'invisible'}`}
-                          aria-hidden="true"
-                        />
-                        <span
-                          className={`w-[95%] overflow-hidden truncate group-hover:text-label-neutral ${selectedTravel.travelId === travel.travelId ? 'text-label-neutral' : ''}`}
-                        >
-                          {travel.travelName}
-                        </span>
-                      </button>
-                    ))
-                  ),
+                        {travel.travelName}
+                      </span>
+                    </button>
+                  )),
                 )}
               {hasNextPage ? (
                 <div
@@ -138,7 +141,9 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
                 >
                   <SpinnerIcon className="animate-spin" />
                 </div>
-              ) : null}
+              ) : (
+                <div aria-label="마지막 리스트 입니다" />
+              )}
             </span>
           </div>
         )}

src/components/review/new/participant/InputImage.tsx

@@ -8,7 +8,7 @@ import useCreateReviewStore from '@/store/useCreateReview';
 import { compressImage } from '@/utils/compressImage';
 
 const MAX_FILE_COUNT = 5;
-const MAX_FILE_SIZE_MB = 2;
+const MAX_FILE_SIZE_MB = 5;
 const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
 const InputImage = () => {

src/components/travel/detail/buttons/TravelButtons.tsx

@@ -127,12 +127,12 @@ const TravelButtons = ({
             fill="white"
             label="여행취소"
             handler={handleTravelCancel}
-            className="h-[52px] max-w-[242px]"
+            className="h-[52px] w-full max-w-[242px]"
           />
           <Button
             label="공유"
             handler={handleClickShare}
-            className="h-[52px] max-w-[242px]"
+            className="h-[52px] w-full max-w-[242px]"
           />
         </div>
         {isShareOpen && <TravelShare onClose={handleCloseShare} />}

src/components/travel/list/TravelList.tsx

@@ -32,14 +32,8 @@ const TravelList = () => {
 
   useEffect(() => {
     if (inView && hasNextPage) {
-      // 1초 지연 후에 fetchNextPage 호출
-      const timeoutId = setTimeout(() => {
-        fetchNextPage();
-      }, 1000);
-
-      return () => clearTimeout(timeoutId);
+      fetchNextPage();
     }
-    return undefined;
   }, [inView, hasNextPage, fetchNextPage]);
 
   if (isLoading) {

src/queries/review/useCreateReview.ts

@@ -61,7 +61,7 @@ export const useCreateReview = () => {
     }
 
     formData.append('travelId', travelId.toString());
-    formData.append('score', countStar.toString());
+    formData.append('starRating', countStar.toString());
     formData.append('title', title);
     formData.append('comment', comment);
 

src/queries/review/useCreateReviewSelectTravel.ts

@@ -3,13 +3,13 @@ import { QUERY_KEYS } from '@/constants/querykeys';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 const useCreateReviewSelectTravel = () => {
-  const size = 4;
+  const size = 8;
   return useInfiniteQuery({
     queryKey: QUERY_KEYS.REVIEW.CREATE_REVIEW_SELECT_TRAVEL(size),
-    queryFn: ({ pageParam = 1 }) => getWritableTravelReview(size, pageParam),
-    initialPageParam: 1,
+    queryFn: ({ pageParam = 0 }) => getWritableTravelReview(size, pageParam),
+    initialPageParam: 0,
     getNextPageParam: (lastPage, pages) => {
-      return !lastPage.hasNext ? pages.length + 1 : undefined;
+      return lastPage.hasNext ? pages.length + 1 : undefined;
     },
     staleTime: Infinity,
   });

src/utils/buildTravelUrl.ts

@@ -23,7 +23,7 @@ const buildTravelUrl = (filters: Filters, pageParam?: number): string => {
     params.append('page', String(pageParam));
   }
 
-  return `/travels?${params.toString()}`;
+  return `/travels?${params.toString()}&size=12`;
 };
 
 export default buildTravelUrl;