design, feat, chore : 편지 작성 페이지 추가 퍼블리싱 + 기능구현 + API연결 + 관리자페이지 퍼블리싱 (#28)

* design : 카테고리 버튼 사이즈 full로 변경

* design : 옵션 슬라이드 바텀시트 애니메이션 구현(약간 미완)

* refactor:관리자 / 모바일용 레이아웃 분리

* design : 관리자 페이지 퍼블리싱

* design:관리자 페이지 퍼블리싱

* refactor : 폰트 선택 모달 아이콘 svgr 변경 + 목API 형식에 맞춰 타입 수정 + API 연결 작업 90% 완료

* feat:글작성 페이지 쿼리스트링으로 이전편지 가져오기 API연결

* feat:편지 상세 페이지 API 데이터바인딩 90%완료(유저 우편번호 데이터 필요)

* feat:편지삭제 api 생성

* feat:글작성, 상세 페이지 뒤로가기 버튼 + 상세페이지 글 삭제 버튼 추가

* refactor : ResultLetter 타입 변경

* feat:글 작성 페이지 네비게이션 가드 테스트

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

Author: wldnjs990

src/App.tsx

@@ -2,6 +2,9 @@ import { Route, Routes } from 'react-router';
 
 import useViewport from './hooks/useViewport';
 import Layout from './layouts/Layout';
+import MobileLayout from './layouts/MobileLayout';
+import AdminPage from './pages/Admin';
+import ReportManage from './pages/Admin/Report';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
 import LetterBoardPage from './pages/LetterBoard';
@@ -22,7 +25,7 @@ const App = () => {
 
   return (
     <Routes>
-      <Route>
+      <Route element={<MobileLayout />}>
         <Route index element={<Home />} />
         <Route path="login" element={<LoginPage />} />
         <Route path="landing" element={<Landing />} />
@@ -49,6 +52,9 @@ const App = () => {
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
       </Route>
+      <Route path="admin" element={<AdminPage />}>
+        <Route path="report" element={<ReportManage />} />
+      </Route>
     </Routes>
   );
 };

src/apis/letterDetail.ts

@@ -0,0 +1,26 @@
+import { client } from './client';
+
+const getLetter = async (
+  letterId: string,
+  setLetterState: React.Dispatch<React.SetStateAction<LetterDetail | null>>,
+) => {
+  try {
+    const res = await client.get(`/api/letters/${letterId}`);
+    setLetterState(res.data.data);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const deleteLetter = async (letterId: string) => {
+  try {
+    console.log(`/api/letters/${letterId}`);
+    const res = await client.delete(`/api/letters/${letterId}`);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getLetter, deleteLetter };

src/apis/write.ts

@@ -0,0 +1,29 @@
+import { client } from './client';
+
+const postLetter = async (
+  data: LetterRequest,
+  setState?: React.Dispatch<React.SetStateAction<boolean>>,
+) => {
+  try {
+    const res = await client.post('/api/letters', data);
+    if (setState) setState(true);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const getPrevLetter = async (
+  setPrevLetterState: React.Dispatch<React.SetStateAction<PrevLetter[]>>,
+  letterId: string,
+) => {
+  try {
+    const res = await client.get(`/api/letters/${letterId}/previous`);
+    setPrevLetterState(res.data.data);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { postLetter, getPrevLetter };

src/assets/icons/arrow-down.svg

@@ -1,12 +1,15 @@
 import AlarmIcon from './alarm.svg?react';
+import ArrowDownIcon from './arrow-down.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
+import CheckIcon from './check.svg?react';
 import CloudIcon from './cloud.svg?react';
 import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
 import GoogleIcon from './google.svg?react';
 import InformationIcon from './information.svg?react';
 import KakaoIcon from './kakao.svg?react';
+import KebobMenuIcon from './kebob-menu.svg?react';
 import LikeFilledIcon from './like-filled.svg?react';
 import LikeOutlinedIcon from './like-outlined.svg?react';
 import NaverIcon from './naver.svg?react';
@@ -26,9 +29,12 @@ export {
   GoogleIcon,
   StampIcon,
   AlarmIcon,
+  CheckIcon,
+  ArrowDownIcon,
   PersonIcon,
   ArrowLeftIcon,
   InformationIcon,
+  KebobMenuIcon,
   EnvelopeIcon,
   BoardIcon,
   RestartIcon,

src/assets/icons/check.svg

@@ -0,0 +1,12 @@
+import { useNavigate } from 'react-router';
+
+import { ArrowLeftIcon } from '@/assets/icons';
+
+export default function BackButton() {
+  const navigate = useNavigate();
+  return (
+    <button onClick={() => navigate(-1)} aria-label="뒤로 가기">
+      <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+    </button>
+  );
+}

src/assets/icons/index.ts

@@ -1,12 +1,12 @@
 import letterPink from '@/assets/images/letter-pink.png';
 
-import { STAMPS } from '../pages/Write/constants';
+import { CATEGORYS } from '../pages/Write/constants';
 
 export default function ResultLetter({
-  stampName = '위로와 공감',
+  categoryName = 'CONSOLATION',
   title,
 }: {
-  stampName: Stamp;
+  categoryName: Category;
   title: string;
 }) {
   const address = '1A3E2';
@@ -15,15 +15,15 @@ export default function ResultLetter({
 
   return (
     <div
-      className="flex w-full flex-col gap-[35px] p-4"
+      className="flex w-full max-w-[300px] flex-col gap-[35px] p-4"
       style={{ backgroundImage: `url(${letterPink})` }}
     >
       <div className="flex justify-between gap-3">
         <div className="flex flex-col gap-2.5">
           <span className="caption-b text-gray-60">따숨이님께</span>
           <span className="caption-r text-gray-80 line-clamp-3 break-all">{title}</span>
         </div>
-        <img src={STAMPS[stampName]} alt="우표" />
+        <img src={CATEGORYS[categoryName]} alt="우표" />
       </div>
       <div className="flex flex-col gap-[5px]">
         <span className="caption-sb text-gray-60">{today}</span>

src/assets/icons/kebob-menu.svg

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router';
+
+const MobileLayout = () => {
+  return (
+    <div className="mobile-bg">
+      <div className="mobile-layout">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+export default MobileLayout;