Merge pull request #626 from JayChae/Next.js-채종민-sprint10

[채종민] sprint10

.env

@@ -1,3 +1,3 @@
-REACT_APP_API_KEY = https://panda-market-api.vercel.app/
+REACT_APP_API_URL = https://panda-market-api.vercel.app/
 
 NEXT_PUBLIC_BASE_URL=https://panda-market-api.vercel.app/

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+.env

apis/api.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 const panda_market_backend_api = process.env.NEXT_PUBLIC_BASE_URL;
 
-export const baseAxios = axios.create({
+export const axiosInstance = axios.create({
   baseURL: panda_market_backend_api,
   timeout: 20000,
 });

apis/getArticle.ts

@@ -0,0 +1,40 @@
+import { axiosInstance } from "./api";
+
+interface GetArticleParams {
+  articleId: number;
+}
+
+interface ArticleType {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export type GetArticleType = (prop: GetArticleParams) => Promise<ArticleType>;
+
+const getArticle: GetArticleType = async ({ articleId }) => {
+  try {
+    const { data } = await axiosInstance.get<ArticleType>(
+      `articles/${articleId}`
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`게시글을 가져오는 데 실패했습니다: ${error.message}`);
+    }
+    throw new Error(
+      "알 수 없는 오류로 인해 게시글을 가져오는 데 실패했습니다."
+    );
+  }
+};
+
+export default getArticle;

apis/getArticleComments.ts

@@ -0,0 +1,51 @@
+import { axiosInstance } from "./api";
+
+interface GetArticleCommentsParams {
+  articleId: number;
+  limit: number;
+  cursor?: number;
+}
+
+interface GetArticleCommentsReturn {
+  list: {
+    id: number;
+    content: string;
+    createdAt: string;
+    updatedAt: string;
+    writer: {
+      id: number;
+      nickname: string;
+      image: string | null;
+    };
+  }[];
+  nextCursor: number;
+}
+
+
+export type getArticleCommentsType = (
+  prop: GetArticleCommentsParams
+) => Promise<GetArticleCommentsReturn>;
+
+const getArticleComments: getArticleCommentsType = async ({
+  articleId,
+  limit,
+  cursor,
+}) => {
+  try {
+    const { data } = await axiosInstance.get<GetArticleCommentsReturn>(
+      `articles/${articleId}/comments`,
+      {
+        params: { limit, cursor },
+      }
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`댓글을 가져오는 데 실패했습니다: ${error.message}`);
+    }
+    throw new Error("알 수 없는 오류가 발생했어요 ㅠ.");
+  }
+};
+
+export default getArticleComments;

apis/getArticles.ts

@@ -1,6 +1,6 @@
-import { baseAxios } from "./api";
+import { axiosInstance } from "./api";
 
-interface propTypes {
+interface GetArticlesParams {
   page: number;
   pageSize: number;
   orderBy: string;
@@ -26,20 +26,23 @@ interface Articles {
   totalCount: number;
 }
 
-export type GetArticleType = (prop: propTypes) => Promise<Articles | undefined>;
+export type GetArticlesType = (
+  prop: GetArticlesParams
+) => Promise<Articles | undefined>;
 
-const getArticle: GetArticleType = async ({
+const getArticles: GetArticlesType = async ({
   page,
   pageSize,
   orderBy,
   keyword,
 }) => {
   try {
-    const response = await baseAxios.get<Articles>(`articles`, {
+    const { data } = await axiosInstance.get<Articles>(`articles`, {
       params: { page, pageSize, orderBy, keyword },
     });
-    return response.data;
+    return data;
   } catch (error) {
+    console.error("APP ERROR: ", error);
     if (error instanceof Error) {
       throw new Error(`게시글을 가져오는 데 실패했습니다: ${error.message}`);
     }
@@ -49,4 +52,4 @@ const getArticle: GetArticleType = async ({
   }
 };
 
-export { getArticle };
+export { getArticles };

apis/postArticle.ts

@@ -0,0 +1,70 @@
+import { axiosInstance } from "./api";
+import postImage from "./postImage";
+
+interface PostArticleParams {
+  image?: File | null;
+  content: string;
+  title: string;
+}
+
+interface Response {
+  createdAt: string;
+  updatedAt: string;
+  likeCount: number;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export type PostArticle = (prop: PostArticleParams) => Promise<Response>;
+
+const postArticle: PostArticle = async ({ image, content, title }) => {
+  try {
+    const accessToken = localStorage.getItem("accessToken");
+    if (image) {
+      const imageUrl = await postImage({ image });
+      console.log(imageUrl);
+      const { data } = await axiosInstance.post<Response>(
+        `articles`,
+        {
+          image: imageUrl,
+          content,
+          title,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return data;
+    } else {
+      const { data } = await axiosInstance.post<Response>(
+        `articles`,
+        {
+          content,
+          title,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return data;
+    }
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`게시글을 등록할 수 없습니다`, error);
+    }
+    throw new Error("알 수 없는 오류로 게시글을 등록할 수 없습니다.");
+  }
+};
+
+export default postArticle;

apis/postArticleComment.ts

@@ -0,0 +1,50 @@
+import { axiosInstance } from "./api";
+
+interface PostArticleCommentParams {
+  articleId: number;
+  content: string;
+}
+
+interface Response {
+  writer: {
+    image: string;
+    nickname: string;
+    id: number;
+  };
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}
+
+export type PostArticleComment = (
+  prop: PostArticleCommentParams
+) => Promise<Response>;
+//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
+
+const postArticleComment: PostArticleComment = async ({
+  articleId,
+  content,
+}) => {
+  try {
+    const accessToken = localStorage.getItem("accessToken");
+    const { data } = await axiosInstance.post<Response>(
+      `articles/${articleId}/comments`,
+      { content },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`댓글을 등록할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 댓글을 등록할 수 없습니다.");
+  }
+};
+
+export default postArticleComment;

apis/postArticleLike.ts

@@ -0,0 +1,48 @@
+import { axiosInstance } from "./api";
+
+interface PostArticleLikeParams {
+  articleId: number;
+}
+
+interface Response {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+  isLiked: boolean;
+}
+
+export type PostArticleLike = (
+  prop: PostArticleLikeParams
+) => Promise<Response>;
+
+const postArticleLike: PostArticleLike = async ({ articleId }) => {
+  try {
+    const accessToken = localStorage.getItem("accessToken");
+    const { data } = await axiosInstance.post<Response>(
+      `articles/${articleId}/like`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`좋아요를 할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 인해 좋아요를 할 수 없습니다.");
+  }
+};
+
+export default postArticleLike;

apis/postImage.ts

@@ -0,0 +1,33 @@
+import { axiosInstance } from "./api";
+
+interface PostImageParams {
+  image: File;
+}
+export type PostImage = (prop: PostImageParams) => Promise<string>;
+
+const postImage: PostImage = async ({ image }) => {
+  const formData = new FormData();
+  formData.append("image", image);
+  try {
+    const accessToken = localStorage.getItem("accessToken");
+    const { data } = await axiosInstance.post<Response>(
+      `images/upload`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "multipart/form-data",
+        },
+      }
+    );
+    return data.url;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`이미지 업로드 실패`);
+    }
+    throw new Error("알 수 없는 오류로 이미지 업로드 실패");
+  }
+};
+
+export default postImage;