prgrms-web-devcourse-final-project · tifsy · Apr 5, 2025 · Mar 21, 2025 · Mar 27, 2025 · Mar 27, 2025
diff --git a/index.html b/index.html
@@ -11,6 +11,34 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
     />
+    <link
+      rel="preload"
+      href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff"
+      as="font"
+      type="font/woff"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff"
+      as="font"
+      type="font/woff"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HancomMalangMalang-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,8 +11,6 @@
   },
   "dependencies": {
     "@egjs/react-infinitegrid": "^4.12.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.4.4",
     "@mui/material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import { Route, Routes } from 'react-router';
 
 import useViewport from './hooks/useViewport';
@@ -29,6 +30,35 @@ import WritePage from './pages/Write';
 import ShareApprovalPage from './pages/Share';
 import useThemeStore from './stores/themeStore';
 
+// const Layout = lazy(() => import('./layouts/Layout'));
+// const MobileLayout = lazy(() => import('./layouts/MobileLayout'));
+// const PrivateRoute = lazy(() => import('./layouts/PrivateRoute'));
+// const AuthCallbackPage = lazy(() => import('./pages/Auth'));
+
+// const AdminPage = lazy(() => import('./pages/Admin'));
+// const FilteringManage = lazy(() => import('./pages/Admin/Filtering'));
+// const ReportManage = lazy(() => import('./pages/Admin/Report'));
+// const AdminRollingPaper = lazy(() => import('./pages/Admin/RollingPaper'));
+// const AdminRoute = lazy(() => import('./layouts/AdminRoute'));
+// const Home = lazy(() => import('./pages/Home'));
+// const Landing = lazy(() => import('./pages/Landing'));
+// const LetterBoardPage = lazy(() => import('./pages/LetterBoard'));
+// const LetterBoardDetailPage = lazy(() => import('./pages/LetterBoardDetail'));
+// const LetterBoxPage = lazy(() => import('./pages/LetterBox'));
+// const LetterBoxDetailPage = lazy(() => import('./pages/LetterBoxDetail'));
+// const LetterDetailPage = lazy(() => import('./pages/LetterDetail'));
+// const LoginPage = lazy(() => import('./pages/Login'));
+// const MyPage = lazy(() => import('./pages/MyPage'));
+// const MyBoardPage = lazy(() => import('./pages/MyPage/components/MyBoardPage'));
+// const NotFoundPage = lazy(() => import('./pages/NotFound'));
+// const NotificationsPage = lazy(() => import('./pages/Notifications'));
+// const OnboardingPage = lazy(() => import('./pages/Onboarding'));
+// const RandomLettersPage = lazy(() => import('./pages/RandomLetters'));
+// const RollingPaperPage = lazy(() => import('./pages/RollingPaper'));
+// const WritePage = lazy(() => import('./pages/Write'));
+// const ShareApprovalPage = lazy(() => import('./pages/Share'));
+// const useThemeStore = lazy(() => import('./stores/themeStore'));
+
 const App = () => {
   const theme = useThemeStore((state) => state.theme);
   useViewport();
@@ -44,49 +74,51 @@ const App = () => {
   initializeTheme();
 
   return (
-    <Routes>
-      <Route element={<MobileLayout />}>
-        <Route path="login" element={<LoginPage />} />
-        <Route path="landing" element={<Landing />} />
-        <Route path="*" element={<NotFoundPage />} />
-        <Route path="auth-callback" element={<AuthCallbackPage />} />
-        <Route path="onboarding" element={<OnboardingPage />} />
+    <Suspense fallback={<div>로딩중</div>}>
+      <Routes>
+        <Route element={<MobileLayout />}>
+          <Route path="login" element={<LoginPage />} />
+          <Route path="landing" element={<Landing />} />
+          <Route path="*" element={<NotFoundPage />} />
+          <Route path="auth-callback" element={<AuthCallbackPage />} />
+          <Route path="onboarding" element={<OnboardingPage />} />
 
-        <Route element={<PrivateRoute />}>
-          <Route index element={<Home />} />
-          <Route path="letter">
-            <Route element={<Layout />}>
-              <Route path="random" element={<RandomLettersPage />} />
-              <Route path="box" element={<LetterBoxPage />} />
-              <Route path="box/:id" element={<LetterBoxDetailPage />} />
+          <Route element={<PrivateRoute />}>
+            <Route index element={<Home />} />
+            <Route path="letter">
+              <Route element={<Layout />}>
+                <Route path="random" element={<RandomLettersPage />} />
+                <Route path="box" element={<LetterBoxPage />} />
+                <Route path="box/:id" element={<LetterBoxDetailPage />} />
+              </Route>
+              <Route path="write" element={<WritePage />} />
+              <Route path=":id" element={<LetterDetailPage />} />
             </Route>
-            <Route path="write" element={<WritePage />} />
-            <Route path=":id" element={<LetterDetailPage />} />
-          </Route>
-          <Route path="board">
-            <Route element={<Layout />}>
-              <Route path="rolling/:id" element={<RollingPaperPage />} />
-              <Route path="letter" element={<LetterBoardPage />} />
+            <Route path="board">
+              <Route element={<Layout />}>
+                <Route path="rolling/:id" element={<RollingPaperPage />} />
+                <Route path="letter" element={<LetterBoardPage />} />
+              </Route>
+              <Route path="letter/:id" element={<LetterBoardDetailPage />} />
+              <Route path="share/:shareProposalId" element={<ShareApprovalPage />} />
+            </Route>
+            <Route path="mypage" element={<Layout />}>
+              <Route index element={<MyPage />} />
+              <Route path="board" element={<MyBoardPage />} />
+              <Route path="notifications" element={<NotificationsPage />} />
             </Route>
-            <Route path="letter/:id" element={<LetterBoardDetailPage />} />
-            <Route path="share/:shareProposalId" element={<ShareApprovalPage />} />
-          </Route>
-          <Route path="mypage" element={<Layout />}>
-            <Route index element={<MyPage />} />
-            <Route path="board" element={<MyBoardPage />} />
-            <Route path="notifications" element={<NotificationsPage />} />
           </Route>
         </Route>
-      </Route>
 
-      <Route element={<AdminRoute />}>
-        <Route path="admin" element={<AdminPage />}>
-          <Route path="report" element={<ReportManage />} />
-          <Route path="badwords" element={<FilteringManage />} />
-          <Route path="rolling-paper" element={<AdminRollingPaper />} />
+        <Route element={<AdminRoute />}>
+          <Route path="admin" element={<AdminPage />}>
+            <Route path="report" element={<ReportManage />} />
+            <Route path="badwords" element={<FilteringManage />} />
+            <Route path="rolling-paper" element={<AdminRollingPaper />} />
+          </Route>
         </Route>
-      </Route>
-    </Routes>
+      </Routes>
+    </Suspense>
   );
 };
 

diff --git a/src/assets/images/basic-theme.png b/src/assets/images/basic-theme.png
diff --git a/src/assets/images/basic-theme.webp b/src/assets/images/basic-theme.webp
diff --git a/src/assets/images/celebration-stamp.png b/src/assets/images/celebration-stamp.png
diff --git a/src/assets/images/celebration-stamp.webp b/src/assets/images/celebration-stamp.webp
diff --git a/src/assets/images/celebration-theme-asset-bottom.png b/src/assets/images/celebration-theme-asset-bottom.png
diff --git a/src/assets/images/celebration-theme-asset-side.png b/src/assets/images/celebration-theme-asset-side.png
diff --git a/src/assets/images/celebration-theme-asset-side.webp b/src/assets/images/celebration-theme-asset-side.webp
diff --git a/src/assets/images/celebration.png b/src/assets/images/celebration.png
diff --git a/src/assets/images/celebration.webp b/src/assets/images/celebration.webp
diff --git a/src/assets/images/closed-letter.png b/src/assets/images/closed-letter.png
diff --git a/src/assets/images/closed-letter.webp b/src/assets/images/closed-letter.webp
diff --git a/src/assets/images/congrat-theme.png b/src/assets/images/congrat-theme.png
diff --git a/src/assets/images/congrat-theme.webp b/src/assets/images/congrat-theme.webp
diff --git a/src/assets/images/consolation-stamp.png b/src/assets/images/consolation-stamp.png
diff --git a/src/assets/images/consolation-stamp.webp b/src/assets/images/consolation-stamp.webp
diff --git a/src/assets/images/consolation.png b/src/assets/images/consolation.png
diff --git a/src/assets/images/consolation.webp b/src/assets/images/consolation.webp
diff --git a/src/assets/images/consult-stamp.png b/src/assets/images/consult-stamp.png
diff --git a/src/assets/images/consult-stamp.webp b/src/assets/images/consult-stamp.webp
diff --git a/src/assets/images/consult.png b/src/assets/images/consult.png
diff --git a/src/assets/images/consult.webp b/src/assets/images/consult.webp
diff --git a/src/assets/images/etc-stamp.png b/src/assets/images/etc-stamp.png
diff --git a/src/assets/images/etc-stamp.webp b/src/assets/images/etc-stamp.webp
diff --git a/src/assets/images/etc.png b/src/assets/images/etc.png
diff --git a/src/assets/images/etc.webp b/src/assets/images/etc.webp
diff --git a/src/assets/images/field-4-dark.png b/src/assets/images/field-4-dark.png
diff --git a/src/assets/images/field-theme-asset-bird-dark.png b/src/assets/images/field-theme-asset-bird-dark.png
diff --git a/src/assets/images/field-theme-asset-bottom.png b/src/assets/images/field-theme-asset-bottom.png
diff --git a/src/assets/images/field-theme-asset-bottom.webp b/src/assets/images/field-theme-asset-bottom.webp
diff --git a/src/assets/images/field-theme.png b/src/assets/images/field-theme.png
diff --git a/src/assets/images/field-theme.webp b/src/assets/images/field-theme.webp
diff --git a/src/assets/images/opened-letter-front.png b/src/assets/images/opened-letter-front.png
diff --git a/src/assets/images/opened-letter-front.webp b/src/assets/images/opened-letter-front.webp
diff --git a/src/assets/images/opened-letter.png b/src/assets/images/opened-letter.png
diff --git a/src/assets/images/opened-letter.webp b/src/assets/images/opened-letter.webp
diff --git a/src/assets/images/respondent-stamp.png b/src/assets/images/respondent-stamp.png
diff --git a/src/assets/images/respondent-stamp.webp b/src/assets/images/respondent-stamp.webp
diff --git a/src/assets/images/sky-theme-asset-clouds.png b/src/assets/images/sky-theme-asset-clouds.png
diff --git a/src/assets/images/sky-theme-asset-clouds.webp b/src/assets/images/sky-theme-asset-clouds.webp
diff --git a/src/assets/images/sky-theme.png b/src/assets/images/sky-theme.png
diff --git a/src/assets/images/sky-theme.webp b/src/assets/images/sky-theme.webp
diff --git a/src/assets/images/vintage-theme-asset-bg.png b/src/assets/images/vintage-theme-asset-bg.png
diff --git a/src/assets/images/vintage-theme-asset-bg.webp b/src/assets/images/vintage-theme-asset-bg.webp
diff --git a/src/assets/images/vintage-theme.png b/src/assets/images/vintage-theme.png
diff --git a/src/assets/images/vintage-theme.webp b/src/assets/images/vintage-theme.webp
diff --git a/src/components/BackgroundBottom.tsx b/src/components/BackgroundBottom.tsx
@@ -1,4 +1,4 @@
-import BgItem from '@/assets/images/field-4.png';
+import BgItem from '@/assets/images/field-theme-asset-bottom.webp';
 import BgItemDark from '@/assets/images/field-4-dark.webp';
 
 import BackgroundImageWrapper from './BackgroundImageWrapper';

diff --git a/src/components/ResultLetter.tsx b/src/components/ResultLetter.tsx
@@ -6,12 +6,14 @@ export default function ResultLetter({
   categoryName = 'CONSOLATION',
   title,
   zipCode = 'ERROR',
+  createdAt,
 }: {
   categoryName: Category;
   title: string;
   zipCode: string;
+  createdAt?: Date;
 }) {
-  const date = new Date();
+  const date = createdAt ? new Date(createdAt) : new Date();
   const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
 
   return (

diff --git a/src/layouts/PrivateRoute.tsx b/src/layouts/PrivateRoute.tsx
@@ -6,7 +6,6 @@ import { useServerSentEvents } from '@/hooks/useServerSentEvents';
 import Toast from '@/components/Toast';
 
 export default function PrivateRoute() {
-  // useServerSentEvents();
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const navigate = useNavigate();
 

diff --git a/src/pages/Admin/Report.tsx b/src/pages/Admin/Report.tsx
@@ -15,7 +15,7 @@ import WrapperTitle from './components/WrapperTitle';
 export default function ReportManage() {
   const [detailModalOpen, setDetailModalOpen] = useState<boolean>(false);
   const [handleModalOpen, setHandleModalOpen] = useState<boolean>(false);
-  const [reports, setReports] = useState<Report[]>([]);
+  const [reports, setReports] = useState<Report[] | null>(null);
   const [reportPages, setReportPages] = useState<ReportPages>({
     currentPage: '1',
     totalPages: '0',
@@ -71,31 +71,36 @@ export default function ReportManage() {
             <option value="REJECTED">거절됨</option>
           </select>
         </div>
+        {reports ? (
+          <section className="mt-5 flex flex-col">
+            <ListHeaderFrame>
+              <span className="admin-list-set basis-1/10 overflow-ellipsis">ID</span>
+              <span className="admin-list-set basis-2/10">제보자 이메일</span>
+              <span className="admin-list-set basis-2/10">작성자 이메일</span>
+              <span className="admin-list-set basis-2/10">제보 일자</span>
+              <span className="admin-list-set basis-3/10">제보 사유</span>
+            </ListHeaderFrame>
+            {reports.map((data, idx) => (
+              <ReportListItem
+                key={idx}
+                report={data}
+                setDetailModalOpen={setDetailModalOpen}
+                setSelectedReportId={setSelectedReportId}
+                setHandleModalOpen={setHandleModalOpen}
+                setSelectReport={setSelectReport}
+              />
+            ))}
 
-        <section className="mt-5 flex flex-col">
-          <ListHeaderFrame>
-            <span className="admin-list-set basis-1/10 overflow-ellipsis">ID</span>
-            <span className="admin-list-set basis-2/10">제보자 이메일</span>
-            <span className="admin-list-set basis-2/10">작성자 이메일</span>
-            <span className="admin-list-set basis-2/10">제보 일자</span>
-            <span className="admin-list-set basis-3/10">제보 사유</span>
-          </ListHeaderFrame>
-          {reports?.map((data, idx) => (
-            <ReportListItem
-              key={idx}
-              report={data}
-              setDetailModalOpen={setDetailModalOpen}
-              setSelectedReportId={setSelectedReportId}
-              setHandleModalOpen={setHandleModalOpen}
-              setSelectReport={setSelectReport}
+            <PagenationNavigation
+              totalPage={Number(reportPages.totalPages)}
+              buttonLength={3}
+              handlePageNumberButtonClick={handleNowPage}
             />
-          ))}
-          <PagenationNavigation
-            totalPage={Number(reportPages.totalPages)}
-            buttonLength={3}
-            handlePageNumberButtonClick={handleNowPage}
-          />
-        </section>
+          </section>
+        ) : (
+          <div>Loading...</div>
+        )}
+
         {detailModalOpen && (
           <ReportDetailModal selectedReport={selectedReport} closeEvent={setDetailModalOpen} />
         )}