feat : 알림 페이지 알림 확인 처리 안되던 현상 수정 + 신고페이지 4차 구현 (#101)

* refactor : API 일부 리팩토링

* feat : 알림페이지 알림 단일확인시 읽음알림으로 처리되지않던 현상 수정

* feat : 신고 페이지 status 필터링 임시 구현(수정해야함)

Author: wldnjs990

src/apis/admin.ts

@@ -3,9 +3,8 @@ import client from './client';
 const postReports = async (postReportRequest: PostReportRequest) => {
   try {
     const res = await client.post(`/api/reports`, postReportRequest);
-    if (res.status === 200) {
-      return res;
-    }
+    if (!res) throw new Error('신고 요청중 에러가 발생했습니다.');
+    return res;
   } catch (error) {
     console.error(error);
   }
@@ -51,25 +50,22 @@ const getBadWords = async (setBadWords: React.Dispatch<React.SetStateAction<BadW
   }
 };
 
-const postBadWords = async (badWordsRequest: BadWords, callBack?: () => void) => {
+const postBadWords = async (badWordsRequest: BadWords) => {
   try {
     const res = await client.post('/api/bad-words', badWordsRequest);
-    if (callBack) callBack();
     console.log(res);
+    if (!res) throw new Error('금칙어 등록 도중 에러가 발생했습니다.');
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
 // 내 상상대로 만든 필터링 단어 취소 버튼
-const patchBadWords = async (
-  badWordId: number,
-  badWordsRequest: BadWords,
-  callBack?: () => void,
-) => {
+const patchBadWords = async (badWordId: number) => {
   try {
-    const res = await client.patch(`/api/bad-words/${badWordId}/status`, badWordsRequest);
-    if (callBack) callBack();
+    const res = await client.patch(`/api/bad-words/${badWordId}/status`, { isUsed: false });
+    if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
     console.log(res);
   } catch (error) {
     console.error(error);

src/pages/Admin/Report.tsx

@@ -28,7 +28,7 @@ export default function ReportManage() {
     reportType: null,
     status: 'PENDING',
     page: '1',
-    size: '2',
+    size: '1',
   });
 
   const handleGetReports = async (reportQueryString: ReportQueryString) => {
@@ -47,14 +47,30 @@ export default function ReportManage() {
     setReportQueryString((cur) => ({ ...cur, page: page }));
   };
 
+  const handleStatus = (status: Status) => {
+    setReportQueryString((cur) => ({ ...cur, status: status }));
+  };
+
   useEffect(() => {
     handleGetReports(reportQueryString);
   }, [reportQueryString]);
   return (
     <>
       <AdminPageTitle>검열 관리 / 신고 편지 목록</AdminPageTitle>
       <WrapperFrame>
-        <WrapperTitle title="신고 편지 목록" Icon={AlarmIcon} />
+        <div className="flex items-center justify-between">
+          <WrapperTitle title="신고 편지 목록" Icon={AlarmIcon} />
+          <select
+            onChange={(e) => {
+              const status = e.currentTarget.value as Status;
+              handleStatus(status);
+            }}
+          >
+            <option value="PENDING">대기중</option>
+            <option value="RESOLVED">승인됨</option>
+            <option value="REJECTED">거절됨</option>
+          </select>
+        </div>
 
         <section className="mt-5 flex flex-col">
           <ListHeaderFrame>

src/pages/Admin/components/AddInputButton.tsx

@@ -19,12 +19,13 @@ export default function AddInputButton({
     target.style.width = `${target.scrollWidth}px`;
   };
 
-  const handlePostBadWords = () => {
+  const handlePostBadWords = async () => {
     if (inputText.word === '') return setAddInputShow(false);
-    postBadWords(inputText, () => {
+    const res = await postBadWords(inputText);
+    if (res?.status === 200) {
       setBadWords((cur) => [...cur, inputText]);
       setAddInputShow(false);
-    });
+    }
   };
 
   useEffect(() => {

src/pages/Admin/components/PagenationNavigation.tsx

@@ -50,7 +50,8 @@ export default function PagenationNavigation({
     }
   };
 
-  const buttonStyle = 'rounded-full bg-white w-8 h-8 disabled:bg-gray-20';
+  const buttonStyle =
+    'rounded-full bg-white w-8 h-8 disabled:bg-gray-20 disabled:text-white disabled:cursor-auto';
 
   return (
     <div className="mt-5 flex h-10 w-full items-center justify-center">

src/pages/Notifications/index.tsx

@@ -48,7 +48,16 @@ const NotificationsPage = () => {
 
   const handlePatchReadNotification = async (timelineId: number) => {
     const res = await patchReadNotification(timelineId);
-    if (res?.status !== 200) {
+    if (res?.status === 200) {
+      setNoti((curNoti) =>
+        curNoti.map((noti) => {
+          if (noti.timelineId === timelineId) {
+            return { ...noti, read: true };
+          }
+          return noti;
+        }),
+      );
+    } else {
       console.log('읽음처리 에러 발생');
     }
   };