Skip to content

Commit 00c5bbe

Browse files
wldnjs990wldnjs990
authored
perf : 편지 작성 페이지 성능 최적화 & 웹접근성 관련 성능개선 작업 (#175)
* refactor : 편지 작성 페이지 접근성 향상(86점 -> 94점) * refactor : 편지 작성 페이지 버튼 색상 변경 * refactor : 1차 png -> webp 파일 변환 작업 * refactor : wepb로 바꾼 png파일들 제거 * refactor : 글 작성 페이지 폰트 옵션 preLoad 사용해서 FOUT 현상 해결 * perf : 편지작성, 랜덤편지 페이지 이미지 webp파일로 변경 * perf : 신고관리 페이지 CLS점수 개선(로딩 컴포넌트 추가) * fix : 랜덤편지 페이지에서 편지 날짜가 현재 날짜로 고정되는 현상 수정 * . * perf : webp 이미지 변환
1 parent 2dcf0d3 commit 00c5bbe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+183
-113
lines changed

‎index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,34 @@
1111
crossorigin
1212
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
1313
/>
14+
<link
15+
rel="preload"
16+
href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2020A.woff"
17+
as="font"
18+
type="font/woff"
19+
crossorigin="anonymous"
20+
/>
21+
<link
22+
rel="preload"
23+
href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/iceHimchan-Rg.woff2"
24+
as="font"
25+
type="font/woff2"
26+
crossorigin="anonymous"
27+
/>
28+
<link
29+
rel="preload"
30+
href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Batang_Regular.woff"
31+
as="font"
32+
type="font/woff"
33+
crossorigin="anonymous"
34+
/>
35+
<link
36+
rel="preload"
37+
href="https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HancomMalangMalang-Bold.woff2"
38+
as="font"
39+
type="font/woff2"
40+
crossorigin="anonymous"
41+
/>
1442
</head>
1543
<body>
1644
<div id="root"></div>

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111
},
1212
"dependencies": {
1313
"@egjs/react-infinitegrid": "^4.12.0",
14-
"@emotion/react": "^11.14.0",
15-
"@emotion/styled": "^11.14.0",
1614
"@mui/icons-material": "^6.4.4",
1715
"@mui/material": "^6.4.4",
1816
"@tailwindcss/vite": "^4.0.6",

‎pnpm-lock.yaml‎

Lines changed: 18 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Suspense } from 'react';
12
import { Route, Routes } from 'react-router';
23

34
import useViewport from './hooks/useViewport';
@@ -29,6 +30,35 @@ import WritePage from './pages/Write';
2930
import ShareApprovalPage from './pages/Share';
3031
import useThemeStore from './stores/themeStore';
3132

