deploy : 5차 배포

src/App.tsx

@@ -9,6 +9,7 @@ import FilteredLetterManage from './pages/Admin/FilteredLetter';
 import FilteringManage from './pages/Admin/Filtering';
 import ReportManage from './pages/Admin/Report';
 import AdminRollingPaper from './pages/Admin/RollingPaper';
+import AdminRoute from './layouts/AdminRoute';
 import AuthCallbackPage from './pages/Auth';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
@@ -79,7 +80,7 @@ const App = () => {
         </Route>
       </Route>
 
-      <Route element={<PrivateRoute />}>
+      <Route element={<AdminRoute />}>
         <Route path="admin" element={<AdminPage />}>
           <Route path="report" element={<ReportManage />} />
           <Route path="badwords" element={<FilteringManage />} />

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/components/BackgroundBottom.tsx

@@ -1,5 +1,5 @@
 import BgItem from '@/assets/images/field-4.png';
-import BgItemDark from '@/assets/images/field-4-dark.png';
+import BgItemDark from '@/assets/images/field-4-dark.webp';
 
 import BackgroundImageWrapper from './BackgroundImageWrapper';
 import useThemeStore from '@/stores/themeStore';

src/hooks/useServerSentEvents.tsx

@@ -81,7 +81,6 @@ export const useServerSentEvents = () => {
           console.log(event);
           const errorEvent = event as unknown as { status?: number };
           if (errorEvent.status === 401) {
-            console.log('401로 인한 리이슈 작업 실행');
             callReissue();
             closeSSE();
             reconnect = setTimeout(connectSSE, 5000);

src/layouts/AdminRoute.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate, Outlet } from 'react-router';
+
+import useAuthStore from '@/stores/authStore';
+
+export default function AdminRoute() {
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const isAdmin = useAuthStore((state) => state.isAdmin);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      navigate('/login', { replace: true });
+    }
+    if (!isAdmin) {
+      navigate('/', { replace: true });
+    }
+  }, [isLoggedIn, navigate]);
+
+  if (!isLoggedIn || !isAdmin) {
+    return null;
+  }
+
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+}

src/layouts/Header.tsx

@@ -19,9 +19,9 @@ const Header = () => {
       </button>
       <div className="flex items-center gap-3">
         {theme === 'light' ? (
-          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
-        ) : (
           <DarkModeOutlinedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        ) : (
+          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
         )}
         <NotificationButton />
         <Link to="/mypage">

src/layouts/PrivateRoute.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate, Outlet } from 'react-router';
 
 import useAuthStore from '@/stores/authStore';
