feat: ArticleBoard 글쓰기 기능 추가

frontend/src/components/ArticleBoard/ArticleBoard.jsx

@@ -1,19 +1,28 @@
-import { ArticleLink } from '../ArticleLink';
+import { useNavigate } from 'react-router-dom';
 import styles from './ArticleBoard.module.css';
 
-export default function ArticleBoard() {
+export default function ArticleBoard({ title, canCreate, createArticlePath, children }) {
+  const navigate = useNavigate();
+  const createArticle = () => {
+    navigate(createArticlePath);
+  };
+  // TODO : ㅁ 을 글쓰기 아이콘으로 변경
   return (
     <div className={styles.articleBoard}>
-      <div className={styles.title}>공지사항</div>
-      <div className={styles.article}>
-        <ArticleLink />
-        <ArticleLink />
-        <ArticleLink />
-        <ArticleLink />
-        <ArticleLink />
-        <ArticleLink />
-        <ArticleLink />
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        {canCreate && (
+          <button
+            type="button"
+            className={styles.button}
+            onClick={createArticle}
+          >
+            <div>ㅁ</div>
+            <div className={styles.buttonText}>글쓰기</div>
+          </button>
+        )}
       </div>
+      <div className={styles.article}>{children}</div>
     </div>
   );
 }

frontend/src/components/ArticleBoard/ArticleBoard.module.css

@@ -1,20 +1,44 @@
 .articleBoard {
-  width: 920px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: flex-start;
+  background-color: var(--background);
+}
+
+.header {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .title {
-  width: 820px;
-  box-sizing: border-box;
-  padding: 0 20px;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 900;
 }
 
+.button {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.buttonText {
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
 .article {
   display: flex;
   flex-direction: column;