deploy : 배포 4차

src/App.tsx

@@ -27,10 +27,22 @@ import RandomLettersPage from './pages/RandomLetters';
 import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
 import ShareApprovalPage from './pages/Share';
+import useThemeStore from './stores/themeStore';
 
 const App = () => {
+  const theme = useThemeStore((state) => state.theme);
   useViewport();
 
+  const initializeTheme = () => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  initializeTheme();
+
   return (
     <Routes>
       <Route element={<MobileLayout />}>

src/apis/admin.ts

@@ -41,11 +41,12 @@ const patchReport = async (reportId: number, patchReportRequest: PatchReportRequ
 };
 
 // badwords
-const getBadWords = async (setBadWords: React.Dispatch<React.SetStateAction<BadWords[]>>) => {
+const getBadWords = async () => {
   try {
     const res = await client.get('/api/bad-words');
-    setBadWords(res.data.data);
+    if (!res) throw new Error('금칙어 조회 도중 에러가 발생했습니다.');
     console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
@@ -63,14 +64,34 @@ const postBadWords = async (badWordsRequest: BadWords) => {
 };
 
 // 내 상상대로 만든 필터링 단어 취소 버튼
-const patchBadWords = async (badWordId: number) => {
+const patchBadWordsUsed = async (badWordId: string) => {
   try {
     const res = await client.patch(`/api/bad-words/${badWordId}/status`, { isUsed: false });
     if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
     console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const patchBadWords = async (badWordId: string, word: string) => {
+  try {
+    const res = await client.patch(`/api/bad-words/${badWordId}`, { word: word });
+    if (!res) throw new Error('검열 단어 삭제 도중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { postReports, getReports, patchReport, getBadWords, postBadWords, patchBadWords };
+export {
+  postReports,
+  getReports,
+  patchReport,
+  getBadWords,
+  postBadWords,
+  patchBadWordsUsed,
+  patchBadWords,
+};

src/apis/share.ts

@@ -163,7 +163,6 @@ export const postSharePostLike = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 실패');
   }
 };
 
@@ -175,6 +174,15 @@ export const getSharePostLikeCount = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 갯수 조회 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 갯수 조회 실패');
+  }
+};
+
+export const deleteSharePost = async (sharePostId: string) => {
+  try {
+    const response = await client.delete(`/api/share-posts/${sharePostId}`);
+    if (!response) throw new Error('error while deleting post');
+    return response;
+  } catch (error) {
+    console.error('❌ 편지 삭제 중 에러가 발생했습니다', error);
   }
 };

src/apis/write.ts

@@ -7,7 +7,9 @@ const postLetter = async (data: LetterRequest) => {
     if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
+    const errorWithStatus = error as unknown as { status: number };
     console.error(error);
+    return errorWithStatus;
   }
 };
 
@@ -42,4 +44,17 @@ const postTemporarySave = async (data: TemporaryRequest) => {
   }
 };
 
-export { postLetter, postFirstReply, getPrevLetter, postTemporarySave };
+const postTemporaryLetter = async (data: TemporaryRequest) => {
+  console.log('Temporary request', data);
+  try {
+    const res = await client.post('/api/letters', data);
+    if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    const errorWithStatus = error as unknown as { status: number };
+    console.error(error);
+    return errorWithStatus;
+  }
+};
+
+export { postLetter, postFirstReply, getPrevLetter, postTemporarySave, postTemporaryLetter };

src/assets/icons/index.ts

@@ -25,6 +25,8 @@ import SnowIcon from './snow.svg?react';
 import StampIcon from './stamp.svg?react';
 import ThermostatIcon from './thermostat.svg?react';
 import WarmIcon from './warm.svg?react';
+import ToggleOff from './toggle-off.svg?react';
+import ToggleOn from './toggle-on.svg?react';
 
 export {
   AddIcon,
@@ -54,4 +56,6 @@ export {
   DeleteIcon,
   CancelIcon,
   PencilIcon,
+  ToggleOff,
+  ToggleOn,
 };

src/components/BackgroundBottom.tsx

@@ -1,13 +1,17 @@
 import BgItem from '@/assets/images/field-4.png';
+import BgItemDark from '@/assets/images/field-4-dark.png';
 
 import BackgroundImageWrapper from './BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
 
 const BackgroundBottom = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <BackgroundImageWrapper
       as="div"
-      className="fixed bottom-[-40px] left-1/2 h-42 w-full -translate-x-1/2 opacity-70"
-      imageUrl={BgItem}
+      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      imageUrl={theme === 'light' ? BgItem : BgItemDark}
     />
   );
 };

src/components/MenuButton.tsx

@@ -16,44 +16,48 @@ export default function MenuButton() {
         <Link
           to="/letter/box"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[220px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <MarkunreadOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/board/letter"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[160px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <CalendarTodayOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/letter/write"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[100px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
+          <EditNoteRoundedIcon fontSize="medium" />
         </Link>
 
         <div
           className={twMerge(
-            'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[30px] z-30 flex h-13 w-13 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen ? 'rotate-90' : 'rotate-0',
           )}
+          onClick={() => setIsOpen((state) => !state)}
         >
-          <MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
+          <MenuRoundedIcon />
         </div>
       </div>
     </>

src/components/NoticeRollingPaper.tsx

@@ -46,12 +46,12 @@ const NoticeRollingPaper = () => {
     <Link to={`/board/rolling/${data?.eventPostId}`}>
       <article
         className={twMerge(
-          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
+          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2 dark:text-white',
           'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
-          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
+          'shadow-[0_1px_6px_rgba(218,189,74,0.8)] dark:shadow-[0_1px_6px_rgba(255,255,255,0.8)]',
         )}
       >
-        <NoticeIcon className="h-6 w-6 shrink-0 text-gray-50" />
+        <NoticeIcon className="h-6 w-6 shrink-0 text-gray-50 dark:text-white" />
         <div ref={containerRef} className="w-full overflow-hidden whitespace-nowrap">
           <p
             ref={textRef}

src/components/PageTitle.tsx

@@ -7,7 +7,7 @@ interface PageTitleProps {
 
 const PageTitle = ({ className, children }: PageTitleProps) => {
   return (
-    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4', className)}>
+    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4 dark:shadow-[0_0px_10px_rgba(255,255,255,0.8)]', className)}>
       {children}
     </h1>
   );

src/components/ToastItem.tsx

@@ -21,7 +21,7 @@ export default function ToastItem({ toastObj, index }: { toastObj: ToastObj; ind
 
   const TOAST_POSITION = {
     Top: 'top-20',
-    Bottom: 'bottom-5',
+    Bottom: 'bottom-20',
   };
 
   const animation = `toast-blink ${toastObj.time}s ease-in-out forwards`;

src/hooks/useServerSentEvents.tsx

@@ -18,7 +18,6 @@ export const useServerSentEvents = () => {
   const navigate = useNavigate();
   // const recallCountRef = useRef(1);
 
-
   const accessToken = useAuthStore((state) => state.accessToken);
   const setAccessToken = useAuthStore((state) => state.setAccessToken);
   const sourceRef = useRef<EventSourcePolyfill | null>(null);
@@ -93,7 +92,6 @@ export const useServerSentEvents = () => {
         };
       } catch (error) {
         console.log('catch문에서 에러 발생', error);
-
       }
     };
 

src/layouts/Header.tsx

@@ -2,8 +2,14 @@ import { Link, useNavigate } from 'react-router';
 
 import { ArrowLeftIcon, PersonIcon } from '@/assets/icons';
 import NotificationButton from '@/components/NotificationButton';
+import FlareRoundedIcon from '@mui/icons-material/FlareRounded';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
+import useThemeStore from '@/stores/themeStore';
 
 const Header = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+
   const navigate = useNavigate();
 
   return (
@@ -12,6 +18,11 @@ const Header = () => {
         <ArrowLeftIcon className="h-6 w-6 text-white" />
       </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} />
+        )}
         <NotificationButton />
         <Link to="/mypage">
           <PersonIcon className="h-6 w-6 text-white" />

src/layouts/MobileLayout.tsx

@@ -3,7 +3,7 @@ import { Outlet } from 'react-router';
 const MobileLayout = () => {
   return (
     <div className="mobile-bg">
-      <div className="mobile-layout">
+      <div className="mobile-layout z-2">
         <Outlet />
       </div>
     </div>

src/main.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { StrictMode } from 'react';
+// import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router';
 
@@ -15,11 +15,11 @@ queryClient.setDefaultOptions({
 });
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </QueryClientProvider>,
+  // </StrictMode>,
 );