[고한샘] sprint10

components/BlueButton.module.css

@@ -0,0 +1,14 @@
+.write {
+  width: 84px;
+  height: 42px;
+  border-radius: 8px;
+  background-color: #3692ff;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

components/BlueButton.tsx

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

components/SearchForm.tsx

@@ -22,6 +22,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
 
     if (!value) {
       router.push("/boards");
+      onChangeKeyword(" ");
       return;
     }
     if (onChangeKeyword) {

pages/addboard.tsx

@@ -0,0 +1,7 @@
+export default function AddBoard() {
+  return (
+    <>
+      <h2>add</h2>
+    </>
+  );
+}

pages/boards.tsx

@@ -1,7 +1,9 @@
+import BlueButton from "@/components/BlueButton";
 import BoardItem from "@/components/BoardItem";
 import DropDown from "@/components/DropDown";
 import SearchForm from "@/components/SearchForm";
 import axios from "@/lib/axios";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 
 interface Article {
@@ -39,8 +41,7 @@ export default function BoardPage() {
 
   return (
     <>
-      <SearchForm keyword={keyword} onChangeKeyword={setKeyword} />
-      <DropDown order={orderBy} onChangeOrder={setOrderBy} />
+      <h2>베스트 게시글</h2>
       <ul>
         {bestList.map((article) => {
           return (
@@ -51,6 +52,12 @@ export default function BoardPage() {
           );
         })}
       </ul>
+      <SearchForm keyword={keyword} onChangeKeyword={setKeyword} />
+      <DropDown order={orderBy} onChangeOrder={setOrderBy} />
+      <h2>게시글</h2>
+      <Link href="/addboard">
+        <BlueButton>글쓰기</BlueButton>
+      </Link>
       <ul>
         {boardList.map((article) => {
           return (