diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b959b7e1..15624fe8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -41,6 +41,7 @@ function App() {
           <Route path="/board" element={<Board />} />
           <Route path="/board/:team" element={<Board />} />
           <Route path="/board/:team/:postId" element={<PostDetail />} />
+          <Route path="/board/:team/post/:postId" element={<PostDetail />} />
           <Route path="/quant-bot" element={<QuantTradingDashboard />} />
           <Route path="/stock-game" element={<StockGame />} />
           <Route path="/back-test" element={<BackTest />} />
diff --git a/frontend/src/components/Board/BoardActions.module.css b/frontend/src/components/Board/BoardActions.module.css
index 5296ab57..051d799d 100644
--- a/frontend/src/components/Board/BoardActions.module.css
+++ b/frontend/src/components/Board/BoardActions.module.css
@@ -21,8 +21,8 @@
 }
 
 .boardActions {
-  width: 908px;
-  max-width: calc(100% - 20px);
+  width: 100%;
+  max-width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
diff --git a/frontend/src/components/Board/CategoryTabs.jsx b/frontend/src/components/Board/CategoryTabs.jsx
new file mode 100644
index 00000000..0a6aa347
--- /dev/null
+++ b/frontend/src/components/Board/CategoryTabs.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styles from './CategoryTabs.module.css';
+
+const CategoryTabs = ({ activeTab, onTabChange, tabs, onCreateSubBoard }) => {
+  return (
+    <div className={styles.categoryTabsRow}>
+      <div className={styles.tabsLeft}>
+        {tabs?.map((tab) => (
+          <button
+            key={tab.id}
+            className={`${styles.tab} ${activeTab === tab.id ? styles.active : ''}`}
+            onClick={() => onTabChange(tab.id)}
+          >
+            {tab.name}
+          </button>
+        ))}
+      </div>
+
+      <button className={styles.subBoardButton} onClick={onCreateSubBoard}>
+        하위 게시판 추가 +
+      </button>
+    </div>
+  );
+};
+
+export default CategoryTabs;
diff --git a/frontend/src/components/Board/CategoryTabs.module.css b/frontend/src/components/Board/CategoryTabs.module.css
new file mode 100644
index 00000000..5c579b99
--- /dev/null
+++ b/frontend/src/components/Board/CategoryTabs.module.css
@@ -0,0 +1,72 @@
+.categoryTabsRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 30px 0 20px 0;
+  width: 100%;
+}
+
+.tabsLeft {
+  display: flex;
+  gap: 10px;
+}
+
+.tab {
+  height: 43px;
+  padding: 12px 20px;
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 8px;
+
+  /* 폰트 스타일 */
+  font-size: 16px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 100%;
+  letter-spacing: 0;
+  color: rgba(23, 23, 23, 1);
+
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab:hover {
+  background: #f5f5f5;
+  border-color: #a8a8a8;
+}
+
+.tab.active {
+  background: rgba(238, 249, 255, 1);
+  border: 1px solid transparent;
+  color: rgba(29, 128, 244, 1);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0;
+}
+
+/* 하위 게시판 추가 버튼 */
+.subBoardButton {
+  height: 43px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid #d4d4d4;
+  background: #ffffff;
+
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(23, 23, 23, 1);
+
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.subBoardButton:hover {
+  background: #f5f5f5;
+  border-color: #a8a8a8;
+}
diff --git a/frontend/src/components/Board/CreateSubBoardModal.jsx b/frontend/src/components/Board/CreateSubBoardModal.jsx
new file mode 100644
index 00000000..7571637a
--- /dev/null
+++ b/frontend/src/components/Board/CreateSubBoardModal.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './CreateSubBoardModal.module.css';
+
+const CreateSubBoardModal = ({ value, onChange, onSave, onClose }) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave();
+  };
+
+  return (
+    <div className={styles.modalOverlay} onClick={onClose}>
+      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+        <h2 className={styles.modalTitle}>하위 게시판 생성</h2>
+
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="하위 게시판 이름을 입력하세요"
+            className={styles.input}
+            autoFocus
+          />
+
+          <div className={styles.buttonGroup}>
+            <button
+              type="button"
+              onClick={onClose}
+              className={styles.cancelButton}
+            >
+              취소
+            </button>
+            <button type="submit" className={styles.saveButton}>
+              생성
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreateSubBoardModal;
diff --git a/frontend/src/components/Board/CreateSubBoardModal.module.css b/frontend/src/components/Board/CreateSubBoardModal.module.css
new file mode 100644
index 00000000..bfe01a77
--- /dev/null
+++ b/frontend/src/components/Board/CreateSubBoardModal.module.css
@@ -0,0 +1,79 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modalTitle {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  color: #171717;
+}
+
+.input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 16px;
+  border: 1px solid #d4d4d4;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #4a90e2;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.cancelButton,
+.saveButton {
+  padding: 10px 24px;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancelButton {
+  background: #f5f5f5;
+  border: 1px solid #d4d4d4;
+  color: #171717;
+}
+
+.cancelButton:hover {
+  background: #e5e5e5;
+}
+
+.saveButton {
+  background: #4a90e2;
+  border: none;
+  color: white;
+}
+
+.saveButton:hover {
+  background: #3a80d2;
+}
diff --git a/frontend/src/components/Board/Modal.module.css b/frontend/src/components/Board/Modal.module.css
index 447bc5c2..af017752 100644
--- a/frontend/src/components/Board/Modal.module.css
+++ b/frontend/src/components/Board/Modal.module.css
@@ -34,7 +34,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  overflow: hidden; /* ✨ auto → hidden으로 변경 (모서리 유지) */
+  overflow: hidden;
 }
 
 .header {
@@ -43,7 +43,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-md);
-  flex-shrink: 0; /* ✨ 헤더 고정 */
+  flex-shrink: 0;
 }
 
 .title {
@@ -70,14 +70,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  flex: 1; /* ✨ 0 1 auto → 1로 변경 (남은 공간 차지) */
+  flex: 1;
   margin-bottom: var(--spacing-sm);
-  overflow-y: auto; /* ✨ 스크롤 추가 */
+  overflow-y: auto;
   overflow-x: hidden;
-  padding-right: 8px; /* ✨ 스크롤바 공간 */
+  padding-right: 8px;
 }
 
-/* ✨ 스크롤바 스타일 추가 */
 .form::-webkit-scrollbar {
   width: 6px;
 }
@@ -168,7 +167,6 @@
   flex-shrink: 0;
 }
 
-/* 파일 목록 */
 .fileList {
   margin-top: 12px;
 }
@@ -187,7 +185,7 @@
   font-size: 14px;
   color: #333;
   flex: 1;
-  word-break: break-all; /* ✨ 긴 파일명 줄바꿈 */
+  word-break: break-all;
 }
 
 .removeFileButton {
@@ -198,7 +196,7 @@
   cursor: pointer;
   padding: 0 8px;
   transition: color 0.2s;
-  flex-shrink: 0; /* ✨ 버튼 크기 고정 */
+  flex-shrink: 0;
 }
 
 .removeFileButton:hover {
@@ -319,7 +317,7 @@
   background: rgba(29, 128, 244, 1);
   color: rgba(255, 255, 255, 1);
   align-self: flex-end;
-  flex-shrink: 0; /* ✨ 버튼 고정 */
+  flex-shrink: 0;
   transition: all 0.2s;
 }
 
