Team-Talking-Potatoes · NamgungJongMin · Jan 27, 2025 · Jan 24, 2025 · Jan 27, 2025
diff --git a/src/@types/user.ts b/src/@types/user.ts
@@ -5,10 +5,3 @@ export interface User {
   profileImage: string;
   description: string;
 }
-
-export interface PopularUser
-  extends Pick<User, 'userId' | 'nickname' | 'profileImage'> {
-  openTravelCount: number;
-  reviewCount: number;
-  hashTags: string;
-}
diff --git a/src/api/review/review.ts b/src/api/review/review.ts
@@ -1,5 +1,5 @@
 import { Review, ReviewDetailResponse, ReviewResponse } from '@/@types/review';
-import { ApiResponse } from '@/@types/api';
+import { BaseResponse } from '@/@types/api';
 import { TravelReviewRateScore } from '@/@types/travel';
 import { http } from '../fetcher';
 
@@ -37,26 +37,26 @@ interface TravelReviewRate {
 }
 
 export const getPopularReview = () => {
-  return http.get<ApiResponse<Review[]>>('/reviews/popular');
+  return http.get<BaseResponse<Review[]>>('/reviews/popular');
 };
 
 export const getTravelReview = ({
   travelId,
   pageParam,
 }: TravelReviewParams) => {
-  return http.get<ApiResponse<TravelReview>>(
+  return http.get<BaseResponse<TravelReview>>(
     `/reviews?id=${travelId}&page=${pageParam}`,
   );
 };
 
 export const getTravelReviewRate = ({ travelId }: { travelId: number }) => {
-  return http.get<ApiResponse<TravelReviewRate>>(
+  return http.get<BaseResponse<TravelReviewRate>>(
     `/reviews/${travelId}/ratings`,
   );
 };
 
 export const getReview = ({ pageParam, sortOrder }: ReviewParams) => {
-  return http.get<ApiResponse<ReviewResponse>>(
+  return http.get<BaseResponse<ReviewResponse>>(
     `/reviews?page=${pageParam}&sortBy=${sortOrder}&size=12`,
   );
 };

diff --git a/src/components/card/user/UserCard.tsx b/src/components/card/user/UserCard.tsx
@@ -1,25 +1,31 @@
-import { UserList } from '@/@types/user';
+import { User } from '@/@types/user';
 import Link from 'next/link';
 import UserIcon from '../../common/user/UserIcon';
 import UserTag from '../../common/tag/UserTag';
 
+interface Props extends Pick<User, 'userId' | 'nickname' | 'profileImage'> {
+  openTravelCount: number;
+  reviewCount: number;
+  hashTags: string;
+}
+
 const UserCard = ({
-  nickName,
+  nickname,
   profileImage,
   openTravelCount,
   reviewCount,
   hashTags,
   userId,
-}: UserList) => {
+}: Props) => {
   return (
     <Link
       href={`/${userId}`}
-      aria-label={`${nickName} 프로필 보기`}
+      aria-label={`${nickname} 프로필 보기`}
       className="flex h-[246px] w-[200px] flex-col items-center justify-center rounded border border-line-normal px-[21px] py-5 lg:h-[306px] lg:w-[332px]"
     >
-      <UserIcon profileImage={profileImage} nickname={nickName} />
+      <UserIcon profileImage={profileImage} nickname={nickname} />
       <div className="flex flex-col items-center justify-center gap-0.5 pb-4 pt-4 md:pt-6">
-        <h3 className="heading-1-b">{nickName}</h3>
+        <h3 className="heading-1-b">{nickname}</h3>
         <p className="body-3-m whitespace-nowrap text-label-alternative">
           모임장 {openTravelCount}회 • 리뷰 {reviewCount}개
         </p>

diff --git a/src/components/common/tag/DomesticTag.stories.tsx b/src/components/common/tag/DomesticTag.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DomesticTag from './DomesticTag';
+
+const meta = {
+  title: 'Components/Common/tag',
+  component: DomesticTag,
+  tags: ['autodocs'],
+  argTypes: {
+    isDomestic: {
+      control: 'boolean',
+      description: '여행 타입을 설정합니다. true는 국내, false는 해외입니다.',
+    },
+  },
+} satisfies Meta<typeof DomesticTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Template = (args: { isDomestic: boolean }) => (
+  <div className="flex gap-3">
+    <DomesticTag {...args} isDomestic />
+    <DomesticTag {...args} isDomestic={false} />
+  </div>
+);
+
+export const AllVariants: Story = {
+  render: Template,
+  args: {
+    isDomestic: true,
+  },
+};
diff --git a/src/components/main/weeklyUser/WeeklyUser.tsx b/src/components/main/weeklyUser/WeeklyUser.tsx
@@ -3,13 +3,19 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/pagination';
-import { UserList } from '@/@types/user';
+import { User } from '@/@types/user';
 import Link from 'next/link';
 import ButtonRounded from '@/components/common/button/ButtonRounded';
 import UserCard from '../../card/user/UserCard';
 import WeeklyUserHeader from './WeeklyUserHeader';
 
-const WeeklyUser = ({ userList }: { userList: UserList[] }) => {
+interface Props extends Pick<User, 'userId' | 'nickname' | 'profileImage'> {
+  openTravelCount: number;
+  reviewCount: number;
+  hashTags: string;
+}
+
+const WeeklyUser = ({ userList }: { userList: Props[] }) => {
   if (userList.length === 0) {
     return (
       <section className="mx-auto h-auto max-w-[1480px] px-5 pb-32 pt-12 sm:mb-14 md:px-10">
@@ -51,7 +57,7 @@ const WeeklyUser = ({ userList }: { userList: UserList[] }) => {
               >
                 <UserCard
                   userId={user.userId}
-                  nickName={user.nickName}
+                  nickname={user.nickname}
                   profileImage={user.profileImage}
                   openTravelCount={user.openTravelCount}
                   reviewCount={user.reviewCount}

diff --git a/src/components/mypage/contents/content/mySelfTravel/MySelfTravel.test.tsx b/src/components/mypage/contents/content/mySelfTravel/MySelfTravel.test.tsx
@@ -30,8 +30,8 @@ describe('MySelfTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -70,8 +70,8 @@ describe('MySelfTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -81,8 +81,8 @@ describe('MySelfTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '부산',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '부산',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },

diff --git a/src/components/mypage/contents/content/mySelfTravel/MySelfTravel.tsx b/src/components/mypage/contents/content/mySelfTravel/MySelfTravel.tsx
@@ -28,7 +28,7 @@ const MySelfTravel = () => {
     >
       {travels && travels.data.total > 0 ? (
         <div className="grid w-full gap-5 xl:grid-cols-2 xl:gap-6">
-          {travels.data.content.map((travel: TravelCardProps) => (
+          {travels.data?.content.map((travel: TravelCardProps) => (
             <div key={travel.travelId}>
               <TravelCard
                 key={travel.travelId}
@@ -41,7 +41,7 @@ const MySelfTravel = () => {
                 travelImage={travel.travelImage}
                 startAt={travel.startAt}
                 endAt={travel.endAt}
-                bookmarkFlag
+                bookmarkFlag={travel.bookmarkFlag}
                 formattedStartDate={checkTomorrow(travel.startAt)}
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />

diff --git a/src/components/mypage/contents/content/myTravel/CheckedTravel.test.tsx b/src/components/mypage/contents/content/myTravel/CheckedTravel.test.tsx
@@ -30,8 +30,8 @@ describe('CheckedTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -70,8 +70,8 @@ describe('CheckedTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -81,8 +81,8 @@ describe('CheckedTravel', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '부산',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '부산',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },

diff --git a/src/components/mypage/contents/content/myTravel/CheckedTravel.tsx b/src/components/mypage/contents/content/myTravel/CheckedTravel.tsx
@@ -28,7 +28,7 @@ const CheckedTravel = () => {
     >
       {travels && travels.data.total > 0 ? (
         <div className="grid w-full gap-5 xl:grid-cols-2 xl:gap-6">
-          {travels.data.content.map((travel: TravelCardProps) => (
+          {travels.data?.content.map((travel: TravelCardProps) => (
             <div key={travel.travelId}>
               <TravelCard
                 key={travel.travelId}
@@ -42,7 +42,7 @@ const CheckedTravel = () => {
                 startAt={travel.startAt}
                 endAt={travel.endAt}
                 formattedStartDate={checkTomorrow(travel.startAt)}
-                bookmarkFlag
+                bookmarkFlag={travel.bookmarkFlag}
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />
             </div>

diff --git a/src/components/mypage/contents/content/myTravel/PastTravel.tsx b/src/components/mypage/contents/content/myTravel/PastTravel.tsx
@@ -28,7 +28,7 @@ const PastTravel = () => {
     >
       {travels && travels.data.total > 0 ? (
         <div className="grid w-full gap-5 xl:grid-cols-2 xl:gap-6">
-          {travels.data.content.map((travel: TravelCardProps) => (
+          {travels.data?.content.map((travel: TravelCardProps) => (
             <div key={travel.travelId}>
               <TravelCard
                 key={travel.travelId}
@@ -42,7 +42,7 @@ const PastTravel = () => {
                 startAt={travel.startAt}
                 endAt={travel.endAt}
                 formattedStartDate={checkTomorrow(travel.startAt)}
-                bookmarkFlag
+                bookmarkFlag={travel.bookmarkFlag}
                 closed
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />

diff --git a/src/components/mypage/contents/content/myTravel/Upcomming.test.tsx b/src/components/mypage/contents/content/myTravel/Upcomming.test.tsx
@@ -30,8 +30,8 @@ describe('Upcomming', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -70,8 +70,8 @@ describe('Upcomming', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '서울',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '서울',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },
@@ -81,8 +81,8 @@ describe('Upcomming', () => {
               maxTravelMateCount: 5,
               currentTravelMateCount: 2,
               isDomestic: true,
-              location: '부산',
-              image: 'https://example.com/image.jpg',
+              travelLocation: '부산',
+              travelImage: 'https://example.com/image.jpg',
               startAt: '2023-10-01',
               endAt: '2023-10-10',
             },

diff --git a/src/components/mypage/contents/content/myTravel/Upcomming.tsx b/src/components/mypage/contents/content/myTravel/Upcomming.tsx
@@ -3,7 +3,7 @@ import Pagination from '@/components/common/pagination/Pagination';
 import { checkTomorrow } from '@/utils/dateChangeKr';
 import { useState } from 'react';
 import { useUpcommingTravel } from '@/queries/travel/useGetMyTravel';
-import { TravelList } from '@/@types/travel';
+import { TravelCard as TravelCardProps } from '@/@types/travel';
 import HorizontalDivider from '@/components/common/divider/HorizontalDivider';
 import MyTravelCardSkeleton from '@/components/mypage/skeleton/MyTravelCardSkeleton';
 import NoTravel from './NoTravel';
@@ -28,19 +28,20 @@ const Upcomming = () => {
     >
       {travels && travels.data.total > 0 ? (
         <div className="grid w-full gap-5 xl:grid-cols-2 xl:gap-6">
-          {travels.data.content.map((travel: TravelList) => (
+          {travels.data?.content.map((travel: TravelCardProps) => (
             <div key={travel.travelId}>
               <TravelCard
                 key={travel.travelId}
                 travelId={travel.travelId}
+                travelImage={travel.travelImage}
+                isDomestic={travel.isDomestic}
                 travelName={travel.travelName}
+                travelLocation={travel.travelLocation}
                 maxTravelMateCount={travel.maxTravelMateCount}
                 currentTravelMateCount={travel.currentTravelMateCount}
-                isDomestic={travel.isDomestic}
-                location={travel.location}
-                image={travel.image}
                 startAt={travel.startAt}
                 endAt={travel.endAt}
+                bookmarkFlag={travel.bookmarkFlag}
                 formattedStartDate={checkTomorrow(travel.startAt)}
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />

diff --git a/src/components/travel/detail/TravelDetail.test.tsx b/src/components/travel/detail/TravelDetail.test.tsx
@@ -10,7 +10,7 @@ const userInfoMock = {
   userId: 1,
   email: '[email protected]',
   nickname: 'TestUser',
-  image: null,
+  profileImage: null,
   description: null,
 };
 

diff --git a/src/components/travel/detail/TravelDetail.tsx b/src/components/travel/detail/TravelDetail.tsx
@@ -38,7 +38,7 @@ const TravelDetail = ({ travelDetail }: { travelDetail: Travel }) => {
               <TravelButtons
                 className="hidden xl:block"
                 travelId={travelDetail.travelId}
-                organizer={organizer?.id}
+                organizer={organizer?.userId}
                 participationFlag={travelDetail.participationFlag}
               />
             )}
@@ -59,7 +59,7 @@ const TravelDetail = ({ travelDetail }: { travelDetail: Travel }) => {
             <TravelButtons
               className="xl:hidden"
               travelId={travelDetail.travelId}
-              organizer={organizer?.id}
+              organizer={organizer?.userId}
               participationFlag={travelDetail.participationFlag}
             />
           )}

diff --git a/src/components/travel/detail/TravelDetailCategory.test.tsx b/src/components/travel/detail/TravelDetailCategory.test.tsx
@@ -19,14 +19,14 @@ const mockTravelPlan = [
     tripOrderNumber: 1,
     destination: '서울',
     description: '서울 탐방',
-    image: '/test1.png',
+    travelPlanImage: '/test1.png',
   },
   {
     tripDay: 2,
     tripOrderNumber: 1,
     destination: '부산',
     description: '부산 여행',
-    image: '/test1.png',
+    travelPlanImage: '/test1.png',
   },
 ];
 const mockStartAt = '2024-12-10';

diff --git a/src/components/travel/detail/category/TabTravelDetail.test.tsx b/src/components/travel/detail/category/TabTravelDetail.test.tsx
@@ -22,7 +22,7 @@ const mock = {
   travelId: 1,
   participationFlag: true,
   organizer: {
-    id: 1,
+    userId: 1,
     nickname: '녹차라떼',
     role: 'string',
     profileImage: '/image.jpg',
@@ -106,7 +106,7 @@ describe('여행 모임장이 아닐 때', () => {
     travelId: 1,
     participationFlag: true,
     organizer: {
-      id: 2,
+      userId: 2,
       nickname: '녹차라떼',
       role: 'string',
       profileImage: '/string.png',