Skip to content

Commit

Permalink
feat: api 경로를 변수로 치환
Browse files Browse the repository at this point in the history
  • Loading branch information
ojm51 committed Aug 26, 2024
1 parent 2676d55 commit 319f21c
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 13 deletions.
4 changes: 2 additions & 2 deletions components/AddComment.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Dispatch, SetStateAction, useState } from "react";
import axios from "@/lib/axios";
import { IComment } from "@/types/comment";
import { API_PATH } from "@/lib/path";

import TextInput from "./Inputs/TextInput";
import AddButton from "./Buttons/AddButton";
Expand Down Expand Up @@ -37,7 +38,7 @@ function AddComment({ id, setCommentList }: AddCommentProps) {
let newComment: IComment;
try {
const response = await axios.post(
`/articles/${id}/comments`,
API_PATH.articleComments(id),
inputValue,
{
headers: {
Expand All @@ -47,7 +48,6 @@ function AddComment({ id, setCommentList }: AddCommentProps) {
);

newComment = response.data ?? [];
console.log("post succeed: ", newComment);
setCommentList((prevCommentList) => [newComment, ...prevCommentList]);
} catch (error) {
console.error("댓글 등록 중 오류가 발생했습니다: ", error);
Expand Down
23 changes: 23 additions & 0 deletions lib/path.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export const API_PATH = {
image() {
return "/images/upload";
},
articleComments(id: number) {
return `/articles/${id}/comments`;
},
articleCommentsWithLimit(id: string | number, limit?: number) {
return `/articles/${id}/comments?limit=${limit}`;
},
signUp() {
return "/auth/signIn";
},
signIn() {
return "/auth/signUp";
},
articles(option?: string, pageSize?: number) {
return `/articles/?orderBy=${option}&pageSize=${pageSize}`;
},
articleById(id: string) {
return `/articles/${id}`;
},
};
5 changes: 3 additions & 2 deletions pages/addboard/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState, useMemo } from "react";
import { useRouter } from "next/router";
import axios from "@/lib/axios";
import { API_PATH } from "@/lib/path";

import AddButton from "@/components/Buttons/AddButton";
import TextInput from "@/components/Inputs/TextInput";
Expand Down Expand Up @@ -51,7 +52,7 @@ function AddBoard() {
const formData = new FormData();
formData.append("image", formValues.image);
try {
const imageResponse = await axios.post("/images/upload", formData, {
const imageResponse = await axios.post(API_PATH.image(), formData, {
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "multipart/form-data",
Expand All @@ -63,7 +64,7 @@ function AddBoard() {
...formValues,
image: imageURL,
};
const response = await axios.post(`/articles`, data, {
const response = await axios.post(API_PATH.articles(), data, {
headers: {
Authorization: `Bearer ${accessToken}`,
},
Expand Down
14 changes: 11 additions & 3 deletions pages/board/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next";
import { Article } from "@/types/article";
import { IComment } from "@/types/comment";
import axios from "@/lib/axios";
import { API_PATH } from "@/lib/path";

import DetailArticle from "@/components/DetailArticle";
import AddComment from "@/components/AddComment";
Expand All @@ -11,18 +12,25 @@ import ReturnButton from "@/components/Buttons/ReturnButton";

export async function getServerSideProps(context: GetServerSidePropsContext) {
const { id } = context.params || {};
const articleResponse = await axios.get(`/articles/${id}`);
const articleId = Array.isArray(id) ? id[0] : id;

if (!articleId) {
return {
notFound: true,
};
}
const articleResponse = await axios.get(API_PATH.articleById(articleId));
const article = articleResponse.data ?? [];

const LIMIT = 10;
const commentResponse = await axios.get(
`/articles/${id}/comments?limit=${LIMIT}`,
API_PATH.articleCommentsWithLimit(articleId, LIMIT),
);
const commentList = commentResponse.data.list ?? [];

return {
props: {
id,
articleId,
article,
commentList,
},
Expand Down
7 changes: 3 additions & 4 deletions pages/boards/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { Article } from "@/types/article";
import axios from "@/lib/axios";
import { API_PATH } from "@/lib/path";

import styles from "@/styles/boards.module.css";

Expand Down Expand Up @@ -39,9 +40,7 @@ function Board() {
}, []);

async function getBestArticles(pageSize: number) {
const response = await axios.get(
`/articles/?orderBy=like&pageSize=${pageSize}`,
);
const response = await axios.get(API_PATH.articles("like", pageSize));
setBestArticles(response.data.list ?? []);
}

Expand All @@ -50,7 +49,7 @@ function Board() {
}, [pageSize]);

async function getArticles(option: string) {
const response = await axios.get(`/articles/?orderBy=${option}`);
const response = await axios.get(API_PATH.articles(option, 10));
setArticles(response.data.list ?? []);
}

Expand Down
3 changes: 2 additions & 1 deletion pages/login/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Head from "next/head";
import { useRouter } from "next/router";
import axios from "@/lib/axios";
import { FormValues } from "@/types/formValues";
import { API_PATH } from "@/lib/path";

import Layout from "@/components/Layout";
import BigLogo from "@/components/BigLogo";
Expand Down Expand Up @@ -57,7 +58,7 @@ function Login() {
// TODO: refresh
const onSubmit: SubmitHandler<FormValues> = async (data) => {
try {
const response = await axios.post("/auth/signIn", data, {
const response = await axios.post(API_PATH.signIn(), data, {
headers: {
"Content-Type": "application/json",
},
Expand Down
3 changes: 2 additions & 1 deletion pages/signup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Head from "next/head";
import { useRouter } from "next/router";
import axios from "@/lib/axios";
import { FormValues } from "@/types/formValues";
import { API_PATH } from "@/lib/path";

import Layout from "@/components/Layout";
import BigLogo from "@/components/BigLogo";
Expand Down Expand Up @@ -83,7 +84,7 @@ function SignUp() {

const onSubmit: SubmitHandler<FormValues> = async (data) => {
try {
const response = await axios.post(`/auth/signUp`, data, {
const response = await axios.post(API_PATH.signUp(), data, {
headers: {
"Content-Type": "application/json",
},
Expand Down

0 comments on commit 319f21c

Please sign in to comment.