feat: 자유게시판 생성 수정 삭제

frontend/src/Router.jsx

@@ -32,6 +32,10 @@ const QuizsetWritePage = lazy(async () => await import('./pages/QuizsetWritePage
 const QuizsetDetailPage = lazy(async () => await import('./pages/QuizsetDetailPage'));
 const LectureEnrollPage = lazy(async () => await import('./pages/LectureEnrollPage'));
 const QuizsetEditPage = lazy(async () => await import('./pages/QuizsetEditPage'));
+const FreeboardListPage = lazy(async () => await import('./pages/FreeboardListPage'));
+const CreateFreeboardPage = lazy(async () => await import('./pages/CreateFreeboardPage'));
+const FreeboardDetailPage = lazy(async () => await import('./pages/FreeboardDetailPage'));
+const EditFreeboardPage = lazy(async () => await import('./pages/EditFreeboardPage'));
 
 const router = createBrowserRouter([
   {
@@ -122,12 +126,34 @@ const router = createBrowserRouter([
                 ],
               },
               {
-                path: ':questionId/edit',
+                path: 'write',
-                element: <EditQuestionPage />,
+                element: <CreateQuestionPage />,
+              },
+            ],
+          },
+          {
+            path: 'freeboard',
+            children: [
+              {
+                index: true,
+                element: <FreeboardListPage />,
+              },
+              {
+                path: ':freeboardId',
+                children: [
+                  {
+                    index: true,
+                    element: <FreeboardDetailPage />,
+                  },
+                  {
+                    path: 'edit',
+                    element: <EditFreeboardPage />,
+                  },
+                ],
               },
               {
                 path: 'write',
-                element: <CreateQuestionPage />,
+                element: <CreateFreeboardPage />,
               },
             ],
           },

frontend/src/components/Article/EditFreeboard/EditFreeboard.jsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './EditFreeboard.module.css';
+import EditIcon from '/src/assets/icons/edit.svg?react';
+import BackIcon from '/src/assets/icons/back.svg?react';
+
+export default function EditFreeboard({ topic, title, prevContent, prevTitle, onSubmit }) {
+  const [articleTitle, setArticleTitle] = useState(prevTitle);
+  const [articleContent, setArticleContent] = useState(prevContent);
+
+  const handleInput = (e) => {
+    setArticleContent(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = e.target.scrollHeight + 'px';
+  };
+
+  return (
+    <div className={styles.createArticle}>
+      <header className={styles.header}>
+        <Link
+          to={'..'}
+          className={styles.goBack}
+        >
+          <BackIcon />
+          <span>{title}</span>
+        </Link>
+        <div className={styles.title}>{topic}</div>
+      </header>
+      <form
+        className={styles.formWrapper}
+        onSubmit={(e) => onSubmit(e, articleTitle, articleContent)}
+      >
+        <div className={styles.fieldWrapper}>
+          <label className={styles.label}>제목</label>
+          <input
+            type="text"
+            className={styles.titleInput}
+            placeholder={'제목을 입력하세요'}
+            value={articleTitle}
+            onChange={(e) => setArticleTitle(e.target.value)}
+          />
+        </div>
+        <div className={styles.fieldWrapper}>
+          <label className={styles.label}>내용</label>
+          <textarea
+            className={styles.contentInput}
+            placeholder="내용을 입력하세요"
+            value={articleContent}
+            onChange={handleInput}
+          ></textarea>
+        </div>
+        <button
+          type="button"
+          className={styles.button}
+          onClick={(e) => onSubmit(e, articleTitle, articleContent)}
+          disabled={!articleTitle || !articleContent}
+        >
+          <EditIcon />
+          <div>글 수정하기</div>
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/components/Article/EditFreeboard/EditFreeboard.module.css

@@ -0,0 +1,110 @@
+.createArticle {
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.goBack {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
+}
+
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+}
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  margin-bottom: 20px;
+}
+
+.label {
+  color: var(--text-color);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+
+.titleInput {
+  padding: 20px;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 500;
+}
+
+.titleInput::placeholder {
+  color: var(--text-color-tertiary);
+}
+
+.contentInput {
+  padding: 20px;
+  height: 80px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.contentInput::placeholder {
+  color: var(--text-color-tertiary);
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid var(--primary-color);
+  background-color: var(--primary-color);
+  color: var(--on-primary);
+  stroke: var(--on-primary);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  align-self: end;
+  border-radius: 8px;
+  cursor: pointer;
+  transition:
+    background-color 0.25s,
+    border-color 0.25s,
+    stroke 0.25s,
+    color 0.25s;
+}
+
+.button:disabled,
+.button[disabled] {
+  border-color: var(--border-color);
+  background-color: var(--background-tertiary);
+  color: var(--text-color-tertiary);
+  cursor: not-allowed;
+  stroke: var(--text-color-tertiary);
+}

frontend/src/components/Article/index.js

@@ -5,3 +5,4 @@ export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';
 export { default as EditArticle } from './EditArticle/EditArticle.jsx';
 export { default as EditQna } from './EditQna/EditQna.jsx';
 export { default as ArticleDetailAnswerInput } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx';
+export { default as EditFreeboard } from './EditFreeboard/EditFreeboard.jsx';

frontend/src/components/Layout/LectureLayout.jsx

@@ -50,7 +50,7 @@ export default function LectureLayout() {
             </SideLink>
             <SideLink to={'notice'}>공지사항</SideLink>
             <SideLink to={'qna'}>Q&A</SideLink>
-            <SideLink to={'file'}>수업자료</SideLink>
+            <SideLink to={'freeboard'}>자유게시판</SideLink>
             <SideLink to={'quiz'}>퀴즈</SideLink>
             {userType === 'teacher' && <SideLink to={'enroll'}>수강신청관리</SideLink>}
           </SideBar>

frontend/src/hooks/api/useFreeboardDelete.js

@@ -0,0 +1,10 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useFreeboardDelete() {
+  const freeboardDelete = (boardId) => {
+    return instance.delete(`${API_URL}/board/${boardId}`);
+  };
+
+  return { freeboardDelete };
+}

frontend/src/hooks/api/useFreeboardDetail.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useFreeboardDetail(boardId) {
+  return useSuspenseQuery({
+    queryKey: ['freeboarddetail', boardId],
+    queryFn: () => instance.get(`${API_URL}/board/${boardId}`),
+  });
+}

frontend/src/hooks/api/useFreeboardEdit.js

@@ -0,0 +1,14 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useFreeboardEdit() {
+  const freeboardEdit = (boardId, title, content) => {
+    const newFreeboard = {
+      title,
+      content,
+    };
+    return instance.put(`${API_URL}/board/${boardId}`, newFreeboard);
+  };
+
+  return { freeboardEdit };
+}

frontend/src/hooks/api/useFreeboardWrite.js

@@ -0,0 +1,16 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useFreeboardWrite() {
+  const freeboardWrite = (lectureId, title, content) => {
+    const newFreeboard = {
+      lectureId: Number(lectureId),
+      title,
+      category: 'freeboard',
+      content,
+    };
+    return instance.post(`${API_URL}/board`, newFreeboard);
+  };
+
+  return { freeboardWrite };
+}

frontend/src/hooks/api/useFreeboards.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useFreeboards(lectureId, page = 0) {
+  return useSuspenseQuery({
+    queryKey: ['noticelist', lectureId, page],
+    queryFn: () => instance.get(`${API_URL}/board?lectureId=${lectureId}&category=freeboard&pageNo=${page}`),
+  });
+}

frontend/src/pages/CreateFreeboardPage/CreateFreeboardPage.jsx

@@ -0,0 +1,23 @@
+import { CreateArticle } from '../../components/Article';
+import { useFreeboardWrite } from '../../hooks/api/useFreeboardWrite';
+import { useParams, useNavigate } from 'react-router-dom';
+
+export default function CreateFreeboardPage() {
+  const navigate = useNavigate();
+  const { lectureId } = useParams();
+  const { freeboardWrite } = useFreeboardWrite();
+
+  const handleSubmit = async (e, title, content) => {
+    e.preventDefault();
+
+    await freeboardWrite(lectureId, title, content);
+    navigate('..');
+  };
+  return (
+    <CreateArticle
+      topic="질문하기"
+      title="Q&A"
+      onSubmit={handleSubmit}
+    />
+  );
+}

frontend/src/pages/CreateFreeboardPage/index.js

@@ -0,0 +1 @@
+export { default } from './CreateFreeboardPage';

frontend/src/pages/EditFreeboardPage/EditFreeboardPage.jsx

@@ -0,0 +1,27 @@
+import { useFreeboardEdit } from '../../hooks/api/useFreeboardEdit';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { EditFreeboard } from '../../components/Article';
+
+export default function EditQuestionPage() {
+  const navigate = useNavigate();
+  const { freeboardId } = useParams();
+  const { freeboardEdit } = useFreeboardEdit();
+  const location = useLocation();
+
+  const handleSubmit = async (e, title, content, answer) => {
+    e.preventDefault();
+
+    await freeboardEdit(freeboardId, title, content, answer);
+    navigate('..');
+  };
+  return (
+    <EditFreeboard
+      topic="글쓰기"
+      title="자유게시판"
+      prevTitle={location.state.title}
+      prevContent={location.state.content}
+      prevAnswer={location.state.answer}
+      onSubmit={handleSubmit}
+    />
+  );
+}

frontend/src/pages/EditFreeboardPage/index.js

@@ -0,0 +1 @@
+export { default } from './EditFreeboardPage';

frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx

@@ -0,0 +1,27 @@
+import { ArticleDetail } from '../../components/Article';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useFreeboardDetail } from '../../hooks/api/useFreeboardDetail';
+import { useFreeboardDelete } from '../../hooks/api/useFreeboardDelete';
+
+export default function FreeboardDetailPage() {
+  const params = useParams();
+  const freeboardId = params.freeboardId;
+  const { data } = useFreeboardDetail(freeboardId);
+  const freeboard = data?.data;
+  const navigate = useNavigate();
+  const { freeboardDelete } = useFreeboardDelete();
+
+  const handleDelete = async () => {
+    await freeboardDelete(freeboardId);
+    navigate('..');
+  };
+
+  return (
+    <ArticleDetail
+      topic="자유게시판"
+      title={freeboard.title}
+      content={freeboard.content}
+      onDelete={handleDelete}
+    />
+  );
+}

frontend/src/pages/FreeboardDetailPage/index.js

@@ -0,0 +1 @@
+export { default } from './FreeboardDetailPage';

frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx

@@ -0,0 +1,26 @@
+import { ArticleLink } from '../../components/ArticleLink';
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import { useFreeboards } from '../../hooks/api/useFreeboards';
+import { useParams } from 'react-router-dom';
+
+export default function NoticeListPage() {
+  const { lectureId } = useParams();
+  const { data } = useFreeboards(lectureId);
+  const notices = data?.data;
+
+  return (
+    <ArticleBoard
+      title="자유게시판"
+      canCreate={true}
+    >
+      {notices.map?.((notice) => (
+        <ArticleLink
+          key={`${notice.id}`}
+          title={notice.title}
+          sub={`${notice.createdAt[0]}. ${notice.createdAt[1]}. ${notice.createdAt[2]}. ${notice.createdAt[3]}:${notice.createdAt[4]}`}
+          to={`${notice.id}`}
+        />
+      ))}
+    </ArticleBoard>
+  );
+}

frontend/src/pages/FreeboardListPage/index.js

@@ -0,0 +1 @@
+export { default } from './FreeboardListPage';