Merge branch 'frontend' into fe/improveUX

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 PasswordResetAuthPage = lazy(async () => await import('./pages/PasswordResetAuthPage'));
 
 const router = createBrowserRouter([
@@ -60,10 +64,6 @@ const router = createBrowserRouter([
         path: 'lecture/:lectureId/info',
         element: <LectureInfoPage />,
       },
-      {
-        path: 'lecture/:lectureId/edit',
-        element: <LectureEditPage />,
-      },
       {
         path: 'lecture/:lectureId',
         element: <LectureLayout />,
@@ -123,12 +123,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/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

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

frontend/src/components/Layout/LectureLayout.jsx

@@ -17,6 +17,7 @@ export default function LectureLayout() {
   const { lectureDelete } = useLectureDelete();
   const { data } = useLectureInfo(lectureId);
   const lecture = data?.data;
+  console.log(lecture);
   const userType = useBoundStore((state) => state.userType);
   const handleDelete = () => {
     confirm('강의를 삭제할까요??') &&
@@ -39,8 +40,7 @@ export default function LectureLayout() {
         title={lecture.title}
         tutor={lecture.teacherName}
         img={lecture.image}
-        // TODO: isLive를 받아올 수단 추가
+        isLive={lecture.online}
-        isLive={true}
       />
       <MaxWidthLayout hasSideBar>
         <aside>
@@ -53,7 +53,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/useAuth.js

@@ -26,7 +26,7 @@ export function useAuth() {
     });
   };
 
-  const userRegister = (role, userId, name, email, password, onError = () => {}) => {
+  const userRegister = (role, userId, name, email, password) => {
     const userData = {
       role,
       userId,
@@ -34,9 +34,7 @@ export function useAuth() {
       email,
       password,
     };
-    return instance.post(`${API_URL}/user/join`, userData).catch((e) => {
+    return instance.post(`${API_URL}/user/join`, userData);
-      onError(e);
-    });
   };
 
   const logout = () => {

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/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="자유게시판"
+      onSubmit={handleSubmit}
+    />
+  );
+}

frontend/src/pages/CreateFreeboardPage/index.js

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

frontend/src/pages/EditFreeboardPage/EditFreeboardPage.jsx

@@ -0,0 +1,26 @@
+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) => {
+    e.preventDefault();
+
+    await freeboardEdit(freeboardId, title, content);
+    navigate('..');
+  };
+  return (
+    <EditFreeboard
+      topic="글쓰기"
+      title="자유게시판"
+      prevTitle={location.state.title}
+      prevContent={location.state.content}
+      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 { FreeboardDetail } 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 (
+    <FreeboardDetail
+      topic="자유게시판"
+      title={freeboard.title}
+      author={freeboard.name}
+      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;
+  console.log(notices);
+  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';

frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx

@@ -15,13 +15,16 @@ export default function UserRegisterPage() {
 
   const [userType, setUserType] = useState('STUDENT');
   const [passwordMatch, setPasswordMatch] = useState(true);
+  const [existingId, setExistingId] = useState(false);
+  const [existingEmail, setExistingEmail] = useState(false);
 
   const { userRegister } = useAuth();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     const isPWMatch = passwordRef.current.value === passwordConfirmRef.current.value;
-
+    setExistingId(false);
+    setExistingEmail(false);
     setPasswordMatch(isPWMatch);
     if (!isPWMatch) {
       return;
@@ -32,10 +35,18 @@ export default function UserRegisterPage() {
       nameRef.current.value,
       emailRef.current.value,
       passwordRef.current.value
-    ).then((response) => {
+    )
-      console.log(response);
+      .then(() => {
-      navigate('../login');
+        navigate('../login');
-    });
+      })
+      .catch((err) => {
+        if (err.response.data === '아이디가 중복 됐습니다.') {
+          setExistingId(true);
+        }
+        if (err.response.data === '이메일이 중복 됐습니다.') {
+          setExistingEmail(true);
+        }
+      });
   };
 
   const linkProps = {
@@ -73,7 +84,12 @@ export default function UserRegisterPage() {
           type="text"
           id="ID"
           ref={idRef}
-        />
+          hasError={existingId}
+        >
+          {existingId && (
+            <div className={`${styles.textBodyStrong} ${styles.dangerColor}`}>이미 존재하는 아이디입니다</div>
+          )}
+        </InputBox>
         <InputBox
           title="이름"
           type="text"
@@ -85,7 +101,12 @@ export default function UserRegisterPage() {
           type="email"
           id="email"
           ref={emailRef}
-        />
+          hasError={existingEmail}
+        >
+          {existingEmail && (
+            <div className={`${styles.textBodyStrong} ${styles.dangerColor}`}>이미 등록된 이메일입니다</div>
+          )}
+        </InputBox>
         <InputBox
           title="비밀번호"
           type="password"