Merge remote-tracking branch 'origin/develop' into 138-fix-sebin

Author: nirii00

src/apis/admin.ts

@@ -63,11 +63,12 @@ const postBadWords = async (badWordsRequest: BadWords) => {
   }
 };
 
-// 내 상상대로 만든 필터링 단어 취소 버튼
-const patchBadWordsUsed = async (badWordId: string) => {
+const patchBadWordsUsed = async (badWordId: string, isUsed: string) => {
+  const reverseIsUsed = isUsed === 'true' ? false : true;
+
   try {
-    const res = await client.patch(`/api/bad-words/${badWordId}/status`, { isUsed: false });
-    if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
+    const res = await client.patch(`/api/bad-words/${badWordId}/status`, { isUsed: reverseIsUsed });
+    if (!res) throw new Error('검열 활성화/비활성화 도중 에러가 발생했습니다.');
     console.log(res);
     return res;
   } catch (error) {
@@ -78,7 +79,18 @@ const patchBadWordsUsed = async (badWordId: string) => {
 const patchBadWords = async (badWordId: string, word: string) => {
   try {
     const res = await client.patch(`/api/bad-words/${badWordId}`, { word: word });
-    if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
+    if (!res) throw new Error('금칙어 수정중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const deleteBadWords = async (id: string) => {
+  try {
+    const res = await client.delete(`/api/bad-words/${id}`);
+    if (!res) throw new Error('금칙어 삭제 도중 에러가 발생했습니다.');
     console.log(res);
     return res;
   } catch (error) {
@@ -94,4 +106,5 @@ export {
   postBadWords,
   patchBadWordsUsed,
   patchBadWords,
+  deleteBadWords,
 };

src/pages/Admin/Filtering.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { getBadWords, patchBadWordsUsed } from '@/apis/admin';
-import { AddIcon, AlarmIcon, CancelIcon } from '@/assets/icons';
+import { getBadWords } from '@/apis/admin';
+import { AddIcon, AlarmIcon } from '@/assets/icons';
 
 import AddInputButton from './components/AddInputButton';
 import AdminPageTitle from './components/AdminPageTitle';

src/pages/Admin/components/AddInputButton.tsx

@@ -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, res.data.data]);
+      setBadWords((cur) => [...cur, { ...res.data.data, isUsed: `${res.data.data.isUsed}` }]);
       setAddInputShow(false);
     }
   };

src/pages/Admin/components/FilterTextItem.tsx

@@ -1,7 +1,8 @@
-import { patchBadWordsUsed } from '@/apis/admin';
+import { deleteBadWords, patchBadWordsUsed } from '@/apis/admin';
 import { DeleteIcon, PencilIcon, ToggleOff, ToggleOn } from '@/assets/icons';
 import { useState } from 'react';
 import PatchInput from './PatchInput';
+import { twMerge } from 'tailwind-merge';
 
 export default function FilterTextItem({
   badWord,
@@ -12,8 +13,47 @@ export default function FilterTextItem({
 }) {
   const [patchInputShow, setPatchInputShow] = useState<boolean>(false);
 
+  const handleDeleteBadWords = async (id: string) => {
+    const res = await deleteBadWords(id);
+    if (res?.status === 200) {
+      setBadWords((cur) =>
+        cur.filter((e) => {
+          if (e.id === id) {
+            return null;
+          }
+          return e;
+        }),
+      );
+    }
+  };
+
+  const handlePatchBadWordsUsed = async (id: string, isUsed: string) => {
+    const res = await patchBadWordsUsed(id, isUsed);
+    if (res?.status === 200) {
+      setBadWords((cur) =>
+        cur.map((e) => {
+          if (e.id === id) {
+            let reverseIsUsed: string;
+            if (e.isUsed === 'true') {
+              reverseIsUsed = 'false';
+            } else {
+              reverseIsUsed = 'true';
+            }
+            return { ...e, isUsed: reverseIsUsed };
+          }
+          return e;
+        }),
+      );
+    }
+  };
+
+  const buttonStyle = twMerge(
+    `flex items-center gap-1.5 rounded-2xl px-4 py-1.5`,
+    badWord.isUsed === 'true' ? 'bg-primary-3' : 'bg-[#c1c1c1]',
+  );
+
   return (
-    <span className="bg-primary-3 flex items-center gap-1.5 rounded-2xl px-4 py-1.5">
+    <span className={buttonStyle}>
       {patchInputShow ? (
         <PatchInput
           badWordId={badWord.id}
@@ -28,12 +68,20 @@ export default function FilterTextItem({
         <PencilIcon className="h-4 w-4" />
       </button>
 
-      <button onClick={() => {}}>
+      <button
+        onClick={() => {
+          handleDeleteBadWords(badWord.id);
+        }}
+      >
         <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 onClick={() => handlePatchBadWordsUsed(badWord.id, badWord.isUsed)}>
+        {badWord.isUsed === 'true' ? (
+          <ToggleOn className="h-5 w-5" />
+        ) : (
+          <ToggleOff className="h-5 w-5" />
+        )}
       </button>
     </span>
   );

src/pages/Admin/components/Sidebar.tsx

@@ -56,7 +56,7 @@ export default function Sidebar() {
       </section>
       <button className="mt-auto flex w-full items-center gap-3 px-5 py-3 hover:bg-amber-100">
         <AlarmIcon className="text-gray-80 h-5 w-5" />
-        <span className="text-gray-80 body-l-m" onClick={logout}>
+        <span className="text-gray-80 body-l-m" onClick={() => logout()}>
           로그아웃
         </span>
       </button>

src/pages/Home/components/GoToLetterBoard.tsx

@@ -4,9 +4,9 @@ import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
 
 const GoToLetterBoard = () => {
   return (
-    <div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%]">
+    <div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%] lg:right-[-20%]">
       <div className="text-left">
-        <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
+        <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
         <Link to="/board/letter">
           <img
             src={goToLetterBoard}

src/pages/Share/index.tsx

@@ -26,7 +26,7 @@ const ShareApprovalPage = () => {
       if (action === 'approve') {
         setToastActive({
           toastType: 'Success',
-          title: '편지를 성공적으로 공유하였습니다. 게시판에서 확인해보세요!',
+          title: '편지가 공유되었습니다. 게시판에서 확인해보세요!',
           time: 5,
         });
       } else {

src/types/admin.d.ts

@@ -75,6 +75,7 @@ interface BadWords {
 
 interface BadWordsData extends BadWords {
   id: string;
+  isUsed: string;
 }
 
 //