refactor: 여행 타입 정리

src/@types/api.ts

@@ -3,11 +3,19 @@ export interface APIError extends Error {
   message: string;
 }
 
-export interface ApiResponse<T> {
+export interface FetcherError extends Error {
+  status?: number;
+}
+
+export interface BaseResponse<T> {
   status: string;
   data: T;
 }
 
-export interface FetcherError extends Error {
-  status?: number;
+export interface ListResponse<T> {
+  status: string;
+  data: T[];
+  total: number;
+  currentPage: number;
+  hasNext: boolean;
 }

src/@types/travel.ts

@@ -1,57 +1,55 @@
 export interface Travel {
   travelId: number;
   travelName: string;
+  description: string;
+  travelImage: string;
+  expectedTripCost?: number;
+  currentTravelMateCount: number;
+  minTravelMateCount: number;
+  maxTravelMateCount: number;
+  hashTags: string;
   isDomestic: boolean;
-  travelStatus?: string;
-  location: string;
-  image: string;
+  travelLocation: string;
+  departureLocation?: string;
   startAt: string;
   endAt: string;
-  maxTravelMateCount: number;
-  currentTravelMateCount: number;
-  formattedStartDate?: string;
-  expectedTripCost?: number;
-  isBookmark: boolean | null;
+  registrationEnd: string;
+  tripDuration: number;
+  travelPlan: TravelPlan[];
+  participant: Participant[];
+  participationFlag: boolean | null;
+  bookmarkFlag: boolean | null;
 }
 
 export interface TravelPlan {
   tripDay: number;
   tripOrderNumber: number;
   destination: string;
   description: string;
-  image: string;
+  travelPlanImage: string;
 }
 
+export type TravelCard = Pick<
+  Travel,
+  | 'travelId'
+  | 'travelImage'
+  | 'isDomestic'
+  | 'travelName'
+  | 'travelLocation'
+  | 'maxTravelMateCount'
+  | 'currentTravelMateCount'
+  | 'startAt'
+  | 'endAt'
+  | 'bookmarkFlag'
+>;
+
 export interface Participant {
   id: number;
   nickname: string;
   role: string;
   profileImage: string;
 }
 
-export interface TravelDetail {
-  travelId: number;
-  travelName: string;
-  description: string;
-  image: string;
-  expectedTripCost: number;
-  currentTravelMateCount: number;
-  minTravelMateCount: number;
-  maxTravelMateCount: number;
-  hashTags: string;
-  isDomestic: boolean;
-  travelLocation: string;
-  departureLocation: string;
-  startAt: string;
-  endAt: string;
-  registrationEnd: string;
-  tripDuration: number;
-  travelPlan: TravelPlan[];
-  participant: Participant[];
-  participationFlag: boolean | null;
-  bookmarkFlag: boolean | null;
-}
-
 export interface TravelReviewRateScore {
   oneStarReviews: number;
   twoStarReviews: number;
@@ -103,7 +101,7 @@ export interface TravelList {
 }
 
 export interface MyTravel {
-  content: TravelList[];
+  content: Travel[];
   total: number;
   currentPage: number;
   hasNext: boolean;

src/api/travel/travels.ts

@@ -1,13 +1,13 @@
 import {
   Filters,
   Travel,
-  TravelDetail,
   TravelFilterResponse,
   MyTravel,
   MyTravelResponse,
+  TravelCard,
 } from '@/@types/travel';
 import buildTravelUrl from '@/utils/buildTravelUrl';
-import { ApiResponse } from '@/@types/api';
+import { BaseResponse } from '@/@types/api';
 import { http } from '../fetcher';
 
 export const postTravelParticipation = (travelId: number) => {
@@ -23,17 +23,17 @@ export const deleteTravel = (travelId: number) => {
 };
 
 export const getPopularTravel = () => {
-  return http.get<ApiResponse<Travel[]>>('/travels/popular');
+  return http.get<BaseResponse<TravelCard[]>>('/travels/popular');
 };
 
 export const getTravelDetail = ({ id }: { id: string }) => {
-  return http.get<ApiResponse<TravelDetail>>(`/travels/${id}`);
+  return http.get<BaseResponse<Travel>>(`/travels/${id}`);
 };
 
 export const getTravels = (props: Filters & { pageParam?: number }) => {
   const { pageParam, ...filters } = props;
   const url = buildTravelUrl(filters, pageParam);
-  return http.get<ApiResponse<TravelFilterResponse>>(url);
+  return http.get<BaseResponse<TravelFilterResponse>>(url);
 };
 
 export const postTravelBookMark = (id: number) => {

src/components/card/travel/TravelCard.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Location from '@/assets/location.svg';
 import ProfileICon from '@/assets/profile.svg';
-import { Travel } from '@/@types/travel';
+import { TravelCard as TravelCardProps } from '@/@types/travel';
 import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import cn from '@/utils/cn';
@@ -15,26 +15,24 @@ import ProgressBar from '../../common/progressbar/ProgressBar';
 import ExpiredTag from '../../common/tag/ExpiredTag';
 import CheckMarkButton from '../../common/button/CheckMarkButton';
 
-interface Props extends Omit<Travel, 'isBookmark'> {
+interface Props extends TravelCardProps {
   closed?: boolean;
-  checkMark?: boolean;
-  isChecked?: boolean;
+  formattedStartDate?: string;
 }
 
 const TravelCard = ({
   travelId,
   isDomestic,
   travelName,
-  location,
+  travelLocation,
   maxTravelMateCount,
   currentTravelMateCount,
   formattedStartDate,
-  image,
+  travelImage,
   closed,
-  checkMark,
-  isChecked,
+  bookmarkFlag,
 }: Props) => {
-  const [isCheckedState, setIsCheckedState] = useState(isChecked);
+  const [isCheckedState, setIsCheckedState] = useState(bookmarkFlag);
   const [animate, setAnimate] = useState(false);
 
   const progressRate = useMemo(
@@ -79,8 +77,8 @@ const TravelCard = ({
         )}
       >
         <Image
-          src={image}
-          alt={`${travelName} - ${location} 여행 이미지`}
+          src={travelImage}
+          alt={`${travelName} - ${travelLocation} 여행 이미지`}
           width={300}
           height={300}
           className="h-full w-full rounded object-cover opacity-0 duration-300 ease-in-out"
@@ -94,7 +92,7 @@ const TravelCard = ({
             마감된 여행
           </div>
         )}
-        {checkMark && (
+        {isCheckedState !== null && (
           <CheckMarkButton
             isChecked={isCheckedState}
             animate={animate}
@@ -117,7 +115,7 @@ const TravelCard = ({
           <div className="flex items-center gap-[6px] text-gray-500">
             <span className={`body-3-sb ${iconAndText}`}>
               <Location />
-              {location}
+              {travelLocation}
             </span>
             <span className={`body-3-r ${iconAndText}`}>
               <ProfileICon />

src/components/card/travel/TravelCardBig.tsx

@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import Location from '@/assets/location.svg';
 import ProfileICon from '@/assets/profile.svg';
-import { Travel } from '@/@types/travel';
+import { TravelCard } from '@/@types/travel';
 import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import cn from '@/utils/cn';
@@ -17,25 +17,24 @@ import ProgressBar from '../../common/progressbar/ProgressBar';
 import ExpiredTag from '../../common/tag/ExpiredTag';
 import CheckMarkButton from '../../common/button/CheckMarkButton';
 
-interface Props extends Travel {
+interface Props extends TravelCard {
   closed?: boolean;
-  isBookmark: boolean | null;
 }
 
 const TravelCardBig = ({
   travelId,
   isDomestic,
   travelName,
-  location,
+  travelLocation,
   maxTravelMateCount,
   currentTravelMateCount,
   startAt,
   endAt,
-  image,
+  travelImage,
   closed,
-  isBookmark,
+  bookmarkFlag,
 }: Props) => {
-  const [isCheckedState, setIsCheckedState] = useState(isBookmark);
+  const [isCheckedState, setIsCheckedState] = useState(bookmarkFlag);
   const [animate, setAnimate] = useState(false);
 
   const progressRate = useMemo(
@@ -75,8 +74,8 @@ const TravelCardBig = ({
         })}
       >
         <Image
-          src={image}
-          alt={`${travelName} - ${location} 여행 이미지`}
+          src={travelImage}
+          alt={`${travelName} - ${travelLocation} 여행 이미지`}
           width={400}
           height={200}
           className="h-full w-full object-cover opacity-0 duration-300 ease-in-out"
@@ -112,7 +111,7 @@ const TravelCardBig = ({
           <div className="body-3-sb line-clamp-1 flex h-3.5 items-center divide-x divide-line-normal text-gray-500">
             <div className="body-3-sb flex flex-shrink-0 items-center gap-0.5 pr-1.5">
               <Location />
-              {location}
+              {travelLocation}
             </div>
             <div className="body-3-r flex items-center gap-0.5 px-1.5">
               <ProfileICon />

src/components/card/travel/TravelPlanCard.tsx

@@ -3,15 +3,15 @@ import LocationIcon from '@/assets/location.svg';
 import Image from 'next/image';
 
 const TravelPlanCard = ({
-  image,
+  travelPlanImage,
   destination,
   description,
 }: Omit<TravelPlan, 'tripDay' | 'tripOrderNumber'>) => {
   return (
     <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}
+          src={travelPlanImage}
           alt={`${destination} 일정 이미지`}
           width={600}
           height={500}

src/components/main/weeklyTravel/WeeklyPopular.tsx

@@ -1,10 +1,10 @@
 import TravelCardBig from '@/components/card/travel/TravelCardBig';
-import { Travel } from '@/@types/travel';
+import { TravelCard } from '@/@types/travel';
 import Link from 'next/link';
 import ButtonRounded from '@/components/common/button/ButtonRounded';
 import WeeklyHeader from './WeeklyHeader';
 
-const WeeklyPopular = ({ travelList }: { travelList: Travel[] }) => {
+const WeeklyPopular = ({ travelList }: { travelList: TravelCard[] }) => {
   if (travelList.length === 0) {
     return (
       <section className="m-auto flex h-96 flex-col justify-center gap-6 px-5 pb-8 pt-[50px] md:px-10 md:pb-12 xl:max-w-[1480px] xl:pb-16">
@@ -30,15 +30,15 @@ const WeeklyPopular = ({ travelList }: { travelList: Travel[] }) => {
             <TravelCardBig
               key={travel.travelId}
               travelId={travel.travelId}
-              image={travel.image}
+              travelImage={travel.travelImage}
               isDomestic={travel.isDomestic}
               travelName={travel.travelName}
-              location={travel.location}
+              travelLocation={travel.travelLocation}
               maxTravelMateCount={travel.maxTravelMateCount}
               currentTravelMateCount={travel.currentTravelMateCount}
               startAt={travel.startAt}
               endAt={travel.endAt}
-              isBookmark={travel.isBookmark}
+              bookmarkFlag={travel.bookmarkFlag}
             />
           ))}
       </div>

src/components/main/weeklyTravel/WeeklyPopularContainer.tsx

@@ -13,6 +13,7 @@ const WeeklyPopularContainer = async () => {
     queryKey: QUERY_KEYS.TRAVEL.POPULAR_TRAVEL,
     queryFn: getPopularTravel,
   });
+
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <WeeklyPopular travelList={data.data} />

src/components/mypage/contents/content/myReview/Writable.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import TravelCard from '@/components/card/travel/TravelCard';
 import { checkTomorrow } from '@/utils/dateChangeKr';
 import Link from 'next/link';
-import { TravelList } from '@/@types/travel';
 import { useWritableTravel } from '@/queries/travel/useGetMyTravel';
 import Pagination from '@/components/common/pagination/Pagination';
 import HorizontalDivider from '@/components/common/divider/HorizontalDivider';
@@ -31,7 +30,7 @@ const Writable = () => {
     >
       {travels && travels.total > 0 ? (
         <div className="grid w-full gap-5 xl:grid-cols-2 xl:gap-6">
-          {travels.content.map((travel: TravelList) => (
+          {travels.content.map((travel) => (
             <div key={travel.travelId} className="relative">
               <TravelCard
                 key={travel.travelId}
@@ -40,11 +39,12 @@ const Writable = () => {
                 maxTravelMateCount={travel.maxTravelMateCount}
                 currentTravelMateCount={travel.currentTravelMateCount}
                 isDomestic={travel.isDomestic}
-                location={travel.location}
-                image={travel.image}
+                travelLocation={travel.travelLocation}
+                travelImage={travel.travelImage}
                 startAt={travel.startAt}
                 endAt={travel.endAt}
                 formattedStartDate={checkTomorrow(travel.startAt)}
+                bookmarkFlag
                 closed
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />