diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts
index cda8b28b..93c3172c 100644
--- a/src/@types/trips.types.ts
+++ b/src/@types/trips.types.ts
@@ -1,4 +1,4 @@
-interface TripRequest {
+export interface TripRequest {
   tripName: string;
   numberOfPeople: number;
   startDate: string;
@@ -6,3 +6,13 @@ interface TripRequest {
   area: string;
   subarea: string;
 }
+
+export interface MyTripType {
+  tripId: number;
+  tripName: string;
+  startDate: string;
+  endDate: string;
+  numberOfTripMembers: number;
+  tripStatus: string;
+  tripThumbnailUrl: string;
+}
diff --git a/src/api/member.ts b/src/api/member.ts
index 1e355324..0a5e6093 100644
--- a/src/api/member.ts
+++ b/src/api/member.ts
@@ -44,9 +44,13 @@ export const deleteMember = async () => {
 };
 
 // 나의 여정 조회
-export const getMemberTrips = async () => {
-  const res = await authClient.get(`member/trips`);
-  return res;
+export const getMemberTrips = async (page?: number, size?: number) => {
+  try {
+    const res = await authClient.get(`trips?&page=${page}&size=${size}`);
+    return res.data;
+  } catch (e) {
+    console.error(e);
+  }
 };
 
 // 나의 관심 여행지 조회
diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx
index c1ffe145..225c4fc6 100644
--- a/src/components/DetailSectionTop/DetailTopButton.tsx
+++ b/src/components/DetailSectionTop/DetailTopButton.tsx
@@ -1,41 +1,51 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TopIcon } from '@components/common/icons/Icons';
 
-export default function DetailTopButton() {
-  const [showButton, setShowButton] = useState(true);
+export default function DetailTopButton({ parentRef }: any) {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
+  const [viewportHeight, setViewportHeight] = useState<number>(0);
 
-  const scrollToTop = () => {
-    window.scroll({
-      top: 0,
-      behavior: 'smooth',
-    });
-  };
+  const scrollButtonRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const handleShowButton = () => {
-      if (window.scrollY > 400) {
-        setShowButton(true);
-      } else {
-        setShowButton(false);
+    const handleScroll = () => {
+      if (scrollButtonRef.current && parentRef.current) {
+        setViewportHeight(screen.height);
+
+        // 부모 요소의 높이보다 적을 때까지 스크롤 허용
+        if (window.scrollY < parentRef.current.clientHeight - 50) {
+          // 기기 높이의 절반 이상 스크롤 했을 때
+          if (window.scrollY >= viewportHeight / 2) {
+            setIsVisible(true);
+            setScrollPosition(window.scrollY);
+          } else {
+            setIsVisible(false);
+          }
+        }
       }
     };
 
-    window.addEventListener('scroll', handleShowButton);
+    window.addEventListener('scroll', handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleShowButton);
+      window.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [parentRef, scrollPosition, setScrollPosition]);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   return (
-    showButton && (
-      <div
-        onClick={scrollToTop}
-        className="scroll__container sticky bottom-3 z-20 flex cursor-pointer items-center justify-end">
-        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md">
-          <TopIcon />
-        </div>
-      </div>
-    )
+    <div
+      ref={scrollButtonRef}
+      className={`absolute right-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+      onClick={scrollToTop}
+      style={{ top: `${scrollPosition}px` }}>
+      <TopIcon />
+    </div>
   );
 }
diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx
new file mode 100644
index 00000000..549a3186
--- /dev/null
+++ b/src/components/MyTrip/MyTrip.tsx
@@ -0,0 +1,58 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getMemberTrips } from '@api/member';
+import NoDataMessage from '@components/common/noData/NoDataMessage';
+import MyTripList from './MyTripList';
+import { PenIcon } from '@components/common/icons/Icons';
+
+const MyTrip = () => {
+  const { fetchNextPage, hasNextPage, data, isLoading, error } =
+    useInfiniteQuery({
+      queryKey: ['wishList'],
+      queryFn: ({ pageParam = 0 }) => getMemberTrips(pageParam, 10),
+      initialPageParam: 0,
+      getNextPageParam: (lastPage) => {
+        if (
+          lastPage &&
+          lastPage.data &&
+          lastPage.data &&
+          lastPage.data.pageable
+        ) {
+          const currentPage = lastPage.data.pageable.pageNumber;
+          const totalPages = lastPage.data.totalPages;
+
+          if (currentPage < totalPages - 1) {
+            return currentPage + 1;
+          }
+        }
+        return undefined;
+      },
+    });
+
+  if (error) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+  }
+
+  return (
+    <div className="mt-3 min-h-[100vh]">
+      <div className=" mb-6 bg-white py-0.5">
+        <h1 className="title2 pt-3">나의 여정</h1>
+      </div>
+      {data?.pages[0].data.content.length > 0 ? (
+        <MyTripList
+          myTripsData={data || { pages: [] }}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isLoading={isLoading}
+        />
+      ) : (
+        <NoDataMessage
+          message1="저장된 관심 여행지가 없습니다."
+          message2="가고 싶은 장소를 저장해보세요!"
+          icon={<PenIcon size={44} fill="#EDEDED" color="#EDEDED" />}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MyTrip;
diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
new file mode 100644
index 00000000..52e4bcd0
--- /dev/null
+++ b/src/components/MyTrip/MyTripItem.tsx
@@ -0,0 +1,64 @@
+import { MyTripType } from '@/@types/trips.types';
+import { MoreIcon } from '@components/common/icons/Icons';
+
+interface MyTripItemProps {
+  myTripList: MyTripType;
+}
+
+const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
+  const {
+    tripName,
+    startDate,
+    endDate,
+    numberOfTripMembers,
+    tripStatus,
+    tripThumbnailUrl,
+  } = myTripList;
+
+  const ACTIVE_TRIP = '여행 중';
+
+  return (
+    <div className="relative cursor-pointer pb-4">
+      <div className="flex min-h-[96px]">
+        <div>
+          <img
+            className="rounded-1 h-[96px] min-h-[96px] w-[96px] rounded-[16px] object-cover"
+            src={tripThumbnailUrl}
+            alt="여행지 이미지"
+          />
+          <div className="absolute right-[0px] top-[0px] z-10 w-[24px]">
+            <MoreIcon size={20} fill="gray3" color="gray3" />
+          </div>
+        </div>
+        <div className="ml-[10px] flex flex-col items-start justify-between gap-[15px]">
+          <div className="max-w-[300px]">
+            <div
+              className={`inline-flex  ${
+                tripStatus === ACTIVE_TRIP ? 'bg-cyan-400' : 'border-cyan-400'
+              } h-[22px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400  px-[8px] py-[10px] pt-[11px]`}>
+              <span
+                className={`text-xs font-semibold ${
+                  tripStatus === ACTIVE_TRIP ? 'text-white' : 'text-cyan-400'
+                }`}>
+                {tripStatus}
+              </span>
+            </div>
+            <div className="mt-[7.5px] w-56 truncate text-base font-bold text-black">
+              {tripName}
+            </div>
+            <div className="h-4 w-56 font-['Pretendard'] text-sm font-medium tracking-tight text-zinc-500">
+              {startDate} ~ {endDate}
+            </div>
+            <div className="mt-[7.5px] inline-flex h-4 w-56 items-start justify-start gap-2">
+              <div className=" text-xs font-normal text-zinc-500">
+                {numberOfTripMembers}명과 공유중
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyTripItem;
diff --git a/src/components/MyTrip/MyTripList.tsx b/src/components/MyTrip/MyTripList.tsx
new file mode 100644
index 00000000..fbe9a401
--- /dev/null
+++ b/src/components/MyTrip/MyTripList.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { MyTripType } from '@/@types/trips.types';
+import InfiniteScroll from 'react-infinite-scroller';
+import { v4 as uuidv4 } from 'uuid';
+import ToursItemSkeleton from '@components/Tours/ToursItemSkeleton';
+import MyTripItem from './MyTripItem';
+
+interface MyTripListProps {
+  myTripsData: { pages: Array<{ data: { content: MyTripType[] } }> };
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isLoading: boolean;
+}
+
+const MyTripList: React.FC<MyTripListProps> = ({
+  myTripsData,
+  fetchNextPage,
+  hasNextPage,
+  isLoading,
+}) => {
+  if (!myTripsData || myTripsData.pages.length === 0) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+  }
+
+  return (
+    <InfiniteScroll
+      pageStart={0}
+      loadMore={() => fetchNextPage()}
+      hasMore={hasNextPage}
+      loader={
+        <div key={uuidv4()} className="flex justify-center">
+          <div
+            className="z-[100] mx-auto h-8 w-8 animate-spin rounded-full border-[3px] border-solid border-current border-t-transparent pt-10 text-[blue-600] dark:text-[#28d8ff]"
+            role="status"
+            aria-label="loading">
+            <div className="sr-only">Loading...</div>
+          </div>
+        </div>
+      }>
+      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+        {isLoading
+          ? Array.from({ length: 10 }, (_, index) => (
+              <ToursItemSkeleton key={index} />
+            ))
+          : myTripsData.pages.map((group) => (
+              <React.Fragment key={uuidv4()}>
+                {group?.data.content.map((myTripList: MyTripType) => (
+                  <MyTripItem key={uuidv4()} myTripList={myTripList} />
+                ))}
+              </React.Fragment>
+            ))}
+      </div>
+    </InfiniteScroll>
+  );
+};
+
+export default MyTripList;
diff --git a/src/components/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx
index e0cfb679..6b30c0b5 100644
--- a/src/components/Wish/WishItem.tsx
+++ b/src/components/Wish/WishItem.tsx
@@ -57,7 +57,7 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
                   {(Math.ceil(ratingAverage * 100) / 100).toFixed(1)}
                 </span>
                 <span className="text-xs">
-                  ({reviewCount.toLocaleString()})
+                  ({reviewCount ? reviewCount.toLocaleString() : reviewCount})
                 </span>
               </div>
             </div>
@@ -66,7 +66,7 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
                 <HeartIcon size={14} color="#FF2167" fill="#FF2167" />
               </div>
               <span className="ml-1 mt-[2.8px] text-xs">
-                {likedCount.toLocaleString()}
+                {likedCount ? likedCount.toLocaleString() : likedCount}
               </span>
             </div>
           </div>
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index 18f154b1..46163553 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -119,6 +119,80 @@ export const CalendarIcon: React.FC<IconProps> = ({
   );
 };
 
+export const CalendarIcon2: React.FC<IconProps> = ({ size = 25 }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 25 25"
+      fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.40913 7.61438H21.8252C21.4919 4.94249 19.2127 2.875 16.4505 2.875H7.78385C5.0217 2.875 2.74243 4.94249 2.40913 7.61438ZM21.8672 8.96849H2.36719V16.9585C2.36719 19.95 4.79231 22.3752 7.78385 22.3752H16.4505C19.4421 22.3752 21.8672 19.95 21.8672 16.9585V8.96849Z"
+        fill="#1E1E1E"
+      />
+      <path
+        d="M6.15918 12.6195H7.24251"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5752 12.6195H12.6585"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9922 12.6195H18.0755"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.15918 16.9525H7.24251"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5752 16.9525H12.6585"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9922 16.9525H18.0755"
+        stroke="white"
+        strokeWidth="1.35412"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.5758 2.06055L16.5758 5.31058"
+        stroke="#1E1E1E"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.65885 2.06055L7.65885 5.31058"
+        stroke="#1E1E1E"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
 export const HeartIcon: React.FC<IconProps> = ({
   size = 25,
   color = 'black',
@@ -997,8 +1071,8 @@ export const TopIcon: React.FC<IconProps> = () => {
       xmlns="http://www.w3.org/2000/svg">
       <path
         id="Vector 734 (Stroke)"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17.0462 8.95185C16.7278 9.30213 16.1857 9.32794 15.8354 9.00951L8.86914 2.67653L1.90286 9.00951C1.55258 9.32794 1.01048 9.30213 0.692049 8.95185C0.373615 8.60157 0.39943 8.05947 0.749708 7.74104L8.86914 0.359741L16.9886 7.74104C17.3388 8.05947 17.3647 8.60157 17.0462 8.95185Z"
         fill="#888888"
       />
diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx
index a4f56085..cf3bf6aa 100644
--- a/src/components/common/nav/Nav.tsx
+++ b/src/components/common/nav/Nav.tsx
@@ -1,5 +1,11 @@
 import { useLocation, useNavigate } from 'react-router-dom';
-import { CalendarIcon, HeartIcon, HomeIcon, UserIcon } from '../icons/Icons';
+import {
+  CalendarIcon,
+  CalendarIcon2,
+  HeartIcon,
+  HomeIcon,
+  UserIcon,
+} from '../icons/Icons';
 import { useEffect, useState } from 'react';
 import Alert from '../alert/Alert';
 
@@ -35,12 +41,37 @@ const Nav = () => {
           </div>
           <p className="caption1 mt-[3px] pr-[1px] text-center">홈</p>
         </div>
-        <div
-          onClick={() => navigate('/')}
-          className="cursor-pointer flex-col items-center justify-center px-2">
-          <CalendarIcon />
-          <p className="caption1 mt-[5px] text-center text-xs/[11px]">일정</p>
-        </div>
+
+        {isLoggedIn ? (
+          <div
+            onClick={() => navigate('/mytrip')}
+            className="cursor-pointer flex-col items-center justify-center px-2">
+            <div className="flex justify-center">
+              {isActive('/mytrip') ? <CalendarIcon2 /> : <CalendarIcon />}
+            </div>
+            <p className="caption1 mt-[4px] text-center text-xs/[11px]">여정</p>
+          </div>
+        ) : (
+          <Alert
+            title={'로그인'}
+            message={
+              <>
+                나의 여정 조회를 위해 로그인이 필요합니다.
+                <br />
+                로그인 하시겠습니까?
+              </>
+            }
+            onConfirm={handleConfirm}>
+            <div className="cursor-pointer flex-col items-center justify-center px-2">
+              <div className="flex justify-center">
+                <CalendarIcon fill={isActive('/mytrip') ? '#1E1E1E' : 'none'} />
+              </div>
+              <p className="caption1 mt-[4px] text-center text-xs/[11px]">
+                여정
+              </p>
+            </div>
+          </Alert>
+        )}
 
         {isLoggedIn ? (
           <div
diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx
index 99333eb4..bcccedb5 100644
--- a/src/pages/detail/detail.page.tsx
+++ b/src/pages/detail/detail.page.tsx
@@ -1,16 +1,21 @@
 import { DetailHeader } from '@components/common/header';
 import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop';
 import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom';
-// import { DetailTopButton } from '@components/DetailSectionTop';
+import { DetailTopButton } from '@components/DetailSectionTop';
+import { useRef } from 'react';
 
 const DetailTours = () => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
   return (
-    <>
+    <div>
       <DetailHeader />
       <DetailSectionTop />
-      <DetailSectionBottom />
-      {/* <DetailTopButton /> */}
-    </>
+      <div className="relative" ref={parentRef}>
+        <DetailSectionBottom />
+        <DetailTopButton parentRef={parentRef} />
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/myTrip/myTrip.page.tsx b/src/pages/myTrip/myTrip.page.tsx
new file mode 100644
index 00000000..a530143c
--- /dev/null
+++ b/src/pages/myTrip/myTrip.page.tsx
@@ -0,0 +1,7 @@
+import MyTrip from '@components/MyTrip/MyTrip';
+
+const MyTripPage = () => {
+  return <MyTrip />;
+};
+
+export default MyTripPage;
diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
index 4495552a..11048efc 100644
--- a/src/router/mainRouter.tsx
+++ b/src/router/mainRouter.tsx
@@ -6,6 +6,7 @@ import Detail from '@pages/detail/detail.page';
 import ReviewComment from '@pages/reviewComment/reviewComment.page';
 import ReviewPosting from '@pages/reviewPosting/reviewPosting.page';
 import WishList from '@pages/wishList/wishList.page';
+import MyTripPage from '@pages/myTrip/myTrip.page';
 import MyPageReview from '@pages/myPageReview/myPageReview.page';
 import { Signup, SignupSuccess, SignupSurvey, SignupInfo } from '@pages/signup';
 import { Login, LoginKakao } from '@pages/login';
@@ -29,6 +30,7 @@ const MainRouter = () => {
           <Route path="/reviewPosting/:id" element={<ReviewPosting />} />
           <Route path="/reviewComment/:id" element={<ReviewComment />} />
           <Route path="/wishlist" element={<WishList />} />
+          <Route path="/mytrip" element={<MyTripPage />} />
           <Route path="/myPageReview" element={<MyPageReview />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/signup/success" element={<SignupSuccess />} />