diff --git a/src/apis/templeInfo/axios.ts b/src/apis/templeInfo/axios.ts
index 95fc2025..aac9a4b2 100644
--- a/src/apis/templeInfo/axios.ts
+++ b/src/apis/templeInfo/axios.ts
@@ -1,16 +1,12 @@
 import instance from '@apis/instance';
 
-export const getTempleDetails = async (templestayId: string, userId?: string) => {
-  const res = await instance.get('/templestay', {
-    params: { templestayId, userId },
-  });
+export const getTempleDetails = async (id: number) => {
+  const res = await instance.get(`/v2/api/templestay/details/${id}`);
   return res.data;
 };
 
-export const getTempleImages = async (templestayId: string) => {
-  const res = await instance.get('/public/templestay/img', {
-    params: { templestayId },
-  });
+export const getTempleImages = async (id: number) => {
+  const res = await instance.get(`/v2/api/templestay/images/${id}`);
   return res.data;
 };
 
diff --git a/src/apis/templeInfo/index.ts b/src/apis/templeInfo/index.ts
index c08b6200..6000d68b 100644
--- a/src/apis/templeInfo/index.ts
+++ b/src/apis/templeInfo/index.ts
@@ -1,21 +1,24 @@
+import { ApiResponse } from '@apis/response';
 import { useQuery } from '@tanstack/react-query';
 
 import { getTempleReviews, getTempleImages, getTempleDetails } from './axios';
 import { ReviewsResponse, TemplestayImgsResponse, TempleDetail } from './type';
 
-export const useGetTempleDetails = (templestayId: string, userId?: string) => {
-  const { data, isLoading, isError } = useQuery<TempleDetail>({
-    queryKey: ['detailPage', templestayId, userId],
-    queryFn: () => getTempleDetails(templestayId, userId),
+export const useGetTempleDetails = (id: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['detailPage', id],
+    queryFn: () => getTempleDetails(id),
+    select: (res: ApiResponse<TempleDetail>) => res.data,
   });
 
   return { data, isLoading, isError };
 };
 
-export const useGetTempleImages = (templestayId: string) => {
-  const { data, isLoading, isError } = useQuery<TemplestayImgsResponse>({
-    queryKey: ['images', templestayId],
-    queryFn: () => getTempleImages(templestayId),
+export const useGetTempleImages = (id: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['images', id],
+    queryFn: () => getTempleImages(id),
+    select: (res: ApiResponse<TemplestayImgsResponse>) => res.data,
   });
 
   return { data, isLoading, isError };
diff --git a/src/apis/templeInfo/prefetch.ts b/src/apis/templeInfo/prefetch.ts
index 99a634e7..41f6f8f3 100644
--- a/src/apis/templeInfo/prefetch.ts
+++ b/src/apis/templeInfo/prefetch.ts
@@ -3,16 +3,16 @@ import { queryOptions } from '@tanstack/react-query';
 import { getTempleImages, getTempleReviews, getTempleDetails } from './axios';
 import { TemplestayImgsResponse, ReviewsResponse, TempleDetail } from './type';
 
-export const templeDetailQueryOptions = (templestayId: string, userId?: string) =>
+export const templeDetailQueryOptions = (id: number) =>
   queryOptions<TempleDetail>({
-    queryKey: ['detailPage', templestayId, userId],
-    queryFn: () => getTempleDetails(templestayId, userId),
+    queryKey: ['detailPage', id],
+    queryFn: () => getTempleDetails(id),
   });
 
-export const templeImagesQueryOptions = (templestayId: string) =>
+export const templeImagesQueryOptions = (id: number) =>
   queryOptions<TemplestayImgsResponse>({
-    queryKey: ['images', templestayId],
-    queryFn: () => getTempleImages(templestayId),
+    queryKey: ['images', id],
+    queryFn: () => getTempleImages(id),
   });
 
 export const templeReviewsQueryOptions = (templestayId: string, page: number) =>
diff --git a/src/apis/templeInfo/type.ts b/src/apis/templeInfo/type.ts
index 7a4b2d78..fb9b6e55 100644
--- a/src/apis/templeInfo/type.ts
+++ b/src/apis/templeInfo/type.ts
@@ -1,29 +1,25 @@
 export interface TempleDetail {
-  templestayId: string;
-  templeName: string;
+  id: number;
   templestayName: string;
-  phoneNumber: string;
+  templeName: string;
   address: string;
-  tag?: string;
-  templestayPrice?: string;
-  introduction?: string;
-  detailAddress: string;
-  youtube?: string;
-  schedule?: string;
-  latitude: number;
-  longitude: number;
-  liked: boolean;
+  phone: string;
+  schedule: string;
+  price: number;
+  introduction: string;
   url: string;
+  lat: number;
+  lon: number;
+  wish: boolean;
 }
 
 export interface TemplestayImg {
-  imageUrlId: number;
-  imgUrl: string;
+  imgurl: string;
 }
 
 export interface TemplestayImgsResponse {
-  total: number;
-  templestayImgs: TemplestayImg[];
+  id: number;
+  imgUrls: TemplestayImg[];
 }
 
 export interface Review {
diff --git a/src/app/detail/[templestayId]/TempleDetailClient.tsx b/src/app/detail/[templestayId]/TempleDetailClient.tsx
index f2591aab..e8f605c4 100644
--- a/src/app/detail/[templestayId]/TempleDetailClient.tsx
+++ b/src/app/detail/[templestayId]/TempleDetailClient.tsx
@@ -29,18 +29,17 @@ const SmallMap = dynamic(() => import('@components/templeDetail/naverMap/smallMa
 });
 
 interface TempleDetailClientProps {
-  templestayId: string;
+  id: number;
 }
 
-const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
+const TempleDetailClient = ({ id }: TempleDetailClientProps) => {
   const [userId, setUserId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    const id = getCookie('userId') as string;
-    setUserId(id);
+    const user = getCookie('userId') as string;
+    setUserId(user);
   }, []);
-
-  const { data, isLoading, isError } = useGetTempleDetails(templestayId, userId || undefined);
+  const { data, isLoading, isError } = useGetTempleDetails(id);
   const queryClient = useQueryClient();
   const addWishlistMutation = useAddWishlist();
   const removeWishlistMutation = useRemoveWishlist();
@@ -51,7 +50,7 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
 
   useEffect(() => {
     if (data) {
-      setLiked(data.liked);
+      setLiked(data.wish);
     }
   }, [data]);
 
@@ -66,7 +65,7 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
     const mutation = liked ? removeWishlistMutation : addWishlistMutation;
 
     mutation.mutate(
-      { userId: Number(userId), templestayId: Number(templestayId) },
+      { userId: Number(userId), templestayId: Number(id) },
       {
         onSuccess: () => {
           setLiked(!liked);
@@ -126,17 +125,13 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
       )}
 
       <div className={styles.headerBox}>
-        <TempleTopbar templeName={data.templeName} templestayName={data.templestayName} />
+        <TempleTopbar templestayName={data.templestayName} />
       </div>
       <div className={styles.topDetailContainer}>
         <DetailCarousel />
         <div className={styles.templeTitleBox}>
-          <TempleTitle
-            tag={data.tag}
-            templeName={data.templeName}
-            templestayName={data.templestayName}
-          />
-          <TempleDetailInfo address={data.address} phoneNumber={data.phoneNumber} />
+          <TempleTitle templeName={data.templeName} templestayName={data.templestayName} />
+          <TempleDetailInfo address={data.address} phoneNumber={data.phone} />
         </div>
         <StickyTapBar>
           <TapBar type="detail" />
@@ -145,15 +140,11 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
       <div className={styles.templeDetailMiddle}>
         <TempleReview />
         <TempleSchedule schedule={data.schedule} />
-        <TemplePrice templestayPrice={data.templestayPrice} />
+        <TemplePrice templestayPrice={data.price} />
         <TempleInfo introduction={data.introduction} />
       </div>
 
-      <SmallMap
-        detailAddress={data.detailAddress}
-        latitude={data.latitude}
-        longitude={data.longitude}
-      />
+      <SmallMap detailAddress={data.address} latitude={data.lat} longitude={data.lon} />
       <ButtonBar
         type="wish"
         label="예약하러 가기"
diff --git a/src/app/detail/[templestayId]/page.tsx b/src/app/detail/[templestayId]/page.tsx
index 53f742cf..31f04bf9 100644
--- a/src/app/detail/[templestayId]/page.tsx
+++ b/src/app/detail/[templestayId]/page.tsx
@@ -4,25 +4,27 @@ import {
   templeReviewsQueryOptions,
 } from '@apis/templeInfo/prefetch';
 import { QueryClient, dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { cookies } from 'next/headers';
 
 import TempleDetailClient from './TempleDetailClient';
 
 const TempleDetailPage = async ({ params }: { params: Promise<{ templestayId: string }> }) => {
   const { templestayId } = await params;
-  const cookieStore = await cookies();
-  const userId = cookieStore.get('userId')?.value;
+  const id = Number(templestayId);
+  if (!Number.isInteger(id) || id <= 0) {
+    throw new Error(`Invalid templestay ID: ${templestayId}`);
+  }
+  const stringId = templestayId;
   const queryClient = new QueryClient();
 
   await Promise.all([
-    queryClient.prefetchQuery(templeDetailQueryOptions(templestayId, userId || undefined)),
-    queryClient.prefetchQuery(templeImagesQueryOptions(templestayId)),
-    queryClient.prefetchQuery(templeReviewsQueryOptions(templestayId, 1)),
+    queryClient.prefetchQuery(templeDetailQueryOptions(id)),
+    queryClient.prefetchQuery(templeImagesQueryOptions(id)),
+    queryClient.prefetchQuery(templeReviewsQueryOptions(stringId, 1)),
   ]);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <TempleDetailClient templestayId={templestayId} />
+      <TempleDetailClient id={id} />
     </HydrationBoundary>
   );
 };
diff --git a/src/app/detail/[templestayId]/photo/TempleImagesClient.tsx b/src/app/detail/[templestayId]/photo/TempleImagesClient.tsx
new file mode 100644
index 00000000..5bbe50a5
--- /dev/null
+++ b/src/app/detail/[templestayId]/photo/TempleImagesClient.tsx
@@ -0,0 +1,49 @@
+'use client';
+import { useGetTempleImages } from '@apis/templeInfo';
+import PageName from '@components/common/pageName/PageName';
+import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
+import Image from 'next/image';
+
+import * as styles from './style.css';
+
+interface TemplePhotoPageProps {
+  templestayId: number;
+}
+
+const TempleImageClient = ({ templestayId }: TemplePhotoPageProps) => {
+  const { data, isLoading, isError } = useGetTempleImages(templestayId);
+
+  if (isLoading) {
+    return <ExceptLayout type="loading" />;
+  }
+
+  if (isError) {
+    return <ExceptLayout type="networkError" />;
+  }
+
+  if (!data || !data.imgUrls.length) {
+    return <p>No temple images available</p>;
+  }
+
+  return (
+    <div className={styles.photoContainer}>
+      <div className={styles.headerBox}>
+        <PageName title="사진" />
+      </div>
+      <div className={styles.photoGrid}>
+        {data.imgUrls.map((photo) => (
+          <Image
+            key={photo.imgurl}
+            width={162}
+            height={162}
+            src={photo.imgurl}
+            alt="템플스테이 사진"
+            className={styles.photoItem}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TempleImageClient;
diff --git a/src/app/detail/[templestayId]/photo/page.tsx b/src/app/detail/[templestayId]/photo/page.tsx
index 662c8ba6..5f839ecc 100644
--- a/src/app/detail/[templestayId]/photo/page.tsx
+++ b/src/app/detail/[templestayId]/photo/page.tsx
@@ -1,45 +1,10 @@
-import { templeImagesQueryOptions } from '@apis/templeInfo/prefetch';
-import { TemplestayImg, TemplestayImgsResponse } from '@apis/templeInfo/type';
-import PageName from '@components/common/pageName/PageName';
-import { QueryClient } from '@tanstack/react-query';
-import Image from 'next/image';
-
-import * as styles from './style.css';
+import TempleImageClient from './TempleImagesClient';
 
 const TemplePhotoPage = async ({ params }: { params: Promise<{ templestayId: string }> }) => {
   const { templestayId } = await params;
-  const queryClient = new QueryClient();
-  const cachedData = queryClient.getQueryData(['images', templestayId]);
-  if (!cachedData) {
-    await queryClient.prefetchQuery(templeImagesQueryOptions(templestayId));
-  }
-  const data =
-    queryClient.getQueryData<TemplestayImgsResponse>(['images', templestayId]) ||
-    (await queryClient.fetchQuery(templeImagesQueryOptions(templestayId)));
-
-  if (!data) {
-    return <p>No temple images available</p>;
-  }
+  const templestayIdNumber = Number(templestayId);
 
-  return (
-    <div className={styles.photoContainer}>
-      <div className={styles.headerBox}>
-        <PageName title="사진" />
-      </div>
-      <div className={styles.photoGrid}>
-        {data.templestayImgs.map((photo: TemplestayImg) => (
-          <Image
-            width={162}
-            height={162}
-            key={photo.imageUrlId}
-            src={photo.imgUrl}
-            alt={`Temple Stay ${photo.imageUrlId}`}
-            className={styles.photoItem}
-          />
-        ))}
-      </div>
-    </div>
-  );
+  return <TempleImageClient templestayId={templestayIdNumber} />;
 };
 
 export default TemplePhotoPage;
diff --git a/src/components/carousel/detailCarousel/DetailCarousel.tsx b/src/components/carousel/detailCarousel/DetailCarousel.tsx
index 28af53fe..701b4958 100644
--- a/src/components/carousel/detailCarousel/DetailCarousel.tsx
+++ b/src/components/carousel/detailCarousel/DetailCarousel.tsx
@@ -11,10 +11,10 @@ const largeEmptyImage = '@assets/images/img_gray_light_leaf_large.png';
 
 const DetailCarousel = () => {
   const { templestayId } = useParams();
-  const { data, isLoading, isError } = useGetTempleImages(String(templestayId));
+  const { data, isLoading, isError } = useGetTempleImages(Number(templestayId));
 
   const { carouselRef, transformStyle, handleDragChange, handleDragEnd } = useCarousel({
-    itemCount: data?.total || 0,
+    itemCount: data?.imgUrls.length || 0,
     moveDistance: 355,
   });
 
@@ -43,13 +43,13 @@ const DetailCarousel = () => {
           onDragChange: handleDragChange,
           onDragEnd: handleDragEnd,
         })}>
-        {data.templestayImgs.map((image, index) => (
+        {data.imgUrls.map((image, index) => (
           <ImageItem
-            key={image.imageUrlId}
-            id={image.imageUrlId}
-            imgUrl={image.imgUrl}
+            key={index}
+            id={index}
+            imgUrl={image.imgurl}
             currentNum={index + 1}
-            totalNum={data.total}
+            totalNum={data.imgUrls.length}
           />
         ))}
       </div>
diff --git a/src/components/templeDetail/templeInfo/templeInfo.tsx b/src/components/templeDetail/templeInfo/templeInfo.tsx
index e964ee98..6941d74f 100644
--- a/src/components/templeDetail/templeInfo/templeInfo.tsx
+++ b/src/components/templeDetail/templeInfo/templeInfo.tsx
@@ -8,36 +8,26 @@ import * as styles from './templeInfo.css';
 interface TempleInfoProps {
   introduction?: string;
 }
-interface StringKeyValue {
-  [key: string]: string;
-}
 
 const TempleInfo = ({ introduction }: TempleInfoProps) => {
   const contentRef = useRef<HTMLParagraphElement>(null);
   const { isAppeared, isExpanded, handleToggleExpand } = useExpandHook(contentRef);
 
-  let parsedIntroduction: StringKeyValue | null = null;
-  if (introduction) {
-    parsedIntroduction = JSON.parse(introduction);
-  }
-
   return (
     <div className={styles.templeInfoContainer} id="detail-section-3">
       <DetailTitle title="템플스테이 정보" />
-      {parsedIntroduction ? (
+      {introduction ? (
         <div className={styles.templeInfoBoxStyle}>
           {(() => {
-            const key = Object.keys(parsedIntroduction)[0];
-            const value = parsedIntroduction[key];
             return (
               <>
-                <h3 className={styles.templeInfoTitle}>{key}</h3>
+                {/* <h3 className={styles.templeInfoTitle}>{key}</h3> */}
                 <p
                   ref={contentRef}
                   className={`${styles.templeInfoContent} ${
                     isExpanded ? styles.expandedContent : ''
                   }`}>
-                  {value}
+                  {introduction}
                 </p>
               </>
             );
diff --git a/src/components/templeDetail/templePrice/TemplePrice.tsx b/src/components/templeDetail/templePrice/TemplePrice.tsx
index cac8d174..9c856f1b 100644
--- a/src/components/templeDetail/templePrice/TemplePrice.tsx
+++ b/src/components/templeDetail/templePrice/TemplePrice.tsx
@@ -2,17 +2,18 @@ import DetailTitle from '@components/detailTitle/DetailTitle';
 
 import * as styles from './templePrice.css';
 interface TemplePriceProps {
-  templestayPrice?: string;
+  templestayPrice?: number;
 }
 
 const TemplePrice = ({ templestayPrice }: TemplePriceProps) => {
+  const hasPrice = templestayPrice !== null && templestayPrice !== undefined;
   return (
     <div className={styles.templePriceWrapper} id="detail-section-2">
       <DetailTitle title="가격" />
-      {templestayPrice ? (
+      {hasPrice ? (
         <div className={styles.templePriceBox}>
           <p className={styles.adultString}>성인(1인)</p>
-          <p className={styles.priceString}>{templestayPrice}</p>
+          <p className={styles.priceString}>{templestayPrice.toLocaleString()}원</p>
         </div>
       ) : (
         <div className={styles.emptyContainer}>
diff --git a/src/components/templeDetail/templeTitle/TempleTitle.tsx b/src/components/templeDetail/templeTitle/TempleTitle.tsx
index 04a725bb..2ac6ab1e 100644
--- a/src/components/templeDetail/templeTitle/TempleTitle.tsx
+++ b/src/components/templeDetail/templeTitle/TempleTitle.tsx
@@ -1,25 +1,18 @@
 import * as styles from './templeTitle.css';
 
 interface TempleTitleProps {
-  tag?: string;
   templeName: string;
   templestayName: string;
 }
 
-const TempleTitle = ({ tag, templeName, templestayName }: TempleTitleProps) => {
+const TempleTitle = ({ templeName, templestayName }: TempleTitleProps) => {
   return (
     <section className={styles.titleWrapper}>
       <div className={styles.tagBox}>
-        {tag?.split(',').map((tagItem, index) => (
-          <span key={index} className={styles.tagBox}>
-            #{tagItem.trim()}
-          </span>
-        ))}
+        <span>{templeName}</span>
       </div>
       <div className={styles.templeNameBox}>
-        <h1>
-          {templeName} {templestayName}
-        </h1>
+        <h1>{templestayName}</h1>
       </div>
     </section>
   );
diff --git a/src/components/templeDetail/templeTopbar/TempleTopbar.tsx b/src/components/templeDetail/templeTopbar/TempleTopbar.tsx
index 8bff0b60..b6a1015d 100644
--- a/src/components/templeDetail/templeTopbar/TempleTopbar.tsx
+++ b/src/components/templeDetail/templeTopbar/TempleTopbar.tsx
@@ -1,14 +1,13 @@
 import PageName from '@components/common/pageName/PageName';
 
 interface TempleTopbarProps {
-  templeName: string;
   templestayName: string;
 }
 
-const TempleTopbar = ({ templeName, templestayName }: TempleTopbarProps) => {
+const TempleTopbar = ({ templestayName }: TempleTopbarProps) => {
   return (
     <div>
-      <PageName title={`${templeName} ${templestayName}`} />
+      <PageName title={`${templestayName}`} />
     </div>
   );
 };