design: 게시판 퍼블리싱 (#14)

* design: 편지 게시판 페이지 내 편지 미리보기 컴포넌트 퍼블리싱

* design: 롤링페이퍼 공지 컴포넌트 퍼블리싱

* design: 편지 공유 게시판 퍼블리싱

* refactor: ConfirmModal 배경 이미지 삽입 방식 개선

* rename: 파일명 형식 통일을 위한 에셋 파일명 수정

* design: 롤링페이퍼 편지 컴포넌트 퍼블리싱

* design: 롤링페이퍼 페이지 퍼블리싱

* refactor: ModalOverlay 컴포넌트로 모달의 외부 영역 클릭 로직 이동

* design: 롤링페이퍼 페이지 메시지 상세조회 모달 퍼블리싱

* design: 모달 활성화 시, 스크롤이 안되도록 수정

* design: 신고 모달 컴포넌트 퍼블리싱

* design: 롤링페이퍼 메사지 추가 모달 버픕ㄹ리싱

* design: Header 컴포넌트 position을 fixed로 변경

* refactor: 하단 배경 컴포넌트로 분리

* design: 마이페이지 중 내가 올린 게시물 페이지 퍼블리싱

* design: 게시판 상세 페이지의 편지 컴포넌트 퍼블리싱

* design: 편지 공유 게시글 상세 페이지 퍼블리싱

* feat: 게시글 상세 페이지 헤더 컴포넌트 뒤로가기 기능 추가

* remove: 중복 에셋 제거

* refactor: 중복 스타일 코드 utilities로 분리

Author: AAminha

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.12.0",
     "@mui/icons-material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",

pnpm-lock.yaml

@@ -31,12 +31,15 @@ const App = () => {
           <Route path=":id" element={<LetterDetailPage />} />
         </Route>
         <Route path="board">
-          <Route path="letter" element={<LetterBoardPage />} />
+          <Route element={<Layout />}>
+            <Route path="rolling/:id" element={<RollingPaperPage />} />
+            <Route path="letter" element={<LetterBoardPage />} />
+          </Route>
           <Route path="letter/:id" element={<LetterBoardDetailPage />} />
-          <Route path="rolling/:id" element={<RollingPaperPage />} />
         </Route>
         <Route path="mypage" element={<Layout />}>
           <Route index element={<MyPage />} />
+          <Route path="board" element={<LetterBoardPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
       </Route>

src/App.tsx

@@ -1,8 +1,25 @@
 import AlarmIcon from './alarm.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
+import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
+import LikeFilledIcon from './like-filled.svg?react';
+import LikeOutlinedIcon from './like-outlined.svg?react';
+import NoticeIcon from './notice.svg?react';
 import PersonIcon from './person.svg?react';
-import SirenIcon from './siren.svg?react';
+import SirenFilledIcon from './siren-filled.svg?react';
+import SirenOutlinedIcon from './siren-outlined.svg?react';
 
-export { AlarmIcon, PersonIcon, ArrowLeftIcon, SirenIcon, EnvelopeIcon, BoardIcon };
+export {
+  AlarmIcon,
+  PersonIcon,
+  ArrowLeftIcon,
+  SirenFilledIcon,
+  SirenOutlinedIcon,
+  EnvelopeIcon,
+  BoardIcon,
+  NoticeIcon,
+  LikeFilledIcon,
+  LikeOutlinedIcon,
+  DeleteIcon,
+};