feat:관리자 페이지 검열관리 필터링 기능 개발중(검열 단어 추가 구현중)

Author: wldnjs990

src/App.tsx

@@ -4,6 +4,7 @@ import useViewport from './hooks/useViewport';
 import Layout from './layouts/Layout';
 import MobileLayout from './layouts/MobileLayout';
 import AdminPage from './pages/Admin';
+import BadWordsManage from './pages/Admin/BadWords';
 import ReportManage from './pages/Admin/Report';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
@@ -57,6 +58,7 @@ const App = () => {
 
       <Route path="admin" element={<AdminPage />}>
         <Route path="report" element={<ReportManage />} />
+        <Route path="badwords" element={<BadWordsManage />} />
       </Route>
     </Routes>
   );

src/assets/icons/add.svg

@@ -1,7 +1,9 @@
+import AddIcon from './add.svg?react';
 import AlarmIcon from './alarm.svg?react';
 import ArrowDownIcon from './arrow-down.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
+import CancelIcon from './cancel.svg?react';
 import CheckIcon from './check.svg?react';
 import CloudIcon from './cloud.svg?react';
 import DeleteIcon from './delete.svg?react';
@@ -24,6 +26,7 @@ import ThermostatIcon from './thermostat.svg?react';
 import WarmIcon from './warm.svg?react';
 
 export {
+  AddIcon,
   NaverIcon,
   KakaoIcon,
   GoogleIcon,
@@ -48,4 +51,5 @@ export {
   LikeFilledIcon,
   LikeOutlinedIcon,
   DeleteIcon,
+  CancelIcon,
 };

src/assets/icons/cancel.svg

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import { getBadWords } from '@/apis/admin';
+import { AddIcon, AlarmIcon, CancelIcon } from '@/assets/icons';
+
+import AddInputButton from './components/AddInputButton';
+import WrapperFrame from './components/WrapperFrame';
+import WrapperTitle from './components/WrapperTitle';
+
+const BadWordsManage = () => {
+  const [badWords, setBadWords] = useState<BadWords[]>([]);
+  const [addInputShow, setAddInputShow] = useState<boolean>(false);
+
+  useEffect(() => {
+    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" />
+              </button>
+            </span>
+          );
+        })}
+        {addInputShow ? (
+          <AddInputButton setAddInputShow={setAddInputShow} />
+        ) : (
+          <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>
+  );
+};
+
+export default BadWordsManage;

src/assets/icons/index.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+
+import { AddIcon } from '@/assets/icons';
+
+export default function AddInputButton({
+  setAddInputShow,
+}: {
+  setAddInputShow: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleInputWidth = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    target.style.width = '50px';
+    target.style.width = `${target.scrollWidth}px`;
+  };
+
+  useEffect(() => {
+    const inputElement = inputRef.current;
+    if (inputElement) {
+      inputElement.addEventListener('input', handleInputWidth);
+      inputElement.focus();
+    }
+
+    return () => {
+      if (inputElement) {
+        inputElement.removeEventListener('input', handleInputWidth);
+      }
+    };
+  }, []);
+
+  return (
+    <span className="flex items-center gap-1.5 rounded-2xl bg-[#C1C1C1] px-4 py-1.5">
+      <input
+        ref={inputRef}
+        type="text"
+        className="w-10 min-w-10"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            setAddInputShow(false);
+          }
+        }}
+      />
+      <button
+        onClick={() => {
+          setAddInputShow(false);
+        }}
+      >
+        <AddIcon className="h-4 w-4" />
+      </button>
+    </span>
+  );
+}