diff --git a/frontend/src/components/Board/PostDetail/CommentSection.jsx b/frontend/src/components/Board/PostDetail/CommentSection.jsx
new file mode 100644
index 00000000..faf03e2a
--- /dev/null
+++ b/frontend/src/components/Board/PostDetail/CommentSection.jsx
@@ -0,0 +1,230 @@
+import React, { useState } from 'react';
+import styles from '../../../pages/PostDetail.module.css';
+import ProfileIcon from '../../../assets/board_profile.svg';
+import EditIcon from '../../../assets/boardPencil.svg';
+import DeleteIcon from '../../../assets/boardCloseIcon.svg';
+import BookmarkIcon from '../../../assets/boardBookMark.svg';
+import BookmarkFilledIcon from '../../../assets/boardBookMark.fill.svg';
+import HeartIcon from '../../../assets/boardHeart.svg';
+import HeartFilledIcon from '../../../assets/boardHeart.fill.svg';
+import { getTimeAgo } from '../../../utils/TimeUtils';
+const CommentItem = ({
+  comment,
+  onReplyClick,
+  onUpdateComment,
+  onDeleteComment,
+  isReplying,
+  onSubmitReply,
+  showCommentMenu,
+  setShowCommentMenu,
+  replyTargetId,
+  depth = 0,
+}) => {
+  const commentId = comment.commentId || comment.id;
+  const author =
+    comment.author || comment.user?.name || comment.createdBy?.name || '사용자';
+  const text = comment.text || comment.content;
+  const date = comment.createdDate || comment.createdAt || comment.date;
+
+  const [localReplyText, setLocalReplyText] = useState('');
+
+  React.useEffect(() => {
+    if (!isReplying) setLocalReplyText('');
+  }, [isReplying]);
+
+  const handleLocalSubmit = () => {
+    onSubmitReply(commentId, localReplyText);
+  };
+
+  return (
+    <div className={styles.commentItemWrapper}>
+      <div className={styles.commentCard}>
+        <div className={styles.commentHeader}>
+          <div className={styles.commentMeta}>
+            <img
+              src={ProfileIcon}
+              className={styles.profileIcon}
+              alt="프로필"
+            />
+            <p className={styles.commentAuthor}>{author}</p>
+          </div>
+          <p className={styles.commentDate}>{getTimeAgo(date)}</p>
+
+          <div className={styles.menuContainer}>
+            <button
+              className={styles.menuButton}
+              onClick={() => setShowCommentMenu(commentId)}
+              aria-label="댓글 메뉴"
+            >
+              ⋮
+            </button>
+            {showCommentMenu === commentId && (
+              <div className={styles.menuDropdown}>
+                <button onClick={() => onUpdateComment(commentId)}>
+                  <img src={EditIcon} className={styles.EditIcon} alt="수정" />{' '}
+                  수정하기
+                </button>
+                <button onClick={() => onDeleteComment(commentId)}>
+                  <img
+                    src={DeleteIcon}
+                    className={styles.DeleteIcon}
+                    alt="삭제"
+                  />{' '}
+                  삭제하기
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <p className={styles.commentText}>{text}</p>
+
+        {depth === 0 && (
+          <button
+            className={styles.replyButton}
+            onClick={() => onReplyClick(commentId)}
+          >
+            답글 달기
+          </button>
+        )}
+      </div>
+
+      {depth === 0 && isReplying && (
+        <div className={styles.replyInputWrapper}>
+          <textarea
+            className={styles.replyTextarea}
+            placeholder="대댓글을 입력하세요."
+            value={localReplyText}
+            onChange={(e) => setLocalReplyText(e.target.value)}
+          />
+          <button
+            type="button"
+            className={styles.replySubmitButton}
+            onClick={handleLocalSubmit}
+            disabled={!localReplyText.trim()}
+          >
+            대댓글 등록
+          </button>
+        </div>
+      )}
+
+      {comment.replies && comment.replies.length > 0 && (
+        <div className={styles.replyList}>
+          {comment.replies.map((child) => (
+            <CommentItem
+              key={child.commentId || child.id}
+              comment={child}
+              onReplyClick={onReplyClick}
+              onUpdateComment={onUpdateComment}
+              onDeleteComment={onDeleteComment}
+              isReplying={replyTargetId === (child.commentId || child.id)}
+              onSubmitReply={onSubmitReply}
+              showCommentMenu={showCommentMenu}
+              setShowCommentMenu={setShowCommentMenu}
+              replyTargetId={replyTargetId}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CommentSection = ({
+  post,
+  comments,
+  onLike,
+  onBookmark,
+  onAddComment,
+  onUpdateComment,
+  onDeleteComment,
+  onReplyClick,
+  onSubmitReply,
+  replyTargetId,
+  showCommentMenu,
+  setShowCommentMenu,
+}) => {
+  const [commentText, setCommentText] = useState('');
+
+  const handleAdd = () => {
+    onAddComment(commentText);
+    setCommentText('');
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && e.ctrlKey) handleAdd();
+  };
+
+  return (
+    <div className={styles.commentsSection}>
+      <div className={styles.commentsHeaderWrapper}>
+        <div className={styles.actions}>
+          <button className={styles.actionButton} onClick={onBookmark}>
+            <img
+              src={post.isBookmarked ? BookmarkFilledIcon : BookmarkIcon}
+              alt="북마크"
+            />
+            {post.bookmarkCount > 0 && (
+              <span className={styles.count}>{post.bookmarkCount}</span>
+            )}
+          </button>
+          <button className={styles.actionButton} onClick={onLike}>
+            <img
+              src={post.isLiked ? HeartFilledIcon : HeartIcon}
+              alt="좋아요"
+            />
+            {post.likeCount > 0 && (
+              <span className={styles.count}>{post.likeCount}</span>
+            )}
+          </button>
+        </div>
+        <div className={styles.commentsHeader}>
+          <p className={styles.commentCount}>
+            댓글 <span>{comments.length}</span>
+          </p>
+        </div>
+      </div>
+
+      <div className={styles.commentInput}>
+        <textarea
+          className={styles.textarea}
+          placeholder="댓글을 입력해주세요..."
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <button
+        className={styles.submitButton}
+        onClick={handleAdd}
+        disabled={!commentText.trim()}
+      >
+        댓글 남기기
+      </button>
+
+      <div className={styles.commentsList}>
+        {comments.length > 0 ? (
+          comments.map((comment) => (
+            <CommentItem
+              key={comment.commentId || comment.id}
+              comment={comment}
+              onReplyClick={onReplyClick}
+              onUpdateComment={onUpdateComment}
+              onDeleteComment={onDeleteComment}
+              isReplying={replyTargetId === (comment.commentId || comment.id)}
+              onSubmitReply={onSubmitReply}
+              showCommentMenu={showCommentMenu}
+              setShowCommentMenu={setShowCommentMenu}
+              replyTargetId={replyTargetId}
+            />
+          ))
+        ) : (
+          <p className={styles.noComments}>댓글이 없습니다.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommentSection;
diff --git a/frontend/src/components/Board/PostDetail/FileAttachmentList.jsx b/frontend/src/components/Board/PostDetail/FileAttachmentList.jsx
new file mode 100644
index 00000000..9ee7c296
--- /dev/null
+++ b/frontend/src/components/Board/PostDetail/FileAttachmentList.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import styles from '../../../pages/PostDetail.module.css';
+import FolderIcon from '../../../assets/boardFolder.svg';
+
+const FileAttachmentList = ({
+  files,
+  isEditMode = false,
+  isNew = false,
+  onRemove,
+  onDownload,
+}) => {
+  if (!files || files.length === 0) return null;
+
+  return (
+    <div className={styles.attachmentList}>
+      {files.map((file, index) => {
+        const key = file.postAttachmentId || `new-${index}`;
+        const fileName = file.originalFilename || file.name;
+        const fileSize = file.size
+          ? `(${(file.size / 1024).toFixed(1)} KB)`
+          : '';
+
+        return (
+          <div key={key} className={styles.attachmentItem}>
+            <img
+              src={FolderIcon}
+              alt="파일"
+              className={`${styles.attachmentIcon} ${!isEditMode ? styles.attachmentIconButton : ''}`}
+              onClick={() => !isEditMode && onDownload && onDownload(file)}
+            />
+            <span className={styles.attachmentName}>
+              {fileName}{' '}
+              {isNew && <span className={styles.newBadge}>새파일</span>}
+            </span>
+            {fileSize && (
+              <span className={styles.attachmentSize}>{fileSize}</span>
+            )}
+
+            {isEditMode && onRemove && (
+              <button
+                type="button"
+                className={styles.removeFileButton}
+                onClick={() => onRemove(isNew ? index : file.postAttachmentId)}
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FileAttachmentList;
diff --git a/frontend/src/components/Board/PostDetail/PostEditForm.jsx b/frontend/src/components/Board/PostDetail/PostEditForm.jsx
new file mode 100644
index 00000000..3ff7821a
--- /dev/null
+++ b/frontend/src/components/Board/PostDetail/PostEditForm.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import styles from '../../../pages/PostDetail.module.css';
+import FileAttachmentList from './FileAttachmentList';
+
+const PostEditForm = ({
+  title,
+  setTitle,
+  content,
+  setContent,
+  editFiles,
+  newFiles,
+  onRemoveExistingFile,
+  onRemoveNewFile,
+  onAddNewFile,
+  onSave,
+  onCancel,
+}) => {
+  return (
+    <div className={styles.editFormContainer}>
+      {/* 제목 */}
+      <input
+        type="text"
+        className={styles.editTitleInput}
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder="제목을 입력하세요"
+      />
+
+      {/* 구분선 */}
+      <div className={styles.editDivider} />
+
+      {/* 내용 */}
+      <textarea
+        className={styles.editContentTextarea}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder="내용을 입력하세요"
+      />
+
+      {/* 파일 영역 */}
+      <div className={styles.editFileSection}>
+        <h4 className={styles.attachmentTitle}>첨부파일 관리</h4>
+
+        {/* 기존 파일 */}
+        <FileAttachmentList
+          files={editFiles}
+          isEditMode={true}
+          onRemove={onRemoveExistingFile}
+        />
+
+        {/* 새 파일 */}
+        <FileAttachmentList
+          files={newFiles}
+          isEditMode={true}
+          isNew={true}
+          onRemove={onRemoveNewFile}
+        />
+
+        {/* 파일 추가 버튼 */}
+        <div className={styles.fileAddSection}>
+          <input
+            type="file"
+            multiple
+            onChange={onAddNewFile}
+            style={{ display: 'none' }}
+            id="file-upload"
+          />
+          <label
+            htmlFor="file-upload"
+            className={styles.addFileButton}
+            style={{ display: 'block', textAlign: 'center' }}
+          >
+            + 파일 추가하기
+          </label>
+        </div>
+      </div>
+
+      {/* 버튼 */}
+      <div className={styles.editButtons}>
+        <button onClick={onSave} className={styles.saveButton}>
+          저장
+        </button>
+        <button onClick={onCancel} className={styles.cancelButton}>
+          취소
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PostEditForm;
diff --git a/frontend/src/components/Board/PostDetail/PostView.jsx b/frontend/src/components/Board/PostDetail/PostView.jsx
new file mode 100644
index 00000000..2f68f1fe
--- /dev/null
+++ b/frontend/src/components/Board/PostDetail/PostView.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from '../../../pages/PostDetail.module.css';
+import ProfileIcon from '../../../assets/board_profile.svg';
+import EditIcon from '../../../assets/boardPencil.svg';
+import DeleteIcon from '../../../assets/boardCloseIcon.svg';
+import { getTimeAgo } from '../../../utils/TimeUtils';
+import FileAttachmentList from './FileAttachmentList';
+
+const PostView = ({
+  post,
+  showMenu,
+  setShowMenu,
+  onEdit,
+  onDelete,
+  onDownload,
+}) => {
+  const authorName =
+    post.author || post.user?.name || post.createdBy?.name || '운영진';
+  const date = post.createdDate || post.createdAt || post.date;
+
+  // 데이터 유효성 검사
+  const hasAttachments = post.attachments && post.attachments.length > 0;
+
+  return (
+    <>
+      <div className={styles.titleWrapper}>
+        <h1 className={styles.title}>{post.title}</h1>
+        <div className={styles.menuContainer}>
+          <button
+            className={styles.menuButton}
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            ⋮
+          </button>
+          {showMenu && (
+            <div className={styles.menuDropdown}>
+              <button onClick={onEdit}>
+                <img src={EditIcon} className={styles.EditIcon} alt="수정" />
+                수정하기
+              </button>
+              <button onClick={onDelete}>
+                <img
+                  src={DeleteIcon}
+                  className={styles.DeleteIcon}
+                  alt="삭제"
+                />
+                삭제하기
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.divider} />
+
+      <div className={styles.meta}>
+        <img src={ProfileIcon} className={styles.profileIcon} alt="프로필" />
+        <div className={styles.metaInfo}>
+          <p className={styles.author}>{authorName}</p>
+          <p className={styles.date}>{getTimeAgo(date)}</p>
+        </div>
+      </div>
+
+      <div className={styles.content}>{post.content}</div>
+
+      {hasAttachments && (
+        <div className={styles.attachments}>
+          <h3 className={styles.attachmentTitle}>
+            첨부 파일 ({post.attachments.length})
+          </h3>
+          <FileAttachmentList
+            files={post.attachments}
+            onDownload={onDownload}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PostView;
diff --git a/frontend/src/components/Board/PostItem.jsx b/frontend/src/components/Board/PostItem.jsx
index d94eaf51..188c243b 100644
--- a/frontend/src/components/Board/PostItem.jsx
+++ b/frontend/src/components/Board/PostItem.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import styles from './PostItem.module.css';
 import ProfileIcon from '../../assets/board_profile.svg';
 import BookmarkIcon from '../../assets/boardBookMark.svg';
@@ -8,16 +8,64 @@ import HeartIcon from '../../assets/boardHeart.svg';
 import HeartFilledIcon from '../../assets/boardHeart.fill.svg';
 import { getTimeAgo } from '../../utils/TimeUtils';
 
-const PostItem = React.memo(({ post, onLike, onBookmark, currentTeam }) => {
+const PostItem = ({ post, onLike, onBookmark }) => {
   const navigate = useNavigate();
+  const { team } = useParams();
+
+  const postId = post.postId || post.id;
 
   const handleCardClick = () => {
-    const team = currentTeam || 'all';
-    navigate(`/board/${team}/${post.id}`, { state: { post } });
+    if (!postId) {
+      console.error('게시글 ID를 찾을 수 없습니다:', post);
+      alert('게시글 ID를 찾을 수 없습니다.');
+      return;
+    }
+
+    const nameToPath = {
+      증권1팀: 'securities-1',
+      증권2팀: 'securities-2',
+      증권3팀: 'securities-3',
+      자산운용: 'asset-management',
+      금융IT: 'finance-it',
+      매크로: 'macro',
+      트레이딩: 'trading',
+    };
+
+    const boardName = post.boardName || post.board?.boardName;
+    const teamPath = nameToPath[boardName] || team;
+
+    if (!teamPath) {
+      alert('게시판 정보를 찾을 수 없습니다.');
+      return;
+    }
+
+    const path = `/board/${teamPath}/post/${postId}`;
+
+    navigate(path, { state: { post } });
+  };
+
+  const handleBookmarkClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!postId) {
+      console.error('북마크 실패: 게시글 ID 없음');
+      return;
+    }
+
+    onBookmark(postId);
   };
 
-  const handleActionClick = (e) => {
+  const handleLikeClick = (e) => {
     e.stopPropagation();
+    e.preventDefault();
+
+    if (!postId) {
+      console.error('좋아요 실패: 게시글 ID 없음');
+      return;
+    }
+
+    onLike(postId);
   };
 
   return (
@@ -38,10 +86,10 @@ const PostItem = React.memo(({ post, onLike, onBookmark, currentTeam }) => {
           <div className={styles.content}>{post.content}</div>
         </div>
 
-        <div className={styles.actions} onClick={handleActionClick}>
+        <div className={styles.actions}>
           <button
             className={styles.actionButton}
-            onClick={() => onBookmark(post.id)}
+            onClick={handleBookmarkClick}
             aria-label="북마크"
           >
             <img
@@ -52,7 +100,7 @@ const PostItem = React.memo(({ post, onLike, onBookmark, currentTeam }) => {
           </button>
           <button
             className={styles.actionButton}
-            onClick={() => onLike(post.id)}
+            onClick={handleLikeClick}
             aria-label="좋아요"
           >
             <img
@@ -67,6 +115,8 @@ const PostItem = React.memo(({ post, onLike, onBookmark, currentTeam }) => {
       </div>
     </div>
   );
-});
+};
+
+PostItem.displayName = 'PostItem';
 
-export default PostItem;
+export default React.memo(PostItem);
diff --git a/frontend/src/components/Board/SearchBar.jsx b/frontend/src/components/Board/SearchBar.jsx
index d178ccc1..6496bb28 100644
--- a/frontend/src/components/Board/SearchBar.jsx
+++ b/frontend/src/components/Board/SearchBar.jsx
@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './SearchBar.module.css';
 import SearchArrowIcon from '../../assets/boardSearchArrow.svg';
 
-const SearchBar = ({ searchTerm, onSearchChange }) => {
+const SearchBar = ({ onSearch }) => {
+  const [inputValue, setInputValue] = useState('');
+
   const handleSearch = () => {
-    if (searchTerm.trim()) {
-      console.log('검색어:', searchTerm);
+    if (inputValue.trim()) {
+      onSearch(inputValue);
     }
   };
 
-  const handleKeyPress = (e) => {
+  const handleKeyDown = (e) => {
     if (e.key === 'Enter') {
       handleSearch();
     }
@@ -20,18 +22,13 @@ const SearchBar = ({ searchTerm, onSearchChange }) => {
       <input
         type="text"
         placeholder="검색어를 입력하세요"
-        value={searchTerm}
-        onChange={(e) => onSearchChange(e.target.value)}
-        onKeyPress={handleKeyPress}
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
         className={styles.searchInput}
-        aria-label="검색"
       />
-      <button
-        onClick={handleSearch}
-        className={styles.searchButton}
-        aria-label="검색 버튼"
-      >
-        <img src={SearchArrowIcon} alt="" />
+      <button onClick={handleSearch} className={styles.searchButton}>
+        <img src={SearchArrowIcon} alt="검색" />
       </button>
     </div>
   );
diff --git a/frontend/src/components/Board/SearchBar.module.css b/frontend/src/components/Board/SearchBar.module.css
index 996f8ed1..24804e67 100644
--- a/frontend/src/components/Board/SearchBar.module.css
+++ b/frontend/src/components/Board/SearchBar.module.css
@@ -1,5 +1,5 @@
 :root {
-  --search-width: 908px;
+  --search-width: 100%;
   --search-height: 68px;
   --search-radius: 50px;
   --search-padding: 24px 16px 24px 26px;
diff --git a/frontend/src/pages/Board.jsx b/frontend/src/pages/Board.jsx
index b113c7c6..c2b34ccc 100644
--- a/frontend/src/pages/Board.jsx
+++ b/frontend/src/pages/Board.jsx
@@ -1,37 +1,236 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useParams } from 'react-router-dom';
 import PostItem from '../components/Board/PostItem';
 import Modal from '../components/Board/Modal';
 import SearchBar from '../components/Board/SearchBar';
 import BoardActions from '../components/Board/BoardActions';
+import CategoryTabs from '../components/Board/CategoryTabs';
+import CreateSubBoardModal from '../components/Board/CreateSubBoardModal';
 import styles from './Board.module.css';
-import { useParams } from 'react-router-dom';
+import * as boardApi from '../utils/boardApi';
 
 const Board = () => {
   const { team } = useParams();
 
-  const [posts, setPosts] = useState(() => {
-    const saved = localStorage.getItem('boardPosts');
-    if (saved) {
-      const parsed = JSON.parse(saved);
-      return parsed.map((post) => ({
-        ...post,
-        date: new Date(post.date),
-      }));
-    }
-    return [];
-  });
+  const [boardIdMap, setBoardIdMap] = useState({});
+  const [boardNameMap, setBoardNameMap] = useState({});
+  const [posts, setPosts] = useState([]);
 
-  const [searchTerm, setSearchTerm] = useState('');
   const [showModal, setShowModal] = useState(false);
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
-  const [sortOption, setSortOption] = useState('latest');
   const [selectedFiles, setSelectedFiles] = useState([]);
+  const [sortOption, setSortOption] = useState('latest');
+  const [loading, setLoading] = useState(false);
+  const [boardsLoaded, setBoardsLoaded] = useState(false);
+  const [activeSubBoard, setActiveSubBoard] = useState('all');
+  const [showSubBoardModal, setShowSubBoardModal] = useState(false);
+  const [subBoardName, setSubBoardName] = useState('');
+  const [subBoardTabs, setSubBoardTabs] = useState([]);
+
+  // 페이지네이션 state
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 4;
+
+  const prevPostsRef = useRef(posts);
+
+  const currentPath = team ? `/board/${team}` : '/board';
+  const currentBoardId = boardIdMap[currentPath];
+  const currentBoardName = boardNameMap[currentPath];
 
   useEffect(() => {
-    localStorage.setItem('boardPosts', JSON.stringify(posts));
+    prevPostsRef.current = posts;
   }, [posts]);
 
+  useEffect(() => {
+    loadBoardList();
+  }, []);
+
+  const loadBoardList = async () => {
+    try {
+      const boards = await boardApi.getParentBoards();
+
+      if (!boards || boards.length === 0) {
+        console.warn('게시판이 없습니다.');
+        alert('등록된 게시판이 없습니다.');
+        setBoardsLoaded(true);
+        return;
+      }
+
+      const idMap = {};
+      const nameMap = {};
+
+      const nameToPath = {
+        증권1팀: 'securities-1',
+        증권2팀: 'securities-2',
+        증권3팀: 'securities-3',
+        자산운용: 'asset-management',
+        금융IT: 'finance-it',
+        매크로: 'macro',
+        트레이딩: 'trading',
+      };
+
+      boards.forEach((board) => {
+        const boardName = board.boardName;
+        const path =
+          boardName === '전체' ? '/board' : `/board/${nameToPath[boardName]}`;
+
+        if (path) {
+          idMap[path] = board.boardId;
+          nameMap[path] = boardName;
+        }
+      });
+
+      setBoardIdMap(idMap);
+      setBoardNameMap(nameMap);
+      setBoardsLoaded(true);
+    } catch (error) {
+      console.error('게시판 목록 불러오기 실패:', error);
+      setBoardsLoaded(true);
+    }
+  };
+
+  const fetchPosts = useCallback(async () => {
+    if (!currentBoardId) return;
+
+    try {
+      setLoading(true);
+
+      if (Array.isArray(currentBoardId)) {
+        const allPostsPromises = currentBoardId.map((id) =>
+          boardApi.getPosts(id).catch((err) => {
+            console.error(`게시판 ${id} 조회 실패:`, err);
+            return { content: [] };
+          })
+        );
+
+        const allPostsArrays = await Promise.all(allPostsPromises);
+        const allPosts = allPostsArrays.flatMap(
+          (response) => response.content || []
+        );
+
+        setPosts(allPosts);
+      } else {
+        const response = await boardApi.getPosts(currentBoardId);
+        const postsData = response.content || [];
+        setPosts(Array.isArray(postsData) ? postsData : []);
+      }
+
+      // 게시글 로드 후 페이지를 1로 리셋
+      setCurrentPage(1);
+    } catch (error) {
+      console.error('게시글 불러오기 실패:', error);
+      setPosts([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [currentBoardId]);
+
+  const handleSearch = useCallback(
+    async (keyword) => {
+      if (!currentBoardId) return;
+
+      if (!keyword || !keyword.trim()) {
+        fetchPosts();
+        return;
+      }
+
+      try {
+        setLoading(true);
+
+        if (Array.isArray(currentBoardId)) {
+          const allPostsPromises = currentBoardId.map((id) =>
+            boardApi.searchPosts(id, keyword).catch(() => ({ content: [] }))
+          );
+
+          const allPostsArrays = await Promise.all(allPostsPromises);
+          const allPosts = allPostsArrays.flatMap(
+            (response) => response.content || []
+          );
+
+          setPosts(allPosts);
+        } else {
+          const response = await boardApi.searchPosts(currentBoardId, keyword);
+          const postsData = response.content || [];
+          setPosts(postsData);
+        }
+
+        // 검색 후 페이지를 1로 리셋
+        setCurrentPage(1);
+      } catch (error) {
+        console.error('검색 실패:', error);
+        alert('검색에 실패했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [currentBoardId, fetchPosts]
+  );
+
+  useEffect(() => {
+    const loadSubBoards = async () => {
+      if (currentBoardId && !Array.isArray(currentBoardId)) {
+        try {
+          const subBoards = await boardApi.getSubBoards(currentBoardId);
+
+          if (subBoards && subBoards.length > 0) {
+            const tabs = subBoards.map((board) => ({
+              id: board.boardId,
+              name: board.boardName,
+            }));
+            setSubBoardTabs(tabs);
+            setActiveSubBoard(tabs[0].id);
+
+            const response = await boardApi.getPosts(tabs[0].id);
+            const postsData = response.content || [];
+            setPosts(Array.isArray(postsData) ? postsData : []);
+            setCurrentPage(1);
+          } else {
+            setSubBoardTabs([]);
+            setActiveSubBoard(null);
+            fetchPosts();
+          }
+        } catch (error) {
+          console.error('하위 게시판 조회 실패:', error);
+          setSubBoardTabs([]);
+          setActiveSubBoard(null);
+          fetchPosts();
+        }
+      } else {
+        setSubBoardTabs([]);
+        setActiveSubBoard(null);
+        fetchPosts();
+      }
+    };
+
+    if (boardsLoaded && currentBoardId) {
+      loadSubBoards();
+    }
+  }, [boardsLoaded, currentBoardId, fetchPosts]);
+
+  const handleTabChange = useCallback(
+    async (tabId) => {
+      setActiveSubBoard(tabId);
+
+      if (!currentBoardId) return;
+
+      try {
+        setLoading(true);
+
+        const response = await boardApi.getPosts(tabId);
+        const postsData = response.content || [];
+        setPosts(Array.isArray(postsData) ? postsData : []);
+        setCurrentPage(1); // 탭 변경 시 페이지 리셋
+      } catch (error) {
+        console.error('탭 변경 중 오류:', error);
+        setPosts([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [currentBoardId]
+  );
+
   const handleOpenModal = () => {
     setShowModal(true);
   };
@@ -40,114 +239,171 @@ const Board = () => {
     setShowModal(false);
     setTitle('');
     setContent('');
+    setSelectedFiles([]);
   };
 
-  // 파일 선택 핸들러
-  const handleFileChange = (e) => {
-    const newFiles = Array.from(e.target.files);
+  const handleOpenSubBoardModal = () => {
+    setShowSubBoardModal(true);
+  };
 
-    setSelectedFiles((prevFiles) => {
-      const updatedFiles = [...prevFiles];
-      const replacedFileNames = [];
+  const handleCloseSubBoardModal = () => {
+    setShowSubBoardModal(false);
+    setSubBoardName('');
+  };
 
-      newFiles.forEach((newFile) => {
-        const sameNameIndex = updatedFiles.findIndex(
-          (f) => f.name === newFile.name
-        );
+  const handleCreateSubBoard = async () => {
+    if (!subBoardName.trim()) {
+      alert('하위 게시판 이름을 입력해주세요.');
+      return;
+    }
 
-        if (sameNameIndex !== -1) {
-          // 같은 이름 발견
-          if (updatedFiles[sameNameIndex].size === newFile.size) {
-            // 같은 크기 = 완전 중복 (무시)
-            return;
-          } else {
-            // 다른 크기 = 교체
-            updatedFiles[sameNameIndex] = newFile;
-            replacedFileNames.push(newFile.name);
-            return;
-          }
-        }
+    try {
+      await boardApi.createBoard(subBoardName, currentBoardId);
+      alert('하위 게시판이 생성되었습니다!');
+      handleCloseSubBoardModal();
 
-        // 새 파일 추가
-        updatedFiles.push(newFile);
-      });
+      const subBoards = await boardApi.getSubBoards(currentBoardId);
+      const tabs = subBoards.map((board) => ({
+        id: board.boardId,
+        name: board.boardName,
+      }));
+      setSubBoardTabs(tabs);
 
-      // 교체된 파일이 있으면 알림
-      if (replacedFileNames.length > 0) {
-        alert(`교체됨: ${replacedFileNames.join(', ')}`);
+      if (tabs.length > 0) {
+        setActiveSubBoard(tabs[0].id);
       }
-
-      return updatedFiles;
-    });
-
-    if (e.target.value !== undefined) {
-      e.target.value = '';
+    } catch (error) {
+      console.error('하위 게시판 생성 실패:', error);
+      alert('하위 게시판 생성에 실패했습니다.');
     }
   };
 
-  // 파일 삭제 핸들러
-  const handleRemoveFile = (indexToRemove) => {
-    setSelectedFiles((prevFiles) =>
-      prevFiles.filter((_, index) => index !== indexToRemove)
-    );
+  const handleFileChange = (e) => {
+    const files = Array.from(e.target.files);
+    setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
   };
 
-  const handleSave = () => {
-    const newPost = {
-      title,
-      content,
-      date: new Date(),
-      id: Date.now(),
-      likeCount: 0,
-      isLiked: false,
-      bookmarkCount: 0,
-      isBookmarked: false,
-      files: selectedFiles.map((file) => ({
-        name: file.name,
-        size: file.size,
-        type: file.type,
-      })),
-    };
-    setPosts([newPost, ...posts]);
-    handleCloseModal();
+  const handleRemoveFile = (index) => {
+    setSelectedFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
   };
 
-  const handleLike = (postId) => {
-    setPosts(
-      posts.map((post) =>
-        post.id === postId
-          ? {
-              ...post,
-              isLiked: !post.isLiked,
-              likeCount: post.isLiked ? post.likeCount - 1 : post.likeCount + 1,
-            }
-          : post
-      )
-    );
+  const handleSave = async () => {
+    if (!currentBoardId) {
+      alert('게시판 정보를 찾을 수 없습니다.');
+      return;
+    }
+
+    if (subBoardTabs.length === 0) {
+      alert('하위 게시판이 없습니다.\n먼저 하위 게시판을 생성해주세요.');
+      return;
+    }
+
+    if (!activeSubBoard) {
+      alert('하위 게시판을 선택해주세요.');
+      return;
+    }
+
+    if (!title || !title.trim()) {
+      alert('제목을 입력해주세요.');
+      return;
+    }
+
+    if (!content || !content.trim()) {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+
+    try {
+      const postData = {
+        title: title.trim(),
+        content: content.trim(),
+        files: selectedFiles,
+      };
+
+      await boardApi.createPost(activeSubBoard, postData);
+
+      handleCloseModal();
+      setSelectedFiles([]);
+
+      handleTabChange(activeSubBoard);
+
+      alert('게시글이 작성되었습니다!');
+    } catch (error) {
+      console.error('게시글 작성 실패:', error);
+      alert(
+        `게시글 작성에 실패했습니다: ${error.message || '알 수 없는 오류'}`
+      );
+    }
   };
 
-  const handleBookmark = (postId) => {
-    setPosts(
-      posts.map((post) =>
-        post.id === postId
-          ? {
-              ...post,
-              isBookmarked: !post.isBookmarked,
-              bookmarkCount: post.isBookmarked
-                ? (post.bookmarkCount || 1) - 1
-                : (post.bookmarkCount || 0) + 1,
-            }
-          : post
-      )
+  const handleLike = useCallback(async (postId) => {
+    const snapshot = prevPostsRef.current;
+
+    setPosts((currentPosts) =>
+      currentPosts.map((post) => {
+        if ((post.postId || post.id) === postId) {
+          return {
+            ...post,
+            isLiked: !post.isLiked,
+            likeCount: post.isLiked ? post.likeCount - 1 : post.likeCount + 1,
+          };
+        }
+        return post;
+      })
+    );
+
+    try {
+      await boardApi.toggleLike(postId);
+    } catch (error) {
+      console.error('좋아요 처리 실패:', error);
+      alert('좋아요 처리에 실패했습니다.');
+      setPosts(snapshot);
+    }
+  }, []);
+
+  const handleBookmark = useCallback(async (postId) => {
+    const snapshot = prevPostsRef.current;
+
+    setPosts((currentPosts) =>
+      currentPosts.map((post) => {
+        if ((post.postId || post.id) === postId) {
+          return {
+            ...post,
+            isBookmarked: !post.isBookmarked,
+            bookmarkCount: post.isBookmarked
+              ? (post.bookmarkCount || 1) - 1
+              : (post.bookmarkCount || 0) + 1,
+          };
+        }
+        return post;
+      })
     );
+
+    try {
+      await boardApi.toggleBookmark(postId);
+    } catch (error) {
+      console.error('북마크 처리 실패:', error);
+      alert('북마크 처리에 실패했습니다.');
+      setPosts(snapshot);
+    }
+  }, []);
+
+  // 정렬 옵션 변경 핸들러 (페이지 리셋 포함)
+  const handleSortChange = (option) => {
+    setSortOption(option);
+    setCurrentPage(1);
   };
 
   const sortedPosts = [...posts].sort((a, b) => {
     if (sortOption === 'latest') {
-      return new Date(b.date) - new Date(a.date);
+      const dateA = new Date(a.createdDate || a.date);
+      const dateB = new Date(b.createdDate || b.date);
+      return dateB - dateA;
     }
     if (sortOption === 'oldest') {
-      return new Date(a.date) - new Date(b.date);
+      const dateA = new Date(a.createdDate || a.date);
+      const dateB = new Date(b.createdDate || b.date);
+      return dateA - dateB;
     }
     if (sortOption === 'popular') {
       return b.likeCount - a.likeCount;
@@ -155,37 +411,70 @@ const Board = () => {
     return 0;
   });
 
-  const filteredPosts = sortedPosts.filter((post) => {
-    if (!searchTerm) return true;
-    const lowerSearch = searchTerm.toLowerCase();
+  // 페이지네이션 계산
+  const indexOfLastPost = currentPage * itemsPerPage;
+  const indexOfFirstPost = indexOfLastPost - itemsPerPage;
+  const currentPosts = sortedPosts.slice(indexOfFirstPost, indexOfLastPost);
+  const totalPages = Math.ceil(sortedPosts.length / itemsPerPage);
+
+  // 페이지 변경 핸들러
+  const handlePageChange = (pageNumber) => {
+    setCurrentPage(pageNumber);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if (!boardsLoaded) {
     return (
-      post.title.toLowerCase().includes(lowerSearch) ||
-      post.content.toLowerCase().includes(lowerSearch)
+      <div className={styles.boardContainer}>
+        <p className={styles.emptyMessage}>게시판 목록을 불러오는 중...</p>
+      </div>
     );
-  });
+  }
+
+  if (!currentBoardId) {
+    return (
+      <div className={styles.boardContainer}>
+        <header className={styles.boardHeader}>
+          <h1 className={styles.boardTitle}>게시판</h1>
+        </header>
+        <p className={styles.emptyMessage}>
+          게시판을 찾을 수 없습니다. (경로: {currentPath})
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className={styles.boardContainer}>
       <header className={styles.boardHeader}>
-        <h1 className={styles.boardTitle}>게시판</h1>
+        <h1 className={styles.boardTitle}>{currentBoardName || '게시판'}</h1>
       </header>
 
-      <div className={styles.boardControls}>
-        <SearchBar searchTerm={searchTerm} onSearchChange={setSearchTerm} />
-        <BoardActions
-          sortOption={sortOption}
-          onSortChange={setSortOption}
-          onWrite={handleOpenModal}
+      <SearchBar onSearch={handleSearch} />
+
+      {!Array.isArray(currentBoardId) && (
+        <CategoryTabs
+          activeTab={activeSubBoard}
+          onTabChange={handleTabChange}
+          tabs={subBoardTabs}
+          onCreateSubBoard={handleOpenSubBoardModal}
         />
-      </div>
+      )}
+
+      <BoardActions
+        sortOption={sortOption}
+        onSortChange={handleSortChange}
+        onWrite={handleOpenModal}
+      />
 
       <div className={styles.postsContainer}>
-        {filteredPosts.length > 0 ? (
-          filteredPosts.map((post) => (
+        {loading ? (
+          <p className={styles.emptyMessage}>로딩 중...</p>
+        ) : currentPosts.length > 0 ? (
+          currentPosts.map((post) => (
             <PostItem
-              key={post.id}
+              key={post.postId || post.id}
               post={post}
-              currentTeam={team}
               onLike={handleLike}
               onBookmark={handleBookmark}
             />
@@ -195,6 +484,39 @@ const Board = () => {
         )}
       </div>
 
+      {/* 페이지네이션 컨트롤 */}
+      {!loading && sortedPosts.length > 0 && (
+        <div className={styles.pagination}>
+          <button
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            className={styles.pageButton}
+          >
+            이전
+          </button>
+
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+            <button
+              key={page}
+              onClick={() => handlePageChange(page)}
+              className={`${styles.pageButton} ${
+                currentPage === page ? styles.active : ''
+              }`}
+            >
+              {page}
+            </button>
+          ))}
+
+          <button
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className={styles.pageButton}
+          >
+            다음
+          </button>
+        </div>
+      )}
+
       {showModal && (
         <Modal
           title={title}
@@ -208,6 +530,15 @@ const Board = () => {
           onClose={handleCloseModal}
         />
       )}
+
+      {showSubBoardModal && (
+        <CreateSubBoardModal
+          value={subBoardName}
+          onChange={setSubBoardName}
+          onSave={handleCreateSubBoard}
+          onClose={handleCloseSubBoardModal}
+        />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/pages/Board.module.css b/frontend/src/pages/Board.module.css
index cc0e15dc..8ed413d0 100644
--- a/frontend/src/pages/Board.module.css
+++ b/frontend/src/pages/Board.module.css
@@ -9,12 +9,24 @@
   box-sizing: border-box;
 }
 
+.boardContainer::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 1);
+  z-index: -1;
+  pointer-events: none;
+}
+
 .boardHeader {
   margin-bottom: 32px;
 }
 
 .boardTitle {
-  width: 94px;
+  width: 200px;
   height: 36px;
   font-weight: 600;
   font-size: 36px;
@@ -35,7 +47,7 @@
 }
 
 .searchContainer {
-  width: 908px;
+  width: 100%;
   height: 68px;
   border-radius: 50px;
   padding: 24px 26px;
@@ -199,9 +211,41 @@
 
 .postsContainer {
   width: 100%;
-  max-width: 908px;
   margin: 0;
   height: auto;
   min-height: auto;
   box-sizing: border-box;
 }
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-top: 24px;
+  padding: 20px 0;
+}
+
+.pageButton {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  background-color: white;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.pageButton:hover:not(:disabled) {
+  background-color: #f0f0f0;
+}
+
+.pageButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pageButton.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
diff --git a/frontend/src/pages/PostDetail.jsx b/frontend/src/pages/PostDetail.jsx
index 80e9d5d6..4f525e78 100644
--- a/frontend/src/pages/PostDetail.jsx
+++ b/frontend/src/pages/PostDetail.jsx
@@ -1,23 +1,70 @@
+// components/Board/PostDetail.jsx
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
+import * as boardApi from '../utils/boardApi';
 import styles from './PostDetail.module.css';
 
-import ProfileIcon from '../assets/board_profile.svg';
-import BookmarkIcon from '../assets/boardBookMark.svg';
-import BookmarkFilledIcon from '../assets/boardBookMark.fill.svg';
-import HeartIcon from '../assets/boardHeart.svg';
-import HeartFilledIcon from '../assets/boardHeart.fill.svg';
-import EditIcon from '../assets/boardPencil.svg';
-import DeleteIcon from '../assets/boardCloseIcon.svg';
-import FolderIcon from '../assets/boardFolder.svg';
-import { getTimeAgo } from '../utils/TimeUtils';
+import PostView from '../components/Board/PostDetail/PostView';
+import PostEditForm from '../components/Board/PostDetail/PostEditForm';
+import CommentSection from '../components/Board/PostDetail/CommentSection';
+
+const buildCommentTree = (flatComments) => {
+  const map = new Map();
+  const roots = [];
+  flatComments.forEach((c) => {
+    const commentId = c.commentId || c.id;
+    map.set(commentId, { ...c, replies: [] });
+  });
+  map.forEach((comment) => {
+    const parentId = comment.parentCommentId;
+    if (parentId && map.has(parentId)) {
+      map.get(parentId).replies.push(comment);
+    } else {
+      roots.push(comment);
+    }
+  });
+  return roots;
+};
+
+const extractRawComments = (data) => {
+  if (!data?.comments) return [];
+  let topLevelComments = [];
+  if (Array.isArray(data.comments)) {
+    topLevelComments = data.comments;
+  } else if (Array.isArray(data.comments.content)) {
+    topLevelComments = data.comments.content;
+  }
+
+  const flatComments = [];
+  topLevelComments.forEach((comment) => {
+    flatComments.push(comment);
+    if (comment.replies && Array.isArray(comment.replies)) {
+      comment.replies.forEach((reply) => flatComments.push(reply));
+    }
+  });
+  return flatComments;
+};
+
+const findCommentInTree = (nodes, targetId) => {
+  for (const c of nodes) {
+    const id = c.commentId || c.id;
+    if (id === targetId) return c;
+    if (c.replies && c.replies.length) {
+      const found = findCommentInTree(c.replies, targetId);
+      if (found) return found;
+    }
+  }
+  return null;
+};
 
 const PostDetail = () => {
   const { postId, team } = useParams();
   const navigate = useNavigate();
-  const location = useLocation();
+
+  // 상태 관리
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   const [isEdit, setIsEdit] = useState(false);
   const [editTitle, setEditTitle] = useState('');
@@ -26,233 +73,211 @@ const PostDetail = () => {
   const [newFiles, setNewFiles] = useState([]);
 
   const [comments, setComments] = useState([]);
-  const [commentText, setCommentText] = useState('');
   const [showMenu, setShowMenu] = useState(false);
   const [showCommentMenu, setShowCommentMenu] = useState(null);
+  const [replyTargetId, setReplyTargetId] = useState(null);
 
-  // 게시글 저장소 함수
-  const getPostsFromStorage = () => {
+  // 데이터 로드 로직
+  const refreshPostAndComments = async () => {
     try {
-      const saved = localStorage.getItem('boardPosts');
-      if (!saved) return [];
-      return JSON.parse(saved).map((p) => ({ ...p, date: new Date(p.date) }));
+      const updatedPost = await boardApi.getPost(postId);
+      setPost(updatedPost);
+      setEditTitle(updatedPost.title);
+      setEditContent(updatedPost.content);
+      const raw = extractRawComments(updatedPost);
+      setComments(buildCommentTree(raw));
+      return updatedPost;
     } catch (error) {
-      console.error('Failed to parse posts from localStorage', error);
-      return [];
+      console.error('데이터 갱신 실패:', error);
+      return null;
     }
   };
 
-  const savePostsToStorage = (posts) => {
+  useEffect(() => {
+    const fetchPostAndComments = async () => {
+      if (!postId) {
+        setError('게시글 ID가 없습니다.');
+        setLoading(false);
+        return;
+      }
+      try {
+        setLoading(true);
+        const data = await boardApi.getPost(postId);
+        setPost(data);
+        setEditTitle(data.title);
+        setEditContent(data.content);
+        const raw = extractRawComments(data);
+        setComments(buildCommentTree(raw));
+        setError(null);
+      } catch (error) {
+        console.error('게시글 불러오기 실패:', error);
+        setError('게시글을 불러올 수 없습니다.');
+        setComments([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchPostAndComments();
+  }, [postId]);
+
+  // --- 게시글 액션 핸들러 ---
+  const handleLike = async () => {
+    const prevPost = post;
+    setPost({
+      ...post,
+      isLiked: !post.isLiked,
+      likeCount: post.isLiked ? post.likeCount - 1 : post.likeCount + 1,
+    });
     try {
-      localStorage.setItem('boardPosts', JSON.stringify(posts));
+      await boardApi.toggleLike(postId);
     } catch (error) {
-      if (error.name === 'QuotaExceededError') {
-        console.error('localStorage 용량이 부족합니다.');
-      }
-      throw error;
+      console.error('좋아요 처리 실패:', error);
+      setPost(prevPost);
+      alert('좋아요 처리에 실패했습니다.');
     }
   };
 
-  // 댓글 저장소 함수
-  const getCommentsFromStorage = (postId) => {
+  const handleBookmark = async () => {
+    const prevPost = post;
+    setPost({
+      ...post,
+      isBookmarked: !post.isBookmarked,
+      bookmarkCount: post.isBookmarked
+        ? (post.bookmarkCount || 1) - 1
+        : (post.bookmarkCount || 0) + 1,
+    });
     try {
-      const saved = localStorage.getItem(`comments_${postId}`);
-      if (!saved) return [];
-      return JSON.parse(saved).map((c) => ({ ...c, date: new Date(c.date) }));
+      await boardApi.toggleBookmark(postId);
     } catch (error) {
-      console.error('Failed to parse comments from localStorage', error);
-      return [];
+      console.error('북마크 처리 실패:', error);
+      setPost(prevPost);
+      alert('북마크 처리에 실패했습니다.');
     }
   };
 
-  const saveCommentsToStorage = (postId, comments) => {
-    localStorage.setItem(`comments_${postId}`, JSON.stringify(comments));
+  const handleAttachmentDownload = (file) => {
+    const baseUrl = import.meta.env.VITE_API_URL || '';
+    const url = `${baseUrl}${file.filePath}`;
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.originalFilename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
   };
 
-  // 게시글 로딩 및 댓글 로딩
-  useEffect(() => {
-    setLoading(true);
-    let currentPost = location.state?.post;
-
-    if (!currentPost) {
-      const allPosts = getPostsFromStorage();
-      currentPost = allPosts.find((p) => p.id === parseInt(postId, 10));
-    }
-    setPost(currentPost);
-    setLoading(false);
-
-    if (currentPost) {
-      setEditTitle(currentPost.title);
-      setEditContent(currentPost.content);
-    }
-
-    if (currentPost) {
-      setComments(getCommentsFromStorage(currentPost.id));
-    } else {
-      setComments([]);
+  // --- 수정 모드 핸들러 ---
+  const handleEditStart = async () => {
+    const updatedPost = await refreshPostAndComments();
+    if (updatedPost) {
+      setEditFiles(updatedPost.attachments || []);
+      setNewFiles([]);
+      setIsEdit(true);
+      setShowMenu(false);
     }
-  }, [postId, location.state]);
-
-  // 좋아요 토글
-  const handleLike = () => {
-    const allPosts = getPostsFromStorage();
-    let updatedPost = null;
-    const updatedPosts = allPosts.map((p) => {
-      if (p.id === post.id) {
-        updatedPost = {
-          ...p,
-          isLiked: !p.isLiked,
-          likeCount: p.isLiked ? p.likeCount - 1 : p.likeCount + 1,
-        };
-        return updatedPost;
-      }
-      return p;
-    });
-    savePostsToStorage(updatedPosts);
-    setPost(updatedPost);
-  };
-
-  // 북마크 토글
-  const handleBookmark = () => {
-    const allPosts = getPostsFromStorage();
-    let updatedPost = null;
-    const updatedPosts = allPosts.map((p) => {
-      if (p.id === post.id) {
-        updatedPost = {
-          ...p,
-          isBookmarked: !p.isBookmarked,
-          bookmarkCount: p.isBookmarked
-            ? (p.bookmarkCount || 1) - 1
-            : (p.bookmarkCount || 0) + 1,
-        };
-        return updatedPost;
-      }
-      return p;
-    });
-    savePostsToStorage(updatedPosts);
-    setPost(updatedPost);
-  };
-
-  // 수정 모드 진입
-  const handleEdit = () => {
-    setIsEdit(true);
-    setShowMenu(false);
-    setEditFiles(post.files || []);
-    setNewFiles([]);
-  };
-
-  // 수정 취소
-  const handleCancelEdit = () => {
-    setIsEdit(false);
-    setEditTitle(post.title);
-    setEditContent(post.content);
-  };
-
-  // 기존 파일 삭제
-  const handleRemoveExistingFile = (index) => {
-    setEditFiles(editFiles.filter((_, i) => i !== index));
   };
 
-  // 새 파일 추가
-  const handleAddNewFile = (e) => {
-    const files = Array.from(e.target.files);
-    setNewFiles([...newFiles, ...files]);
-    e.target.value = '';
-  };
-
-  // 새 파일 삭제
-  const handleRemoveNewFile = (index) => {
-    setNewFiles(newFiles.filter((_, i) => i !== index));
-  };
-
-  // 수정 저장
-  const handleSaveEdit = () => {
+  const handleSaveEdit = async () => {
     if (!editTitle.trim() || !editContent.trim()) {
       alert('제목과 내용을 입력해주세요.');
       return;
     }
-
-    // 기존 파일 + 새 파일 정보 합치기
-    const allFiles = [
-      ...editFiles,
-      ...newFiles.map((file) => ({
-        name: file.name,
-        size: file.size,
-        type: file.type,
-      })),
-    ];
-
-    const allPosts = getPostsFromStorage();
-    let updatedPost = null;
-    const updatedPosts = allPosts.map((p) => {
-      if (p.id === post.id) {
-        updatedPost = {
-          ...p,
-          title: editTitle,
-          content: editContent,
-          files: allFiles,
-        };
-        return updatedPost;
-      }
-      return p;
-    });
-    savePostsToStorage(updatedPosts);
-    setPost(updatedPost);
-    setIsEdit(false);
-    setNewFiles([]);
-  };
-
-  // 게시글 삭제
-  const handleDelete = () => {
-    if (window.confirm('게시글을 정말 삭제하시겠습니까?')) {
-      const allPosts = getPostsFromStorage();
-      const updatedPosts = allPosts.filter((p) => p.id !== post.id);
-      savePostsToStorage(updatedPosts);
-      navigate(`/board/${team || 'all'}`);
+    try {
+      const boardId = post.boardId || post.board?.boardId;
+      const updateData = {
+        title: editTitle,
+        content: editContent,
+        files: newFiles,
+      };
+      await boardApi.updatePost(postId, boardId, updateData);
+      alert('게시글이 수정되었습니다.');
+      setIsEdit(false);
+      setNewFiles([]);
+      await refreshPostAndComments();
+    } catch (error) {
+      console.error('게시글 수정 실패:', error);
+      alert('게시글 수정에 실패했습니다.');
     }
   };
 
-  // 댓글 추가
-  const handleAddComment = () => {
-    if (!commentText.trim()) return;
-    const newComment = {
-      id: Date.now(),
-      author: '사용자',
-      text: commentText,
-      date: new Date(),
-    };
-    const updatedComments = [...comments, newComment];
-    setComments(updatedComments);
-    saveCommentsToStorage(post.id, updatedComments);
-    setCommentText('');
-  };
-
-  // 댓글 수정
-  const handleUpdateComment = (commentId) => {
-    setShowCommentMenu(null);
-    const currentComment = comments.find((c) => c.id === commentId);
-    const newText = prompt('수정할 댓글을 입력하세요:', currentComment.text);
-    if (newText === null || newText.trim() === '') return;
-    const updatedComments = comments.map((c) =>
-      c.id === commentId ? { ...c, text: newText } : c
-    );
-    setComments(updatedComments);
-    saveCommentsToStorage(post.id, updatedComments);
+  const handleFileHandlers = {
+    add: (e) => setNewFiles((prev) => [...prev, ...Array.from(e.target.files)]),
+    removeNew: (idx) => setNewFiles((prev) => prev.filter((_, i) => i !== idx)),
+    removeExisting: (id) =>
+      setEditFiles((prev) => prev.filter((f) => f.postAttachmentId !== id)),
   };
 
-  // 댓글 삭제
-  const handleDeleteComment = (commentId) => {
-    if (window.confirm('댓글을 정말 삭제하시겠습니까?')) {
-      const updatedComments = comments.filter((c) => c.id !== commentId);
-      setComments(updatedComments);
-      saveCommentsToStorage(post.id, updatedComments);
-      setShowCommentMenu(null);
+  const handleDelete = async () => {
+    if (!window.confirm('게시글을 정말 삭제하시겠습니까?')) return;
+    try {
+      await boardApi.deletePost(postId);
+      alert('게시글이 삭제되었습니다.');
+      navigate(team ? `/board/${team}` : '/board');
+    } catch (error) {
+      console.error('게시글 삭제 실패:', error);
+      alert('게시글 삭제에 실패했습니다.');
     }
   };
 
-  // 댓글 입력창에서 ctrl+enter로 댓글 추가
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && e.ctrlKey) handleAddComment();
+  // --- 댓글 핸들러 ---
+  const handleCommentHandlers = {
+    add: async (text) => {
+      try {
+        await boardApi.createComment({ postId, content: text });
+        await refreshPostAndComments();
+      } catch (error) {
+        console.error('댓글 작성 실패:', error);
+        alert('댓글 작성에 실패했습니다.');
+      }
+    },
+    update: async (id) => {
+      setShowCommentMenu(null);
+      const target = findCommentInTree(comments, id);
+      if (!target) return;
+
+      const newText = prompt(
+        '수정할 내용을 입력하세요:',
+        target.content || target.text
+      );
+      if (!newText || !newText.trim()) return;
+
+      try {
+        await boardApi.updateComment(id, {
+          postId,
+          content: newText,
+          parentCommentId: target.parentCommentId,
+        });
+        await refreshPostAndComments();
+      } catch (error) {
+        console.error('댓글 수정 실패:', error);
+        alert('댓글 수정에 실패했습니다.');
+      }
+    },
+    delete: async (id) => {
+      if (!window.confirm('댓글을 정말 삭제하시겠습니까?')) return;
+      try {
+        await boardApi.deleteComment(id);
+        setShowCommentMenu(null);
+        await refreshPostAndComments();
+      } catch (error) {
+        console.error('댓글 삭제 실패:', error);
+        alert('댓글 삭제에 실패했습니다.');
+      }
+    },
+    reply: async (parentId, text) => {
+      try {
+        await boardApi.createComment({
+          postId,
+          content: text,
+          parentCommentId: parentId,
+        });
+        await refreshPostAndComments();
+        setReplyTargetId(null);
+      } catch (error) {
+        console.error('답글 작성 실패:', error);
+        alert('답글 작성에 실패했습니다.');
+      }
+    },
   };
 
   if (loading) {
@@ -263,10 +288,12 @@ const PostDetail = () => {
     );
   }
 
-  if (!post) {
+  if (error || !post) {
     return (
       <div className={styles.container}>
-        <p className={styles.notFound}>게시글을 찾을 수 없습니다.</p>
+        <p className={styles.notFound}>
+          {error || '게시글을 찾을 수 없습니다.'}
+        </p>
       </div>
     );
   }
@@ -274,302 +301,48 @@ const PostDetail = () => {
   return (
     <div className={styles.container}>
       <article className={styles.postDetail}>
-        <div className={styles.titleWrapper}>
-          {isEdit ? (
-            <input
-              className={styles.editTitleInput}
-              type="text"
-              value={editTitle}
-              onChange={(e) => setEditTitle(e.target.value)}
-              placeholder="제목을 입력하세요"
-            />
-          ) : (
-            <h1 className={styles.title}>{post.title}</h1>
-          )}
-
-          {!isEdit && (
-            <div className={styles.menuContainer}>
-              <button
-                className={styles.menuButton}
-                onClick={() => setShowMenu(!showMenu)}
-                aria-label="게시글 메뉴 열기"
-              >
-                ⋮
-              </button>
-              {showMenu && (
-                <div className={styles.menuDropdown}>
-                  <button onClick={handleEdit}>
-                    <img
-                      src={EditIcon}
-                      className={styles.EditIcon}
-                      alt="수정"
-                    />
-                    수정하기
-                  </button>
-                  <button onClick={handleDelete}>
-                    <img
-                      src={DeleteIcon}
-                      className={styles.DeleteIcon}
-                      alt="삭제"
-                    />
-                    삭제하기
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className={styles.divider} />
-        <div className={styles.meta}>
-          <img src={ProfileIcon} className={styles.profileIcon} alt="프로필" />
-          <div className={styles.metaInfo}>
-            <p className={styles.author}>운영진</p>
-            <p className={styles.date}>{getTimeAgo(post.date)}</p>
-          </div>
-        </div>
-
         {isEdit ? (
-          <textarea
-            className={styles.editContentTextarea}
-            value={editContent}
-            onChange={(e) => setEditContent(e.target.value)}
-            placeholder="내용을 입력하세요"
-            rows={10}
+          <PostEditForm
+            title={editTitle}
+            setTitle={setEditTitle}
+            content={editContent}
+            setContent={setEditContent}
+            editFiles={editFiles}
+            newFiles={newFiles}
+            onRemoveExistingFile={handleFileHandlers.removeExisting}
+            onRemoveNewFile={handleFileHandlers.removeNew}
+            onAddNewFile={handleFileHandlers.add}
+            onSave={handleSaveEdit}
+            onCancel={() => setIsEdit(false)}
           />
         ) : (
-          <div className={styles.content}>{post.content}</div>
-        )}
-
-        {/* 수정 모드: 항상 표시 / 일반 모드: 파일 있을 때만 표시 */}
-        {(isEdit || (post.files && post.files.length > 0)) && (
-          <div className={styles.attachments}>
-            <h3 className={styles.attachmentTitle}>
-              첨부 파일 (
-              {isEdit
-                ? editFiles.length + newFiles.length
-                : post.files?.length || 0}
-              )
-            </h3>
-
-            {/* 기존 파일 목록 */}
-            {isEdit && editFiles.length > 0 && (
-              <div className={styles.attachmentList}>
-                {editFiles.map((file, index) => (
-                  <div
-                    key={`existing-${file.name}-${file.size}`}
-                    className={styles.attachmentItem}
-                  >
-                    <img
-                      src={FolderIcon}
-                      alt="파일"
-                      className={styles.attachmentIcon}
-                    />
-                    <span className={styles.attachmentName}>{file.name}</span>
-                    <span className={styles.attachmentSize}>
-                      ({(file.size / 1024).toFixed(1)} KB)
-                    </span>
-                    <button
-                      className={styles.removeFileButton}
-                      onClick={() => handleRemoveExistingFile(index)}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* 새로 추가된 파일 목록 */}
-            {isEdit && newFiles.length > 0 && (
-              <div className={styles.attachmentList}>
-                {newFiles.map((file, index) => (
-                  <div key={`new-${index}`} className={styles.attachmentItem}>
-                    <img
-                      src={FolderIcon}
-                      alt="파일"
-                      className={styles.attachmentIcon}
-                    />
-                    <span className={styles.attachmentName}>
-                      {file.name}{' '}
-                      <span className={styles.newBadge}>새파일</span>
-                    </span>
-                    <span className={styles.attachmentSize}>
-                      ({(file.size / 1024).toFixed(1)} KB)
-                    </span>
-                    <button
-                      className={styles.removeFileButton}
-                      onClick={() => handleRemoveNewFile(index)}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* 파일 추가 버튼 */}
-            {isEdit && (
-              <div className={styles.fileAddSection}>
-                <input
-                  type="file"
-                  id="editFileUpload"
-                  multiple
-                  onChange={handleAddNewFile}
-                  style={{ display: 'none' }}
-                />
-                <button
-                  className={styles.addFileButton}
-                  onClick={() =>
-                    document.getElementById('editFileUpload').click()
-                  }
-                >
-                  파일 추가
-                </button>
-              </div>
-            )}
-
-            {/* 일반 모드: 파일 목록만 표시 */}
-            {!isEdit && post.files && post.files.length > 0 && (
-              <div className={styles.attachmentList}>
-                {post.files.map((file, index) => (
-                  <div key={index} className={styles.attachmentItem}>
-                    <img
-                      src={FolderIcon}
-                      alt="파일"
-                      className={styles.attachmentIcon}
-                    />
-                    <span className={styles.attachmentName}>{file.name}</span>
-                    <span className={styles.attachmentSize}>
-                      ({(file.size / 1024).toFixed(1)} KB)
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* 수정 모드 버튼 */}
-        {isEdit && (
-          <div className={styles.editButtons}>
-            <button className={styles.saveButton} onClick={handleSaveEdit}>
-              저장
-            </button>
-            <button className={styles.cancelButton} onClick={handleCancelEdit}>
-              취소
-            </button>
-          </div>
+          <PostView
+            post={post}
+            showMenu={showMenu}
+            setShowMenu={setShowMenu}
+            onEdit={handleEditStart}
+            onDelete={handleDelete}
+            onDownload={handleAttachmentDownload}
+          />
         )}
 
         {!isEdit && (
-          <div className={styles.commentsSection}>
-            <div className={styles.commentsHeaderWrapper}>
-              <div className={styles.actions}>
-                <button
-                  className={styles.actionButton}
-                  onClick={handleBookmark}
-                  aria-label="북마크"
-                >
-                  <img
-                    src={post.isBookmarked ? BookmarkFilledIcon : BookmarkIcon}
-                    alt="북마크"
-                  />
-                  {post.bookmarkCount > 0 && (
-                    <span className={styles.count}>{post.bookmarkCount}</span>
-                  )}
-                </button>
-                <button
-                  className={styles.actionButton}
-                  onClick={handleLike}
-                  aria-label="좋아요"
-                >
-                  <img
-                    src={post.isLiked ? HeartFilledIcon : HeartIcon}
-                    alt="좋아요"
-                  />
-                  {post.likeCount > 0 && (
-                    <span className={styles.count}>{post.likeCount}</span>
-                  )}
-                </button>
-              </div>
-              <div className={styles.commentsHeader}>
-                <p className={styles.commentCount}>
-                  댓글 <span>{comments.length}</span>
-                </p>
-              </div>
-            </div>
-
-            <div className={styles.commentInput}>
-              <textarea
-                className={styles.textarea}
-                placeholder="댓글을 입력해주세요. 허위사실, 욕설 등을 포함한 댓글은 별도의 안내 없이 삭제될 수 있어요."
-                value={commentText}
-                onChange={(e) => setCommentText(e.target.value)}
-                onKeyDown={handleKeyDown}
-              />
-            </div>
-            <button
-              className={styles.submitButton}
-              onClick={handleAddComment}
-              disabled={!commentText.trim()}
-            >
-              댓글 남기기
-            </button>
-            <div className={styles.commentsList}>
-              {comments.length > 0 ? (
-                comments.map(({ id, author, text, date }) => (
-                  <div key={id} className={styles.commentCard}>
-                    <div className={styles.commentHeader}>
-                      <div className={styles.commentMeta}>
-                        <img
-                          src={ProfileIcon}
-                          className={styles.profileIcon}
-                          alt="프로필"
-                        />
-                        <p className={styles.commentAuthor}>{author}</p>
-                      </div>
-                      <p className={styles.commentDate}>{getTimeAgo(date)}</p>
-
-                      {/* 댓글 수정/삭제 메뉴 */}
-                      <div className={styles.menuContainer}>
-                        <button
-                          className={styles.menuButton}
-                          onClick={() => setShowCommentMenu(id)}
-                          aria-label="댓글 메뉴 열기"
-                        >
-                          ⋮
-                        </button>
-                        {showCommentMenu === id && (
-                          <div className={styles.menuDropdown}>
-                            <button onClick={() => handleUpdateComment(id)}>
-                              <img
-                                src={EditIcon}
-                                className={styles.EditIcon}
-                                alt="수정버튼"
-                              />
-                              수정하기
-                            </button>
-                            <button onClick={() => handleDeleteComment(id)}>
-                              <img
-                                src={DeleteIcon}
-                                className={styles.DeleteIcon}
-                                alt="삭제버튼"
-                              />
-                              삭제하기
-                            </button>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <p className={styles.commentText}>{text}</p>
-                  </div>
-                ))
-              ) : (
-                <p className={styles.noComments}>댓글이 없습니다.</p>
-              )}
-            </div>
-          </div>
+          <CommentSection
+            post={post}
+            comments={comments}
+            onLike={handleLike}
+            onBookmark={handleBookmark}
+            onAddComment={handleCommentHandlers.add}
+            onUpdateComment={handleCommentHandlers.update}
+            onDeleteComment={handleCommentHandlers.delete}
+            onSubmitReply={handleCommentHandlers.reply}
+            onReplyClick={(id) =>
+              setReplyTargetId(id === replyTargetId ? null : id)
+            }
+            replyTargetId={replyTargetId}
+            showCommentMenu={showCommentMenu}
+            setShowCommentMenu={setShowCommentMenu}
+          />
         )}
       </article>
     </div>
diff --git a/frontend/src/pages/PostDetail.module.css b/frontend/src/pages/PostDetail.module.css
index 8f83f6e4..a995891c 100644
--- a/frontend/src/pages/PostDetail.module.css
+++ b/frontend/src/pages/PostDetail.module.css
@@ -1,5 +1,7 @@
+/* PostDetail.module.css */
+
 :root {
-  --width-content: 926px;
+  --width-content: 75%;
   --padding-default: 12px;
   --gap-default: 12px;
   --color-bg-light: rgba(244, 244, 244, 1);
@@ -28,7 +30,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 264px;
 }
 
 .title {
@@ -49,9 +50,7 @@
 
 .meta,
 .content,
-.commentsSection,
-.commentInput,
-.commentsList {
+.commentsSection {
   width: var(--width-content);
 }
 
@@ -124,7 +123,9 @@
   font-weight: 700;
 }
 
+/* [수정] 댓글 입력창 - width를 100%로 변경 */
 .commentInput {
+  width: 100%;
   display: flex;
   align-items: flex-start;
   min-height: 71px;
@@ -165,13 +166,14 @@
   outline: none;
 }
 
+/* [수정] 댓글 작성 버튼 - margin-left를 auto로 변경 */
 .submitButton {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 113px;
   height: 43px;
-  margin-left: calc(var(--width-content) - 113px);
+  margin-left: auto;
   margin-bottom: 32px;
   background: var(--color-button);
   color: #fff;
@@ -194,19 +196,23 @@
   cursor: not-allowed;
 }
 
+/* [수정] 댓글 목록 - width 100% 추가 */
 .commentsList {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--gap-default);
 }
 
 .commentCard {
+  width: 100%;
   padding: 20px;
   border: 1px solid var(--color-border-card);
   border-radius: 8px;
   background: var(--color-bg-card);
   word-break: break-word;
   overflow-wrap: break-word;
+  box-sizing: border-box;
 }
 
 .commentHeader {
@@ -367,6 +373,10 @@
   overflow: hidden;
 }
 
+.hiddenInput {
+  display: none;
+}
+
 .menuDropdown button {
   display: flex;
   align-items: center;
@@ -445,7 +455,8 @@
   padding: 16px;
   background-color: #f8f9fa;
   border-radius: 8px;
-  width: 100%;
+  width: var(--width-content);
+  box-sizing: border-box;
 }
 
 .attachmentTitle {
@@ -459,35 +470,68 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .attachmentItem {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
-  background-color: white;
-  border-radius: 6px;
+  padding: 10px 12px;
+  background-color: #ffffff;
   border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .attachmentIcon {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.attachmentIconButton {
+  cursor: pointer;
+}
+
+.attachmentIconButton:hover {
+  opacity: 0.8;
 }
 
 .attachmentName {
   flex: 1;
   font-size: 14px;
+  font-weight: 500;
   color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .attachmentSize {
   font-size: 12px;
-  color: #666;
+  color: #888;
+  margin-right: 8px;
+}
+
+/* 수정 모드 */
+.editFormContainer {
+  width: var(--width-content);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.editTitleWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 32px;
 }
 
-/* 수정 모드 input/textarea */
 .editTitleInput {
   width: 100%;
   font-size: 28px;
@@ -497,12 +541,20 @@
   border-radius: 8px;
   outline: none;
   transition: border-color 0.2s;
+  box-sizing: border-box;
 }
 
 .editTitleInput:focus {
   border-color: #3b82f6;
 }
 
+.editDivider {
+  width: 100%;
+  height: 2px;
+  margin-bottom: 24px;
+  background: var(--color-divider);
+}
+
 .editContentTextarea {
   width: 100%;
   font-size: 16px;
@@ -515,17 +567,29 @@
   resize: vertical;
   font-family: inherit;
   transition: border-color 0.2s;
+  box-sizing: border-box;
+  min-height: 400px;
 }
 
 .editContentTextarea:focus {
   border-color: #3b82f6;
 }
 
+.editAttachments {
+  margin: 12px 0 24px 0;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /* 수정 모드 버튼 */
 .editButtons {
   display: flex;
   gap: 12px;
   margin: 24px 0;
+  width: 100%;
 }
 
 .saveButton {
@@ -595,6 +659,7 @@
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px dashed #d1d5db;
+  width: 100%;
 }
 
 .addFileButton {
@@ -615,3 +680,75 @@
   border-color: #9ca3af;
   color: #374151;
 }
+
+.commentItemWrapper {
+  width: 100%;
+  margin-bottom: 12px;
+  box-sizing: border-box;
+}
+
+.replyList {
+  margin-left: 24px;
+  margin-top: 12px;
+  border-left: 1px solid #eee;
+  padding-left: 12px;
+}
+
+.replyInputWrapper {
+  margin-left: 24px;
+  margin-top: 8px;
+  width: calc(100% - 24px);
+}
+
+.replyTextarea {
+  width: 100%;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  resize: vertical;
+  box-sizing: border-box;
+  margin-bottom: 8px;
+}
+
+.replyTextarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.replySubmitButton {
+  padding: 8px 16px;
+  background-color: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.replySubmitButton:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.replySubmitButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.replyButton {
+  font-size: 12px;
+  color: #888;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 0;
+  margin-top: 8px;
+}
+
+.replyButton:hover {
+  color: #555;
+}
diff --git a/frontend/src/utils/TimeUtils.js b/frontend/src/utils/TimeUtils.js
index 8b77b3d2..6b941b21 100644
--- a/frontend/src/utils/TimeUtils.js
+++ b/frontend/src/utils/TimeUtils.js
@@ -1,26 +1,41 @@
-export const getTimeAgo = (createdAt) => {
+export const getTimeAgo = (dateInput) => {
+  if (!dateInput) return '방금 전';
+
+  let date;
+  if (dateInput instanceof Date) {
+    date = dateInput;
+  } else if (typeof dateInput === 'string') {
+    let dateString = dateInput;
+    if (
+      /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+)$/.test(dateInput) &&
+      !dateInput.endsWith('Z')
+    ) {
+      dateString += 'Z';
+    }
+    date = new Date(dateString);
+  } else if (typeof dateInput === 'number') {
+    date = new Date(dateInput);
+  } else {
+    return '방금 전';
+  }
+
+  if (isNaN(date.getTime())) return '방금 전';
+
   const now = new Date();
-  const created = new Date(createdAt);
-  const diffInMs = now - created;
+  const diffInSeconds = Math.floor((now - date) / 1000);
+
+  if (diffInSeconds < 0) return '방금 전';
 
-  const seconds = Math.floor(diffInMs / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
+  const minutes = Math.floor(diffInSeconds / 60);
+  const hours = Math.floor(diffInSeconds / 3600); 
+  const days = Math.floor(diffInSeconds / 86400);  
   const months = Math.floor(days / 30);
-  const years = Math.floor(months / 12);
+  const years = Math.floor(days / 365);
 
-  if (seconds < 60) {
-    return '방금전';
-  } else if (minutes < 60) {
-    return `${minutes}분전`;
-  } else if (hours < 24) {
-    return `${hours}시간전`;
-  } else if (days < 30) {
-    return `${days}일전`;
-  } else if (months < 12) {
-    return `${months}달전`;
-  } else {
-    return `${years}년전`;
-  }
+  if (diffInSeconds < 60) return '방금 전';
+  else if (minutes < 60) return `${minutes}분 전`;
+  else if (hours < 24) return `${hours}시간 전`;
+  else if (days < 30) return `${days}일 전`;
+  else if (months < 12) return `${months}개월 전`;
+  else return `${years}년 전`;
 };
diff --git a/frontend/src/utils/boardApi.js b/frontend/src/utils/boardApi.js
new file mode 100644
index 00000000..3bf86e35
--- /dev/null
+++ b/frontend/src/utils/boardApi.js
@@ -0,0 +1,242 @@
+// boardApi.js
+import { api } from './axios';
+
+// ==================== 게시판 API ====================
+
+/*
+ * 최상위 부모 게시판 목록 조회
+ * GET /api/board/parents
+ */
+export const getParentBoards = async () => {
+  const response = await api.get('/api/board/parents');
+  return response.data;
+};
+
+/*
+ * 하위 게시판 목록 조회
+ * GET /api/board/childs
+ * @param {string|null} parentBoardId - 특정 부모 게시판의 자식만 필터링 (선택)
+ */
+export const getSubBoards = async (parentBoardId = null) => {
+  const response = await api.get('/api/board/childs');
+
+  // parentBoardId가 제공되면 해당 부모의 자식만 필터링
+  if (parentBoardId) {
+    return response.data.filter(
+      (board) => board.parentBoardId === parentBoardId
+    );
+  }
+
+  // 제공되지 않으면 모든 하위 게시판 반환
+  return response.data;
+};
+
+/*
+ * 게시판 생성
+ * POST /api/board
+ * @param {string} boardName - 게시판 이름
+ * @param {string|null} parentBoardId - 부모 게시판 ID (최상위는 null)
+ */
+export const createBoard = async (boardName, parentBoardId = null) => {
+  const requestBody = { boardName };
+
+  if (parentBoardId) {
+    requestBody.parentBoardId = parentBoardId;
+  }
+
+  const response = await api.post('/api/board', requestBody);
+  return response.data;
+};
+
+// ==================== 게시글 API ====================
+
+/*
+ * 게시글 목록 조회
+ * GET /api/board/posts
+ * @param {string} boardId - 게시판 ID
+ * @param {number} pageNumber - 페이지 번호 (0부터 시작)
+ * @param {number} pageSize - 페이지 크기
+ */
+export const getPosts = async (boardId, pageNumber = 0, pageSize = 20) => {
+  const response = await api.get('/api/board/posts', {
+    params: { boardId, pageNumber, pageSize },
+  });
+  return response.data;
+};
+
+/*
+ * 게시글 검색
+ * GET /api/board/posts/search
+ * @param {string} boardId - 게시판 ID
+ * @param {string} keyword - 검색 키워드
+ * @param {number} pageNumber - 페이지 번호
+ * @param {number} pageSize - 페이지 크기
+ */
+export const searchPosts = async (
+  boardId,
+  keyword,
+  pageNumber = 0,
+  pageSize = 20
+) => {
+  const response = await api.get('/api/board/posts/search', {
+    params: { boardId, keyword, pageNumber, pageSize },
+  });
+  return response.data;
+};
+
+/*
+ * 게시글 작성
+ * POST /api/board/post
+ * @param {string} boardId - 게시판 ID
+ * @param {object} postData - { title, content, files }
+ */
+export const createPost = async (boardId, postData) => {
+  if (!postData?.title) throw new Error('제목이 없습니다.');
+  if (!postData?.content) throw new Error('내용이 없습니다.');
+
+  const formData = new FormData();
+  formData.append('boardId', boardId);
+  formData.append('title', postData.title);
+  formData.append('content', postData.content);
+
+  if (postData.files && postData.files.length > 0) {
+    postData.files.forEach((file) => {
+      formData.append('files', file);
+    });
+  }
+
+  const response = await api.post('/api/board/post', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  return response.data;
+};
+
+/*
+ * 게시글 상세 조회
+ * GET /api/board/post/{postId}
+ * @param {string} postId - 게시글 ID
+ * @param {number} commentPageNumber - 댓글 페이지 번호
+ * @param {number} commentPageSize - 댓글 페이지 크기
+ */
+export const getPost = async (
+  postId,
+  commentPageNumber = 0,
+  commentPageSize = 20
+) => {
+  const response = await api.get(`/api/board/post/${postId}`, {
+    params: { commentPageNumber, commentPageSize },
+  });
+  return response.data;
+};
+
+/*
+ * 게시글 수정
+ * PUT /api/board/post/{postId}
+ * @param {string} postId - 게시글 ID
+ * @param {string} boardId - 게시판 ID
+ * @param {object} postData - { title, content, files }
+ */
+export const updatePost = async (postId, boardId, postData) => {
+  if (!boardId) {
+    console.error('boardId가 없습니다.');
+    throw new Error('boardId is required');
+  }
+
+  const formData = new FormData();
+  formData.append('boardId', boardId);
+  formData.append('title', postData.title);
+  formData.append('content', postData.content);
+
+  if (postData.files && postData.files.length > 0) {
+    postData.files.forEach((file) => {
+      formData.append('files', file);
+    });
+  }
+
+  const response = await api.put(`/api/board/post/${postId}`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  return response.data;
+};
+
+/*
+ * 게시글 삭제
+ * DELETE /api/board/post/{postId}
+ * @param {string} postId - 게시글 ID
+ */
+export const deletePost = async (postId) => {
+  const response = await api.delete(`/api/board/post/${postId}`);
+  return response.data;
+};
+
+// ==================== 좋아요/북마크 API ====================
+
+/*
+ * 좋아요 토글
+ * POST /api/board/{postId}/like
+ * @param {string} postId - 게시글 ID
+ */
+export const toggleLike = async (postId) => {
+  const response = await api.post(`/api/board/${postId}/like`);
+  return response.data;
+};
+
+/*
+ * 북마크 토글
+ * POST /api/board/{postId}/bookmark
+ * @param {string} postId - 게시글 ID
+ */
+export const toggleBookmark = async (postId) => {
+  const response = await api.post(`/api/board/${postId}/bookmark`);
+  return response.data;
+};
+
+// ==================== 댓글 API ====================
+
+/*
+ * 댓글 작성
+ * POST /api/board/comment
+ * @param {object} commentData - { postId, content, parentCommentId? }
+ */
+export const createComment = async (commentData) => {
+  const requestBody = {
+    postId: commentData.postId,
+    content: commentData.content,
+  };
+
+  if (commentData.parentCommentId) {
+    requestBody.parentCommentId = commentData.parentCommentId;
+  }
+
+  const response = await api.post('/api/board/comment', requestBody);
+  return response.data;
+};
+
+/*
+ * 댓글 수정
+ * PUT /api/board/comment/{commentId}
+ * @param {string} commentId - 댓글 ID
+ * @param {object} commentData - { postId, content, parentCommentId? }
+ */
+export const updateComment = async (commentId, commentData) => {
+  const body = {
+    postId: commentData.postId,
+    content: commentData.content,
+    parentCommentId: commentData.parentCommentId ?? null,
+  };
+
+  const response = await api.put(`/api/board/comment/${commentId}`, body);
+  return response.data;
+};
+
+/*
+ * 댓글 삭제
+ * DELETE /api/board/comment/{commentId}
+ * @param {string} commentId - 댓글 ID
+ */
+export const deleteComment = async (commentId) => {
+  const response = await api.delete(`/api/board/comment/${commentId}`);
+  return response.data;
+};
+
+export default api;