chore:badwords, filteredLetter 라우팅 분리 + 사이드바 버튼에 라우팅 연결

Author: wldnjs990

src/App.tsx

@@ -4,7 +4,8 @@ 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 FilteredLetterManage from './pages/Admin/FilteredLetter';
+import FilteringManage from './pages/Admin/Filtering';
 import ReportManage from './pages/Admin/Report';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
@@ -58,7 +59,8 @@ const App = () => {
 
       <Route path="admin" element={<AdminPage />}>
         <Route path="report" element={<ReportManage />} />
-        <Route path="badwords" element={<BadWordsManage />} />
+        <Route path="badwords" element={<FilteringManage />} />
+        <Route path="filtered-letter" element={<FilteredLetterManage />} />
       </Route>
     </Routes>
   );

src/pages/Admin/BadWords.tsx

@@ -5,10 +5,10 @@ import ListHeaderFrame from './components/ListHeaderFrame';
 import WrapperFrame from './components/WrapperFrame';
 import WrapperTitle from './components/WrapperTitle';
 
-export default function FilteredLetter() {
+export default function FilteredLetterManage() {
   const arr = new Array(10).fill(null);
   return (
-    <WrapperFrame className="mt-7">
+    <WrapperFrame>
       <WrapperTitle title="필터링 단어로 차단된 편지 목록" Icon={AlarmIcon} />
       <section className="mt-5 flex flex-col">
         <ListHeaderFrame>

src/pages/Admin/FilteredLetter.tsx

@@ -7,7 +7,7 @@ import AddInputButton from './components/AddInputButton';
 import WrapperFrame from './components/WrapperFrame';
 import WrapperTitle from './components/WrapperTitle';
 
-export default function Filtering() {
+export default function FilteringManage() {
   const [badWords, setBadWords] = useState<BadWords[]>([]);
   const [addInputShow, setAddInputShow] = useState<boolean>(false);
 

src/pages/Admin/Filtering.tsx

@@ -1,8 +1,9 @@
-import { Outlet } from 'react-router';
+import { Outlet, useNavigate } from 'react-router';
 
 import { AlarmIcon, ArrowDownIcon } from '@/assets/icons';
 
 const AdminPage = () => {
+  const navigate = useNavigate();
   return (
     <main className="flex h-full min-h-screen w-full">
       <section className="bg-primary-3 flex flex-1 grow basis-1/6 flex-col">
@@ -52,13 +53,22 @@ const AdminPage = () => {
                 <ArrowDownIcon className="ml-auto h-6 w-6" />
               </button>
               <div className="flex flex-col">
-                <button className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100">
+                <button
+                  className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100"
+                  onClick={() => navigate('/admin/report')}
+                >
                   신고 편지 목록
                 </button>
-                <button className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100">
+                <button
+                  className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100"
+                  onClick={() => navigate('/admin/badwords')}
+                >
                   필터링 단어 설정
                 </button>
-                <button className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100">
+                <button
+                  className="flex w-full items-center gap-5 py-2 pl-19 hover:bg-amber-100"
+                  onClick={() => navigate('/admin/filtered-letter')}
+                >
                   차단된 편지 목록
                 </button>
               </div>