diff --git a/src/apis/client/getMyFootPrints.ts b/src/apis/client/getMyFootPrints.ts
new file mode 100644
index 00000000..e26b0574
--- /dev/null
+++ b/src/apis/client/getMyFootPrints.ts
@@ -0,0 +1,19 @@
+import { DOMAIN } from '@/constants/api';
+import {
+  GetAllPlansRequestQuery,
+  GetAllPlansResponse,
+} from '@/types/apis/plan/GetAllPlans';
+import { axiosInstanceClient } from '../axiosInstanceClient';
+
+export const getMyFootPrints = async (query: GetAllPlansRequestQuery) => {
+  const { data } = await axiosInstanceClient.get<GetAllPlansResponse>(
+    DOMAIN.GET_PLANS_ALL,
+    {
+      authorization: false,
+      params: {
+        ...query,
+      },
+    },
+  );
+  return data;
+};
diff --git a/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx b/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx
index 7e50e961..88f67afe 100644
--- a/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx
+++ b/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useMyFootPrintsQuery } from '@/hooks/apis/useMyFootPrintsQuery';
 import classNames from 'classnames';
 import React from 'react';
 import FootprintItem from '../FootprintItem/FootprintItem';
@@ -9,74 +12,79 @@ interface FootPrintListProps {
   plan: planType;
 }
 
-type FootPrintItemType = {
-  id: number;
-  iconNumber: number;
-  title: string;
-  createdAt: string;
-  ajajas: number;
-  tags: string[];
-};
+// type FootPrintItemType = {
+//   id: number;
+//   iconNumber: number;
+//   title: string;
+//   createdAt: string;
+//   ajajas: number;
+//   tags: string[];
+// };
 
