[고한샘] sprint10

components/BlueButton.module.css

@@ -11,4 +11,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
 }

components/BlueButton.tsx

@@ -1,5 +1,9 @@
 import styles from "@/components/BlueButton.module.css";
 
-export default function BlueButton({ children }) {
-  return <div className={styles.write}>{children}</div>;
+export default function BlueButton({ type = "", children }) {
+  return (
+    <button type={type} className={styles.write}>
+      {children}
+    </button>
+  );
 }

components/Header.tsx

@@ -14,6 +14,7 @@ export default function Header() {
               alt="Home Logo"
               width={153}
               height={51}
+              priority
             />
           </Link>
           <Link href="/boards">

pages/addboard/[id].tsx

@@ -0,0 +1,111 @@
+import BlueButton from "@/components/BlueButton";
+import axios from "@/lib/axios";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export function UserProfile({ article = {} }) {
+  return (
+    <div>
+      <Image
+        src="/icon/profile-login-icon.png"
+        alt="user profile"
+        width={24}
+        height={24}
+        priority
+      />
+      <span>{article.writer?.nickname}</span>
+      <span>{article.createdAt}</span>
+      <span>하트</span>
+      <span>{article.likeCount}</span>
+    </div>
+  );
+}
+
+export function ActicleItem({ article = {} }) {
+  return (
+    <div className="">
+      <h3>{article.title}</h3>
+      <UserProfile article={article} />
+      <p>{article.content}</p>
+    </div>
+  );
+}
+
+export function CommentForm() {
+  return (
+    <form>
+      <h4>댓글 달기</h4>
+      <label htmlFor="content"></label>
+      <textarea
+        id="content"
+        name="content"
+        placeholder="댓글을 입력해주세요."
+      />
+      <BlueButton type="submit">등록</BlueButton>
+    </form>
+  );
+}
+
+export function CommentItem({ comments }) {
+  return (
+    <>
+      <p>{comments[0]?.content}</p>
+      <UserProfile />
+      <Image
+        src="/icon/kebab-icon.png"
+        alt="kebab"
+        width={24}
+        height={24}
+        priority
+      />
+    </>
+  );
+}
+
+export function CommentList({ comments = [] }) {
+  return (
+    <>
+      <CommentItem comments={comments} />
+    </>
+  );
+}
+
+export default function Article() {
+  const router = useRouter();
+  const { query } = router;
+  const id = query["id"];
+  const [article, setArtcle] = useState({});
+  const [comments, setComments] = useState([]);
+
+  async function getArticle(articleId) {
+    if (!articleId) return;
+    const res = await axios.get(`/articles/${articleId}`);
+    const nextArticle = res.data;
+    setArtcle(nextArticle);
+  }
+  async function getComments(articleId) {
+    if (!articleId) return;
+    const res = await axios.get(`/articles/${articleId}/comments?limit=5`);
+    const nextComments = res.data.list;
+    setComments(nextComments);
+  }
+
+  useEffect(() => {
+    if (id) {
+      getArticle(id);
+      getComments(id);
+    }
+  }, [id]);
+  return (
+    <>
+      <ActicleItem article={article} />
+      <CommentForm />
+      {!comments ? (
+        <p>댓글이 없습니다.</p>
+      ) : (
+        <CommentList comments={comments} />
+      )}
+    </>
+  );
+}

pages/addboard/index.tsx

@@ -0,0 +1,34 @@
+import BlueButton from "@/components/BlueButton";
+import { useRouter } from "next/router";
+
+export default function AddBoard() {
+  const router = useRouter();
+  const { articleId } = router.query;
+  console.log(articleId);
+
+  return (
+    <form>
+      <div>
+        <h2>게시글 쓰기</h2>
+        <BlueButton type="submit">등록</BlueButton>
+      </div>
+      <label htmlFor="title">*제목</label>
+      <input
+        type="text"
+        id="title"
+        name="title"
+        placeholder="제목을 입력해주세요"
+      />
+      <label htmlFor="content">*내용</label>
+      <textarea id="content" name="content" placeholder="내용을 입력해주세요" />
+      <label htmlFor="imageUpload">이미지</label>
+      <input
+        type="file"
+        id="imageUpload"
+        name="imageUpload"
+        accept="image/*"
+        placeholder="이미지 등록"
+      />
+    </form>
+  );
+}