Merge pull request #125 from Moaguide-develop/feat/productpage

Feat/productpage

Author: eun-hak

src/app/product/detail/music/[id]/page.tsx

@@ -129,10 +129,27 @@ const MusicDetailpage = (props: any) => {
                 {data?.name}
               </div>
               <div className="text-sm font-bold mb-[5px] "> {data?.singer}</div>
-              <div className=" mb-[20px]  font-bold">
+              <div className="mb-[20px] font-bold">
                 과거 1년 저작권료(1주)
-                <span className="text-red-500 ml-1">
-                  {data?.yearDvide.toLocaleString()} ({data?.yearDvideRate}%)
+                <span
+                  className={`ml-1 ${
+                    data?.yearDvideRate !== undefined
+                      ? data.yearDvideRate > 0
+                        ? 'text-red-500'
+                        : data.yearDvideRate < 0
+                          ? 'text-blue-500'
+                          : 'text-gray-500'
+                      : 'text-gray-500'
+                  }`}>
+                  {data?.yearDvide.toLocaleString()} (
+                  {data?.yearDvideRate !== undefined
+                    ? data.yearDvideRate > 0
+                      ? `+${data.yearDvideRate}%`
+                      : data.yearDvideRate < 0
+                        ? `${data.yearDvideRate}%`
+                        : `0%`
+                    : '0%'}
+                  )
                 </span>
               </div>
             </div>
@@ -143,7 +160,26 @@ const MusicDetailpage = (props: any) => {
               <div className="text-gray-400">현재가</div>
               <div className="flex flex-row ">
                 <div>{data?.price.toLocaleString()}원</div>
-                <div className="text-red-500 "> ({data?.priceRate}%)</div>
+                <div
+                  className={`${
+                    data?.priceRate !== undefined
+                      ? data.priceRate > 0
+                        ? 'text-red-500'
+                        : data.priceRate < 0
+                          ? 'text-blue-500'
+                          : 'text-gray-500'
+                      : 'text-gray-500'
+                  }`}>
+                  (
+                  {data?.priceRate !== undefined
+                    ? data.priceRate > 0
+                      ? `+${data.priceRate}%`
+                      : data.priceRate < 0
+                        ? `${data.priceRate}%`
+                        : `0%`
+                    : '0%'}
+                  )
+                </div>
               </div>
             </div>
 
@@ -159,7 +195,24 @@ const MusicDetailpage = (props: any) => {
 
             <div className="flex mt-[10px]  w-full desk:max-w-[360px] md:w-[300px] justify-between ">
               <div className="text-gray-400">배당 수익률</div>
-              <div className="text-red-500">{data?.lastDivide_rate}%</div>
+              <div
+                className={`${
+                  data?.lastDivide_rate !== undefined
+                    ? data.lastDivide_rate > 0
+                      ? 'text-red-500'
+                      : data.lastDivide_rate < 0
+                        ? 'text-blue-500'
+                        : 'text-gray-500'
+                    : 'text-gray-500'
+                }`}>
+                {data?.lastDivide_rate !== undefined
+                  ? data.lastDivide_rate > 0
+                    ? `+${data.lastDivide_rate}%`
+                    : data.lastDivide_rate < 0
+                      ? `${data.lastDivide_rate}%`
+                      : `0%`
+                  : '0%'}
+              </div>
             </div>
 
             <div className="flex mt-[10px]  w-full desk:max-w-[360px] md:w-[300px] justify-between ">

src/factory/ProductDetail/MusicProductDetail.ts

@@ -6,9 +6,7 @@ import axios from 'axios';
 
 const fetchMusicProductDetail = async (context: QueryFunctionContext) => {
   const product_id = context.queryKey[1] as string;
-  const { data } = await axiosInstance.get(
-    `https://api.moaguide.com/detail/music/${product_id}`
-  );
+  const { data } = await axiosInstance.get(`/detail/music/${product_id}`);
   return data;
 };
 

src/service/axiosInstance.ts

@@ -2,28 +2,30 @@ import axios from 'axios';
 import { getToken, setToken, removeToken } from '@/utils/localStorage';
 import { refreshAccessToken } from './auth';
 
+let backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
 
-const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
+process.env.NODE_ENV === 'development'
+  ? (backendUrl = process.env.NEXT_PUBLIC_DATA)
+  : (backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL);
 
 // 토큰을 사용하는 Axios 인스턴스
 export const axiosInstance = axios.create({
   baseURL: backendUrl,
-  withCredentials: true,
+  withCredentials: true
 });
 
 // 토큰을 사용하지 않는 Axios 인스턴스
 export const basicAxiosInstance = axios.create({
   baseURL: backendUrl,
-  withCredentials: true,
+  withCredentials: true
 });
 
 // 리프레시 토큰 요청을 위한 Axios 인스턴스
 export const refreshAxiosInstance = axios.create({
   baseURL: backendUrl,
-  withCredentials: true,
+  withCredentials: true
 });
 
-
 axiosInstance.interceptors.request.use(
   (config) => {
     const token = getToken();
@@ -35,7 +37,6 @@ axiosInstance.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
-
 axiosInstance.interceptors.response.use(
   (response) => {
     return response;
@@ -57,7 +58,7 @@ axiosInstance.interceptors.response.use(
         }
       } catch (refreshError) {
         console.error('리프레시 토큰 갱신 오류:', refreshError);
-        
+
         // 리프레시 토큰 갱신 실패 시 로그아웃 처리 또는 에러 핸들링
         removeToken(); // 만료된 토큰 제거
         window.location.href = '/sign'; // 로그인 페이지로 리디렉션
@@ -67,4 +68,4 @@ axiosInstance.interceptors.response.use(
 
     return Promise.reject(error);
   }
-);
+);