[FE] SISC1-149 [Feat] 게시판 UI 컴포넌트 구현

.gitignore

@@ -31,3 +31,6 @@ __pycache__/
 
 # ===== Backend =====
 backend/src/main/java/org/sejongisc/backend/stock/TestController.java
+
+# ===== windows =====
+.desktop.ini

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import Layout from './components/Layout';
 import Home from './pages/Home';
 import Attendance from './pages/Attendance';
 import Board from './pages/Board';
+import PostDetail from './pages/PostDetail';
 import StockGame from './pages/StockGame';
 import BackTest from './pages/BackTest';
 import Mypage from './pages/Mypage';
@@ -23,6 +24,7 @@ function App() {
           <Route path="/attendance" element={<Attendance />} />
           <Route path="/attendance-manage" element={<AttendanceManage />} />
           <Route path="/board" element={<Board />} />
+          <Route path="/board/:postId" element={<PostDetail />} />
           <Route path="/quant-bot" element={<QuantBot />} />
           <Route path="/stock-game" element={<StockGame />} />
           <Route path="/back-test" element={<BackTest />} />

frontend/src/components/Board/BoardActions.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './BoardActions.module.css';
+import PlusIcon from '../../assets/board_plus.svg';
+import DropdownArrowIcon from '../../assets/boardSelectArrow.svg';
+
+const BoardActions = ({ sortOption, onSortChange, onWrite }) => {
+  return (
+    <div className={styles.boardActions}>
+      <div className={styles.selectWrapper}>
+        <select
+          className={styles.sortSelect}
+          value={sortOption}
+          onChange={(e) => onSortChange(e.target.value)}
+        >
+          <option value="latest">최신순</option>
+          <option value="oldest">오래된순</option>
+          <option value="popular">인기순</option>
+        </select>
+        <img
+          src={DropdownArrowIcon}
+          alt="드롭다운"
+          className={styles.selectArrow}
+        />
+      </div>
+
+      <button className={styles.writeButton} onClick={onWrite}>
+        <span>글 작성하기</span>
+        <img src={PlusIcon} alt="작성" />
+      </button>
+    </div>
+  );
+};
+
+export default BoardActions;

frontend/src/components/Board/BoardActions.module.css

@@ -0,0 +1,118 @@
+:root {
+  --color-border: 0.6px solid rgba(0, 0, 0, 1);
+  --color-text: rgba(0, 0, 0, 1);
+  --color-bg-light: #fafafa;
+  --color-primary: #1d80f4;
+  --color-button-gradient: linear-gradient(
+    92.89deg,
+    #d8e8ff 6.95%,
+    #d1d8ff 74.81%,
+    #dddeff 107.39%
+  );
+  --font-family:
+    'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-regular: 400;
+  --font-size: 16px;
+  --line-height: 100%;
+  --letter-spacing: 0%;
+  --gap: 12px;
+  --radius: 4px;
+  --transition: all 0.2s;
+}
+
+.boardActions {
+  width: 100%;
+  max-width: calc(100% - 20px);
+  padding-right: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap);
+  margin-bottom: 32px;
+}
+
+.selectWrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.sortSelect {
+  width: 90px;
+  height: 35px;
+  padding: 8px;
+  padding-right: 20px;
+  border: var(--color-border);
+  border-radius: var(--radius);
+  background: #fff;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: var(--transition);
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-weight: var(--font-regular);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  color: var(--color-text);
+}
+
+.sortSelect:hover {
+  background: var(--color-bg-light);
+}
+
+.sortSelect:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(29, 128, 244, 0.1);
+}
+
+.selectArrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  width: 14px;
+  height: 14px;
+}
+
+.writeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap);
+  width: 122px;
+  height: 35px;
+  padding: 8px 12px;
+  background: var(--color-button-gradient);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+  font-family: var(--font-family);
+  font-weight: var(--font-regular);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  color: var(--color-text);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.writeButton:hover {
+  opacity: 0.9;
+  box-shadow: 0 2px 8px rgba(29, 128, 244, 0.15);
+}
+
+.writeButton:active {
+  opacity: 0.8;
+}
+
+.writeButton img {
+  width: 9.67px;
+  height: 9.67px;
+}

frontend/src/components/Board/Modal.jsx

@@ -0,0 +1,76 @@
+import styles from './Modal.module.css';
+import FolderIcon from '../../assets/boardFolder.svg';
+import CloseIcon from '../../assets/boardCloseIcon.svg';
+import DropdownArrowIcon from '../../assets/boardSelectArrow.svg';
+
+const Modal = ({ title, setTitle, content, setContent, onSave, onClose }) => {
+  return (
+    <div className={styles.overlay} onClick={onClose}>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>게시글 작성</h2>
+          <button className={styles.closeButton} onClick={onClose}>
+            <img src={CloseIcon} alt="닫기" />
+          </button>
+        </div>
+
+        <div className={styles.form}>
+          <div className={styles.titleField}>
+            <label className={styles.label}>제목</label>
+            <input
+              className={styles.input}
+              type="text"
+              placeholder="제목을 입력해주세요."
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          <div className={styles.contentField}>
+            <label className={styles.label}>내용</label>
+            <div className={styles.contentContainer}>
+              <div
+                className={styles.fileSection}
+                onClick={() => document.getElementById('fileUpload').click()}
+              >
+                <img src={FolderIcon} alt="폴더" />
+                <span className={styles.fileText}>파일추가</span>
+                <input
+                  type="file"
+                  id="fileUpload"
+                  className={styles.fileInput}
+                  style={{ display: 'none' }}
+                />
+              </div>
+              <div className={styles.divider}></div>
+              <textarea
+                className={styles.textarea}
+                placeholder="내용을 입력해주세요."
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className={styles.accessField}>
+            <label className={styles.accessLabel}>접근 권한</label>
+            <div className={styles.selectWrapper}>
+              <select className={styles.select} defaultValue="세션선택">
+                <option value="세션선택">세션선택</option>
+              </select>
+              <div className={styles.selectIcon}>
+                <img src={DropdownArrowIcon} alt="드롭다운 화살표" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button className={styles.saveButton} onClick={onSave}>
+          저장
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;