design : 랜덤 편지 페이지 & 편지 상세 페이지 퍼블리싱 (#17)

* design:랜덤편지 메인화면, 편지선택 모달 퍼블리싱

* chore:스와이퍼 설치

* design:랜덤 편지 페이지 스와이퍼 적용

* design:편지 상세보기 퍼블리싱

* design:편지 작성 페이지 레이아웃 관련 수정

* design:랜덤편지 페이지 퍼블리싱

* design:편지 상세 페이지 퍼블리싱

* design:랜덤편지 세부사항 수정 & 공용 컴포넌트들로 코드 수정

* refactor:코드리뷰 수정사항 반영

Author: wldnjs990

package.json

@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.1.5",
+    "swiper": "^11.2.4",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "zustand": "^5.0.3"

pnpm-lock.yaml

@@ -1,25 +1,37 @@
 import AlarmIcon from './alarm.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
+import CloudIcon from './cloud.svg?react';
+import ColorSirenIcon from './color-siren.svg?react';
 import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
 import InformationIcon from './infromation.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 RestartIcon from './restart.svg';
 import SirenFilledIcon from './siren-filled.svg?react';
 import SirenOutlinedIcon from './siren-outlined.svg?react';
+import SnowIcon from './snow.svg?react';
+import ThermostatIcon from './thermostat.svg?react';
+import WarmIcon from './warm.svg?react';
 
 export {
   AlarmIcon,
   PersonIcon,
   ArrowLeftIcon,
   InformationIcon,
-  SirenFilledIcon,
-  SirenOutlinedIcon,
   EnvelopeIcon,
   BoardIcon,
+  RestartIcon,
+  CloudIcon,
+  SnowIcon,
+  ThermostatIcon,
+  WarmIcon,
+  ColorSirenIcon,
+  SirenFilledIcon,
+  SirenOutlinedIcon,
   NoticeIcon,
   LikeFilledIcon,
   LikeOutlinedIcon,