Feat: 일정이 추가되었어요 추가

src/@types/review.types.ts

@@ -1,10 +1,10 @@
-export interface Keyword {
+interface Keyword {
   keywordId: number;
   content: string;
-  type: string;
+  type?: string;
 }
 
-export interface CommentItemProps {
+interface CommentItemProps {
   commentId: number;
   authorNickname: string;
   authorProfileImageUrl: string;
@@ -14,7 +14,7 @@ export interface CommentItemProps {
   isAuthor: boolean;
 }
 
-export interface MyReviewContent {
+interface MyReviewContent {
   reviewId: number;
   authorNickname: string;
   authorProfileImageUrl: string;
@@ -25,3 +25,10 @@ export interface MyReviewContent {
   commentCount: number;
   isAuthor?: boolean;
 }
+
+interface ReviewRequest {
+  tourItemId: number;
+  rating: number;
+  keywords: Keyword[];
+  content: string;
+}

src/@types/tours.types.ts

@@ -1,30 +1,30 @@
-export type TourKeywordInfo = {
+interface TourKeywordInfo {
   keywordId: number;
   content: string;
   type: string;
   keywordCount: number;
-};
+}
 
-export interface RegionTypes {
+interface RegionTypes {
   areaCode?: number;
   subAreaCode?: number;
   name: string;
 }
 
-export interface ToursCategoryItemProps extends RegionTypes {
+interface ToursCategoryItemProps extends RegionTypes {
   isSelected: boolean;
   onSelect: (name: string) => void;
 }
 
-export interface ToursListProps {
+interface ToursListProps {
   selectedRegion: string;
 }
 
-export interface ToursCategoryProps extends ToursListProps {
+interface ToursCategoryProps extends ToursListProps {
   setSelectedRegion: (region: string) => void;
 }
 
-export interface TourType {
+interface TourType {
   contentTypeId?: number;
   id: number;
   title: string;
@@ -38,7 +38,7 @@ export interface TourType {
   latitude?: string;
 }
 
-export interface LikedListType {
+interface LikedListType {
   tripLikedItemId: number;
   tourItemId: number;
   contentTypeId: number;
@@ -53,7 +53,7 @@ export interface LikedListType {
   notPreferTotalCount: number;
 }
 
-export interface ReviewInfoItemProps {
+interface ReviewInfoItemProps {
   reviewId: number;
   authorNickname: string;
   authorProfileImageUrl: string;
@@ -72,5 +72,5 @@ export interface ReviewInfoItemProps {
 interface Keyword {
   keywordId: number;
   content: string;
-  type: string;
+  type?: string;
 }

src/@types/trips.types.ts

@@ -61,3 +61,15 @@ interface TripMemeberInfo {
   nickname: string;
   profileImageUrl: string;
 }
+
+interface Participant {
+  memberId: number;
+  nickname: string;
+  thumbnail: string;
+}
+
+interface Participants {
+  tripSurveyMemberCount: number;
+  tripSurveySetMemberInfos: Participant[];
+  nonTripSurveySetMemberInfos: Participant[];
+}

src/App.tsx

@@ -1,6 +1,3 @@
-import { ThemeProvider } from 'styled-components';
-import { GlobalStyle } from '@styles/globalStyles';
-import { theme } from '@styles/theme';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -17,11 +14,8 @@ const App = () => {
       <RecoilRoot>
         <BrowserRouter>
           <ScrollToTop />
-          <ThemeProvider theme={theme}>
-            <GlobalStyle />
-            <MainRouter />
-            <SocketRouter />
-          </ThemeProvider>
+          <MainRouter />
+          <SocketRouter />
         </BrowserRouter>
       </RecoilRoot>
       <ReactQueryDevtools initialIsOpen={false} />

src/api/review.ts

@@ -1,6 +1,5 @@
 import client from './client';
 import authClient from './authClient';
-import { ReviewRequest } from '@recoil/review';
 // 리뷰 관련 API
 
 // 리뷰수정

src/components/DetailSectionBottom/DetailReviews.tsx

@@ -26,7 +26,6 @@ import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import EditDelete from '@components/common/modal/children/EditDelete';
 import MyAlert from '@components/common/modal/children/MyAlert';
 import { alertTypeState } from '@recoil/modal';
-import { ReviewInfoItemProps } from '@/@types/tours.types';
 
 export default function DetailReviews({
   reviewData,

src/components/DetailSectionBottom/ReviewItem.tsx

@@ -21,7 +21,6 @@ import {
 import { MouseEvent, useState } from 'react';
 import { getEmoji } from '@utils/utils';
 import { getStarFill } from '@utils/getStarFill';
-import { ReviewInfoItemProps } from '@/@types/tours.types';
 
 const Item: React.FC<ReviewInfoItemProps> = (props: ReviewInfoItemProps) => {
   const {
@@ -185,7 +184,7 @@ const Item: React.FC<ReviewInfoItemProps> = (props: ReviewInfoItemProps) => {
                     .map((keyword, idx) => (
                       <div
                         key={idx}
-                        className="rounded-md bg-gray1 px-2 py-1 text-gray6">
+                        className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
                         {getEmoji(keyword.content)} {keyword.content}
                       </div>
                     ))}

src/components/DetailSectionTop/DetailAddSchedule.tsx

@@ -11,6 +11,7 @@ import { useState, useEffect } from 'react';
 import { postTripsItem } from '@api/trips';
 import { useParams } from 'react-router-dom';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 
 const DetailAddSchedule = () => {
   const token = localStorage.getItem('accessToken');
@@ -30,6 +31,12 @@ const DetailAddSchedule = () => {
     (trip) => trip.tripStatus !== '여행완료',
   );
 
+  const [toastPopUp, setToastPopUp] = useState({
+    isPopUp: false,
+    noun: '',
+    verb: '',
+  });
+
   const handleNavigate = (url: string) => {
     navigate(url);
   };
@@ -63,6 +70,11 @@ const DetailAddSchedule = () => {
       } catch (error) {
         console.error('요청 실패:', error);
       } finally {
+        setToastPopUp(() => ({
+          isPopUp: true,
+          noun: '일정',
+          verb: '추가',
+        }));
         setIsProcessing(false);
       }
     }
@@ -79,14 +91,30 @@ const DetailAddSchedule = () => {
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (toastPopUp.isPopUp) {
+      const timer = setTimeout(() => {
+        setToastPopUp(() => ({
+          isPopUp: false,
+          noun: '',
+          verb: '',
+        }));
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [toastPopUp]);
+
   return (
     <>
+      {toastPopUp.isPopUp && (
+        <ToastPopUp noun={toastPopUp.noun} verb={toastPopUp.verb} />
+      )}
       {token ? (
         <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
           <Dialog.Trigger asChild>
             <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
-              <CalendarIcon className="mb-[2px]" />
-              <span className="text-sm ">일정 추가</span>
+              <CalendarIcon className="mb-[2px]" color="#5E5E5E" />
+              <span className="text-sm text-gray5">일정 추가</span>
             </button>
           </Dialog.Trigger>
           <Dialog.Portal>
@@ -244,8 +272,8 @@ const DetailAddSchedule = () => {
           }
           onConfirm={() => handleNavigate('/login')}>
           <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
-            <CalendarIcon className="mb-[2px]" />
-            <span className="text-sm ">일정 추가</span>
+            <CalendarIcon className="mb-[2px]" color="#5E5E5E" />
+            <span className="text-sm text-gray5">일정 추가</span>
           </button>
         </Alert>
       )}

src/components/DetailSectionTop/DetailToursButtons.tsx

@@ -48,8 +48,8 @@ export default function DetailTourButtons({
         <button
           onClick={handlePostingReivew}
           className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4">
-          <PenIcon className="mt-[3px]" />
-          <span className="text-sm ">리뷰 쓰기</span>
+          <PenIcon className="mt-[0.5px]" color="#5E5E5E" />
+          <span className="text-sm text-gray5">리뷰 쓰기</span>
         </button>
       </div>
     </>

src/components/DetailSectionTop/DetailToursInfo.tsx

@@ -9,17 +9,15 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {
 
   return (
     <>
-      <div className="column mt-1 flex aspect-[3/2] h-[11.938rem] w-full items-start overflow-hidden rounded-lg">
+      <div className="column flex aspect-[3/2] max-h-[176px] w-full items-start overflow-hidden rounded-lg">
         <img
           src={originalThumbnailUrl}
           alt="tour-image"
           className="h-full w-full"
         />
       </div>
       <div className="mt-1 flex w-full items-center justify-between py-2">
-        <h1 className="font-['Pretendard'] text-2xl font-bold text-black ">
-          {title}
-        </h1>
+        <h1 className="text-2xl font-bold text-black ">{title}</h1>
         <Like liked={liked} id={id} />
       </div>
     </>

src/components/DetailSectionTop/DetailToursMap.tsx

@@ -17,7 +17,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
 
   const MapStyle = {
     width: '100%',
-    height: '180px',
+    height: '160px',
     marginTop: '5px',
     marginBottom: '15px',
   };
@@ -42,7 +42,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
       <div className="flex-col items-start">
         <div className="mb-[10px] ml-[-2.5px] flex items-center">
           <MapIcon size={24} fill="#888888" color="none" />
-          <p className="min-w-[310px] flex-shrink-0 flex-grow-0 overflow-hidden text-left text-sm text-[#1e1e1e]">
+          <p className="max-w-[325px] flex-shrink-0 flex-grow-0 overflow-hidden truncate text-left text-sm text-[#1e1e1e]">
             {fullAddress}
           </p>
         </div>

src/components/DetailSectionTop/DetailToursRating.tsx

@@ -44,7 +44,7 @@ export default function DetailToursRating({
       <div className="flex w-full cursor-pointer items-center">
         {STAR_IDX_ARR.map((item, idx) => {
           return (
-            <span key={`${item}+${idx}`}>
+            <span key={`${item}+${idx}`} className="pr-[3px]">
               <svg
                 width="16"
                 height="15"
@@ -67,8 +67,8 @@ export default function DetailToursRating({
             </span>
           );
         })}
-        <div className="h-3 pl-1">
-          <p className="text-xs font-normal leading-4 text-gray4 ">
+        <div className="h-3 pl-[1px]">
+          <p className="text-[14px] font-normal leading-4 text-gray4 ">
             ({reviewTotalCount})
           </p>
         </div>

src/components/MyTrip/MyTrip.tsx

@@ -32,7 +32,7 @@ const MyTrip = () => {
   return (
     <div className="mt-3 min-h-[100vh]">
       <div className="pb-[15px]">
-        <h1 className="text-2xl font-bold text-black ">나의 여정</h1>
+        <h1 className="text-[24px] font-bold text-gray7">나의 여정</h1>
       </div>
       {data.length > 0 ? (
         <>
@@ -42,7 +42,7 @@ const MyTrip = () => {
         </>
       ) : (
         <NoDataMessage
-          message1="저장된 여정 목록이 없습니다."
+          message1="참여하고 있는 여정이 없어요."
           message2="새로운 여행을 계획해보세요!"
           icon={<PenIcon size={44} fill="#EDEDED" color="#EDEDED" />}
         />

src/components/MyTrip/MyTripAfterList.tsx

@@ -17,18 +17,22 @@ const MyTripAfterList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
       new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
   );
 
-  return (
-    <>
-      <div className="mb-[10px] mt-[40px]">
-        <h1 className="text-xl font-bold text-stone-900">지난 여행</h1>
-      </div>
-      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
-        {sortedTrips.map((myTripList: MyTripType) => (
-          <MyTripItem key={uuidv4()} myTripList={myTripList} />
-        ))}
-      </div>
-    </>
-  );
+  if (sortedTrips.length > 0) {
+    return (
+      <>
+        <div className="mb-[10px] mt-[30px]">
+          <h1 className="text-[18px] font-bold text-gray7">지난 여행</h1>
+        </div>
+        <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+          {sortedTrips.map((myTripList: MyTripType) => (
+            <MyTripItem key={uuidv4()} myTripList={myTripList} />
+          ))}
+        </div>
+      </>
+    );
+  } else {
+    return null;
+  }
 };
 
 export default MyTripAfterList;

src/components/MyTrip/MyTripBeforeList.tsx

@@ -14,8 +14,8 @@ const MyTripBeforeList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
 
   return (
     <>
-      <div className="mb-[10px] mt-[40px]">
-        <h1 className="text-xl font-bold text-stone-900">다가오는 여행</h1>
+      <div className="mb-[10px] mt-[30px]">
+        <h1 className="text-[18px] font-bold text-gray7">다가오는 여행</h1>
       </div>
       <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
         {myTripsData.map((myTripList: MyTripType) => (