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

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/index.ts

@@ -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/components/BackButton.tsx

@@ -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/components/ResultLetter.tsx

@@ -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/layouts/MobileLayout.tsx

@@ -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;

src/pages/Admin/Report.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+
+import { client } from '@/apis/client';
+import { AlarmIcon } from '@/assets/icons';
+
+import DetailFrame from './components/DetailFrame';
+import ListItem from './components/ListItem';
+import WrapperFrame from './components/WrapperFrame';
+
+export default function ReportManage() {
+  const [detailModalOpen, setDetailModalOpen] = useState<boolean>(false);
+  // {
+  //   id: '001',
+  //   reporterEmail: '[email protected]',
+  //   targetEmail: '[email protected]',
+  //   reportedAt: new Date(2025, 1, 20),
+  //   letterId:2001,
+  //   sharePostId:null,
+  //   eventId:null,
+  //   reportType:'LETTER',
+  //   reason:"ABUSE",
+  //   reasonDetail:null,
+  //   status: 'PENDING',
+  // },
+  const DUMMY = [
+    {
+      id: '001',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(2020, 12, 4),
+      reason: '욕설',
+    },
+    {
+      id: '002',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(2020, 12, 4),
+      reason: '욕설',
+    },
+    {
+      id: '003',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(2000, 6, 23),
+      reason: '욕설',
+    },
+    {
+      id: '004',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(1080, 11, 5),
+      reason: '욕설',
+    },
+    {
+      id: '005',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(2040, 1, 2),
+      reason: '욕설',
+    },
+    {
+      id: '006',
+      reporterEmail: '[email protected]',
+      targetEmail: '[email protected]',
+      reportedAt: new Date(2025, 1, 23),
+      reason: '욕설',
+    },
+  ];
+  const modalContents = [
+    {
+      title: '신고 목록 삭제',
+      onClick: () => {
+        console.log('삭제');
+      },
+    },
+    {
+      title: '작성자 활동 정지',
+      onClick: () => {
+        console.log('정지');
+      },
+    },
+  ];
+  // const [allReports, setAllReports] = useState();
+  useEffect(() => {
+    const getAllReports = async () => {
+      const res = await client.get('/api/reports');
+      console.log(res);
+    };
+    getAllReports();
+    const getReportDetail = async () => {
+      const res = await client.get('/api/reports/2');
+      console.log(res);
+    };
+    getReportDetail();
+    const postReport = async () => {
+      const res = await client.post('/api/reports', {
+        letterId: 2010,
+        reportType: 'POST',
+        reason: 'HARASSMENT',
+        reasonDetail: '테스트용',
+      });
+      console.log(res);
+    };
+    postReport();
+  }, []);
+  return (
+    <WrapperFrame>
+      <span className="h3-sb flex items-center gap-4.5">
+        <AlarmIcon className="h-9 w-9"></AlarmIcon> 신고 편지 목록
+      </span>
+      <section className="mt-5 flex flex-col">
+        <div className="bg-primary-3 flex w-full border-b px-6 py-4">
+          <div className="flex w-[80%] items-center">
+            <span className="ml-4 flex basis-1/10 overflow-ellipsis">ID</span>
+            <span className="ml-4 flex basis-2/10">제보자 이메일</span>
+            <span className="ml-4 flex basis-2/10">작성자 이메일</span>
+            <span className="ml-4 flex basis-2/10">제보 일자</span>
+            <span className="ml-4 flex basis-3/10">제보 사유</span>
+          </div>
+        </div>
+        {DUMMY.map((data, idx) => (
+          <ListItem
+            data={data}
+            modalContents={modalContents}
+            key={idx}
+            setDetailModalOpen={setDetailModalOpen}
+          />
+        ))}
+      </section>
+      {detailModalOpen && (
+        <DetailFrame closeEvent={setDetailModalOpen}>
+          <>
+            <span className="h2-sb">제보 편지 상세 조회</span>
+          </>
+        </DetailFrame>
+      )}
+    </WrapperFrame>
+  );
+}

src/pages/Admin/admin.d.ts

@@ -0,0 +1,31 @@
+interface Report {
+  id: number;
+  reporterEmail: string;
+  targetEmail: string;
+  reportedAt: Date;
+  letterId: number | null;
+  comment: string | null;
+  sharePostId: number | null;
+  reportType: 'LETTER' | 'POST' | 'COMMENT';
+  reason: 'ABUSE' | 'DEFAMATION' | 'HARASSMENT' | 'THREATS' | 'ETC';
+  reasonDetail: string | null;
+  status: 'PENDING' | 'RESOLVED' | 'REJECTED';
+}
+
+interface ReportDetail {
+  id: number;
+  memberId: number | null;
+  letterId: number | null;
+  sharePostId: number | null;
+  eventId: number | null;
+  reportType: 'LETTER' | 'POST' | 'COMMENT' | 'EVENT';
+  reason: 'ABUSE' | 'DEFAMATION' | 'HARASSMENT' | 'THREATS' | 'ETC';
+  reasonDetail: string | null;
+  status: 'PENDING' | 'RESOLVED' | 'REJECTED';
+  reportedAt: Date;
+  createdAt: Date;
+  letterDetail: {
+    title: string;
+    content: string;
+  };
+}