33+
// const Layout = lazy(() => import('./layouts/Layout'));
34+
// const MobileLayout = lazy(() => import('./layouts/MobileLayout'));
35+
// const PrivateRoute = lazy(() => import('./layouts/PrivateRoute'));
36+
// const AuthCallbackPage = lazy(() => import('./pages/Auth'));
37+
38+
// const AdminPage = lazy(() => import('./pages/Admin'));
39+
// const FilteringManage = lazy(() => import('./pages/Admin/Filtering'));
40+
// const ReportManage = lazy(() => import('./pages/Admin/Report'));
41+
// const AdminRollingPaper = lazy(() => import('./pages/Admin/RollingPaper'));
42+
// const AdminRoute = lazy(() => import('./layouts/AdminRoute'));
43+
// const Home = lazy(() => import('./pages/Home'));
44+
// const Landing = lazy(() => import('./pages/Landing'));
45+
// const LetterBoardPage = lazy(() => import('./pages/LetterBoard'));
46+
// const LetterBoardDetailPage = lazy(() => import('./pages/LetterBoardDetail'));
47+
// const LetterBoxPage = lazy(() => import('./pages/LetterBox'));
48+
// const LetterBoxDetailPage = lazy(() => import('./pages/LetterBoxDetail'));
49+
// const LetterDetailPage = lazy(() => import('./pages/LetterDetail'));
50+
// const LoginPage = lazy(() => import('./pages/Login'));
51+
// const MyPage = lazy(() => import('./pages/MyPage'));
52+
// const MyBoardPage = lazy(() => import('./pages/MyPage/components/MyBoardPage'));
53+
// const NotFoundPage = lazy(() => import('./pages/NotFound'));
54+
// const NotificationsPage = lazy(() => import('./pages/Notifications'));
55+
// const OnboardingPage = lazy(() => import('./pages/Onboarding'));
56+
// const RandomLettersPage = lazy(() => import('./pages/RandomLetters'));
57+
// const RollingPaperPage = lazy(() => import('./pages/RollingPaper'));
58+
// const WritePage = lazy(() => import('./pages/Write'));
59+
// const ShareApprovalPage = lazy(() => import('./pages/Share'));
60+
// const useThemeStore = lazy(() => import('./stores/themeStore'));
61+
3262
const App = () => {
3363
const theme = useThemeStore((state) => state.theme);
3464
useViewport();
@@ -44,49 +74,51 @@ const App = () => {
4474
initializeTheme();
4575

4676
return (
47-
<Routes>
48-
<Route element={<MobileLayout />}>
49-
<Route path="login" element={<LoginPage />} />
50-
<Route path="landing" element={<Landing />} />
51-
<Route path="*" element={<NotFoundPage />} />
52-
<Route path="auth-callback" element={<AuthCallbackPage />} />
53-
<Route path="onboarding" element={<OnboardingPage />} />
77+
<Suspense fallback={<div>로딩중</div>}>
78+
<Routes>
79+
<Route element={<MobileLayout />}>
80+
<Route path="login" element={<LoginPage />} />
81+
<Route path="landing" element={<Landing />} />
82+
<Route path="*" element={<NotFoundPage />} />
83+
<Route path="auth-callback" element={<AuthCallbackPage />} />
84+
<Route path="onboarding" element={<OnboardingPage />} />
5485

55-
<Route element={<PrivateRoute />}>
56-
<Route index element={<Home />} />
57-
<Route path="letter">
58-
<Route element={<Layout />}>
59-
<Route path="random" element={<RandomLettersPage />} />
60-
<Route path="box" element={<LetterBoxPage />} />
61-
<Route path="box/:id" element={<LetterBoxDetailPage />} />
86+
<Route element={<PrivateRoute />}>
87+
<Route index element={<Home />} />
88+
<Route path="letter">
89+
<Route element={<Layout />}>
90+
<Route path="random" element={<RandomLettersPage />} />
91+
<Route path="box" element={<LetterBoxPage />} />
92+
<Route path="box/:id" element={<LetterBoxDetailPage />} />
93+
</Route>
94+
<Route path="write" element={<WritePage />} />
95+
<Route path=":id" element={<LetterDetailPage />} />
6296
</Route>
63-
<Route path="write" element={<WritePage />} />
64-
<Route path=":id" element={<LetterDetailPage />} />
65-
</Route>
66-
<Route path="board">
67-
<Route element={<Layout />}>
68-
<Route path="rolling/:id" element={<RollingPaperPage />} />
69-
<Route path="letter" element={<LetterBoardPage />} />
97+
<Route path="board">
98+
<Route element={<Layout />}>
99+
<Route path="rolling/:id" element={<RollingPaperPage />} />
100+
<Route path="letter" element={<LetterBoardPage />} />
101+
</Route>
102+
<Route path="letter/:id" element={<LetterBoardDetailPage />} />
103+
<Route path="share/:shareProposalId" element={<ShareApprovalPage />} />
104+
</Route>
105+
<Route path="mypage" element={<Layout />}>
106+
<Route index element={<MyPage />} />
107+
<Route path="board" element={<MyBoardPage />} />
108+
<Route path="notifications" element={<NotificationsPage />} />
70109
</Route>
71-
<Route path="letter/:id" element={<LetterBoardDetailPage />} />
72-
<Route path="share/:shareProposalId" element={<ShareApprovalPage />} />
73-
</Route>
74-
<Route path="mypage" element={<Layout />}>
75-
<Route index element={<MyPage />} />
76-
<Route path="board" element={<MyBoardPage />} />
77-
<Route path="notifications" element={<NotificationsPage />} />
78110
</Route>
79111
</Route>
80-
</Route>
81112

82-
<Route element={<AdminRoute />}>
83-
<Route path="admin" element={<AdminPage />}>
84-
<Route path="report" element={<ReportManage />} />
85-
<Route path="badwords" element={<FilteringManage />} />
86-
<Route path="rolling-paper" element={<AdminRollingPaper />} />
113+
<Route element={<AdminRoute />}>
114+
<Route path="admin" element={<AdminPage />}>
115+
<Route path="report" element={<ReportManage />} />
116+
<Route path="badwords" element={<FilteringManage />} />
117+
<Route path="rolling-paper" element={<AdminRollingPaper />} />
118+
</Route>
87119
</Route>
88-
</Route>
89-
</Routes>
120+
</Routes>
121+
</Suspense>
90122
);
91123
};
92124

‎src/assets/images/basic-theme.png‎

-545 Bytes
Binary file not shown.

‎src/assets/images/basic-theme.webp‎

296 Bytes

‎src/assets/images/celebration-stamp.png‎

-4.36 KB
Binary file not shown.

‎src/assets/images/celebration-stamp.webp‎

1.02 KB

‎src/assets/images/celebration-theme-asset-bottom.png‎

-11.3 KB
Binary file not shown.

‎src/assets/images/celebration-theme-asset-bottom.webp‎

6.94 KB

0 commit comments

Comments
 (0)