feat : QA반영 (#134)

* feat : 편지 작성 임시저장 편지 전용 편지 전송 api 적용

* feat : 편지 금칙어 api 연결 밑작업

* feat : 관리자 신고 관리 페이지 신고 처리 상태가 PENDING이 아닌 값들 신고 처리 버튼 제거

* design : 랜덤편지 리스트 새로고침 레이아웃 조절

* feat : 토스트UI 포지션 위치 수정 + write 페이지에 토스트UI 적용

* feat : 공유 알림, 편지 도착 알림 모달UI 작업

Author: wldnjs990

src/apis/admin.ts

@@ -41,11 +41,12 @@ const patchReport = async (reportId: number, patchReportRequest: PatchReportRequ
 };
 
 // badwords
-const getBadWords = async (setBadWords: React.Dispatch<React.SetStateAction<BadWords[]>>) => {
+const getBadWords = async () => {
   try {
     const res = await client.get('/api/bad-words');
-    setBadWords(res.data.data);
+    if (!res) throw new Error('금칙어 조회 도중 에러가 발생했습니다.');
     console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
@@ -63,14 +64,34 @@ const postBadWords = async (badWordsRequest: BadWords) => {
 };
 
 // 내 상상대로 만든 필터링 단어 취소 버튼
-const patchBadWords = async (badWordId: number) => {
+const patchBadWordsUsed = async (badWordId: string) => {
   try {
     const res = await client.patch(`/api/bad-words/${badWordId}/status`, { isUsed: false });
     if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
     console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const patchBadWords = async (badWordId: string, word: string) => {
+  try {
+    const res = await client.patch(`/api/bad-words/${badWordId}`, { word: word });
+    if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { postReports, getReports, patchReport, getBadWords, postBadWords, patchBadWords };
+export {
+  postReports,
+  getReports,
+  patchReport,
+  getBadWords,
+  postBadWords,
+  patchBadWordsUsed,
+  patchBadWords,
+};

src/apis/write.ts

@@ -7,7 +7,9 @@ const postLetter = async (data: LetterRequest) => {
     if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
+    const errorWithStatus = error as unknown as { status: number };
     console.error(error);
+    return errorWithStatus;
   }
 };
 
@@ -42,4 +44,17 @@ const postTemporarySave = async (data: TemporaryRequest) => {
   }
 };
 
-export { postLetter, postFirstReply, getPrevLetter, postTemporarySave };
+const postTemporaryLetter = async (data: TemporaryRequest) => {
+  console.log('Temporary request', data);
+  try {
+    const res = await client.post('/api/letters', data);
+    if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    const errorWithStatus = error as unknown as { status: number };
+    console.error(error);
+    return errorWithStatus;
+  }
+};
+
+export { postLetter, postFirstReply, getPrevLetter, postTemporarySave, postTemporaryLetter };

src/assets/icons/index.ts

@@ -25,6 +25,8 @@ import SnowIcon from './snow.svg?react';
 import StampIcon from './stamp.svg?react';
 import ThermostatIcon from './thermostat.svg?react';
 import WarmIcon from './warm.svg?react';
+import ToggleOff from './toggle-off.svg?react';
+import ToggleOn from './toggle-on.svg?react';
 
 export {
   AddIcon,
@@ -54,4 +56,6 @@ export {
   DeleteIcon,
   CancelIcon,
   PencilIcon,
+  ToggleOff,
+  ToggleOn,
 };

src/assets/icons/toggle-off.svg

@@ -21,7 +21,7 @@ export default function ToastItem({ toastObj, index }: { toastObj: ToastObj; ind
 
   const TOAST_POSITION = {
     Top: 'top-20',
-    Bottom: 'bottom-5',
+    Bottom: 'bottom-20',
   };
 
   const animation = `toast-blink ${toastObj.time}s ease-in-out forwards`;

src/assets/icons/toggle-on.svg

@@ -1,43 +1,43 @@
 import { useEffect, useState } from 'react';
 
-import { getBadWords } from '@/apis/admin';
+import { getBadWords, patchBadWordsUsed } 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';
+import FilterTextItem from './components/FilterTextItem';
 
 export default function FilteringManage() {
-  const [badWords, setBadWords] = useState<BadWords[]>([]);
+  const [badWords, setBadWords] = useState<BadWordsData[]>([]);
   const [addInputShow, setAddInputShow] = useState<boolean>(false);
 
+  const handleGetBadWords = async () => {
+    const res = await getBadWords();
+    if (res?.status === 200) {
+      setBadWords(res.data.data);
+    } else {
+      console.log('검열 조회 오류 발생');
+    }
+  };
+
   useEffect(() => {
-    getBadWords(setBadWords);
+    handleGetBadWords();
   }, []);
   return (
     <>
       <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>
-            );
+          {badWords.map((badWord) => {
+            return <FilterTextItem key={badWord.id} badWord={badWord} setBadWords={setBadWords} />;
           })}
           {addInputShow ? (
             <AddInputButton setAddInputShow={setAddInputShow} setBadWords={setBadWords} />
           ) : (
-            <span className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5">
+            <span className="bg-primary-3 flex items-center gap-1.5 rounded-2xl px-4 py-1.5">
               추가하기
               <button
                 onClick={() => {

src/components/ToastItem.tsx

@@ -28,7 +28,7 @@ export default function ReportManage() {
     reportType: null,
     status: 'PENDING',
     page: '1',
-    size: '1',
+    size: '8',
   });
 
   const handleGetReports = async (reportQueryString: ReportQueryString) => {

src/pages/Admin/Filtering.tsx

@@ -8,7 +8,7 @@ export default function AddInputButton({
   setBadWords,
 }: {
   setAddInputShow: React.Dispatch<React.SetStateAction<boolean>>;
-  setBadWords: React.Dispatch<React.SetStateAction<BadWords[]>>;
+  setBadWords: React.Dispatch<React.SetStateAction<BadWordsData[]>>;
 }) {
   const [inputText, setInputText] = useState<BadWords>({ word: '' });
   const inputRef = useRef<HTMLInputElement>(null);
@@ -23,7 +23,7 @@ export default function AddInputButton({
     if (inputText.word === '') return setAddInputShow(false);
     const res = await postBadWords(inputText);
     if (res?.status === 200) {
-      setBadWords((cur) => [...cur, inputText]);
+      setBadWords((cur) => [...cur, res.data.data]);
       setAddInputShow(false);
     }
   };

src/pages/Admin/Report.tsx

@@ -0,0 +1,40 @@
+import { patchBadWordsUsed } from '@/apis/admin';
+import { DeleteIcon, PencilIcon, ToggleOff, ToggleOn } from '@/assets/icons';
+import { useState } from 'react';
+import PatchInput from './PatchInput';
+
+export default function FilterTextItem({
+  badWord,
+  setBadWords,
+}: {
+  badWord: BadWordsData;
+  setBadWords: React.Dispatch<React.SetStateAction<BadWordsData[]>>;
+}) {
+  const [patchInputShow, setPatchInputShow] = useState<boolean>(false);
+
+  return (
+    <span className="bg-primary-3 flex items-center gap-1.5 rounded-2xl px-4 py-1.5">
+      {patchInputShow ? (
+        <PatchInput
+          badWordId={badWord.id}
+          setPatchInputShow={setPatchInputShow}
+          setBadWords={setBadWords}
+        />
+      ) : (
+        badWord.word
+      )}
+
+      <button onClick={() => setPatchInputShow(true)}>
+        <PencilIcon className="h-4 w-4" />
+      </button>
+
+      <button onClick={() => {}}>
+        <DeleteIcon className="h-5 w-5" />
+      </button>
+
+      <button onClick={() => patchBadWordsUsed(badWord.id)}>
+        {true ? <ToggleOn className="h-5 w-5" /> : <ToggleOff className="h-5 w-5" />}
+      </button>
+    </span>
+  );
+}