From 2c150febaa0a0c56e0197a0c9082b44fde6748bb Mon Sep 17 00:00:00 2001 From: "DESKTOP-EHH0K4D\\SnowRang" Date: Tue, 15 Oct 2024 14:22:31 +0900 Subject: [PATCH 1/4] test : create test page --- pages/test_jw.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 pages/test_jw.js diff --git a/pages/test_jw.js b/pages/test_jw.js new file mode 100644 index 0000000..e69de29 From ea9866c6bd6a68178210822ddb632d29d12f78eb Mon Sep 17 00:00:00 2001 From: "DESKTOP-EHH0K4D\\SnowRang" Date: Thu, 24 Oct 2024 16:03:46 +0900 Subject: [PATCH 2/4] test : set cookie in getServerSideProps --- lib/api/instance.js | 2 +- next.config.mjs | 12 ++- pages/buyer/photocard/[id].jsx | 143 +++++++++++++++++++-------------- 3 files changed, 94 insertions(+), 63 deletions(-) diff --git a/lib/api/instance.js b/lib/api/instance.js index 07ead99..b926a21 100644 --- a/lib/api/instance.js +++ b/lib/api/instance.js @@ -1,7 +1,7 @@ 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, headers: { "Content-Type": "application/json", }, 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..0c81e33 100644 --- a/pages/buyer/photocard/[id].jsx +++ b/pages/buyer/photocard/[id].jsx @@ -1,20 +1,43 @@ -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 { getShopCard } from "@/lib/api/shop"; +import ButtonCard from "@/components/cards/ButtonCard"; +import { useUsersMyCardsQuery } from "@/lib/reactQuery/useUsers"; + +import axios from "axios"; export async function getServerSideProps(context) { const { id } = context.params; - const shopCard = await getShopCard(id); + // const shopCard = await getShopCard(id); + + // return { + // props: { + // card: shopCard.shopInfo, + // exchangeInfo: shopCard.exchangeInfo, + // exchangeList: shopCard.exchangeList, + // }, + // }; + console.log("getServerSideProps-context.req.headers : ", context.req.headers); + const cookies = context.req.headers.cookie || ""; + + const response = await axios.get(`/shop/${id}`, { + baseURL: "http://localhost:3000/api", + headers: { + "Content-Type": "application/json", + Cookie: cookies, + }, + withCredentials: true, + }); + + const shopCard = response.data; return { props: { @@ -31,7 +54,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 +80,82 @@ export default function Index({ card, exchangeList, exchangeInfo }) { return ( <> -
-
마켓플레이스
-
{card.name}
-
-
+
+
마켓플레이스
+
{card.name}
+
+
photocard-image
-
-
+
+
{card.creatorNickname}
-
-
{card.description}
-
-
-
가격
-
{card.price}P
+
+
{card.description}
+
+
+
가격
+
{card.price}P
-
-
잔여
-
+
+
잔여
+
{card.remainingQuantity}
{`/${card.totalQuantity}`}
-
-
-
구매수량
- +
+
+
구매수량
+
-
-
총 가격
-
-
{num * card.price}P
-
{`(${num}장)`}
+
+
총 가격
+
+
{num * card.price}P
+
{`(${num}장)`}
-
+
교환 희망 정보
-
-
+
+
{exchangeInfo.description}
{exchangeList.length > 0 && ( -
-
내가 제시한 교환 목록
-
+
+
내가 제시한 교환 목록
+
{exchangeList.map((card) => ( - + ))}
@@ -141,18 +164,18 @@ export default function Index({ card, exchangeList, exchangeInfo }) { {purchaseModal && ( )} {exchangeModal && ( From 7b9b20402f6ca987d4b74ef18aa2f8fd987a83c5 Mon Sep 17 00:00:00 2001 From: "DESKTOP-EHH0K4D\\SnowRang" Date: Thu, 24 Oct 2024 17:17:24 +0900 Subject: [PATCH 3/4] feat : add rewrite logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit rewrite를 이용하여, url을 재작성하여 서버에서 같은 도메인으로 인식하게 수정 BE는 배포용 설정 유지 해당 커밋은 getServerSideProps에서 실행 && 쿠키 필요한 API 수정 샘플 코드 참고 : 꼭 이 코드 방식을 따라 만들 필요없이 참고해서 SSR에서 사용되는 API 코드를 수정하시면 됩니다 --- lib/api/instance.js | 12 +++++++++++- lib/api/shop.js | 13 ++++++++++++- pages/buyer/photocard/[id].jsx | 28 ++++------------------------ 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/lib/api/instance.js b/lib/api/instance.js index b926a21..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: "http://localhost:3000/api", //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/pages/buyer/photocard/[id].jsx b/pages/buyer/photocard/[id].jsx index 0c81e33..9dcdabf 100644 --- a/pages/buyer/photocard/[id].jsx +++ b/pages/buyer/photocard/[id].jsx @@ -8,36 +8,16 @@ 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 { getSSRShopCard } from "@/lib/api/shop"; import ButtonCard from "@/components/cards/ButtonCard"; import { useUsersMyCardsQuery } from "@/lib/reactQuery/useUsers"; -import axios from "axios"; - export async function getServerSideProps(context) { const { id } = context.params; - // const shopCard = await getShopCard(id); - // return { - // props: { - // card: shopCard.shopInfo, - // exchangeInfo: shopCard.exchangeInfo, - // exchangeList: shopCard.exchangeList, - // }, - // }; console.log("getServerSideProps-context.req.headers : ", context.req.headers); const cookies = context.req.headers.cookie || ""; - - const response = await axios.get(`/shop/${id}`, { - baseURL: "http://localhost:3000/api", - headers: { - "Content-Type": "application/json", - Cookie: cookies, - }, - withCredentials: true, - }); - - const shopCard = response.data; + const shopCard = await getSSRShopCard({ shopId: id, cookies }); return { props: { @@ -54,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); @@ -155,7 +135,7 @@ export default function Index({ card, exchangeList, exchangeInfo }) {
내가 제시한 교환 목록
{exchangeList.map((card) => ( - + ))}
From f99db2e0f44e9ecc779a557873beef0a3470f14f Mon Sep 17 00:00:00 2001 From: "DESKTOP-EHH0K4D\\SnowRang" Date: Thu, 24 Oct 2024 18:01:11 +0900 Subject: [PATCH 4/4] feat : delete test page file --- pages/test_jw.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 pages/test_jw.js diff --git a/pages/test_jw.js b/pages/test_jw.js deleted file mode 100644 index e69de29..0000000