diff --git a/lib/api/instance.js b/lib/api/instance.js
index 07ead99..1036ff7 100644
--- a/lib/api/instance.js
+++ b/lib/api/instance.js
@@ -1,11 +1,21 @@
 import axios from "axios";
 
 const renderApi = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
+  baseURL: "http://localhost:3000/api", //process.env.NEXT_PUBLIC_DATABASE_URL, //env 수정 필요
   headers: {
     "Content-Type": "application/json",
   },
   withCredentials: true,
 });
 
+export const ssrRenderApi = (cookies) =>
+  axios.create({
+    baseURL: "http://localhost:3000/api", //process.env.NEXT_PUBLIC_DATABASE_URL, //env 수정 필요
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: cookies,
+    },
+    withCredentials: true,
+  });
+
 export default renderApi;
diff --git a/lib/api/shop.js b/lib/api/shop.js
index 50f882a..3dcc970 100644
--- a/lib/api/shop.js
+++ b/lib/api/shop.js
@@ -1,4 +1,4 @@
-import renderApi from "./instance";
+import renderApi, { ssrRenderApi } from "./instance";
 
 export async function getShopCards({
   sort,
@@ -38,6 +38,17 @@ export const getShopCard = async (shopId) => {
   }
 };
 
+export const getSSRShopCard = async ({ shopId, cookies }) => {
+  try {
+    const api = ssrRenderApi(cookies);
+    const response = await api.get(`/shop/${shopId}`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching shop card:", error);
+    throw error;
+  }
+};
+
 export const deleteShopCard = async (shopId) => {
   try {
     const response = await renderApi.delete(`/shop/${shopId}`);
diff --git a/next.config.mjs b/next.config.mjs
index 0bda189..24f7d1e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,11 +1,19 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: "https://one-favoritephoto-1-be.onrender.com/:path*",
+      },
+    ];
+  },
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: '**',
+        protocol: "https",
+        hostname: "**",
       },
     ],
   },
