feat: 자유게시판 내 댓글 작성, 수정, 삭제 기능 추가

frontend/src/Router.jsx

@@ -63,10 +63,6 @@ const router = createBrowserRouter([
         path: 'lecture/:lectureId/info',
         element: <LectureInfoPage />,
       },
-      {
-        path: 'lecture/:lectureId/edit',
-        element: <LectureEditPage />,
-      },
       {
         path: 'lecture/:lectureId',
         element: <LectureLayout />,

frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.jsx

@@ -0,0 +1,79 @@
+import styles from './FreeboardComment.module.css';
+import ReplyIcon from '/src/assets/icons/reply.svg?react';
+import { useCommentDelete } from '../../../../hooks/api/useCommentDelete';
+import { useState } from 'react';
+import { useCommentEdit } from '../../../../hooks/api/useCommentEdit';
+
+export default function FreeboardComment({ content, author, onDeleteSubmit, onEditSubmit, commentId }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const { commentDelete } = useCommentDelete();
+  const { commentEdit } = useCommentEdit();
+  const handleDeleteSubmit = async (e) => {
+    e.preventDefault();
+
+    await commentDelete(commentId);
+    onDeleteSubmit();
+  };
+
+  const [newComment, setNewComment] = useState(content);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await commentEdit(commentId, newComment);
+    setIsEditing(false);
+    onEditSubmit();
+  };
+
+  const onEditClick = async (e) => {
+    e.preventDefault();
+    setIsEditing(true);
+  };
+
+  return (
+    <>
+      {isEditing ? (
+        <form
+          onSubmit={handleSubmit}
+          className={styles.commentEdit}
+        >
+          <input
+            type="text"
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder="답변 작성"
+            className={styles.input}
+            required
+          />
+          <button
+            type="submit"
+            className={styles.button}
+          >
+            작성
+          </button>
+        </form>
+      ) : (
+        <section className={styles.comment}>
+          <div className={styles.commentHeader}>
+            <ReplyIcon />
+            <div className={styles.author}>{author}의 답변</div>
+          </div>
+          <p className={styles.content}>{content}</p>
+          <button
+            type="button"
+            className={styles.deleteButton}
+            onClick={handleDeleteSubmit}
+          >
+            <div>삭제</div>
+          </button>
+          <button
+            type="button"
+            className={styles.editButton}
+            onClick={onEditClick}
+          >
+            수정
+          </button>
+        </section>
+      )}
+    </>
+  );
+}

frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.module.css

@@ -0,0 +1,97 @@
+.comment {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 12px 16px;
+  box-sizing: border-box;
+}
+
+.commentEdit {
+  border: 1px solid #ccc;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.commentHeader {
+  display: flex;
+  gap: 4px;
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
+}
+
+.author {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.content {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0;
+  color: var(--text-color);
+}
+
+.editButton {
+  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;
+}
+
+.deleteButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid var(--error-color);
+  background-color: var(--error-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;
+}
+
+.input {
+  flex: 1;
+  border: none;
+  padding: 8px;
+  font-size: 16px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.button {
+  padding: 8px 16px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  background-color: var(--primary-color);
+  color: var(--on-primary);
+  stroke: var(--on-primary);
+  border: 1px solid var(--primary-color);
+  border-radius: 8px;
+  cursor: pointer;
+}

frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.jsx

@@ -0,0 +1,34 @@
+import styles from './FreeboardCommentInput.module.css';
+import { useState } from 'react';
+
+export default function FreeboardCommentInput({ onCommentSubmit }) {
+  const [newComment, setNewComment] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await onCommentSubmit(newComment);
+    setNewComment('');
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={styles.comment}
+    >
+      <input
+        type="text"
+        value={newComment}
+        onChange={(e) => setNewComment(e.target.value)}
+        placeholder="답변 작성"
+        className={styles.input}
+        required
+      />
+      <button
+        type="submit"
+        className={styles.button}
+      >
+        작성
+      </button>
+    </form>
+  );
+}

frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.module.css

@@ -0,0 +1,30 @@
+.comment {
+  border: 1px solid #ccc;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.input {
+  flex: 1;
+  border: none;
+  padding: 8px;
+  font-size: 16px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.button {
+  padding: 8px 16px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  background-color: var(--primary-color);
+  color: var(--on-primary);
+  stroke: var(--on-primary);
+  border: 1px solid var(--primary-color);
+  border-radius: 8px;
+  cursor: pointer;
+}

frontend/src/components/Article/FreeboardDetail/FreeboardDetail.jsx

@@ -0,0 +1,80 @@
+import BackIcon from '/src/assets/icons/back.svg?react';
+import { Link } from 'react-router-dom';
+import styles from './FreeboardDetail.module.css';
+import FreeboardCommentInput from './FreeDetailComments/FreeboardCommentInput';
+import FreeboardComment from './FreeDetailComments/FreeboardComment';
+import { useComments } from '../../../hooks/api/useComments';
+import { useCommentWrite } from '../../../hooks/api/useCommentWrite';
+import EditIcon from '/src/assets/icons/edit.svg?react';
+import { useParams } from 'react-router-dom';
+
+export default function FreeboardDetail({ topic, title, author, content, onDelete }) {
+  const { freeboardId } = useParams();
+  const { data, refetch } = useComments(freeboardId);
+  const { commentWrite } = useCommentWrite();
+  const comments = data?.data;
+
+  const handleCommentSubmit = async (newComment) => {
+    await commentWrite(freeboardId, newComment);
+    refetch();
+  };
+
+  const handleDeleteSubmit = () => {
+    refetch();
+  };
+
+  const handleEditSubmit = () => {
+    refetch();
+  };
+
+  return (
+    <div className={styles.freeboardDetail}>
+      <header className={styles.header}>
+        <div className={styles.headerInside}>
+          <Link
+            to={'..'}
+            className={styles.goBack}
+          >
+            <BackIcon />
+            <span>{topic}</span>
+          </Link>
+          <div>
+            <h1 className={styles.title}>{title}</h1>
+            {author && <span className={styles.author}>{author}</span>}
+          </div>
+        </div>
+        <Link
+          type="button"
+          className={styles.editButton}
+          to={'edit'}
+          state={{ title: title, content: content }}
+        >
+          <EditIcon className={styles.icon} />
+          <span>수정하기</span>
+        </Link>
+        <button
+          type="button"
+          className={styles.deleteButton}
+          onClick={onDelete}
+        >
+          삭제하기
+        </button>
+      </header>
+      <div>
+        <p className={styles.content}>{content}</p>
+      </div>
+      {comments &&
+        comments.map((comment) => (
+          <FreeboardComment
+            key={comment.id}
+            content={comment.content}
+            author={comment.name}
+            commentId={comment.id}
+            onDeleteSubmit={handleDeleteSubmit}
+            onEditSubmit={handleEditSubmit}
+          />
+        ))}
+      <FreeboardCommentInput onCommentSubmit={handleCommentSubmit} />
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+.freeboardDetail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  background-color: var(--background-default);
+  color: var(--text-color);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+}
+
+.headerInside {
+  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;
+  margin: 0;
+}
+
+.author {
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+
+.content {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+  margin: 0;
+  white-space: pre-line;
+}
+
+.icon {
+  stroke: var(--text-color);
+}
+
+.editButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 700;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.deleteButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid var(--error-color);
+  background-color: var(--error-color);
+  color: var(--on-primary);
+  stroke: var(--error-color);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  align-self: end;
+  border-radius: 8px;
+  cursor: pointer;
+}

frontend/src/components/Article/index.js

@@ -6,3 +6,4 @@ 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';
+export { default as FreeboardDetail } from './FreeboardDetail/FreeboardDetail.jsx';

frontend/src/hooks/api/useCommentDelete.js

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

frontend/src/hooks/api/useCommentEdit.js

@@ -0,0 +1,13 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useCommentEdit() {
+  const commentEdit = (commentId, content) => {
+    const newComment = {
+      content: content,
+    };
+    return instance.put(`${API_URL}/board/comment/${commentId}`, newComment);
+  };
+
+  return { commentEdit };
+}

frontend/src/hooks/api/useCommentWrite.js

@@ -0,0 +1,13 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useCommentWrite() {
+  const commentWrite = (freeboardId, content) => {
+    const newComment = {
+      content: content,
+    };
+    return instance.post(`${API_URL}/board/comment/${freeboardId}`, newComment);
+  };
+
+  return { commentWrite };
+}

frontend/src/hooks/api/useComments.js

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

frontend/src/pages/CreateFreeboardPage/CreateFreeboardPage.jsx

@@ -16,7 +16,7 @@ export default function CreateFreeboardPage() {
   return (
     <CreateArticle
       topic="질문하기"
-      title="Q&A"
+      title="자유게시판"
       onSubmit={handleSubmit}
     />
   );

frontend/src/pages/EditFreeboardPage/EditFreeboardPage.jsx

@@ -8,10 +8,10 @@ export default function EditQuestionPage() {
   const { freeboardEdit } = useFreeboardEdit();
   const location = useLocation();
 
-  const handleSubmit = async (e, title, content, answer) => {
+  const handleSubmit = async (e, title, content) => {
     e.preventDefault();
 
-    await freeboardEdit(freeboardId, title, content, answer);
+    await freeboardEdit(freeboardId, title, content);
     navigate('..');
   };
   return (
@@ -20,7 +20,6 @@ export default function EditQuestionPage() {
       title="자유게시판"
       prevTitle={location.state.title}
       prevContent={location.state.content}
-      prevAnswer={location.state.answer}
       onSubmit={handleSubmit}
     />
   );

frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx

@@ -1,4 +1,4 @@
-import { ArticleDetail } from '../../components/Article';
+import { FreeboardDetail } from '../../components/Article';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useFreeboardDetail } from '../../hooks/api/useFreeboardDetail';
 import { useFreeboardDelete } from '../../hooks/api/useFreeboardDelete';
@@ -15,11 +15,11 @@ export default function FreeboardDetailPage() {
     await freeboardDelete(freeboardId);
     navigate('..');
   };
-
   return (
-    <ArticleDetail
+    <FreeboardDetail
       topic="자유게시판"
       title={freeboard.title}
+      author={freeboard.name}
       content={freeboard.content}
       onDelete={handleDelete}
     />

frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx

@@ -7,7 +7,7 @@ export default function NoticeListPage() {
   const { lectureId } = useParams();
   const { data } = useFreeboards(lectureId);
   const notices = data?.data;
-
+  console.log(notices);
   return (
     <ArticleBoard
       title="자유게시판"