diff --git a/.gitignore b/.gitignore index 362bb45b..6b86470f 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,6 @@ __pycache__/ # ===== Backend ===== backend/src/main/java/org/sejongisc/backend/stock/TestController.java + +# ===== windows ===== +.desktop.ini \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f08df15c..17da1d44 100644 --- a/frontend/src/App.jsx +++ b/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() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/frontend/src/assets/boardBookMark.fill.svg b/frontend/src/assets/boardBookMark.fill.svg new file mode 100644 index 00000000..a6fe9c82 --- /dev/null +++ b/frontend/src/assets/boardBookMark.fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardBookMark.svg b/frontend/src/assets/boardBookMark.svg new file mode 100644 index 00000000..9d7b7233 --- /dev/null +++ b/frontend/src/assets/boardBookMark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardCloseIcon.svg b/frontend/src/assets/boardCloseIcon.svg new file mode 100644 index 00000000..29bfc4a8 --- /dev/null +++ b/frontend/src/assets/boardCloseIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardFolder.svg b/frontend/src/assets/boardFolder.svg new file mode 100644 index 00000000..2984e0b5 --- /dev/null +++ b/frontend/src/assets/boardFolder.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardHeart.fill.svg b/frontend/src/assets/boardHeart.fill.svg new file mode 100644 index 00000000..898fa8c8 --- /dev/null +++ b/frontend/src/assets/boardHeart.fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardHeart.svg b/frontend/src/assets/boardHeart.svg new file mode 100644 index 00000000..def4c24d --- /dev/null +++ b/frontend/src/assets/boardHeart.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardPencil.svg b/frontend/src/assets/boardPencil.svg new file mode 100644 index 00000000..f09450e6 --- /dev/null +++ b/frontend/src/assets/boardPencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardSearchArrow.svg b/frontend/src/assets/boardSearchArrow.svg new file mode 100644 index 00000000..379b70ef --- /dev/null +++ b/frontend/src/assets/boardSearchArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardSelectArrow.svg b/frontend/src/assets/boardSelectArrow.svg new file mode 100644 index 00000000..c5100271 --- /dev/null +++ b/frontend/src/assets/boardSelectArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/boardSortArrow.svg b/frontend/src/assets/boardSortArrow.svg new file mode 100644 index 00000000..6300239c --- /dev/null +++ b/frontend/src/assets/boardSortArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/board_plus.svg b/frontend/src/assets/board_plus.svg new file mode 100644 index 00000000..e4c2fb8f --- /dev/null +++ b/frontend/src/assets/board_plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/board_profile.svg b/frontend/src/assets/board_profile.svg new file mode 100644 index 00000000..556e1244 --- /dev/null +++ b/frontend/src/assets/board_profile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/Board/BoardActions.jsx b/frontend/src/components/Board/BoardActions.jsx new file mode 100644 index 00000000..69d94437 --- /dev/null +++ b/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 ( +
+
+ + 드롭다운 +
+ + +
+ ); +}; + +export default BoardActions; diff --git a/frontend/src/components/Board/BoardActions.module.css b/frontend/src/components/Board/BoardActions.module.css new file mode 100644 index 00000000..8540f0d1 --- /dev/null +++ b/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; +} diff --git a/frontend/src/components/Board/Modal.jsx b/frontend/src/components/Board/Modal.jsx new file mode 100644 index 00000000..5c01ff1c --- /dev/null +++ b/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 ( +
+
e.stopPropagation()}> +
+

게시글 작성

+ +
+ +
+
+ + setTitle(e.target.value)} + /> +
+ +
+ +
+
document.getElementById('fileUpload').click()} + > + 폴더 + 파일추가 + +
+
+