prgrms-web-devcourse-final-project · wldnjs990 · Mar 6, 2025 · Mar 1, 2025 · Mar 1, 2025 · Mar 1, 2025
diff --git a/src/apis/admin.ts b/src/apis/admin.ts
@@ -1,24 +1,39 @@
 import client from './client';
 
-const getReports = async (
-  setReports: React.Dispatch<React.SetStateAction<Report[]>>,
-  queryString: string = '',
-  callBack?: () => void,
-) => {
+const postReports = async (postReportRequest: PostReportRequest) => {
   try {
-    const res = await client.get(`/api/reports${queryString}`);
-    setReports(res.data.data);
-    if (callBack) callBack();
-    console.log(res.data.data);
+    const res = await client.post(`/api/reports`, postReportRequest);
+    if (res.status === 200) {
+      return res;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const getReports = async (reportQueryString: ReportQueryString) => {
+  try {
+    const queryParams = new URLSearchParams();
+    if (reportQueryString.reportType !== null)
+      queryParams.append('reportType', reportQueryString.reportType);
+    if (reportQueryString.status !== null) queryParams.append('status', reportQueryString.status);
+    if (reportQueryString.page !== null) queryParams.append('page', reportQueryString.page);
+    if (reportQueryString.size !== null) queryParams.append('size', reportQueryString.size);
+
+    const queryStrings = queryParams.toString();
+    const res = await client.get(`/api/reports?${queryStrings}`);
+    if (!res) throw new Error('신고 목록 데이터 조회 도중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-const patchReport = async (reportId: number, reportRequest: ReportRequest) => {
+const patchReport = async (reportId: number, patchReportRequest: PatchReportRequest) => {
   try {
-    console.log(`/api/reports/${reportId}`, reportRequest);
-    const res = await client.patch(`/api/reports/${reportId}`, reportRequest);
+    console.log(`/api/reports/${reportId}`, patchReportRequest);
+    const res = await client.patch(`/api/reports/${reportId}`, patchReportRequest);
     console.log(res);
   } catch (error) {
     console.error(error);
@@ -61,4 +76,4 @@ const patchBadWords = async (
   }
 };
 
-export { getReports, patchReport, getBadWords, postBadWords, patchBadWords };
+export { postReports, getReports, patchReport, getBadWords, postBadWords, patchBadWords };
diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -16,6 +16,7 @@ import LikeFilledIcon from './like-filled.svg?react';
 import LikeOutlinedIcon from './like-outlined.svg?react';
 import NaverIcon from './naver.svg?react';
 import NoticeIcon from './notice.svg?react';
+import PencilIcon from './pencil.svg?react';
 import PersonIcon from './person.svg?react';
 import RestartIcon from './restart.svg';
 import SirenFilledIcon from './siren-filled.svg?react';
@@ -52,4 +53,5 @@ export {
   LikeOutlinedIcon,
   DeleteIcon,
   CancelIcon,
+  PencilIcon,
 };
diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg
diff --git a/src/components/ReportModal.tsx b/src/components/ReportModal.tsx
@@ -1,57 +1,91 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import { postReports } from '@/apis/admin';
+
 import ConfirmModal from './ConfirmModal';
 import TextareaField from './TextareaField';
 
 interface ReportModalProps {
+  reportType: ReportType;
+  letterId: number | null;
   onClose: () => void;
 }
 
-const REPORT_REASON = ['욕설', '비방', '폭언', '성희롱', '기타'];
+interface ReportReason {
+  name: string;
+  type: Reason;
+}
+const REPORT_REASON: ReportReason[] = [
+  { name: '욕설', type: 'ABUSE' },
+  { name: '비방', type: 'DEFAMATION' },
+  { name: '폭언', type: 'THREATS' },
+  { name: '성희롱', type: 'HARASSMENT' },
+  { name: '기타', type: 'ETC' },
+];
 
-const ReportModal = ({ onClose }: ReportModalProps) => {
-  const [selected, setSelected] = useState('');
-  const [additionalReason, setAdditionalReason] = useState('');
+const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
+  const [postReportRequest, setPostReportRequest] = useState<PostReportRequest>({
+    reportType: reportType,
+    reasonType: '',
+    reason: '',
+    letterId: letterId,
+  });
 
-  const handleReasonClick = (reason: string) => {
-    if (selected === reason) setSelected('');
-    else setSelected(reason);
+  const handleReasonClick = (reason: Reason) => {
+    if (postReportRequest.reasonType === reason)
+      setPostReportRequest((cur) => ({ ...cur, reasonType: '' }));
+    else setPostReportRequest((cur) => ({ ...cur, reasonType: reason }));
   };
 
-  const handleSubmit = () => {
-    onClose();
+  const handleSubmit = async () => {
+    const res = await postReports(postReportRequest);
+    if (res?.status === 200) {
+      alert('신고 처리되었습니다.');
+      onClose();
+    } else if (res?.status === 409) {
+      alert('신고한 이력이 있습니다.');
+      onClose();
+    }
   };
 
+  useEffect(() => {
+    if (!postReportRequest.letterId) {
+      alert('신고 모달을 여는 과정에서 오류가 발생했습니다. 새로고침을 눌러주세요');
+      onClose();
+    }
+  });
+
   return (
     <ConfirmModal
       title="신고 사유를 선택해주세요"
       description="신고한 게시물은 관리자 검토 후 처리됩니다."
       cancelText="취소하기"
       confirmText="제출하기"
-      confirmDisabled={selected === ''}
+      confirmDisabled={postReportRequest.reasonType === ''}
       onCancel={onClose}
       onConfirm={handleSubmit}
     >
       <section className="my-6 flex flex-wrap gap-x-2.5 gap-y-2">
-        {REPORT_REASON.map((reason) => (
+        {REPORT_REASON.map((reason, idx) => (
           <button
+            key={idx}
             type="button"
             className={twMerge(
               'body-m rounded-full bg-white px-5 py-1.5 text-black',
-              selected === reason && 'bg-primary-2',
+              postReportRequest.reasonType === reason.type && 'bg-primary-2',
             )}
-            onClick={() => handleReasonClick(reason)}
+            onClick={() => handleReasonClick(reason.type)}
           >
-            {reason}
+            {reason.name}
           </button>
         ))}
       </section>
       <TextareaField
         rows={3}
         placeholder="이곳을 눌러 추가 사유를 작성해주세요"
-        value={additionalReason}
-        onChange={(e) => setAdditionalReason(e.target.value)}
+        value={postReportRequest.reason}
+        onChange={(e) => setPostReportRequest((cur) => ({ ...cur, reason: e.target.value }))}
       />
     </ConfirmModal>
   );

diff --git a/src/pages/Admin/FilteredLetter.tsx b/src/pages/Admin/FilteredLetter.tsx
@@ -1,5 +1,6 @@
 import { AlarmIcon } from '@/assets/icons';
 
+import AdminPageTitle from './components/AdminPageTitle';
 import FilteredLetterListItem from './components/FilteredLetterListItem';
 import ListHeaderFrame from './components/ListHeaderFrame';
 import WrapperFrame from './components/WrapperFrame';
@@ -8,20 +9,23 @@ import WrapperTitle from './components/WrapperTitle';
 export default function FilteredLetterManage() {
   const arr = new Array(10).fill(null);
   return (
-    <WrapperFrame>
-      <WrapperTitle title="필터링 단어로 차단된 편지 목록" Icon={AlarmIcon} />
-      <section className="mt-5 flex flex-col">
-        <ListHeaderFrame>
-          <span className="admin-list-set basis-1/10">ID</span>
-          <span className="admin-list-set basis-2/10">제보자 이메일</span>
-          <span className="admin-list-set basis-2/10">작성자 이메일</span>
-          <span className="admin-list-set basis-2/10">차단 일자</span>
-          <span className="admin-list-set basis-2/10">포함된 단어</span>
-        </ListHeaderFrame>
-        {arr.map((_, idx) => {
-          return <FilteredLetterListItem key={idx} />;
-        })}
-      </section>
-    </WrapperFrame>
+    <>
+      <AdminPageTitle>검열 관리 / 차단된 편지 목록</AdminPageTitle>
+      <WrapperFrame>
+        <WrapperTitle title="필터링 단어로 차단된 편지 목록" Icon={AlarmIcon} />
+        <section className="mt-5 flex flex-col">
+          <ListHeaderFrame>
+            <span className="admin-list-set basis-1/10">ID</span>
+            <span className="admin-list-set basis-2/10">제보자 이메일</span>
+            <span className="admin-list-set basis-2/10">작성자 이메일</span>
+            <span className="admin-list-set basis-2/10">차단 일자</span>
+            <span className="admin-list-set basis-2/10">포함된 단어</span>
+          </ListHeaderFrame>
+          {arr.map((_, idx) => {
+            return <FilteredLetterListItem key={idx} />;
+          })}
+        </section>
+      </WrapperFrame>
+    </>
   );
 }
diff --git a/src/pages/Admin/Filtering.tsx b/src/pages/Admin/Filtering.tsx
@@ -4,6 +4,7 @@ import { getBadWords } from '@/apis/admin';
 import { AddIcon, AlarmIcon, CancelIcon } from '@/assets/icons';
 
 import AddInputButton from './components/AddInputButton';
+import AdminPageTitle from './components/AdminPageTitle';
 import WrapperFrame from './components/WrapperFrame';
 import WrapperTitle from './components/WrapperTitle';
 
@@ -15,37 +16,40 @@ export default function FilteringManage() {
     getBadWords(setBadWords);
   }, []);
   return (
-    <WrapperFrame>
-      <WrapperTitle title="필터링 단어 설정" Icon={AlarmIcon} />
-      <div className="mt-5 flex w-full flex-wrap gap-4">
-        {badWords.map((badWord, idx) => {
-          return (
-            <span
-              key={idx}
-              className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5"
-            >
-              {badWord.word}
-              <button>
-                <CancelIcon className="h-4 w-4" />
+    <>
+      <AdminPageTitle>검열 관리 / 필터링 단어 설정</AdminPageTitle>
+      <WrapperFrame>
+        <WrapperTitle title="필터링 단어" Icon={AlarmIcon} />
+        <div className="mt-5 flex w-full flex-wrap gap-4">
+          {badWords.map((badWord, idx) => {
+            return (
+              <span
+                key={idx}
+                className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5"
+              >
+                {badWord.word}
+                <button>
+                  <CancelIcon className="h-4 w-4" />
+                </button>
+              </span>
+            );
+          })}
+          {addInputShow ? (
+            <AddInputButton setAddInputShow={setAddInputShow} setBadWords={setBadWords} />
+          ) : (
+            <span className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5">
+              추가하기
+              <button
+                onClick={() => {
+                  setAddInputShow(true);
+                }}
+              >
+                <AddIcon className="h-4 w-4" />
               </button>
             </span>
-          );
-        })}
-        {addInputShow ? (
-          <AddInputButton setAddInputShow={setAddInputShow} setBadWords={setBadWords} />
-        ) : (
-          <span className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5">
-            추가하기
-            <button
-              onClick={() => {
-                setAddInputShow(true);
-              }}
-            >
-              <AddIcon className="h-4 w-4" />
-            </button>
-          </span>
-        )}
-      </div>
-    </WrapperFrame>
+          )}
+        </div>
+      </WrapperFrame>
+    </>
   );
 }