@@ -9,17 +9,16 @@ export default function PrivateRoute() {
   useServerSentEvents();
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const navigate = useNavigate();
-  const [shouldRender, setShouldRender] = useState(false);
+
+  useServerSentEvents();
 
   useEffect(() => {
     if (!isLoggedIn) {
       navigate('/login', { replace: true });
-    } else {
-      setShouldRender(true);
     }
   }, [isLoggedIn, navigate]);
 
-  if (!shouldRender) {
+  if (!isLoggedIn) {
     return null;
   }
 

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/pages/Auth/index.tsx

@@ -13,7 +13,10 @@ const AuthCallbackPage = () => {
   const logout = useAuthStore((state) => state.logout);
   const setAccessToken = useAuthStore((state) => state.setAccessToken);
   const setZipCode = useAuthStore((state) => state.setZipCode);
+  const setIsAdmin = useAuthStore((state) => state.setIsAdmin);
   const navigate = useNavigate();
+  let accessToken = '';
+  let role = '';
 
   const handleError = (error: unknown) => {
     console.error('AuthCallback Error:', error);
@@ -32,6 +35,7 @@ const AuthCallbackPage = () => {
 
       login();
       if (userInfo.accessToken) setAccessToken(userInfo.accessToken);
+      accessToken = userInfo.accessToken;
 
       console.log(redirectURL);
 
@@ -54,14 +58,23 @@ const AuthCallbackPage = () => {
             if (!newAccessToken) throw new Error('Missing new access token');
 
             setAccessToken(newAccessToken);
+            accessToken = newAccessToken;
           }
           break;
 
         default:
           navigate('/notFound');
           return;
       }
-      navigate(redirectURL === 'onboarding' ? '/onboarding' : '/');
+
+      role = JSON.parse(atob(accessToken.split('.')[1])).role;
+
+      if (role === 'ADMIN') {
+        setIsAdmin();
+        navigate('/admin');
+      } else {
+        navigate(redirectURL === 'onboarding' ? '/onboarding' : '/');
+      }
     } catch (error) {
       handleError(error);
     }

src/pages/Home/components/GoToLetterBoard.tsx

@@ -4,7 +4,7 @@ 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>
         <Link to="/board/letter">

src/pages/Home/components/GoToRandomLetter.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router';
 
-import goToRandomLetter from '@/assets/images/go-to-random-letter.png';
+import goToRandomLetter from '@/assets/images/go-to-random-letter.webp';
 
 const GoToRandomLetter = () => {
   return (
@@ -10,7 +10,7 @@ const GoToRandomLetter = () => {
           고민편지 보러가기
         </p>
         <Link to={'/letter/random'}>
-          <img src={goToRandomLetter} alt="go to random letter" />
+          <img src={goToRandomLetter} alt="go to random letter" className="h-45 translate-x-5" />
         </Link>
       </div>
     </>

src/pages/Home/components/HomeBackgroundLeft.tsx

@@ -1,5 +1,5 @@
-import homeLeftMountain from '@/assets/images/home-left-mountain.png';
-import homeLeftMountainDark from '@/assets/images/home-left-mountain-dark.png';
+import homeLeftMountain from '@/assets/images/home-left-mountain.webp';
+import homeLeftMountainDark from '@/assets/images/home-left-mountain-dark.webp';
 
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import useThemeStore from '@/stores/themeStore';

src/pages/Home/components/HomeBackgroundRightBottom.tsx

@@ -1,5 +1,5 @@
-import homeRightMountainBottom from '@/assets/images/home-right-mountain-bottom.png';
-import homeRightMountainBottomDark from '@/assets/images/home-right-mountain-bottom-dark.png';
+import homeRightMountainBottom from '@/assets/images/home-right-mountain-bottom.webp';
+import homeRightMountainBottomDark from '@/assets/images/home-right-mountain-bottom-dark.webp';
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import useThemeStore from '@/stores/themeStore';
 

src/pages/Home/components/HomeBackgroundRightTop.tsx

@@ -1,5 +1,5 @@
-import homeRightMountainTop from '@/assets/images/home-right-mountain-top.png';
-import homeRightMountainTopDark from '@/assets/images/home-right-mountain-top-dark.png';
+import homeRightMountainTop from '@/assets/images/home-right-mountain-top.webp';
+import homeRightMountainTopDark from '@/assets/images/home-right-mountain-top-dark.webp';
 
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import useThemeStore from '@/stores/themeStore';

src/pages/Home/components/HomeHeader.tsx

@@ -14,9 +14,9 @@ const HomeHeader = () => {
     <header className="fixed top-0 z-40 flex h-16 w-full max-w-150 items-center justify-end p-5">
       <div className="flex items-center gap-3">
         {theme === 'light' ? (
-          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
-        ) : (
           <DarkModeOutlinedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        ) : (
+          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
         )}
         <NotificationButton />
         <Link to="/mypage">

src/pages/Home/components/RandomCheer.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import randomCheerBird from '@/assets/images/field-theme-asset-bird.png';
-import randomCheerBirdDark from '@/assets/images/field-theme-asset-bird-dark.png';
+import randomCheerBirdDark from '@/assets/images/field-theme-asset-bird-dark.webp';
 
 import { RANDOM_CHEER_LIST } from '../constants';
 import useThemeStore from '@/stores/themeStore';

src/pages/Landing/index.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { Navigate, useNavigate } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
-import LandingImg from '@/assets/images/landing.png';
-import LandingImgDark from '@/assets/images/landing-dark.png';
+import LandingImg from '@/assets/images/landing.webp';
+import LandingImgDark from '@/assets/images/landing-dark.webp';
 import useAuthStore from '@/stores/authStore';
 import useThemeStore from '@/stores/themeStore';