diff --git a/pages/buyer/photocard/[id].jsx b/pages/buyer/photocard/[id].jsx
index 3823f5b..9dcdabf 100644
--- a/pages/buyer/photocard/[id].jsx
+++ b/pages/buyer/photocard/[id].jsx
@@ -1,20 +1,23 @@
-import Button from '@/components/buttons/Button';
-import Image from 'next/image';
-import styles from '@/pages/buyer/photocard/[id].module.css';
-import GradeCategory from '@/components/cards/info/GradeCategory';
-import ModalContainer from '@/components/modal/ModalContainer';
-import { useState } from 'react';
-import DefaultContent from '@/components/modal/contents/DefaultContent';
-import CardList from '@/components/modal/contents/CardList';
-import CardExchange from '@/components/modal/contents/CardExchange';
-import QuantityButton from '@/components/buttons/QuantityButton';
-import { getShopCard } from '@/lib/api/shop';
-import ButtonCard from '@/components/cards/ButtonCard';
-import { useUsersMyCardsQuery } from '@/lib/reactQuery/useUsers';
+import Button from "@/components/buttons/Button";
+import Image from "next/image";
+import styles from "@/pages/buyer/photocard/[id].module.css";
+import GradeCategory from "@/components/cards/info/GradeCategory";
+import ModalContainer from "@/components/modal/ModalContainer";
+import { useState } from "react";
+import DefaultContent from "@/components/modal/contents/DefaultContent";
+import CardList from "@/components/modal/contents/CardList";
+import CardExchange from "@/components/modal/contents/CardExchange";
+import QuantityButton from "@/components/buttons/QuantityButton";
+import { getSSRShopCard } from "@/lib/api/shop";
+import ButtonCard from "@/components/cards/ButtonCard";
+import { useUsersMyCardsQuery } from "@/lib/reactQuery/useUsers";
 
 export async function getServerSideProps(context) {
   const { id } = context.params;
-  const shopCard = await getShopCard(id);
+
+  console.log("getServerSideProps-context.req.headers : ", context.req.headers);
+  const cookies = context.req.headers.cookie || "";
+  const shopCard = await getSSRShopCard({ shopId: id, cookies });
 
   return {
     props: {
@@ -31,7 +34,7 @@ export default function Index({ card, exchangeList, exchangeInfo }) {
   const [exchangeDetailModal, setExchangeDetailModal] = useState(false);
   const [num, setNum] = useState(1);
 
-  const { data, isLoading, error } = useUsersMyCardsQuery({ id });
+  // 임시 주석 처리 const { data, isLoading, error } = useUsersMyCardsQuery({ id });
 
   const purchaseModalClick = () => {
     setExchangeDetailModal(false);
@@ -57,82 +60,82 @@ export default function Index({ card, exchangeList, exchangeInfo }) {
 
   return (
     <>
-      <div className={styles['container']}>
-        <div className={styles['market-place']}>마켓플레이스</div>
-        <div className={styles['title']}>{card.name}</div>
-        <div className={styles['card-container']}>
-          <div className={styles['photocard-image']}>
+      <div className={styles["container"]}>
+        <div className={styles["market-place"]}>마켓플레이스</div>
+        <div className={styles["title"]}>{card.name}</div>
+        <div className={styles["card-container"]}>
+          <div className={styles["photocard-image"]}>
             <Image src={card.image} fill alt="photocard-image" />
           </div>
-          <div className={styles['card-info-container']}>
-            <div className={styles['card-header']}>
+          <div className={styles["card-info-container"]}>
+            <div className={styles["card-header"]}>
               <GradeCategory
-                style={'medium'}
+                style={"medium"}
                 grade={card.grade}
                 genre={card.genre}
               />
               {card.creatorNickname}
             </div>
-            <div className={styles['bar']} />
-            <div className={styles['card-description']}>{card.description}</div>
-            <div className={styles['bar']} />
-            <div className={styles['price-container']}>
-              <div className={styles['price']}>가격</div>
-              <div className={styles['point']}>{card.price}P</div>
+            <div className={styles["bar"]} />
+            <div className={styles["card-description"]}>{card.description}</div>
+            <div className={styles["bar"]} />
+            <div className={styles["price-container"]}>
+              <div className={styles["price"]}>가격</div>
+              <div className={styles["point"]}>{card.price}P</div>
             </div>
-            <div className={styles['remain-container']}>
-              <div className={styles['remain']}>잔여</div>
-              <div className={styles['quantity']}>
+            <div className={styles["remain-container"]}>
+              <div className={styles["remain"]}>잔여</div>
+              <div className={styles["quantity"]}>
                 {card.remainingQuantity}
                 <div
-                  className={styles['total']}
+                  className={styles["total"]}
                 >{`/${card.totalQuantity}`}</div>
               </div>
             </div>
-            <div className={styles['bar']} />
-            <div className={styles['purchase-quantity-container']}>
-              <div className={styles['purchase-quantity']}>구매수량</div>
-              <QuantityButton style={'width-176px'} setNum={setNum} num={num} />
+            <div className={styles["bar"]} />
+            <div className={styles["purchase-quantity-container"]}>
+              <div className={styles["purchase-quantity"]}>구매수량</div>
+              <QuantityButton style={"width-176px"} setNum={setNum} num={num} />
             </div>
-            <div className={styles['total-price-container']}>
-              <div className={styles['total-price']}>총 가격</div>
-              <div className={styles['total-point-card-container']}>
-                <div className={styles['total-point']}>{num * card.price}P</div>
-                <div className={styles['total-card']}>{`(${num}장)`}</div>
+            <div className={styles["total-price-container"]}>
+              <div className={styles["total-price"]}>총 가격</div>
+              <div className={styles["total-point-card-container"]}>
+                <div className={styles["total-point"]}>{num * card.price}P</div>
+                <div className={styles["total-card"]}>{`(${num}장)`}</div>
               </div>
             </div>
             <Button
-              text={'포토카드 구매하기'}
-              style={'thick-main-440px'}
+              text={"포토카드 구매하기"}
+              style={"thick-main-440px"}
               onClick={purchaseModalClick}
             />
           </div>
         </div>
 
-        <div className={styles['title']}>
+        <div className={styles["title"]}>
           교환 희망 정보
           <Button
-            text={'포토카드 교환하기'}
-            style={'thin-main-440px-60px'}
+            text={"포토카드 교환하기"}
+            style={"thin-main-440px-60px"}
             onClick={exchangeModalClick}
           />
         </div>
-        <div className={styles['exchange-container']}>
-          <div className={styles['exchange-content']}>
+        <div className={styles["exchange-container"]}>
+          <div className={styles["exchange-content"]}>
             {exchangeInfo.description}
           </div>
           <GradeCategory
-            style={'medium'}
+            style={"medium"}
             grade={exchangeInfo.grade}
             genre={exchangeInfo.genre}
           />
         </div>
         {exchangeList.length > 0 && (
-          <div className={styles['my-suggest-container']}>
-            <div className={styles['title']}>내가 제시한 교환 목록</div>
-            <div className={styles['my-suggest-card-container']}>
+          <div className={styles["my-suggest-container"]}>
+            <div className={styles["title"]}>내가 제시한 교환 목록</div>
+            <div className={styles["my-suggest-card-container"]}>
               {exchangeList.map((card) => (
-                <ButtonCard style={'cancel'} card={card} />
+                <ButtonCard style={"cancel"} card={card} key={card.id} />
               ))}
             </div>
           </div>
@@ -141,18 +144,18 @@ export default function Index({ card, exchangeList, exchangeInfo }) {
       {purchaseModal && (
         <ModalContainer onClick={purchaseModalClick}>
           <DefaultContent
-            style={'default'}
-            title={'포토카드 구매'}
-            content={'구매하시겠습니까?'}
-            buttonContent={'구매하기'}
-            buttonStyle={'thin-main-170px'}
+            style={"default"}
+            title={"포토카드 구매"}
+            content={"구매하시겠습니까?"}
+            buttonContent={"구매하기"}
+            buttonStyle={"thin-main-170px"}
           />
         </ModalContainer>
       )}
       {exchangeModal && (
         <ModalContainer onClick={exchangeModalClick}>
           <CardList
-            title={'포토카드 교환하기'}
+            title={"포토카드 교환하기"}
             onClick={exchangeDetailModalClick}
           />
         </ModalContainer>