asdfasdf

client/package.json

@@ -52,5 +52,8 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
+  "packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2",
+  "devDependencies": {
+    "@types/react-query": "^1.2.9"
+  }
 }

client/public/index.html

@@ -10,7 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="\manifest" href="%PUBLIC_URL%/manifest.json" />
     <meta
       name="viewport"
       content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"

client/src/components/Product/index.tsx

@@ -7,18 +7,23 @@ interface OwnProps {
   image: string;
   title: string;
   grade: string;
-  price: string;
+  price: number;
 }
 
 const Product = ({ image, title, grade, price }: OwnProps) => {
+  const formattedPrice = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+  }).format(price);
+
   return (
     <_.Product_Layout>
       <_.Product_Image src={image} alt="상품" />
       <_.Product_Content>
         <_.Product_Title>{title}</_.Product_Title>
-        <_.Product_Grade>{grade}</_.Product_Grade>
+        <_.Product_Grade>{grade}등급</_.Product_Grade>
       </_.Product_Content>
-      <_.Product_Price>{price}</_.Product_Price>
+      <_.Product_Price>{formattedPrice}</_.Product_Price>
     </_.Product_Layout>
   );
 };

client/src/lib/apis/Auth.ts

@@ -0,0 +1,6 @@
+import { AuthInstance } from './Axios';
+
+export const RefreshAccessToken = async (params: any) => {
+  const { data } = await AuthInstance.post(`/jwt/`, params);
+  return data;
+};

client/src/lib/apis/Axios.ts

@@ -0,0 +1,71 @@
+import axios, { AxiosResponse } from 'axios';
+import { useMutation, UseMutationResult } from 'react-query';
+import { RefreshAccessToken } from './Auth';
+
+const AUTH_URL = process.env.REACT_APP_SERVER_ORIGIN;
+
+export const AuthInstance = axios.create({
+  baseURL: AUTH_URL,
+  timeout: 10000
+});
+
+AuthInstance.interceptors.request.use(
+  (config) => {
+    const accessToken = localStorage.getItem('accessToken');
+    const refreshToken = localStorage.getItem('refreshToken');
+    if (accessToken) {
+      if (config.headers) {
+        config.headers.accessToken = accessToken;
+      }
+    }
+    if (refreshToken) {
+      if (config.headers) {
+        config.headers.refreshToken = refreshToken;
+      }
+    }
+    return config;
+  },
+  (error: any) => Promise.reject(error)
+);
+
+AuthInstance.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: any) => {
+    if (axios.isAxiosError(error) && error.response) {
+      const { status } = error.response.data;
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (status === 403) {
+        if (refreshToken) {
+          const { mutate: loginMutate }: UseMutationResult<any, Error, void> =
+            useMutation(RefreshAccessToken, {
+              onSuccess: (res: AxiosResponse) => {
+                if (error.config) {
+                  if (error.config.headers) {
+                    error.config.headers.accessToken = res.data.accessToken;
+                  }
+                  return axios.request(error.config);
+                }
+              },
+              onError: () => {
+                alert('로그인이 필요한 서비스입니다.');
+              }
+            });
+
+          loginMutate();
+        } else {
+          throw error;
+        }
+      } else {
+        throw error;
+      }
+    } else {
+      throw error;
+    }
+  }
+);
+
+export const DefaultInstance = axios.create({
+  baseURL: AUTH_URL,
+  timeout: 10000
+});