Merge pull request #693 from PixeIDark/Next.js-김민재-sprint11

[김민재] Sprint11

.env

@@ -0,0 +1 @@
+BASE_URL = https://panda-market-api.vercel.app

.gitignore

@@ -13,6 +13,8 @@
 /.next/
 /out/
 
+/.env
+
 # production
 /build
 

next.config.mjs

@@ -7,6 +7,9 @@ const nextConfig = {
       "example.com",
     ],
   },
+  env: {
+    BASE_URL: process.env.BASE_URL,
+  },
 };
 
 export default nextConfig;

package.json

@@ -13,6 +13,7 @@
     "next": "14.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.51.5",
     "react-responsive": "^10.0.0"
   },
   "devDependencies": {

panda.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
           blueBanner: { value: "#CFE5FF" },
           textBasic: { value: "#374151" },
           disabledBasic: { value: "#9CA3AF" },
+          errorRed: { value: "#F74747" },
         },
         fonts: {
           ROKAF: { value: "ROKAF Sans" },

src/apis/article/postArticles.ts

@@ -1,25 +1,19 @@
 import { Token } from "@/types/api";
 import axiosInstance from "../axiosInstance";
-import { PostData } from "@/components/addBoardComponents/Form";
+import { PostData } from "@/components/addBoardComponents/ArticleForm";
 
 const postArticles = async (
   option: PostData = {
     content: "",
     title: "",
     image: null,
-  },
-  token?: string | null
+  }
 ) => {
   const { image, ...restOption } = option;
   const payload = image ? option : restOption;
 
   try {
-    const { data } = await axiosInstance.post<any>("/articles", payload, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-    return data;
+    await axiosInstance.post<any>("/articles", payload);
   } catch (error) {
     console.error(`Failed to fetch data: ${error}`);
     throw error;

src/apis/auth/PostRefreshToken.ts

@@ -1,11 +1,9 @@
-import { Token } from "@/types/api";
 import axiosInstance from "../axiosInstance";
+import { Token } from "@/types/api";
 
-const PostRefreshToken = async (
-  refreshToken: string | null
-): Promise<string> => {
+const PostRefreshToken = async (refreshToken?: string): Promise<Token> => {
   try {
-    const { data } = await axiosInstance.post<string>("/auth/refresh-token", {
+    const { data } = await axiosInstance.post<Token>("/auth/refresh-token", {
       refreshToken: refreshToken,
     });
     return data;

src/apis/axiosInstance.ts

@@ -1,7 +1,17 @@
-import axios, { AxiosRequestConfig } from "axios";
-// git push origin Next.js-김민재-sprint10  실수하지않을려고 push config설정 안했는데 브랜치이름 너무 치기어려워서 넣었습니다.
+import axios, { AxiosRequestConfig, AxiosError } from "axios";
+import {
+  getToken,
+  loadTokenFromLocalStorage,
+  saveTokenToLocalStorage,
+} from "@/utils/localStorageToken";
+import PostRefreshToken from "@/apis/auth/PostRefreshToken";
+
+interface InternalAxiosRequestConfig extends AxiosRequestConfig {
+  _retry?: boolean;
+}
+
 const axiosConfig: AxiosRequestConfig = {
-  baseURL: "https://panda-market-api.vercel.app/",
+  baseURL: `${process.env.BASE_URL}`,
   headers: {
     "Content-Type": "application/json",
     Accept: "application/json",
@@ -10,4 +20,44 @@ const axiosConfig: AxiosRequestConfig = {
 
 const axiosInstance = axios.create(axiosConfig);
 
+axiosInstance.interceptors.request.use(
+  async (config) => {
+    const accessToken = await getToken();
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config as InternalAxiosRequestConfig;
+    if (!originalRequest.headers) {
+      return Promise.reject(error);
+    }
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      const token = loadTokenFromLocalStorage();
+      if (token?.refreshToken) {
+        try {
+          const newToken = await PostRefreshToken(token.refreshToken);
+          saveTokenToLocalStorage(newToken);
+          originalRequest.headers.Authorization = `Bearer ${newToken.accessToken}`;
+          return axiosInstance(originalRequest);
+        } catch (refreshError) {
+          console.error(`Failed to refresh token: ${refreshError}`);
+          return Promise.reject(refreshError);
+        }
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export default axiosInstance;

src/apis/comment/getArticlesIdComment.ts

@@ -1,12 +1,13 @@
+import { ArticleId } from "@/types/articles";
 import axiosInstance from "../axiosInstance";
 
 interface GetArticlesIdCommentResponse {
-  list: [];
+  list: ArticleId[];
   nextCursor: null | string;
 }
 
 const getArticlesIdComment = async (
-  articleId: string | string[] | undefined
+  articleId?: string | string[]
 ): Promise<GetArticlesIdCommentResponse> => {
   try {
     const { data } = await axiosInstance.get<GetArticlesIdCommentResponse>(

src/apis/comment/postArticlesIdComment.ts

@@ -1,20 +1,8 @@
 import axiosInstance from "../axiosInstance";
 
-const postArticlesComment = async (
-  content: string,
-  id: string,
-  token?: string | null
-) => {
+const postArticlesComment = async (content: string, id: string) => {
   try {
-    await axiosInstance.post<any>(
-      `/articles/${id}/comments`,
-      { content },
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
+    await axiosInstance.post<any>(`/articles/${id}/comments`, { content });
   } catch (error) {
     console.error(`Failed to fetch data: ${error}`);
     throw error;

src/apis/postImage.ts

@@ -1,10 +1,10 @@
 import axiosInstance from "@/apis/axiosInstance";
 
 interface PostImageResponse {
-  url?: null | Blob | MediaSource;
+  image?: null | Blob | MediaSource;
 }
 
-const postImage = async (token: string | null, image?: any) => {
+const postImage = async (image?: any) => {
   try {
     const formData = new FormData();
     if (image) {
@@ -15,7 +15,6 @@ const postImage = async (token: string | null, image?: any) => {
       formData,
       {
         headers: {
-          Authorization: `Bearer ${token}`,
           "Content-Type": "multipart/form-data",
         },
       }

src/components/addBoardComponents/Form.tsx → src/components/addBoardComponents/ArticleForm.tsx

@@ -21,7 +21,12 @@ interface FormProps {
   onChangeImage: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-function Form({ postData, file, onChangeInput, onChangeImage }: FormProps) {
+function ArticleForm({
+  postData,
+  file,
+  onChangeInput,
+  onChangeImage,
+}: FormProps) {
   const [imageUrl, setImageUrl] = useState<string | StaticImageData>(imageAdd);
 
   useEffect(() => {
@@ -35,36 +40,42 @@ function Form({ postData, file, onChangeInput, onChangeImage }: FormProps) {
   return (
     <div className={cx(formStyle, css({ marginTop: "24px" }))}>
       <div className={labelInput}>
-        <label className={labelBasicStyle}>*제목</label>
-        <input
-          name="title"
-          type="text"
-          value={postData.title}
-          onChange={onChangeInput}
-          className={inputRecipe()}
-          placeholder="제목을 입력해주세요"
-        />
+        <label className={labelBasicStyle}>
+          *제목
+          <input
+            name="title"
+            type="text"
+            value={postData.title}
+            onChange={onChangeInput}
+            className={inputRecipe()}
+            placeholder="제목을 입력해주세요"
+          />
+        </label>
       </div>
       <div className={labelInput}>
-        <label className={labelBasicStyle}>*내용</label>
-        <textarea
-          name="content"
-          value={postData.content}
-          onChange={onChangeInput}
-          className={inputRecipe({ visual: "xLarge" })}
-          placeholder="내용을 입력해주세요"
-        />
+        <label className={labelBasicStyle}>
+          *내용
+          <textarea
+            name="content"
+            value={postData.content}
+            onChange={onChangeInput}
+            className={inputRecipe({ visual: "xLarge" })}
+            placeholder="내용을 입력해주세요"
+          />
+        </label>
       </div>
       <div className={labelInput}>
-        <label className={labelBasicStyle}>이미지</label>
-        <input
-          type="file"
-          name="image"
-          accept="image/*"
-          onChange={onChangeImage}
-          className={css({ display: "none" })}
-          id="image-upload"
-        />
+        <label className={labelBasicStyle}>
+          이미지
+          <input
+            type="file"
+            name="image"
+            accept="image/*"
+            onChange={onChangeImage}
+            className={css({ display: "none" })}
+            id="image-upload"
+          />
+        </label>
         <label htmlFor="image-upload" className={css({ cursor: "pointer" })}>
           <Image
             src={imageUrl}
@@ -83,4 +94,4 @@ function Form({ postData, file, onChangeInput, onChangeImage }: FormProps) {
   );
 }
 
-export default Form;
+export default ArticleForm;

src/components/addBoardComponents/FormTitle.tsx → src/components/addBoardComponents/ArticleFormTitle.tsx

@@ -8,7 +8,7 @@ interface FormTitleProps {
   handleSubmit: MouseEventHandler<HTMLButtonElement>;
 }
 
-function FormTitle({ isValid, handleSubmit }: FormTitleProps) {
+function ArticleFormTitle({ isValid, handleSubmit }: FormTitleProps) {
   return (
     <div className={hstack({ justifyContent: "space-between" })}>
       <h2 className={subTitle}>게시글 쓰기</h2>
@@ -24,4 +24,4 @@ function FormTitle({ isValid, handleSubmit }: FormTitleProps) {
   );
 }
 
-export default FormTitle;
+export default ArticleFormTitle;

src/components/boardsComponents/NormalPost.tsx

@@ -38,8 +38,8 @@ function NormalPost() {
   useEffect(() => {
     const loadArticles = async () => {
       const receive = await getArticles({
-        orderBy: `${orderBy}`,
-        keyword: `${searchValue}`,
+        orderBy: orderBy,
+        keyword: searchValue,
       });
       setArticles(receive.list);
     };

src/components/shared/Header/Header.tsx

@@ -12,9 +12,15 @@ import { useRouter } from "next/router";
 import Image from "next/image";
 import { buttonRecipe } from "@/css/recipe/buttonRecipe.styled";
 import userPassiveIcon from "@/assets/icons/user_passive_ic.svg";
+import { useEffect, useState } from "react";
 
 function Header() {
   const router = useRouter();
+  const [isToken, setIsToken] = useState<string | undefined>("");
+
+  useEffect(() => {
+    setIsToken(localStorage.getItem("accessToken")?.replace(/"/gi, ""));
+  });
 
   return (
     <div className={headerContainer}>
@@ -40,7 +46,7 @@ function Header() {
           중고마켓
         </Link>
       </div>
-      {router.pathname !== "/" ? (
+      {isToken ? (
         <Link href="/signin">
           <Image src={userPassiveIcon} alt="userPassive" />
         </Link>