From 509cef0564eb62e38c28e38c5fb796f42455f4b7 Mon Sep 17 00:00:00 2001
From: kimsayhi <kimse418@gmail.com>
Date: Wed, 14 Aug 2024 19:42:52 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix=20:=20=EC=BD=94=EB=93=9C=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/article.ts                       |  4 +--
 components/boards/Article.tsx         |  2 +-
 components/boards/ArticleList.tsx     |  8 ++---
 components/boards/BestArticle.tsx     |  2 +-
 components/boards/BestArticleList.tsx | 17 ++++------
 hooks/useArticles.tsx                 |  4 +--
 hooks/usePageSize.tsx                 | 49 ++++++++++++++-------------
 {models => types}/article.ts          |  2 +-
 8 files changed, 42 insertions(+), 46 deletions(-)
 rename {models => types}/article.ts (94%)

diff --git a/apis/article.ts b/apis/article.ts
index 04f3e46d4..cb7246cd6 100644
--- a/apis/article.ts
+++ b/apis/article.ts
@@ -1,6 +1,6 @@
 import axios from "@/lib/axios";
-import { ArticleQuery } from "@/models/article";
-import { ArticleResponse } from "@/models/article";
+import { ArticleQuery } from "@/types/article";
+import { ArticleResponse } from "@/types/article";
 
 export const getArticleList = async ({
   page = 1,
diff --git a/components/boards/Article.tsx b/components/boards/Article.tsx
index 94a38468e..35bd1311b 100644
--- a/components/boards/Article.tsx
+++ b/components/boards/Article.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { formatDate } from "@/utils/formatDate";
-import type { Article } from "@/models/article";
+import type { Article } from "@/types/article";
 
 import icHeart from "@/public/images/ic_heart.svg";
 import icProfile from "@/public/images/ic_profile.svg";
diff --git a/components/boards/ArticleList.tsx b/components/boards/ArticleList.tsx
index d7e7f368f..3dd4be137 100644
--- a/components/boards/ArticleList.tsx
+++ b/components/boards/ArticleList.tsx
@@ -21,7 +21,7 @@ export default function ArticleList() {
   const [nowOrderBy, setNowOrderBy] = useState<OrderByType>(INIT_ORDERS.recent);
   const [isOpenDropDown, setIsOpenDropDown] = useState(false);
 
-  const onClickDropDown = () => {
+  const toggleDropDown = () => {
     setIsOpenDropDown((prev) => !prev);
   };
 
@@ -32,7 +32,7 @@ export default function ArticleList() {
       orderBy: orderBy,
     }));
     setNowOrderBy(INIT_ORDERS[orderBy]);
-    setIsOpenDropDown((prev) => !prev);
+    toggleDropDown();
   };
 
   let debounceTimer: NodeJS.Timeout;
@@ -69,14 +69,14 @@ export default function ArticleList() {
         </div>
 
         <button
-          onClick={onClickDropDown}
+          onClick={toggleDropDown}
           className="flex-center h-[42px] w-[42px] rounded-xl border border-solid border-gray-200 md:hidden"
         >
           <Image src={icSortMobile} alt="정렬하기" />
         </button>
 
         <button
-          onClick={onClickDropDown}
+          onClick={toggleDropDown}
           className="hidden h-[42px] w-[130px] items-center justify-between rounded-xl border border-solid px-5 py-4 md:flex"
         >
           <span>{nowOrderBy}</span>
diff --git a/components/boards/BestArticle.tsx b/components/boards/BestArticle.tsx
index bb9e4214d..a1f7fd935 100644
--- a/components/boards/BestArticle.tsx
+++ b/components/boards/BestArticle.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 
 import { formatDate } from "@/utils/formatDate";
-import { Article } from "@/models/article";
+import { Article } from "@/types/article";
 
 import icMedal from "@/public/images/ic_medal.svg";
 import icHeart from "@/public/images/ic_heart.svg";
diff --git a/components/boards/BestArticleList.tsx b/components/boards/BestArticleList.tsx
index d1af6483a..1857a1e32 100644
--- a/components/boards/BestArticleList.tsx
+++ b/components/boards/BestArticleList.tsx
@@ -1,31 +1,26 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { getArticleList } from "@/apis/article";
 import usePageSize from "@/hooks/usePageSize";
 
-import { ArticleQuery, Article, ArticleResponse } from "@/models/article";
+import { ArticleQuery, Article, ArticleResponse } from "@/types/article";
 import BestArticle from "./BestArticle";
 import { INITIAL_PAGE_SIZE } from "@/lib/constants";
 
 export default function BestArticleList() {
   const [bestArticles, setBestArticles] = useState<Article[]>([]);
   const { sizeName } = usePageSize();
-  const loadBestArticles = async () => {
+  const loadBestArticles = useCallback(async () => {
     const nextArticles: ArticleResponse = await getArticleList({
       page: 1,
-      pageSize: INITIAL_PAGE_SIZE[sizeName],
+      pageSize: 3,
       orderBy: "like",
-      keyword: null,
     });
     setBestArticles(nextArticles.list);
-  };
-
+  }, []);
   useEffect(() => {
-    if (INITIAL_PAGE_SIZE[sizeName] <= bestArticles.length) {
-      return;
-    }
     loadBestArticles();
-  }, [sizeName]);
+  }, [loadBestArticles]);
   return (
     <div className="flex flex-col gap-4 md:gap6">
       <span className="font-bold text-lg">베스트 게시글</span>
diff --git a/hooks/useArticles.tsx b/hooks/useArticles.tsx
index 8a2e8ff0e..59e72b0a8 100644
--- a/hooks/useArticles.tsx
+++ b/hooks/useArticles.tsx
@@ -1,12 +1,12 @@
 import { getArticleList } from "@/apis/article";
-import type { Article, ArticleQuery, ArticleResponse } from "@/models/article";
+import type { Article, ArticleQuery, ArticleResponse } from "@/types/article";
 import { useEffect, useState } from "react";
 
 const DEFAULT_QUERY_PARAMS: ArticleQuery = {
   page: 1,
   pageSize: 5,
   orderBy: "recent",
-  keyword: null,
+  keyword: "",
 };
 const useArticles = () => {
   const [queryParams, setQueryParams] = useState(DEFAULT_QUERY_PARAMS);
diff --git a/hooks/usePageSize.tsx b/hooks/usePageSize.tsx
index 1cd3822a6..681717b48 100644
--- a/hooks/usePageSize.tsx
+++ b/hooks/usePageSize.tsx
@@ -5,34 +5,35 @@ type Sizes = "large" | "medium" | "small";
 function usePageSize() {
   const [sizeName, setSizeName] = useState<Sizes>("small");
 
-  const sizeNaming = () => {
-    if (window.innerWidth >= 1200) {
-      setSizeName("large");
-    } else if (window.innerWidth < 1200 && window.innerWidth >= 765) {
-      setSizeName("medium");
-    } else if (window.innerWidth < 765) {
-      setSizeName("small");
-    }
-  };
-
-  let timer = false; // 디바운싱으로 변경 예정, window.matchMedia 찾아보기
-  const onResize = () => {
-    if (!timer) {
-      timer = true;
-      sizeNaming();
-      setTimeout(() => {
-        timer = false;
-      }, 50);
-    }
-  };
-
   useEffect(() => {
-    window.addEventListener("resize", onResize);
-    sizeNaming();
+    const mediaQueryLarge = window.matchMedia("(min-width: 1200px)");
+    const mediaQueryMedium = window.matchMedia(
+      "(min-width: 768px) and (max-width: 1199px)"
+    );
+    const mediaQuerySmall = window.matchMedia("(max-width: 767px)");
+
+    const updateScreenSize = () => {
+      if (mediaQueryLarge.matches) {
+        setSizeName("large");
+      } else if (mediaQueryMedium.matches) {
+        setSizeName("medium");
+      } else if (mediaQuerySmall.matches) {
+        setSizeName("small");
+      }
+    };
+    updateScreenSize();
+
+    mediaQueryLarge.addEventListener("change", updateScreenSize);
+    mediaQueryMedium.addEventListener("change", updateScreenSize);
+    mediaQuerySmall.addEventListener("change", updateScreenSize);
+
     return () => {
-      window.removeEventListener("resize", onResize);
+      mediaQueryLarge.removeEventListener("change", updateScreenSize);
+      mediaQueryMedium.removeEventListener("change", updateScreenSize);
+      mediaQuerySmall.removeEventListener("change", updateScreenSize);
     };
   }, []);
+
   return { sizeName };
 }
 
diff --git a/models/article.ts b/types/article.ts
similarity index 94%
rename from models/article.ts
rename to types/article.ts
index d6d259b72..639cce085 100644
--- a/models/article.ts
+++ b/types/article.ts
@@ -23,5 +23,5 @@ export interface ArticleQuery {
   page: number;
   pageSize: number;
   orderBy: "like" | "recent";
-  keyword: string | null;
+  keyword?: string;
 }

From f50578658de944d6712cc5e0df95a1bab3378e5c Mon Sep 17 00:00:00 2001
From: kimsayhi <kimse418@gmail.com>
Date: Thu, 15 Aug 2024 14:09:07 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B8=80=EC=93=B0=EA=B8=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                  |   2 +-
 apis/addBoard.ts                       |  27 +++++++++++++
 apis/signIn.ts                         |  18 +++++++++
 components/boards/Article.tsx          |   8 +++-
 components/boards/ArticleList.tsx      |  16 ++++++--
 components/ui/Button.tsx               |  28 ++++++++++++++
 components/ui/FileInput.tsx            |  50 +++++++++++++++++++++++++
 components/ui/Input.tsx                |  40 ++++++++++++++++++++
 components/ui/TextArea.tsx             |  33 ++++++++++++++++
 context/TokenProvider.tsx              |  44 ++++++++++++++++++++++
 hooks/useAddBoard.tsx                  |  49 ++++++++++++++++++++++++
 pages/_app.tsx                         |  11 ++++--
 pages/addboard.tsx                     |  46 +++++++++++++++++++++++
 pages/boards/[id].tsx                  |   7 ++++
 pages/{boards.tsx => boards/index.tsx} |   2 -
 pages/index.tsx                        |  15 +++++++-
 public/images/img_addfile.png          | Bin 0 -> 1395 bytes
 types/addBoard.ts                      |   0
 types/alias.ts                         |   5 +++
 19 files changed, 389 insertions(+), 12 deletions(-)
 create mode 100644 apis/addBoard.ts
 create mode 100644 apis/signIn.ts
 create mode 100644 components/ui/Button.tsx
 create mode 100644 components/ui/FileInput.tsx
 create mode 100644 components/ui/Input.tsx
 create mode 100644 components/ui/TextArea.tsx
 create mode 100644 context/TokenProvider.tsx
 create mode 100644 hooks/useAddBoard.tsx
 create mode 100644 pages/addboard.tsx
 create mode 100644 pages/boards/[id].tsx
 rename pages/{boards.tsx => boards/index.tsx} (99%)
 create mode 100644 public/images/img_addfile.png
 create mode 100644 types/addBoard.ts
 create mode 100644 types/alias.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index dec9103e6..b687befd9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["sortmobile"]
+  "cSpell.words": ["addboard", "addfile", "sortmobile"]
 }
diff --git a/apis/addBoard.ts b/apis/addBoard.ts
new file mode 100644
index 000000000..22b80b4ba
--- /dev/null
+++ b/apis/addBoard.ts
@@ -0,0 +1,27 @@
+import axios from "@/lib/axios";
+
+interface Params<T> {
+  data: T;
+  token: string;
+}
+
+export const postNewArticle = async ({ data, token }: Params<object>) => {
+  const res = await axios.post("/articles", data, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+};
+
+export const postUploadImage = async ({ data, token }: Params<File>) => {
+  const formData = new FormData();
+  formData.append("image", data);
+  try {
+    const res = await axios.post("/images/upload", formData, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return res.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
diff --git a/apis/signIn.ts b/apis/signIn.ts
new file mode 100644
index 000000000..c91744c2f
--- /dev/null
+++ b/apis/signIn.ts
@@ -0,0 +1,18 @@
+import axios from "@/lib/axios";
+import { access } from "fs";
+
+interface AuthData {
+  email: string;
+  password: string;
+}
+
+interface ResponseData {
+  accessToken: string;
+  refreshToken: string;
+}
+
+export const postSignIn = async (authData: AuthData) => {
+  const res = await axios.post("/auth/signIn", authData);
+  const { accessToken, refreshToken }: ResponseData = res.data;
+  return { accessToken, refreshToken };
+};
diff --git a/components/boards/Article.tsx b/components/boards/Article.tsx
index 35bd1311b..40f77ce5f 100644
--- a/components/boards/Article.tsx
+++ b/components/boards/Article.tsx
@@ -5,6 +5,7 @@ import type { Article } from "@/types/article";
 import icHeart from "@/public/images/ic_heart.svg";
 import icProfile from "@/public/images/ic_profile.svg";
 import { Dispatch, SetStateAction } from "react";
+import Link from "next/link";
 interface Props {
   articles: Article[];
   setTarget: Dispatch<SetStateAction<HTMLLIElement | null>>;
@@ -20,7 +21,10 @@ export default function Article({ articles, setTarget }: Props) {
             key={`${article.id}+${index}`}
             className=" bg-gray-50 px-2 pb-6 pt-1 mt-5 border-b shadow-md rounded-xl border-gray-200"
           >
-            <div className="flex h-full flex-col justify-between">
+            <Link
+              href={`/boards/${article.id}`}
+              className="flex h-full flex-col justify-between"
+            >
               <div className="flex justify-between gap-10">
                 <div className="font-semibold text-lg">{article.content}</div>
                 <Image
@@ -53,7 +57,7 @@ export default function Article({ articles, setTarget }: Props) {
                   {article.likeCount}
                 </span>
               </div>
-            </div>
+            </Link>
           </li>
         ))}
     </ul>
diff --git a/components/boards/ArticleList.tsx b/components/boards/ArticleList.tsx
index 3dd4be137..9bc11f0da 100644
--- a/components/boards/ArticleList.tsx
+++ b/components/boards/ArticleList.tsx
@@ -8,6 +8,7 @@ import icGlasses from "@/public/images/ic_glasses.svg";
 import icSort from "@/public/images/ic_sort.svg";
 import icSortMobile from "@/public/images/ic_sortmobile.svg";
 import DropDown from "@/components/ui/DropDown";
+import Link from "next/link";
 
 const INIT_ORDERS = {
   recent: "최신순",
@@ -54,13 +55,22 @@ export default function ArticleList() {
     <div className="pt-10">
       <div className="flex justify-between ">
         <span className="font-bold text-lg">게시글</span>
-        <button className="btn order-1 h-[42px] w-[88px] font-semibold">
+        <Link
+          href="/addboard"
+          className="btn order-1 h-[42px] w-[88px] font-semibold"
+        >
           글쓰기
-        </button>
+        </Link>
       </div>
       <div className="flex relative pt-6 gap-4">
         <div className=" flex basis-72 gap-1.5 rounded-xl bg-slate-100 px-4 py-[9px]  grow">
-          <Image src={icGlasses} width={15} height={15} alt="게시글 검색" />
+          <Image
+            src={icGlasses}
+            className="w-[15px] h-[15px]"
+            width={15}
+            height={15}
+            alt="게시글 검색"
+          />
           <input
             onChange={onChangeKeyword}
             placeholder="검색할 상품을 입력해주세요"
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 000000000..eee1238b5
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,28 @@
+import { MouseEvent } from "react";
+
+type ButtonProps = {
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  className: string;
+  children: string;
+  activeBtn: boolean;
+};
+
+export default function Button({
+  onClick,
+  children,
+  activeBtn,
+  className,
+}: ButtonProps) {
+  const activeColor = activeBtn ? "bg-my-blue" : "bg-gray-400";
+
+  return (
+    <button
+      onClick={(e) => {
+        onClick(e);
+      }}
+      className={`${className} ${activeColor}`}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/components/ui/FileInput.tsx b/components/ui/FileInput.tsx
new file mode 100644
index 000000000..5bad4cb56
--- /dev/null
+++ b/components/ui/FileInput.tsx
@@ -0,0 +1,50 @@
+import type { InputChangeEvent } from "@/types/alias";
+
+import asd from "../../public/images/img_addfile.png";
+import Image from "next/image";
+import { ChangeEvent } from "react";
+
+interface FileInputProps {
+  image?: string;
+  label: string;
+  name: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => Promise<void>;
+}
+export default function FileInput({
+  name,
+  label,
+  value,
+  image,
+  onChange,
+}: FileInputProps) {
+  console.log(image);
+  return (
+    <div className="flex flex-col pb-6 relative">
+      <label className="pb-4 text-lg font-bold" htmlFor={name}>
+        {label}
+      </label>
+      <input
+        onChange={onChange}
+        className="w-[168px] h-[168px] lg:w-[282px] lg:h-[282px] "
+        type="file"
+        name={name}
+        id={name}
+        value={value}
+      />
+      <label
+        htmlFor={name}
+        className="absolute left-[-3px] bottom-[28px] bg-gray-100 bg-[url('/images/img_addfile.png')] bg-no-repeat bg-center w-[168px] h-[168px] lg:w-[282px] lg:h-[282px] rounded-xl"
+      ></label>
+      {image && (
+        <Image
+          className="w-[168px] h-[168px] absolute bottom-[28px] left-[200px] lg:w-[282px] lg:h-[282px] lg:left-[300px] rounded-xl"
+          src={image}
+          alt="사용자가 등록한 이미지"
+          width={168}
+          height={168}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
new file mode 100644
index 000000000..5cb6ee8b3
--- /dev/null
+++ b/components/ui/Input.tsx
@@ -0,0 +1,40 @@
+import type { InputChangeEvent } from "@/types/alias";
+import { KeyboardEvent } from "react";
+
+interface InputProps {
+  label: string;
+  type: string;
+  placeholder: string;
+  name: string;
+  value?: string;
+  onChange: (e: InputChangeEvent) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export default function Input({
+  name,
+  placeholder,
+  type,
+  label,
+  value,
+  onChange,
+  onKeyDown,
+}: InputProps) {
+  return (
+    <div className="flex flex-col pb-6">
+      <label className="pb-4 text-lg font-bold" htmlFor={name}>
+        {label}
+      </label>
+      <input
+        className="rounded-xl border-none bg-gray-100 px-6 py-4 outline-none"
+        type={type}
+        placeholder={placeholder}
+        name={name}
+        id={name}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+      ></input>
+    </div>
+  );
+}
diff --git a/components/ui/TextArea.tsx b/components/ui/TextArea.tsx
new file mode 100644
index 000000000..ced9c7bb2
--- /dev/null
+++ b/components/ui/TextArea.tsx
@@ -0,0 +1,33 @@
+import { InputChangeEvent } from "@/types/alias";
+
+interface TextAreaProps {
+  label: string;
+  placeholder: string;
+  name: string;
+  value?: string;
+  onChange: (e: InputChangeEvent) => void;
+}
+
+export default function TextArea({
+  name,
+  placeholder,
+  label,
+  value,
+  onChange,
+}: TextAreaProps) {
+  return (
+    <div className="flex flex-col pb-6">
+      <label className="pb-4 text-lg font-bold" htmlFor={name}>
+        {label}
+      </label>
+      <textarea
+        className="rounded-xl border-none bg-gray-100 px-6 py-4 outline-none h-[200px]"
+        onChange={onChange}
+        placeholder={placeholder}
+        name={name}
+        id={name}
+        value={value}
+      ></textarea>
+    </div>
+  );
+}
diff --git a/context/TokenProvider.tsx b/context/TokenProvider.tsx
new file mode 100644
index 000000000..3e4a38843
--- /dev/null
+++ b/context/TokenProvider.tsx
@@ -0,0 +1,44 @@
+import { postSignIn } from "@/apis/signIn";
+import {
+  createContext,
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  useMemo,
+  useState,
+} from "react";
+
+export interface Context {
+  accessToken: string;
+  refreshToken: string;
+  setAccessToken: Dispatch<SetStateAction<string>>;
+  onClickSignIn: () => void;
+}
+
+const tempAuth = {
+  email: "kimse418@codeit.com",
+  password: "12341234",
+};
+
+export const TokenContext = createContext<Context | null>(null);
+
+const TokenProvider = ({ children }: PropsWithChildren) => {
+  const [accessToken, setAccessToken] = useState("");
+  const [refreshToken, setRefreshToken] = useState("");
+  const onClickSignIn = async () => {
+    const res = await postSignIn(tempAuth);
+    const newAccessToken = res.accessToken;
+    const newRefreshToken = res.refreshToken;
+    setAccessToken(newAccessToken);
+    setRefreshToken(newRefreshToken);
+  };
+  const value = useMemo(() => {
+    return { accessToken, refreshToken, setAccessToken, onClickSignIn };
+  }, [accessToken]);
+
+  return (
+    <TokenContext.Provider value={value}>{children}</TokenContext.Provider>
+  );
+};
+
+export default TokenProvider;
diff --git a/hooks/useAddBoard.tsx b/hooks/useAddBoard.tsx
new file mode 100644
index 000000000..9400bd1c8
--- /dev/null
+++ b/hooks/useAddBoard.tsx
@@ -0,0 +1,49 @@
+import { ChangeEvent, MouseEvent, useContext, useState } from "react";
+
+import type { InputChangeEvent } from "@/types/alias";
+import { postNewArticle, postUploadImage } from "@/apis/addBoard";
+import { Context, TokenContext } from "@/context/TokenProvider";
+import { useRouter } from "next/router";
+const INIT_ADD_BOARD_INPUT = {
+  image: "",
+  content: "",
+  title: "",
+};
+
+const useAddBoard = () => {
+  const [inputValues, setInputValues] = useState(INIT_ADD_BOARD_INPUT);
+  const { accessToken } = useContext(TokenContext) as Context;
+  const router = useRouter();
+
+  const onChangeInput = (e: InputChangeEvent) => {
+    switch (e.target.name) {
+      case "title":
+        setInputValues((prev) => ({ ...prev, title: e.target.value }));
+        break;
+      case "content":
+        setInputValues((prev) => ({ ...prev, content: e.target.value }));
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onChangeFileInput = async (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) {
+      return;
+    }
+    const data = e.target.files[0];
+    const res = await postUploadImage({ data, token: accessToken });
+    setInputValues((prev) => ({ ...prev, image: res.url }));
+  };
+
+  const onSubmitForm = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    postNewArticle({ data: inputValues, token: accessToken });
+    router.push("/boards");
+  };
+
+  return { onChangeInput, inputValues, onSubmitForm, onChangeFileInput };
+};
+
+export default useAddBoard;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 021681f4d..d37788b06 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,11 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import TokenProvider from "@/context/TokenProvider";
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <TokenProvider>
+      <Component {...pageProps} />
+    </TokenProvider>
+  );
 }
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
new file mode 100644
index 000000000..fde72df91
--- /dev/null
+++ b/pages/addboard.tsx
@@ -0,0 +1,46 @@
+import Button from "@/components/ui/Button";
+import FileInput from "@/components/ui/FileInput";
+import Input from "@/components/ui/Input";
+import TextArea from "@/components/ui/TextArea";
+import useAddBoard from "@/hooks/useAddBoard";
+
+export default function AddBoard() {
+  const { inputValues, onChangeInput, onSubmitForm, onChangeFileInput } =
+    useAddBoard();
+  return (
+    <form className="m-container mt-[70px] pt-4">
+      <div className="flex justify-between">
+        <span className="font-bold text-xl">게시글 쓰기</span>
+        <Button
+          className="btn w-[74px] h-[42px]"
+          activeBtn={false}
+          onClick={onSubmitForm}
+        >
+          등록
+        </Button>
+      </div>
+      <Input
+        name="title"
+        placeholder="제목을 입력해주세요"
+        type="input"
+        label="*제목"
+        value={inputValues.title}
+        onChange={onChangeInput}
+      />
+      <TextArea
+        name="content"
+        placeholder="내용을 입력해 주세요"
+        label="*내용"
+        value={inputValues.content}
+        onChange={onChangeInput}
+      />
+      <FileInput
+        value=""
+        onChange={onChangeFileInput}
+        name="image"
+        label="이미지"
+        image={inputValues.image}
+      />
+    </form>
+  );
+}
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
new file mode 100644
index 000000000..730bf127f
--- /dev/null
+++ b/pages/boards/[id].tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function Article() {
+  return <div></div>;
+}
+
+export default Article;
diff --git a/pages/boards.tsx b/pages/boards/index.tsx
similarity index 99%
rename from pages/boards.tsx
rename to pages/boards/index.tsx
index 64bfcfebb..b36fa3c42 100644
--- a/pages/boards.tsx
+++ b/pages/boards/index.tsx
@@ -1,5 +1,3 @@
-
-
 import BestArticleList from "@/components/boards/BestArticleList";
 import ArticleList from "@/components/boards/ArticleList";
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 9818b6202..3a54baee7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,18 @@
+import { Context, TokenContext } from "@/context/TokenProvider";
+import axios from "@/lib/axios";
 import Link from "next/link";
+import { useContext } from "react";
 
 export default function Home() {
-  return <Link href={`/boards`}>게시판가기</Link>;
+  const { accessToken, refreshToken, onClickSignIn } = useContext(
+    TokenContext
+  ) as Context;
+  console.log(accessToken);
+  console.log(refreshToken);
+  return (
+    <div>
+      <button onClick={onClickSignIn}>토큰 발급받기</button>
+      <Link href={`/boards`}>게시판가기</Link>
+    </div>
+  );
 }
diff --git a/public/images/img_addfile.png b/public/images/img_addfile.png
new file mode 100644
index 0000000000000000000000000000000000000000..2425968a70064b8ec55c2ba70770526faf4548ac
GIT binary patch
literal 1395
zcmaKsdpOez7{`B{O|zOyE|rwac36buk~^EbG9#l1b4%J>3e9Coj!P^D$z9ppid@G~
zOR*^ARzl}UESGXwQ_~82j@IAjd3v7D_xpX`_rLd#@0)?e*u$U-Pyhg6jt(|%!gLbK
z10p8$3%x+DFvKGr&PD;iZkb;a0ZPjD3zs5MZuV%PaYS)hIDkS>&L{wA$=)sS2Lk{Y
z;%I|%j}_sRp)OAw%BCq<4RYMfQHwI}#zO0FV-gVFjN8TaYh}ul;`NOtfu{My>IWF~
zD#*h{>LZ9P{mv%@A)1&iA9_Q^iK^aKJhXj2C|AlV$ucQ@*B(5O=D%Oak_rSV{V_s4
zfjR-`M4<ZTKl7Hrw?X2;=m&uU?>?6>l{2BpLM&p;9EX$+mZ@uN#uoerS$aIaUet_F
z)<RyKpcTo-JcX{mm2F?a=3rfncvGDPI3N{L4fy(B|09-&MGP?|!PrK*k(Q?6?eLeH
z&YQ7sT2oT#zo9CqRR3o2&goNio>&dqEnK>&r^v56{?BuX)x>xAte<KhGFofzl317{
z3P{!$JL1OpzKf2e_|0%XCmM5<bbOStC;jR-OG+g|$J7`9en)qM(8%1dl(#t9wCFrf
zm=dtbpCSmgD=g{qvf`p>6JL5Ly3_SK|4Sak_JbCya4f1b@zs~`3W65FtJ`qwNpj!I
zVW0cfVmxEeMgW>3hD06Q&`T{bzQ|NvkeW<l5laG$CG?w9*Milka1B+Bz}Go@X(KQG
zlY;A~B#FzfBcs{-{Z@*PcqlBh#A|BV^P=#)l1Mx>jjG1>QE|CRRp?IK%G6vQ8|C6%
z#=_!CjXyl2w4Y!#xlVFJ0?P+u!_sWgu6pXZ=T(SZYinY%X)K@g@MxzMh=;P(H%TvM
zB_faV9j-!8(7!UHDR`90T|V=Ih}qO8Wvlj>N%{{bRA;2zLI>!%=bb@_PLutTHh326
z;`i<3x{{rcO+$BS`CBN519<S+>FLhZiK^(rk%teXI(t5Q{`t()JuEM)lFKz*Z~-<?
z{4K5$sxy%f+T_*6w!)MX;#y^IsIe}&2jWch%`>_)vY`1}Q#Wm-n={ZfqdH8&Kdeo`
zf%neJ>J-;dXk6~)%!bUPF<Id)F|M`-$A|-l+IDY(X;mHudT!^YXRUR2fh)~Y$qkGr
z-N}aoI4}>GV(4r8$)iOTuVyPKZQZ$=szF^H9SLRmKQPE@HLpRnBDlyzdjaY$>m!?N
zW^5BE(#0RKfGG}U*`W!gUvgT>L3SG2<m92_iFRZd{Och&?YxtOhNwlE&lA%X25DD_
zb@{uLspy;olT^@~3r1O7-I;8v$MnH?iyB4zzPH(5?JK=5&20^P@7Rn`%kN$8*MVQt
zpr2+%t4`QQf2f(^>kL4c%?wGCqsz}Fjh=3p8V%l|)-4>IsmOcFZ7}CFSY(=7$48v1
z#iTqQa6%0$_9<4FfBMdUOfkAv&uM^eX|wO>Jp#*PclZ35Lb_4g9(B_Zi*j=nGp_0p
z&#&^R471X15@O!l?>l+i@+8rHZ5F!}RA|Ea#`rgkvvlPU3yXPGI*U#?X7FquqsvjN
zmw#4Hy|*x?u7%^MYiqhKY0{^(erN0CUE}sS+-W5RSn%LHX*@Ucia>r;l74k`oYNK=
z-lBxt5v(TiI{ZilcFudxh4t4+;BpS<$j1dO{Z)f-NPoC4XI(jUq+}1I4`7Z%0{k4U
z4617L-A-tLnzq4W2m-BNq;H@;pL2}XC>9zrD%#MC4`-M3@(iQs4Iz;f{^uUJAr5e^
fx-P8sX8RANDk>K$@j~BO_#**FTZ~O38lU_V!tji?

literal 0
HcmV?d00001

diff --git a/types/addBoard.ts b/types/addBoard.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/types/alias.ts b/types/alias.ts
new file mode 100644
index 000000000..5eb183934
--- /dev/null
+++ b/types/alias.ts
@@ -0,0 +1,5 @@
+import { ChangeEvent } from "react";
+
+export type InputChangeEvent = ChangeEvent<
+  HTMLTextAreaElement | HTMLInputElement
+>;

From ee1b6cc54aa2a0ddaad24b87682cdf509043636a Mon Sep 17 00:00:00 2001
From: kimsayhi <kimse418@gmail.com>
Date: Sat, 17 Aug 2024 13:33:03 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EA=B0=81=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EA=B8=80=EB=B3=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/article.ts                        |  27 +++++++++-
 apis/comment.ts                        |  24 +++++++++
 components/addboard/AddBoardForm.tsx   |  51 ++++++++++++++++++
 components/boards/Article.tsx          |  18 ++++---
 components/boards/BestArticle.tsx      |  69 ++++++++++++++-----------
 components/boards/id/ArticleDetail.tsx |  45 ++++++++++++++++
 components/boards/id/CommentForm.tsx   |  27 ++++++++++
 components/boards/id/CommentList.tsx   |  48 +++++++++++++++++
 components/ui/BackToListButton.tsx     |  19 +++++++
 components/ui/Button.tsx               |   6 +--
 components/ui/FileInput.tsx            |   1 -
 components/ui/TextArea.tsx             |   7 ++-
 context/TokenProvider.tsx              |  10 ++--
 hooks/useAddBoard.tsx                  |  33 ++++++++++--
 hooks/useArticleComment.tsx            |  59 +++++++++++++++++++++
 hooks/useArticleDetail.tsx             |  34 ++++++++++++
 hooks/useArticles.tsx                  |   7 +--
 hooks/useCommentForm.tsx               |  48 +++++++++++++++++
 pages/addboard.tsx                     |  45 +---------------
 pages/boards/[id].tsx                  |  21 +++++---
 pages/index.tsx                        |  12 ++---
 public/images/ic_kebob.svg             |   5 ++
 public/images/img_nocomment.png        | Bin 0 -> 5906 bytes
 types/article.ts                       |  23 +++++++++
 utils/formatHowAgo.ts                  |  20 +++++++
 25 files changed, 543 insertions(+), 116 deletions(-)
 create mode 100644 apis/comment.ts
 create mode 100644 components/addboard/AddBoardForm.tsx
 create mode 100644 components/boards/id/ArticleDetail.tsx
 create mode 100644 components/boards/id/CommentForm.tsx
 create mode 100644 components/boards/id/CommentList.tsx
 create mode 100644 components/ui/BackToListButton.tsx
 create mode 100644 hooks/useArticleComment.tsx
 create mode 100644 hooks/useArticleDetail.tsx
 create mode 100644 hooks/useCommentForm.tsx
 create mode 100644 public/images/ic_kebob.svg
 create mode 100644 public/images/img_nocomment.png
 create mode 100644 utils/formatHowAgo.ts

diff --git a/apis/article.ts b/apis/article.ts
index cb7246cd6..d95585257 100644
--- a/apis/article.ts
+++ b/apis/article.ts
@@ -1,5 +1,10 @@
 import axios from "@/lib/axios";
-import { ArticleQuery } from "@/types/article";
+import {
+  Article,
+  ArticleQuery,
+  CommentResponse,
+  GetCommentParam,
+} from "@/types/article";
 import { ArticleResponse } from "@/types/article";
 
 export const getArticleList = async ({
@@ -16,3 +21,23 @@ export const getArticleList = async ({
   const { list, totalCount }: ArticleResponse = res.data;
   return { list, totalCount };
 };
+
+export const getArticlesById = async (articleId: number) => {
+  const res = await axios.get(`/articles/${articleId}`);
+  const { data }: { data: Article } = res;
+  return data;
+};
+
+export const getArticleComment = async ({
+  articleId,
+  limit = 5,
+  cursor,
+}: GetCommentParam) => {
+  const res = await axios.get(
+    `/articles/${articleId}/comments?limit=${limit}${
+      cursor ? `&cursor=${cursor}` : ""
+    }`
+  );
+  const { data }: { data: CommentResponse } = res;
+  return data;
+};
diff --git a/apis/comment.ts b/apis/comment.ts
new file mode 100644
index 000000000..46e9376fc
--- /dev/null
+++ b/apis/comment.ts
@@ -0,0 +1,24 @@
+import axios from "@/lib/axios";
+
+interface PostArticleCommentParams {
+  articleId: number;
+  data: string;
+  token: string;
+}
+
+export const postArticleComment = async ({
+  articleId,
+  data,
+  token,
+}: PostArticleCommentParams) => {
+  try {
+    const body = {
+      content: data,
+    };
+    const res = await axios.post(`/articles/${articleId}/comments`, body, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
diff --git a/components/addboard/AddBoardForm.tsx b/components/addboard/AddBoardForm.tsx
new file mode 100644
index 000000000..2ef58d71a
--- /dev/null
+++ b/components/addboard/AddBoardForm.tsx
@@ -0,0 +1,51 @@
+import Button from "@/components/ui/Button";
+import FileInput from "@/components/ui/FileInput";
+import Input from "@/components/ui/Input";
+import TextArea from "@/components/ui/TextArea";
+import useAddBoard from "@/hooks/useAddBoard";
+
+export default function AddBoardForm() {
+  const {
+    inputValues,
+    onChangeInput,
+    onSubmitForm,
+    onChangeFileInput,
+    isInputValid,
+  } = useAddBoard();
+  return (
+    <form className="m-container mt-[70px] pt-4">
+      <div className="flex justify-between">
+        <span className="font-bold text-xl">게시글 쓰기</span>
+        <Button
+          className="btn w-[74px] h-[42px]"
+          onClick={onSubmitForm}
+          activeBtn={isInputValid}
+        >
+          등록
+        </Button>
+      </div>
+      <Input
+        name="title"
+        placeholder="제목을 입력해주세요"
+        type="input"
+        label="*제목"
+        value={inputValues.title}
+        onChange={onChangeInput}
+      />
+      <TextArea
+        name="content"
+        placeholder="내용을 입력해 주세요"
+        label="*내용"
+        value={inputValues.content}
+        onChange={onChangeInput}
+      />
+      <FileInput
+        value=""
+        onChange={onChangeFileInput}
+        name="image"
+        label="이미지"
+        image={inputValues.image}
+      />
+    </form>
+  );
+}
diff --git a/components/boards/Article.tsx b/components/boards/Article.tsx
index 40f77ce5f..d70549ead 100644
--- a/components/boards/Article.tsx
+++ b/components/boards/Article.tsx
@@ -19,7 +19,7 @@ export default function Article({ articles, setTarget }: Props) {
           <li
             ref={index === articles.length - 1 ? setTarget : null}
             key={`${article.id}+${index}`}
-            className=" bg-gray-50 px-2 pb-6 pt-1 mt-5 border-b shadow-md rounded-xl border-gray-200"
+            className=" bg-gray-50 px-2 pb-6 pt-2 mt-5 border-b shadow-md rounded-xl border-gray-200 h-[136px]"
           >
             <Link
               href={`/boards/${article.id}`}
@@ -27,13 +27,15 @@ export default function Article({ articles, setTarget }: Props) {
             >
               <div className="flex justify-between gap-10">
                 <div className="font-semibold text-lg">{article.content}</div>
-                <Image
-                  className="rounded-lg border border-gray-200 max-h-[72px]"
-                  width={72}
-                  height={72}
-                  src={article.image}
-                  alt="게시글 이미지"
-                />
+                {article.image && (
+                  <Image
+                    className="rounded-lg border border-gray-200 max-h-[72px]"
+                    width={72}
+                    height={72}
+                    src={article.image}
+                    alt="게시글 이미지"
+                  />
+                )}
               </div>
               <div className="text-sm gap-2 flex justify-between pt-4">
                 <Image
diff --git a/components/boards/BestArticle.tsx b/components/boards/BestArticle.tsx
index a1f7fd935..720b20f17 100644
--- a/components/boards/BestArticle.tsx
+++ b/components/boards/BestArticle.tsx
@@ -5,6 +5,7 @@ import { Article } from "@/types/article";
 
 import icMedal from "@/public/images/ic_medal.svg";
 import icHeart from "@/public/images/ic_heart.svg";
+import Link from "next/link";
 interface Props {
   articles: Article[];
 }
@@ -18,38 +19,44 @@ export default function BestArticle({ articles }: Props) {
             key={article.id}
             className="grow bg-gray-50 shadow-md h-[198px] lg:h-[169px] px-[22px] pt-[46px] pb-4 relative rounded-lg"
           >
-            <span className="absolute gap-1 flex-center top-0 left-[22px] w-[102px] h-[30px] text-white bg-my-blue rounded-b-2xl">
-              <Image src={icMedal} alt="베스트 게시글 뱃지" />
-              Best
-            </span>
-            <div className="flex h-full flex-col justify-between">
-              <div className="flex justify-between gap-10">
-                <div className="font-semibold text-lg">{article.content}</div>
-                <Image
-                  className="rounded-lg border border-gray-200 max-h-[72px]"
-                  width={72}
-                  height={72}
-                  src={article.image}
-                  alt="게시글 이미지"
-                />
+            <Link href={`/boards/${article.id}`}>
+              <span className="absolute gap-1 flex-center top-0 left-[22px] w-[102px] h-[30px] text-white bg-my-blue rounded-b-2xl">
+                <Image src={icMedal} alt="베스트 게시글 뱃지" />
+                Best
+              </span>
+              <div className="flex h-full flex-col justify-between">
+                <div className="flex justify-between gap-10">
+                  <div className="font-semibold text-lg">{article.content}</div>
+                  {article.image && (
+                    <Image
+                      className="rounded-lg border border-gray-200 max-h-[72px]"
+                      width={72}
+                      height={72}
+                      src={article.image}
+                      alt="게시글 이미지"
+                    />
+                  )}
+                </div>
+                <div className="text-sm gap-2 flex justify-between">
+                  <span className="text-gray-700">
+                    {article.writer.nickname}
+                  </span>
+                  <span className="flex gap-0.5 grow text-gray-500">
+                    <Image
+                      src={icHeart}
+                      className="mt-[2px]"
+                      width={13.4}
+                      height={11.65}
+                      alt="좋아요"
+                    />
+                    {article.likeCount}
+                  </span>
+                  <span className="text-gray-400">
+                    {formatDate(article.createdAt)}
+                  </span>
+                </div>
               </div>
-              <div className="text-sm gap-2 flex justify-between">
-                <span className="text-gray-700">{article.writer.nickname}</span>
-                <span className="flex gap-0.5 grow text-gray-500">
-                  <Image
-                    src={icHeart}
-                    className="mt-[2px]"
-                    width={13.4}
-                    height={11.65}
-                    alt="좋아요"
-                  />
-                  {article.likeCount}
-                </span>
-                <span className="text-gray-400">
-                  {formatDate(article.createdAt)}
-                </span>
-              </div>
-            </div>
+            </Link>
           </li>
         ))}
     </ul>
diff --git a/components/boards/id/ArticleDetail.tsx b/components/boards/id/ArticleDetail.tsx
new file mode 100644
index 000000000..0abe2dcfe
--- /dev/null
+++ b/components/boards/id/ArticleDetail.tsx
@@ -0,0 +1,45 @@
+import useArticleDetail from "@/hooks/useArticleDetail";
+import { formatDate } from "@/utils/formatDate";
+import Image from "next/image";
+import icProfile from "@/public/images/ic_profile.svg";
+import icHeart from "@/public/images/ic_heart.svg";
+
+export default function ArticleDetail() {
+  const { article, isLoading, isError } = useArticleDetail();
+
+  if (isLoading || !article) {
+    return <div>불러오는중</div>;
+  } else if (isError) {
+    return <div>에러</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4 pb-10">
+      <p className="font-bold text-xl">{article.title}</p>
+      <div className="flex items-center pb-4 gap-2 border-b">
+        <Image src={icProfile} width={40} height={40} alt="유저 프로필" />
+        <span className="pl-2 font-medium">{article.writer.nickname}</span>
+        <span className="pr-6 border-r border-gray-200 text-gray-400">
+          {formatDate(article.createdAt)}
+        </span>
+        <button className="ml-4 flex-center gap-1 rounded-[35px] w-[87px] border h-10">
+          <Image src={icHeart} width={28} height={23} alt="좋아요" />
+          <span className="font-medium">{article.likeCount}</span>
+        </button>
+      </div>
+      <div className="flex flex-col gap-4">
+        {article.image && (
+          <Image
+            priority
+            src={article.image}
+            width={200}
+            height={200}
+            alt="게시물 이미지"
+            className="rounded-3xl"
+          />
+        )}
+        {article.content}
+      </div>
+    </div>
+  );
+}
diff --git a/components/boards/id/CommentForm.tsx b/components/boards/id/CommentForm.tsx
new file mode 100644
index 000000000..e1c173c7c
--- /dev/null
+++ b/components/boards/id/CommentForm.tsx
@@ -0,0 +1,27 @@
+import Button from "@/components/ui/Button";
+import TextArea from "@/components/ui/TextArea";
+import useCommentForm from "@/hooks/useCommentForm";
+
+export default function CommentForm() {
+  const { value, onChangeTextArea, isValid, onClickAddComment } =
+    useCommentForm();
+  return (
+    <form className="relative">
+      <TextArea
+        label="댓글달기"
+        name="commentInput"
+        placeholder="댓글을 입력해주세요."
+        onChange={onChangeTextArea}
+        className="h-[104px]"
+        value={value}
+      />
+      <Button
+        onClick={onClickAddComment}
+        activeBtn={isValid}
+        className="w-[74px] h-[42px] absolute right-0"
+      >
+        등록
+      </Button>
+    </form>
+  );
+}
diff --git a/components/boards/id/CommentList.tsx b/components/boards/id/CommentList.tsx
new file mode 100644
index 000000000..6e5cf5474
--- /dev/null
+++ b/components/boards/id/CommentList.tsx
@@ -0,0 +1,48 @@
+import useArticleComment from "@/hooks/useArticleComment";
+import { formatHowAgo } from "@/utils/formatHowAgo";
+import icKebob from "@/public/images/ic_kebob.svg";
+import icProfile from "@/public/images/ic_profile.svg";
+import Image from "next/image";
+
+export default function CommentList() {
+  const { commentList, isLoading, isError } = useArticleComment();
+
+  if (isLoading) {
+    return <div>로딩중</div>;
+  } else if (isError) {
+    return <div>에러</div>;
+  }
+  return (
+    <div className="pt-[98px]">
+      {commentList?.length > 0 &&
+        commentList.map((comment, index) => (
+          <div
+            key={comment.id * index}
+            className="border-b border-solid pt-[15px] pb-3 relative border-gray-200 flex flex-col gap-6"
+          >
+            <div>{comment.content}</div>
+            <div className="flex items-start gap-2">
+              <Image
+                alt="댓글프로필"
+                className="w-8 h-8 rounded-full"
+                width={32}
+                height={32}
+                src={comment.writer.image || icProfile}
+              />
+              <div className="flex flex-col">
+                <span className="text-xs text-gray-700">
+                  {comment.writer.nickname}
+                </span>
+                <span className="text-xs text-gray-500">
+                  {formatHowAgo(comment.createdAt)}
+                </span>
+              </div>
+            </div>
+            <button onClick={() => {}} className="absolute right-0 top-[15px]">
+              <Image src={icKebob} alt="댓글수정" />
+            </button>
+          </div>
+        ))}
+    </div>
+  );
+}
diff --git a/components/ui/BackToListButton.tsx b/components/ui/BackToListButton.tsx
new file mode 100644
index 000000000..196d7d909
--- /dev/null
+++ b/components/ui/BackToListButton.tsx
@@ -0,0 +1,19 @@
+import { useRouter } from "next/router";
+import React from "react";
+
+function BackToListButton() {
+  const router = useRouter();
+  const onClickBack = () => {
+    router.back();
+  };
+  return (
+    <button
+      onClick={onClickBack}
+      className="bg-my-blue w-[240px] h-12 mx-auto mb-44 mt-10 text-white rounded-[40px]"
+    >
+      목록으로 돌아가기
+    </button>
+  );
+}
+
+export default BackToListButton;
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index eee1238b5..c80c2d47f 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -2,9 +2,9 @@ import { MouseEvent } from "react";
 
 type ButtonProps = {
   onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-  className: string;
+  className?: string;
   children: string;
-  activeBtn: boolean;
+  activeBtn?: boolean;
 };
 
 export default function Button({
@@ -20,7 +20,7 @@ export default function Button({
       onClick={(e) => {
         onClick(e);
       }}
-      className={`${className} ${activeColor}`}
+      className={`rounded-lg flex-center text-white ${className} ${activeColor}`}
     >
       {children}
     </button>
diff --git a/components/ui/FileInput.tsx b/components/ui/FileInput.tsx
index 5bad4cb56..1843d76b2 100644
--- a/components/ui/FileInput.tsx
+++ b/components/ui/FileInput.tsx
@@ -18,7 +18,6 @@ export default function FileInput({
   image,
   onChange,
 }: FileInputProps) {
-  console.log(image);
   return (
     <div className="flex flex-col pb-6 relative">
       <label className="pb-4 text-lg font-bold" htmlFor={name}>
diff --git a/components/ui/TextArea.tsx b/components/ui/TextArea.tsx
index ced9c7bb2..0ed91084d 100644
--- a/components/ui/TextArea.tsx
+++ b/components/ui/TextArea.tsx
@@ -1,11 +1,13 @@
 import { InputChangeEvent } from "@/types/alias";
+import { ChangeEvent } from "react";
 
 interface TextAreaProps {
   label: string;
   placeholder: string;
   name: string;
   value?: string;
-  onChange: (e: InputChangeEvent) => void;
+  className?: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
 export default function TextArea({
@@ -14,6 +16,7 @@ export default function TextArea({
   label,
   value,
   onChange,
+  className,
 }: TextAreaProps) {
   return (
     <div className="flex flex-col pb-6">
@@ -21,7 +24,7 @@ export default function TextArea({
         {label}
       </label>
       <textarea
-        className="rounded-xl border-none bg-gray-100 px-6 py-4 outline-none h-[200px]"
+        className={`rounded-xl border-none bg-gray-100 px-6 py-4 outline-none  resize-none ${className}`}
         onChange={onChange}
         placeholder={placeholder}
         name={name}
diff --git a/context/TokenProvider.tsx b/context/TokenProvider.tsx
index 3e4a38843..4ef47bbd2 100644
--- a/context/TokenProvider.tsx
+++ b/context/TokenProvider.tsx
@@ -8,11 +8,11 @@ import {
   useState,
 } from "react";
 
-export interface Context {
+export interface Token {
   accessToken: string;
   refreshToken: string;
   setAccessToken: Dispatch<SetStateAction<string>>;
-  onClickSignIn: () => void;
+  requestToken: () => void;
 }
 
 const tempAuth = {
@@ -20,12 +20,12 @@ const tempAuth = {
   password: "12341234",
 };
 
-export const TokenContext = createContext<Context | null>(null);
+export const TokenContext = createContext<Token | null>(null);
 
 const TokenProvider = ({ children }: PropsWithChildren) => {
   const [accessToken, setAccessToken] = useState("");
   const [refreshToken, setRefreshToken] = useState("");
-  const onClickSignIn = async () => {
+  const requestToken = async () => {
     const res = await postSignIn(tempAuth);
     const newAccessToken = res.accessToken;
     const newRefreshToken = res.refreshToken;
@@ -33,7 +33,7 @@ const TokenProvider = ({ children }: PropsWithChildren) => {
     setRefreshToken(newRefreshToken);
   };
   const value = useMemo(() => {
-    return { accessToken, refreshToken, setAccessToken, onClickSignIn };
+    return { accessToken, refreshToken, setAccessToken, requestToken };
   }, [accessToken]);
 
   return (
diff --git a/hooks/useAddBoard.tsx b/hooks/useAddBoard.tsx
index 9400bd1c8..3ad08cb40 100644
--- a/hooks/useAddBoard.tsx
+++ b/hooks/useAddBoard.tsx
@@ -1,4 +1,10 @@
-import { ChangeEvent, MouseEvent, useContext, useState } from "react";
+import {
+  ChangeEvent,
+  MouseEvent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
 import type { InputChangeEvent } from "@/types/alias";
 import { postNewArticle, postUploadImage } from "@/apis/addBoard";
@@ -12,6 +18,7 @@ const INIT_ADD_BOARD_INPUT = {
 
 const useAddBoard = () => {
   const [inputValues, setInputValues] = useState(INIT_ADD_BOARD_INPUT);
+  const [isInputValid, setIsInputValid] = useState(false);
   const { accessToken } = useContext(TokenContext) as Context;
   const router = useRouter();
 
@@ -27,7 +34,14 @@ const useAddBoard = () => {
         break;
     }
   };
-
+  const validInputValues = () => {
+    const values = Object.values(inputValues);
+    if (values.every((value) => value.trim() !== "")) {
+      setIsInputValid(true);
+    } else {
+      setIsInputValid(false);
+    }
+  };
   const onChangeFileInput = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) {
       return;
@@ -39,11 +53,24 @@ const useAddBoard = () => {
 
   const onSubmitForm = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
+    if (!isInputValid) {
+      return;
+    }
     postNewArticle({ data: inputValues, token: accessToken });
     router.push("/boards");
   };
 
-  return { onChangeInput, inputValues, onSubmitForm, onChangeFileInput };
+  useEffect(() => {
+    validInputValues();
+  }, [inputValues.content, inputValues.image, inputValues.title]);
+
+  return {
+    onChangeInput,
+    inputValues,
+    onSubmitForm,
+    onChangeFileInput,
+    isInputValid,
+  };
 };
 
 export default useAddBoard;
diff --git a/hooks/useArticleComment.tsx b/hooks/useArticleComment.tsx
new file mode 100644
index 000000000..ffbee6479
--- /dev/null
+++ b/hooks/useArticleComment.tsx
@@ -0,0 +1,59 @@
+import { getArticleComment } from "@/apis/article";
+import { ArticleComment } from "@/types/article";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+interface Cursor {
+  cursorArr: any[];
+  cursorIndex: number;
+}
+
+const INIT_CURSOR: Cursor = {
+  cursorArr: [0],
+  cursorIndex: 0,
+};
+export default function useArticleComment() {
+  const [commentList, setCommentList] = useState<ArticleComment[]>([]);
+  const [visibleCommentList, setVisibleCommentList] = useState<
+    ArticleComment[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [cursor, setCursor] = useState(INIT_CURSOR);
+  const router = useRouter();
+  const { id } = router.query;
+
+  const loadComment = async () => {
+    setIsLoading(true);
+    try {
+      if (typeof id !== "string") {
+        return;
+      }
+      const data = await getArticleComment({
+        articleId: parseInt(id),
+        limit: 5,
+        cursor: cursor.cursorArr[cursor.cursorIndex],
+      });
+      if (cursor.cursorArr[cursor.cursorArr.length - 1]) {
+        const { nextCursor } = data;
+        const nextCursorArr = [...cursor.cursorArr, nextCursor];
+        setCursor((prev) => ({ ...prev, cursorArr: nextCursorArr }));
+      }
+
+      const { list } = data;
+      setCommentList((prev) => [...prev, ...list]);
+    } catch (err) {
+      setIsError(true);
+      console.log(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (typeof id !== "string") {
+      return;
+    }
+    loadComment();
+  }, [id]);
+  return { commentList, isLoading, isError };
+}
diff --git a/hooks/useArticleDetail.tsx b/hooks/useArticleDetail.tsx
new file mode 100644
index 000000000..462131b98
--- /dev/null
+++ b/hooks/useArticleDetail.tsx
@@ -0,0 +1,34 @@
+import { getArticlesById } from "@/apis/article";
+import { Article } from "@/types/article";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+const useArticleDetail = () => {
+  const [article, setArticle] = useState<Article>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const router = useRouter();
+  const { id } = router.query;
+  const loadArticle = async () => {
+    setIsLoading(true);
+    try {
+      if (typeof id !== "string") {
+        //리다이렉션이나 404처리
+        return;
+      }
+      const data = await getArticlesById(parseInt(id));
+      setArticle(data);
+    } catch (err) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadArticle();
+  }, [id]);
+
+  return { article, isLoading, isError };
+};
+
+export default useArticleDetail;
diff --git a/hooks/useArticles.tsx b/hooks/useArticles.tsx
index 59e72b0a8..cdd8a2efa 100644
--- a/hooks/useArticles.tsx
+++ b/hooks/useArticles.tsx
@@ -15,14 +15,11 @@ const useArticles = () => {
   const loadArticles = async () => {
     setIsLoading(true);
     try {
-      const nextArticles: ArticleResponse = await getArticleList({
+      const data: ArticleResponse = await getArticleList({
         ...queryParams,
       });
 
-      setArticles((prev: Article[]): Article[] => [
-        ...prev,
-        ...nextArticles.list,
-      ]);
+      setArticles((prev: Article[]): Article[] => [...prev, ...data.list]);
     } catch (err) {
       console.log(err);
     } finally {
diff --git a/hooks/useCommentForm.tsx b/hooks/useCommentForm.tsx
new file mode 100644
index 000000000..07ed5078c
--- /dev/null
+++ b/hooks/useCommentForm.tsx
@@ -0,0 +1,48 @@
+import { postArticleComment } from "@/apis/comment";
+import { Token, TokenContext } from "@/context/TokenProvider";
+import { useRouter } from "next/router";
+import {
+  ChangeEvent,
+  MouseEvent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export default function useCommentForm() {
+  const [value, setValue] = useState("");
+  const [isValid, setIsValid] = useState(false);
+  const { accessToken } = useContext(TokenContext) as Token;
+  const router = useRouter();
+  const { id } = router.query;
+
+  const onClickAddComment = async (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!isValid) {
+      return;
+    }
+    if (typeof id !== "string") {
+      return;
+    }
+    await postArticleComment({
+      articleId: parseInt(id),
+      token: accessToken,
+      data: value,
+    });
+    setValue("");
+  };
+  console.log(value);
+
+  const onChangeTextArea = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+  useEffect(() => {
+    if (value) {
+      setIsValid(true);
+    } else {
+      setIsValid(false);
+    }
+  }, [value]);
+
+  return { value, onChangeTextArea, isValid, onClickAddComment };
+}
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index fde72df91..ba3786149 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -1,46 +1,5 @@
-import Button from "@/components/ui/Button";
-import FileInput from "@/components/ui/FileInput";
-import Input from "@/components/ui/Input";
-import TextArea from "@/components/ui/TextArea";
-import useAddBoard from "@/hooks/useAddBoard";
+import AddBoardForm from "@/components/addboard/AddBoardForm";
 
 export default function AddBoard() {
-  const { inputValues, onChangeInput, onSubmitForm, onChangeFileInput } =
-    useAddBoard();
-  return (
-    <form className="m-container mt-[70px] pt-4">
-      <div className="flex justify-between">
-        <span className="font-bold text-xl">게시글 쓰기</span>
-        <Button
-          className="btn w-[74px] h-[42px]"
-          activeBtn={false}
-          onClick={onSubmitForm}
-        >
-          등록
-        </Button>
-      </div>
-      <Input
-        name="title"
-        placeholder="제목을 입력해주세요"
-        type="input"
-        label="*제목"
-        value={inputValues.title}
-        onChange={onChangeInput}
-      />
-      <TextArea
-        name="content"
-        placeholder="내용을 입력해 주세요"
-        label="*내용"
-        value={inputValues.content}
-        onChange={onChangeInput}
-      />
-      <FileInput
-        value=""
-        onChange={onChangeFileInput}
-        name="image"
-        label="이미지"
-        image={inputValues.image}
-      />
-    </form>
-  );
+  return <AddBoardForm />;
 }
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index 730bf127f..391af02a4 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -1,7 +1,16 @@
-import React from "react";
-
-function Article() {
-  return <div></div>;
+import ArticleDetail from "@/components/boards/id/ArticleDetail";
+import CommentForm from "@/components/boards/id/CommentForm";
+import CommentList from "@/components/boards/id/CommentList";
+import BackToListButton from "@/components/ui/BackToListButton";
+export default function ArticleDetailPage() {
+  return (
+    <div className="m-container mt-[70px] pt-6">
+      <ArticleDetail />
+      <CommentForm />
+      <CommentList />
+      <div className="flex-center">
+        <BackToListButton />
+      </div>
+    </div>
+  );
 }
-
-export default Article;
diff --git a/pages/index.tsx b/pages/index.tsx
index 3a54baee7..06e214b66 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,13 @@
-import { Context, TokenContext } from "@/context/TokenProvider";
-import axios from "@/lib/axios";
+import { Token, TokenContext } from "@/context/TokenProvider";
 import Link from "next/link";
 import { useContext } from "react";
 
 export default function Home() {
-  const { accessToken, refreshToken, onClickSignIn } = useContext(
-    TokenContext
-  ) as Context;
-  console.log(accessToken);
-  console.log(refreshToken);
+  const { requestToken } = useContext(TokenContext) as Token;
+
   return (
     <div>
-      <button onClick={onClickSignIn}>토큰 발급받기</button>
+      <button onClick={requestToken}>토큰 발급받기</button>
       <Link href={`/boards`}>게시판가기</Link>
     </div>
   );
diff --git a/public/images/ic_kebob.svg b/public/images/ic_kebob.svg
new file mode 100644
index 000000000..51b03fba0
--- /dev/null
+++ b/public/images/ic_kebob.svg
@@ -0,0 +1,5 @@
+<svg width="3" height="13" viewBox="0 0 3 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="1.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="1.5" cy="6.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="1.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/public/images/img_nocomment.png b/public/images/img_nocomment.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7342799327a8822b347e50583f4aea3a04be73e
GIT binary patch
literal 5906
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
KL#`464f#LyjvcB1

literal 0
HcmV?d00001

diff --git a/types/article.ts b/types/article.ts
index 639cce085..673d630cf 100644
--- a/types/article.ts
+++ b/types/article.ts
@@ -25,3 +25,26 @@ export interface ArticleQuery {
   orderBy: "like" | "recent";
   keyword?: string;
 }
+
+export interface CommentWriter extends Writer {
+  image: string;
+}
+
+export interface ArticleComment {
+  writer: CommentWriter;
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}
+
+export interface CommentResponse {
+  nextCursor: number | null;
+  list: ArticleComment[];
+}
+
+export interface GetCommentParam {
+  articleId: number;
+  limit: number;
+  cursor: number | null;
+}
diff --git a/utils/formatHowAgo.ts b/utils/formatHowAgo.ts
new file mode 100644
index 000000000..93de8c805
--- /dev/null
+++ b/utils/formatHowAgo.ts
@@ -0,0 +1,20 @@
+export const formatHowAgo = (createdAt: string) => {
+  const createdDate = new Date(createdAt);
+  const nowDate = new Date();
+  const secondGap = Math.floor(
+    (nowDate.getTime() - createdDate.getTime()) / 1000
+  );
+  if (secondGap < 60) {
+    return `${secondGap}초 전`;
+  }
+  const minuteGap = Math.floor(secondGap / 60);
+  if (minuteGap < 60) {
+    return `${minuteGap}분 전`;
+  }
+  const hourGap = Math.floor(minuteGap / 60);
+  if (hourGap < 24) {
+    return `${hourGap}시간 전`;
+  }
+  const dayGap = Math.floor(hourGap / 24);
+  return `${dayGap}일 전`;
+};