feat : 금칙어 수정, 활성/비활성, 삭제 api 연결 완료 (#141)

* feat : 금칙어 수정, 활성/비활성, 삭제 api 연결 완료

* feat : 관리자 페이지 로그아웃 추가 + 관리자 이메일 [email protected]으로 하드코딩

Author: wldnjs990

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

@@ -4,9 +4,11 @@ import { twMerge } from 'tailwind-merge';
 import { AlarmIcon, ArrowDownIcon } from '@/assets/icons';
 
 import { ADMIN_MENU_LIST } from '../constants';
+import useAuthStore from '@/stores/authStore';
 
 export default function Sidebar() {
   const location = useLocation();
+  const logout = useAuthStore((state) => state.logout);
 
   return (
     <section className="border-gray-10 flex w-65 shrink-0 flex-col border-r">
@@ -16,7 +18,7 @@ export default function Sidebar() {
       </h1>
       <section className="mt-2 flex flex-col px-5 py-4">
         <h2 className="body-l-b py-2">현재 로그인 계정</h2>
-        <p className="body-l-r py-2">{'admin123@test.com'}</p>
+        <p className="body-l-r py-2">{'wl990@naver.com'}</p>
       </section>
       <hr className="border-gray-20 mx-2.5" />
       <section className="flex flex-col py-5">
@@ -54,7 +56,9 @@ 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">로그아웃</span>
+        <span className="text-gray-80 body-l-m" onClick={() => logout()}>
+          로그아웃
+        </span>
       </button>
     </section>
   );

src/types/admin.d.ts

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