diff --git a/package.json b/package.json
index e3c630e..6b8e8b8 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
     "@react-sandbox/heart": "^1.1.0",
     "@sentry/nextjs": "^8",
     "@sentry/react": "^8.26.0",
+    "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query-devtools": "^5.60.2",
     "@types/react-query": "^1.2.9",
     "antd": "^5.20.0",
     "basic-loading": "^2.0.2",
diff --git a/src/app/(pages)/4q-gallery/_components/item-container.tsx b/src/app/(pages)/4q-gallery/_components/item-container.tsx
index 8d03203..4883879 100644
--- a/src/app/(pages)/4q-gallery/_components/item-container.tsx
+++ b/src/app/(pages)/4q-gallery/_components/item-container.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import styles from "./item-container.module.css";
 import ItemCard from "./item-card";
 import { getGalleryData } from "@/service/photo_api";
@@ -13,7 +13,16 @@ type Item = {
   categoryName: string;
   url: string;
   tags: string[];
-  liked: boolean;  
+  liked: boolean;
+};
+
+type GalleryPage = {
+  content: Item[];
+  page: number;
+  number: number;
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
 };
 
 type ContainerProps = {
@@ -27,57 +36,53 @@ export default function Container({ category, tag, sort }: ContainerProps) {
     size: 12,
     color: "#FE5B10",
   };
-
-  const [items, setItems] = useState<Item[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [hasMore, setHasMore] = useState<boolean>(true);
-  const [page, setPage] = useState<number>(0);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      try {
-        const data = await getGalleryData(page, category, tag, sort);
-        setItems((prevItems) =>
-          page === 0 ? data.content : [...prevItems, ...data.content]
-        );
-        setHasMore(!data.last);
-      } catch (error) {
-        console.error("Error fetching gallery data:", error);
-      } finally {
-        setLoading(false);
+  const {
+    data,
+    isLoading,
+    isError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery<GalleryPage>({
+    queryKey: ["galleryData", category, tag, sort],
+    queryFn: ({ pageParam = 0 }) =>
+      getGalleryData({ pageParam, category, tag, sort }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      if (lastPage && !lastPage.last) {
+        console.log(lastPage);
+        return lastPage.number + 1;
       }
-    };
-
-    fetchData();
-  }, [page, category, tag, sort]);
+      return undefined;
+    },
+    staleTime: 60 * 1000,
+    gcTime: 300 * 1000,
+  });
 
-  useEffect(() => {
-    setPage(0);
-  }, [category, tag, sort]);
-
-  if (loading && items.length === 0) {
+  if (isLoading) {
     return (
-      <div style={{marginTop: '50px'}}>
+      <div style={{ marginTop: "50px" }}>
         <BounceDot option={loadingOption} />
       </div>
     );
   }
 
-  const loadMore = () => {
-    setPage((prevPage) => prevPage + 1);
-  };
+  if (isError) {
+    return <div>Error loading gallery data.</div>;
+  }
+
+  const items = data?.pages.flatMap((page) => page.content) || [];
 
   return (
     <div className={styles.container}>
-      {items.map((item) => (
+      {items.map((item: Item) => (
         <ItemCard key={item.imageId} item={item} />
       ))}
-      {hasMore && (
+      {hasNextPage && (
         <div className={styles.moreBtnContainer}>
           <Button
-            onClick={loadMore}
-            loading={loading}
+            onClick={() => fetchNextPage()}
+            loading={isFetchingNextPage}
             className={styles.moreBtn}
           >
             더보기
diff --git a/src/app/(pages)/4q-gallery/_components/search-params.tsx b/src/app/(pages)/4q-gallery/_components/search-params.tsx
new file mode 100644
index 0000000..2babd50
--- /dev/null
+++ b/src/app/(pages)/4q-gallery/_components/search-params.tsx
@@ -0,0 +1,156 @@
+import React, { useState, useCallback, Suspense } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { IoIosArrowBack, IoIosArrowForward, IoIosSearch } from "react-icons/io";
+import { categories } from "../_lib/categories";
+import { Select, Input } from "antd";
+import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
+import styles from "../page.module.css";
+
+const { Search } = Input;
+
+const LeftArrow = () => {
+  const { isFirstItemVisible, scrollPrev } =
+    React.useContext(VisibilityContext);
+
+  return (
+    <div
+      className={`${styles.arrow} ${isFirstItemVisible ? styles.disabled : ""}`}
+      onClick={() => scrollPrev()}
+    >
+      <IoIosArrowBack />
+    </div>
+  );
+};
+
+const RightArrow = () => {
+  const { isLastItemVisible, scrollNext } = React.useContext(VisibilityContext);
+
+  return (
+    <div
+      className={`${styles.arrow} ${isLastItemVisible ? styles.disabled : ""}`}
+      onClick={() => scrollNext()}
+    >
+      <IoIosArrowForward />
+    </div>
+  );
+};
+
+type SearchProps = GetProps<typeof Input.Search>;
+
+export default function SearchParamsHandler({
+  isSearchContainerVisible,
+  setIsSearchContainerVisible,
+}: {
+  isSearchContainerVisible: boolean;
+  setIsSearchContainerVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+
+  const tagParam = searchParams?.get("tag") || "";
+
+  const createQueryString = useCallback(
+    (name: string, value?: string) => {
+      const params = new URLSearchParams(
+        searchParams ? searchParams.toString() : ""
+      );
+
+      if (value) {
+        params.set(name, value);
+      } else {
+        params.delete(name);
+      }
+
+      return params.toString();
+    },
+    [searchParams]
+  );
+
+  const handleCategoryClick = (categoryId: string) => {
+    setSelectedCategory(categoryId);
+    const newQueryString = createQueryString(
+      "category",
+      categoryId !== "all" ? categoryId : undefined
+    );
+    router.push(`${pathname}?${newQueryString}`);
+  };
+
+  const onSearch: SearchProps["onSearch"] = (value) => {
+    const newQueryString = createQueryString(
+      "tag",
+      value.trim() ? value : undefined
+    );
+    router.push(`${pathname}?${newQueryString}`);
+  };
+
+  const handleFilterBtnClick = () => {
+    setIsSearchContainerVisible((prev) => !prev);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.filterContainer}>
+        <Select
+          defaultValue="최신순"
+          style={{ width: 120 }}
+          className={styles.selectBox}
+          onChange={(value) => {
+            const sortValue = value === "최신순" ? "latest" : "popular";
+            const newQueryString = createQueryString("sort", sortValue);
+            router.push(`${pathname}?${newQueryString}`);
+          }}
+          options={[
+            { value: "최신순", label: "최신순" },
+            { value: "인기순", label: "인기순" },
+          ]}
+        />
+        <div className={styles.filterBtn} onClick={handleFilterBtnClick}>
+          {tagParam ? (
+            <div className={styles.numberSearch}>1</div>
+          ) : (
+            <IoIosSearch className={styles.filterIcon} />
+          )}
+          <span>검색</span>
+        </div>
+      </div>
+      <div className={styles.categoryContainer}>
+        <hr />
+        <ScrollMenu
+          LeftArrow={LeftArrow}
+          RightArrow={RightArrow}
+          itemClassName={styles.scrollMenu}
+        >
+          {categories.map((category) => (
+            <div
+              key={category.id}
+              className={`${styles.categoryItem} ${
+                selectedCategory === category.id ? styles.selectedCategory : ""
+              }`}
+              onClick={() => handleCategoryClick(category.id)}
+            >
+              {category.name}
+            </div>
+          ))}
+        </ScrollMenu>
+      </div>
+      <div
+        className={`${styles.searchContainer} ${
+          isSearchContainerVisible ? styles.visible : ""
+        }`}
+      >
+        <div className={styles.searchFieldContainer}>
+          <p>태그 검색</p>
+          <Search
+            size="large"
+            placeholder=""
+            allowClear
+            onSearch={onSearch}
+            style={{ width: "100%" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/4q-gallery/page.tsx b/src/app/(pages)/4q-gallery/page.tsx
index 3a93910..72c411d 100644
--- a/src/app/(pages)/4q-gallery/page.tsx
+++ b/src/app/(pages)/4q-gallery/page.tsx
@@ -2,165 +2,33 @@
 "use client";
 export const dynamic = "force-dynamic";
 import React, { useState, useCallback, Suspense } from "react";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import styles from "./page.module.css";
-import { Select, Input } from "antd";
-import type { GetProps } from 'antd';
-import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
-import { IoIosArrowBack, IoIosArrowForward, IoIosSearch } from "react-icons/io";
+import { useSearchParams } from "next/navigation";
 import Container from "./_components/item-container";
 import "react-horizontal-scrolling-menu/dist/styles.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import SearchParamsHandler from "./_components/search-params";
 
-type SearchProps = GetProps<typeof Input.Search>;
-
-type Category = {
-  id: string;
-  name: string;
-};
-
-const { Search } = Input;
+export default function Page() {
+  const searchParams = useSearchParams();
 
-const categories: Category[] = [
-  { id: "all", name: "전체" },
-  { id: "메뉴판", name: "메뉴판" },
-  { id: "전시회", name: "전시회" },
-  { id: "콘서트", name: "콘서트" },
-  { id: "출입증", name: "출입증" },
-  { id: "청첩장", name: "청첩장" },
-];
+  const [isSearchContainerVisible, setIsSearchContainerVisible] =
+    useState(false);
 
-function SearchParamsHandler({
-  isSearchContainerVisible,
-  setIsSearchContainerVisible,
-}: {
-  isSearchContainerVisible: boolean;
-  setIsSearchContainerVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+  const queryClient = new QueryClient();
 
   const categoryParam = searchParams?.get("category") || "all";
   const tagParam = searchParams?.get("tag") || "";
   const sortParam = searchParams?.get("sort") || "latest";
 
-  const createQueryString = useCallback(
-    (name: string, value?: string) => {
-      const params = new URLSearchParams(searchParams ? searchParams.toString() : "");
-
-      if (value) {
-        params.set(name, value);
-      } else {
-        params.delete(name);
-      }
-
-      return params.toString();
-    },
-    [searchParams]
-  ); 
-
-  const handleCategoryClick = (categoryId: string) => {
-    setSelectedCategory(categoryId);
-    const newQueryString = createQueryString('category', categoryId !== 'all' ? categoryId : undefined);
-    router.push(`${pathname}?${newQueryString}`);
-  };
-
-  const onSearch: SearchProps['onSearch'] = (value) => {
-    const newQueryString = createQueryString('tag', value.trim() ? value : undefined);
-    router.push(`${pathname}?${newQueryString}`);
-  };
-
-  const handleFilterBtnClick = () => {
-    setIsSearchContainerVisible((prev) => !prev);
-  };
-
   return (
-    <div className={styles.container}>
-      <div className={styles.filterContainer}>
-        <Select
-          defaultValue="최신순"
-          style={{ width: 120 }}
-          className={styles.selectBox}
-          onChange={(value) => {
-            const sortValue = value === "최신순" ? "latest" : "popular";
-            const newQueryString = createQueryString('sort', sortValue);
-            router.push(`${pathname}?${newQueryString}`);
-          }}
-          options={[
-            { value: "최신순", label: "최신순" },
-            { value: "인기순", label: "인기순" },
-          ]}
-        />
-        <div className={styles.filterBtn} onClick={handleFilterBtnClick}>
-          {tagParam ? <div className={styles.numberSearch}>1</div> : <IoIosSearch className={styles.filterIcon} />}
-          <span>검색</span>
-        </div>
-      </div>
-      <div className={styles.categoryContainer}>
-        <hr />
-        <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow} itemClassName={styles.scrollMenu}>
-          {categories.map((category) => (
-            <div
-              key={category.id}
-              className={`${styles.categoryItem} ${
-                selectedCategory === category.id ? styles.selectedCategory : ""
-              }`}
-              onClick={() => handleCategoryClick(category.id)}
-            >
-              {category.name}
-            </div>
-          ))}
-        </ScrollMenu>
-      </div>
-      <div className={`${styles.searchContainer} ${isSearchContainerVisible ? styles.visible : ''}`}>
-        <div className={styles.searchFieldContainer}>
-          <p>태그 검색</p>
-          <Search size="large" placeholder="" allowClear onSearch={onSearch} style={{ width: '100%' }} />
-        </div>
-      </div>
-      <Suspense>
-        <Container category={categoryParam} tag={tagParam} sort={sortParam} />
-      </Suspense>
-    </div>
-  );
-}
-
-export default function Page() {
-  const [isSearchContainerVisible, setIsSearchContainerVisible] = useState(false);
-
-  return (
-    <Suspense>
+    <QueryClientProvider client={queryClient}>
       <SearchParamsHandler
         isSearchContainerVisible={isSearchContainerVisible}
         setIsSearchContainerVisible={setIsSearchContainerVisible}
       />
-    </Suspense>
+      <Suspense>
+        <Container category={categoryParam} tag={tagParam} sort={sortParam} />
+      </Suspense>
+    </QueryClientProvider>
   );
 }
-
-const LeftArrow = () => {
-  const { isFirstItemVisible, scrollPrev } = React.useContext(VisibilityContext);
-
-  return (
-    <div
-      className={`${styles.arrow} ${isFirstItemVisible ? styles.disabled : ""}`}
-      onClick={() => scrollPrev()}
-    >
-      <IoIosArrowBack />
-    </div>
-  );
-};
-
-const RightArrow = () => {
-  const { isLastItemVisible, scrollNext } = React.useContext(VisibilityContext);
-
-  return (
-    <div
-      className={`${styles.arrow} ${isLastItemVisible ? styles.disabled : ""}`}
-      onClick={() => scrollNext()}
-    >
-      <IoIosArrowForward />
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/service/photo_api.ts b/src/service/photo_api.ts
index c583af2..e6553fb 100644
--- a/src/service/photo_api.ts
+++ b/src/service/photo_api.ts
@@ -1,173 +1,136 @@
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
 export const generatePhotoImg = async (category: string, tags: string[]) => {
-  const token = sessionStorage.getItem('AccessToken');
-
-    try {
-        const response = await fetch(`${BASE_URL}/image`, {
-          cache: 'no-store',
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                ...(token ? { "Authorization": `Bearer ${token}` } : {}),
-
-            },
-            body: JSON.stringify({ category, tags }),
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            return data;
-        } else {
-            throw new Error("이미지 생성에 실패했습니다.");
-        }
-    } catch(error) {
-        throw error;
+  const token = sessionStorage.getItem("AccessToken");
+
+  try {
+    const response = await fetch(`${BASE_URL}/image`, {
+      cache: "no-store",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify({ category, tags }),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    } else {
+      throw new Error("이미지 생성에 실패했습니다.");
     }
+  } catch (error) {
+    throw error;
+  }
 };
 
-
 export const generateTicket = async (
-    ticketImage: File,
-    backgroundImageId: number,
-    shortenUrlId: number,
-    title: string,
+  ticketImage: File,
+  backgroundImageId: number,
+  shortenUrlId: number,
+  title: string
 ) => {
-    try {
-        const formData = new FormData();
-        formData.append("ticketImage", ticketImage);
-        formData.append("backgroundImageId", backgroundImageId.toString());  
-        formData.append("shortenUrlId", shortenUrlId.toString());  
-        formData.append("title", title);
-
-        const token = sessionStorage.getItem('AccessToken');
-        
-        const response = await fetch(`${BASE_URL}/ticket`, { 
-          cache: 'no-store',
-            method: "POST",
-            body: formData,
-            headers: {
-              ...(token ? { "Authorization": `Bearer ${token}` } : {}),
-            },
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            return {
-                ticketId: data.id
-            };
-        } else {
-            throw new Error("티켓 생성에 실패했습니다.");
-        }
-    } catch (error) {
-        throw error;
-    }
-};
+  try {
+    const formData = new FormData();
+    formData.append("ticketImage", ticketImage);
+    formData.append("backgroundImageId", backgroundImageId.toString());
+    formData.append("shortenUrlId", shortenUrlId.toString());
+    formData.append("title", title);
 
+    const token = sessionStorage.getItem("AccessToken");
 
+    const response = await fetch(`${BASE_URL}/ticket`, {
+      cache: "no-store",
+      method: "POST",
+      body: formData,
+      headers: {
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return {
+        ticketId: data.id,
+      };
+    } else {
+      throw new Error("티켓 생성에 실패했습니다.");
+    }
+  } catch (error) {
+    throw error;
+  }
+};
 
 export const getTicketInfo = async (ticketId: number) => {
-    try {
-        const response = await fetch(`${BASE_URL}/ticket/${ticketId}`, {
-          cache: 'no-store',
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            return {
-                ticketUrl: data.ticketUrl,
-                title: data.title,
-                shortenUrl: data.shortenUrl
-            };
-        } else {
-            throw new Error("티켓 정보를 가져오는데 실패했습니다.");
-        }
-    } catch (error) {
-        throw error;
+  try {
+    const response = await fetch(`${BASE_URL}/ticket/${ticketId}`, {
+      cache: "no-store",
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return {
+        ticketUrl: data.ticketUrl,
+        title: data.title,
+        shortenUrl: data.shortenUrl,
+      };
+    } else {
+      throw new Error("티켓 정보를 가져오는데 실패했습니다.");
     }
+  } catch (error) {
+    throw error;
+  }
 };
 
 // 좋아요 추가
 export const likeImage = async (imageId: string) => {
-    const token = sessionStorage.getItem('AccessToken'); 
-  
-    if (!token) {
-      throw new Error('Access token is missing.');
-    }
-  
-    try {
-      const response = await fetch(`${BASE_URL}/gallery/${imageId}/like`, {
-        cache: 'no-store',
-        method: 'POST',
-        headers: {
-          "Authorization": `Bearer ${token}`, 
-          "Content-Type": "application/json", 
-        },
-      });
-  
-      if (response.ok) {
-        const data = await response.json(); 
-        return data;
-      } else {
-        throw new Error('Failed to like the image.');
-      }
-    } catch (error) {
-      console.error('Error liking the image:', error);
-      throw error;
-    }
-  };
-
-  // 좋아요 삭제
-  export const unlikeImage = async (imageId: string) => {
-    const token = sessionStorage.getItem('AccessToken');
-  
-    if (!token) {
-      throw new Error('Access token is missing.');
-    }
-  
-    try {
-      const response = await fetch(`${BASE_URL}/gallery/${imageId}/like`, {
-        method: 'DELETE', // Changed to DELETE for unliking the image
-        headers: {
-          "Authorization": `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-      });
-  
-      if (response.ok) {
-        const data = await response.json();
-        return data;
-      } else {
-        throw new Error('Failed to unlike the image.');
-      }
-    } catch (error) {
-      console.error('Error unliking the image:', error);
-      throw error;
+  const token = sessionStorage.getItem("AccessToken");
+
+  if (!token) {
+    throw new Error("Access token is missing.");
+  }
+
+  try {
+    const response = await fetch(`${BASE_URL}/gallery/${imageId}/like`, {
+      cache: "no-store",
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    } else {
+      throw new Error("Failed to like the image.");
     }
-  };
-  
-  
-// 갤러리 이미지 요청
-export const getGalleryData = async (page: number, category: string, tag: string, sort: string) => {
-  const token = sessionStorage.getItem('AccessToken');
+  } catch (error) {
+    console.error("Error liking the image:", error);
+    throw error;
+  }
+};
 
-  const url = new URL(`${BASE_URL}/gallery`);
-  url.searchParams.append('page', page.toString());
-  if (category && category !== 'all') url.searchParams.append('categoryName', category);
-  if (tag) url.searchParams.append('tagName', tag);
-  if (sort) url.searchParams.append('sort', sort);
+// 좋아요 삭제
+export const unlikeImage = async (imageId: string) => {
+  const token = sessionStorage.getItem("AccessToken");
+
+  if (!token) {
+    throw new Error("Access token is missing.");
+  }
 
   try {
-    const response = await fetch(url.toString(), {
-      cache: 'no-store',
-      method: 'GET',
+    const response = await fetch(`${BASE_URL}/gallery/${imageId}/like`, {
+      method: "DELETE", // Changed to DELETE for unliking the image
       headers: {
+        Authorization: `Bearer ${token}`,
         "Content-Type": "application/json",
-        ...(token ? { "Authorization": `Bearer ${token}` } : {}),
       },
     });
 
@@ -175,67 +138,128 @@ export const getGalleryData = async (page: number, category: string, tag: string
       const data = await response.json();
       return data;
     } else {
-      throw new Error('Failed to fetch gallery data.');
+      throw new Error("Failed to unlike the image.");
     }
   } catch (error) {
-    console.error('Error fetching gallery data:', error);
+    console.error("Error unliking the image:", error);
     throw error;
   }
 };
 
-  
-  export const getMyTicket = async() => {
-    const token = sessionStorage.getItem('AccessToken');
-    try {
-        const response = await fetch(`${BASE_URL}/mypq`, {
-          cache: 'no-store',
-            method: "GET",
-            headers: {
-                "Authorization": `Bearer ${token}`,
-                "Content-Type": "application/json",
-            },
-        });
-        if (response.ok) {
-            const data = await response.json();
-            return data;
-        } else {
-            throw new Error("티켓 정보를 가져오는데 실패했습니다.");
-        }
-    } catch (error) {
-        throw error;
+// 갤러리 이미지 요청
+// export const getGalleryData = async (page: number, category: string, tag: string, sort: string) => {
+//   const token = sessionStorage.getItem('AccessToken');
+
+//   const url = new URL(`${BASE_URL}/gallery`);
+//   url.searchParams.append('page', page.toString());
+//   if (category && category !== 'all') url.searchParams.append('categoryName', category);
+//   if (tag) url.searchParams.append('tagName', tag);
+//   if (sort) url.searchParams.append('sort', sort);
+
+//   try {
+//     const response = await fetch(url.toString(), {
+//       cache: 'no-store',
+//       method: 'GET',
+//       headers: {
+//         "Content-Type": "application/json",
+//         ...(token ? { "Authorization": `Bearer ${token}` } : {}),
+//       },
+//     });
+
+//     if (response.ok) {
+//       const data = await response.json();
+//       return data;
+//     } else {
+//       throw new Error('Failed to fetch gallery data.');
+//     }
+//   } catch (error) {
+//     console.error('Error fetching gallery data:', error);
+//     throw error;
+//   }
+// };
+
+export const getGalleryData = async ({
+  pageParam = 0,
+  category,
+  tag,
+  sort,
+}: any) => {
+  const token = sessionStorage.getItem("AccessToken");
+
+  const url = new URL(`${BASE_URL}/gallery`);
+  url.searchParams.append("page", pageParam.toString());
+  if (category && category !== "all")
+    url.searchParams.append("categoryName", category);
+  if (tag) url.searchParams.append("tagName", tag);
+  if (sort) url.searchParams.append("sort", sort);
+
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch gallery data.");
+  }
+
+  return response.json();
+};
+
+export const getMyTicket = async () => {
+  const token = sessionStorage.getItem("AccessToken");
+  try {
+    const response = await fetch(`${BASE_URL}/mypq`, {
+      cache: "no-store",
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    });
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    } else {
+      throw new Error("티켓 정보를 가져오는데 실패했습니다.");
     }
+  } catch (error) {
+    throw error;
+  }
 };
 
 // 좋아요한 배경이미지
-export const getLikedTicket = async() => {
-  const token = sessionStorage.getItem('AccessToken');
+export const getLikedTicket = async () => {
+  const token = sessionStorage.getItem("AccessToken");
   try {
-      const response = await fetch(`${BASE_URL}/mypq/liked`, {
-          method: "GET",
-          headers: {
-              "Authorization": `Bearer ${token}`,
-              "Content-Type": "application/json",
-          },
-      });
-      if (response.ok) {
-          const data = await response.json();
-          return data;
-      } else {
-          throw new Error("티켓 정보를 가져오는데 실패했습니다.");
-      }
+    const response = await fetch(`${BASE_URL}/mypq/liked`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    });
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    } else {
+      throw new Error("티켓 정보를 가져오는데 실패했습니다.");
+    }
   } catch (error) {
-      throw error;
+    throw error;
   }
 };
 
 // 티켓 삭제
 export const deleteTicket = async (ticketId: number) => {
-  const token = sessionStorage.getItem('AccessToken');
+  const token = sessionStorage.getItem("AccessToken");
   try {
     const response = await fetch(`${BASE_URL}/ticket/${ticketId}`, {
       method: "DELETE",
       headers: {
-        "Authorization": `Bearer ${token}`,
+        Authorization: `Bearer ${token}`,
         "Content-Type": "application/json",
       },
     });
diff --git a/yarn.lock b/yarn.lock
index ebd00a8..3b6a5a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2354,6 +2354,30 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tanstack/query-core@5.59.20":
+  version "5.59.20"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.59.20.tgz#356718976536727b9af0ad1163a21fd6a44ee0a9"
+  integrity sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==
+
+"@tanstack/query-devtools@5.59.20":
+  version "5.59.20"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.59.20.tgz#a827ac682ec1268fc9c99e7b6eb739f35b5606aa"
+  integrity sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==
+
+"@tanstack/react-query-devtools@^5.60.2":
+  version "5.60.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.60.2.tgz#ef6c788892b033994b9ac4f81bd455ef9fa52a9f"
+  integrity sha512-h+4/KwgUuAu4fcfrlSnD9K4gxR9Glbi3SbQUWBl2iF9Nt94aVcmCwAACGHWqqKhDPz1KOiRe9bIq2KZ4UsZMEA==
+  dependencies:
+    "@tanstack/query-devtools" "5.59.20"
+
+"@tanstack/react-query@^5.60.2":
+  version "5.60.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.60.2.tgz#a65db96702c11f3f868c40372ce66f05c2a77cc6"
+  integrity sha512-JhpJNxIAPuE0YCpP1Py4zAsgx+zY0V531McRMtQbwVlJF8+mlZwcOPrzGmPV248K8IP+mPbsfxXToVNMNwjUcw==
+  dependencies:
+    "@tanstack/query-core" "5.59.20"
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"