-const dummyFootPrintList: FootPrintItemType[] = [
-  {
-    id: 1,
-    iconNumber: 0,
-    title: '발자취1',
-    createdAt: '2024.04.22',
-    ajajas: 1,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-  {
-    id: 2,
-    iconNumber: 1,
-    title: '발자취2',
-    createdAt: '2024.04.22',
-    ajajas: 2,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-  {
-    id: 3,
-    iconNumber: 1,
-    title: '발자취3',
-    createdAt: '2024.04.22',
-    ajajas: 3,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-  {
-    id: 4,
-    iconNumber: 0,
-    title: '발자취4',
-    createdAt: '2024.04.22',
-    ajajas: 1,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-  {
-    id: 5,
-    iconNumber: 1,
-    title: '발자취5',
-    createdAt: '2024.04.22',
-    ajajas: 2,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-  {
-    id: 6,
-    iconNumber: 1,
-    title: '발자취6',
-    createdAt: '2024.04.22',
-    ajajas: 3,
-    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-  },
-];
+// const dummyFootPrintList: FootPrintItemType[] = [
+//   {
+//     id: 1,
+//     iconNumber: 0,
+//     title: '발자취1',
+//     createdAt: '2024.04.22',
+//     ajajas: 1,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+//   {
+//     id: 2,
+//     iconNumber: 1,
+//     title: '발자취2',
+//     createdAt: '2024.04.22',
+//     ajajas: 2,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+//   {
+//     id: 3,
+//     iconNumber: 1,
+//     title: '발자취3',
+//     createdAt: '2024.04.22',
+//     ajajas: 3,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+//   {
+//     id: 4,
+//     iconNumber: 0,
+//     title: '발자취4',
+//     createdAt: '2024.04.22',
+//     ajajas: 1,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+//   {
+//     id: 5,
+//     iconNumber: 1,
+//     title: '발자취5',
+//     createdAt: '2024.04.22',
+//     ajajas: 2,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+//   {
+//     id: 6,
+//     iconNumber: 1,
+//     title: '발자취6',
+//     createdAt: '2024.04.22',
+//     ajajas: 3,
+//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+//   },
+// ];
 
 export default function FootPrintList({ year, plan }: FootPrintListProps) {
   // TODO: prop으로 받은 year과 plan에 해당하는 발자취 list들을 서버로부터 받아온다.
   // - plan.planId === -1 => 모든 계획일 것
   // - plan.planId === -2 => 해당 year에 해당하는 계획이 없는 것
 
+  const { tempFootPrintList } = useMyFootPrintsQuery({
+    sort: 'latest',
+    current: true,
+  });
+
   return (
     <ul className={classNames('footprint-list')}>
-      {dummyFootPrintList.map((item) => {
+      {tempFootPrintList.map((item) => {
         return (
           <FootprintItem
             key={item.id}
diff --git a/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx b/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx
index a55a4a24..79298e60 100644
--- a/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx
+++ b/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx
@@ -20,6 +20,20 @@ type FootPrintIconMapType = {
 const FOOTPRINT_ICON_MAP: FootPrintIconMapType = {
   0: '🤗',
   1: '🗽',
+  2: '🤗',
+  3: '🗽',
+  4: '🤗',
+  5: '🗽',
+  6: '🤗',
+  7: '🗽',
+  8: '🤗',
+  9: '🗽',
+  10: '🤗',
+  11: '🗽',
+  12: '🤗',
+  13: '🗽',
+  14: '🤗',
+  15: '🗽',
 };
 
 export default function FootprintItem({
diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts
index 312508f7..d0c61e3f 100644
--- a/src/constants/queryKey.ts
+++ b/src/constants/queryKey.ts
@@ -6,4 +6,5 @@ export const QUERY_KEY = {
   REMIND: 'getRemind',
   USER_INFORMATION: 'getUserInformation',
   FEEDBACKS: 'getFeedbacks',
+  MY_FOOTPRINTS: 'getMyFootPrints',
 };
diff --git a/src/hooks/apis/useMyFootPrintsQuery.ts b/src/hooks/apis/useMyFootPrintsQuery.ts
new file mode 100644
index 00000000..67909279
--- /dev/null
+++ b/src/hooks/apis/useMyFootPrintsQuery.ts
@@ -0,0 +1,56 @@
+'use client';
+
+import { getMyFootPrints } from '@/apis/client/getMyFootPrints';
+import { QUERY_KEY } from '@/constants/queryKey';
+import { GetAllPlansRequestQuery } from '@/types/apis/plan/GetAllPlans';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+
+// TODO: 수정 필요
+export const useMyFootPrintsQuery = (query: GetAllPlansRequestQuery) => {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+    isError,
+  } = useSuspenseInfiniteQuery({
+    queryKey: [QUERY_KEY.MY_FOOTPRINTS, query.sort, query.current], // sort와 current를 쿼리 키에 넣는 게 맞을까?
+    queryFn: async ({ pageParam = {} }) => {
+      let params = {
+        sort: query.sort,
+        current: query.current,
+      };
+
+      if (pageParam) {
+        // start, ajaja가 들어있을 것임
+        params = { ...params, ...pageParam };
+      }
+
+      const result = await getMyFootPrints(params);
+      return result?.data;
+    },
+    initialPageParam: {}, // 초기 pageParam => 빈 객체
+    getNextPageParam: (lastPage) => {
+      // 더 불러올 data가 있는 지 확인하는 함수
+      if (lastPage.length === 0) {
+        // 빈 배열이라면
+        return undefined;
+      }
+
+      const lastItem = lastPage[lastPage.length - 1]; // 가장 최근 받아온 3개 data 중 마지막 ite
+      return query.sort === 'ajaja'
+        ? { start: lastItem.id, ajaja: lastItem.ajajas } // 인기순이면 start, ajaja 모두 params에 넣어주기 위해
+        : { start: lastItem.id }; // 인기순이면 start를 params에 넣어주기 위해
+    },
+    staleTime: 10000,
+  });
+  return {
+    tempFootPrintList: data?.pages.flat() || [], // TODO: flat() 없애기
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+    isError,
+  };
+};