FE-54🔀 epic브랜치 최신화

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': ['off'],
+    "react/require-default-props": 'off',
+    "react/self-closing-comp": 'off',
   },
   settings: {
     react: {

src/apis/add.ts

@@ -0,0 +1,9 @@
+import { AddEpigramRequestType, AddEpigramResponseType } from '@/schema/addEpigram';
+import httpClient from '.';
+
+const postEpigram = async (request: AddEpigramRequestType): Promise<AddEpigramResponseType> => {
+  const response = await httpClient.post<AddEpigramResponseType>('/epigrams', request);
+  return response.data;
+};
+
+export default postEpigram;

src/apis/auth.ts

@@ -0,0 +1,9 @@
+import type { PostSigninRequestType, PostSigninResponseType } from '@/schema/auth';
+import httpClient from '.';
+
+const postSignin = async (request: PostSigninRequestType): Promise<PostSigninResponseType> => {
+  const response = await httpClient.post('/auth/signIn', request);
+  return response.data;
+};
+
+export default postSignin;

src/apis/index.ts

@@ -1,34 +1,52 @@
 import axios from 'axios';
 import qs from 'qs';
 
-// NOTE: 토큰 가져오는 함수
-const getToken = () =>
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIyMDUwNTY3LCJleHAiOjE3MjIwNTIzNjcsImlzcyI6InNwLWVwaWdyYW0ifQ.uD0OZu7OFxBl3XqHGqNaqCLCDcE9BZant875W9tVr0o';
-
 // NOTE: axios 선언
 const httpClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   paramsSerializer: (parameters) => qs.stringify(parameters, { arrayFormat: 'repeat', encode: false }),
 });
 
-// NOTE: 요청 인터셉터 추가
-httpClient.interceptors.request.use(
-  (config) => {
-    const newConfig = { ...config };
-    const token = getToken();
-    if (token) {
-      newConfig.headers.Authorization = `Bearer ${token}`;
-    }
+// NOTE: eslint-disable no-param-reassign 미해결로 인한 설정
+httpClient.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+  /* eslint-disable no-param-reassign */
+  if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  /* eslint-enable no-param-reassign */
+  return config;
+});
 
-    if (newConfig.data instanceof FormData) {
-      newConfig.headers['Content-Type'] = 'multipart/form-data';
-    } else {
-      newConfig.headers['Content-Type'] = 'application/json';
-    }
+httpClient.interceptors.response.use(
+  (response) => response,
 
-    return newConfig;
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (!refreshToken) {
+        window.location.href = '/auth/SignIn';
+        return Promise.reject(error);
+      }
+
+      return httpClient
+        .post('/auth/refresh-token', null, {
+          headers: { Authorization: `Bearer ${refreshToken}` },
+        })
+        .then((response) => {
+          const { accessToken, refreshToken: newRefreshToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', newRefreshToken);
+
+          const originalRequest = error.config;
+          return httpClient(originalRequest);
+        })
+        .catch(() => {
+          window.location.href = '/auth/SignIn';
+          return Promise.reject(error);
+        });
+    }
+    return Promise.reject(error);
   },
-  (error) => Promise.reject(error),
 );
 
 export default httpClient;

src/components/Card/CommentCard.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import Image from 'next/image';
-import { CommentCardProps } from '@/types/CommentCardTypes';
 import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 
+export interface CommentCardProps {
+  status: 'edit' | 'complete';
+}
+
 function CommentCard({ status }: CommentCardProps) {
   return (
     <div
@@ -17,8 +20,14 @@ function CommentCard({ status }: CommentCardProps) {
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
           <div className='justify-between items-center w-full inline-flex'>
             <div className='justify-start items-start gap-2 flex'>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>지킬과 하이드</div>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>1시간 전</div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
+                {/* 테스트 텍스트입니다. */}
+                지킬과 하이드
+              </div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
+                {/* 테스트 텍스트입니다. */}
+                1시간 전
+              </div>
             </div>
             {status === 'edit' && (
               <div className='justify-start items-start gap-4 flex'>
@@ -30,6 +39,7 @@ function CommentCard({ status }: CommentCardProps) {
           <div
             className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
           >
+            {/* 테스트 텍스트입니다. */}
             오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
           </div>
         </div>