prgrms-web-devcourse-final-project · HelloWook · Jan 2, 2025 · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/sample_icon.svg" />
+        <link rel="preconnect" href="https://www.bottler.store" />
+        <link rel="dns-prefetch" href="https://www.bottler.store" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="manifest" href="/manifest.json" />
         <title>Bottler</title>

diff --git a/public/fonts/BagelFatOne-Regular.ttf b/public/fonts/BagelFatOne-Regular.ttf
diff --git a/public/fonts/BagelFatOne-Regular.woff b/public/fonts/BagelFatOne-Regular.woff
diff --git a/public/fonts/CookieRun Regular.ttf b/public/fonts/CookieRun Regular.ttf
diff --git a/public/fonts/CookieRun-Regular.woff b/public/fonts/CookieRun-Regular.woff
diff --git a/public/fonts/Inter-VariableFont_opsz,wght.ttf b/public/fonts/Inter-VariableFont_opsz,wght.ttf
diff --git a/public/fonts/Inter-VariableFont_opsz_wght.woff b/public/fonts/Inter-VariableFont_opsz_wght.woff
diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2
diff --git a/public/fonts/PyeongChangPeace-Light.ttf b/public/fonts/PyeongChangPeace-Light.ttf
diff --git a/public/fonts/PyeongChangPeace-Light.woff b/public/fonts/PyeongChangPeace-Light.woff
diff --git a/public/fonts/Sagak-sagak.ttf b/public/fonts/Sagak-sagak.ttf
diff --git a/public/fonts/Sagak-sagak.woff b/public/fonts/Sagak-sagak.woff
diff --git a/src/components/CreatLetterPage/LetterInput/LetterInput.tsx b/src/components/CreatLetterPage/LetterInput/LetterInput.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 type LetterInputProps = {
     value: string;
@@ -14,19 +14,25 @@ export const LetterInput = ({
     setValue,
     font,
     placeholder,
-    maxLength
+    maxLength = undefined
 }: LetterInputProps) => {
+    const inputClass = useMemo(
+        () =>
+            clsx(
+                `z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap`,
+                font || 'font-sans'
+            ),
+        [font]
+    );
+
     return (
         <>
             <input
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
                 placeholder={placeholder}
-                className={clsx(
-                    `z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap`,
-                    font ? font : 'font-sans'
-                )}
-                maxLength={maxLength || undefined}
+                className={inputClass}
+                maxLength={maxLength}
             />
         </>
     );

diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
@@ -10,6 +10,7 @@ import { ReportButton } from '../../Report/ReportButton';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
 import { Loading } from '@/components/Common/Loading/Loading';
+import { LetterLine } from '@/components/CreatLetterPage/LetterLine/LetterLine';
 
 type KeywordLetterDetailProps = {
     letterData: {
@@ -69,7 +70,7 @@ export const KeywordLetterDetail = ({
                     {reportBtn === 'received' && <ReportButton />}
                 </div>
                 <h1>{title}</h1>
-                <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+                <LetterLine />
 
                 <div className="relative">
                     <TextArea value={content} font={font} isReadonly={true} />

diff --git a/...ponents/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx b/...ponents/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
@@ -10,6 +10,7 @@ import { ReportButton } from '../../Report/ReportButton';
 import { useLocation } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
 import { Loading } from '@/components/Common/Loading/Loading';
+import { LetterLine } from '@/components/CreatLetterPage/LetterLine/LetterLine';
 
 type MapLetterDetailProps = {
     letterData: {
@@ -62,7 +63,7 @@ export const MapLetterArchieveDetail = ({
                     className="w-[15%] h-[15%] absolute top-[-7%] "
                 />
                 <h1>{title}</h1>
-                <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+                <LetterLine />
 
                 <div className="relative">
                     <TextArea value={content} font={font} isReadonly={true} />

diff --git a/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
@@ -11,6 +11,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { ReportButton } from '../../Report/ReportButton';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
+import { LetterLine } from '@/components/CreatLetterPage/LetterLine/LetterLine';
 
 type MapLetterDetailProps = {
     letterData: {
@@ -102,7 +103,7 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
 
     return (
         <>
-            <div className="absolute top-8 right-16 cursor-pointer">
+            <div className="absolute cursor-pointer top-8 right-16">
                 <div className="flex">
                     <div className="w-8 -rotate-12">
                         <Label imgSrc={label} />
@@ -118,7 +119,7 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
                         className="w-[15%] h-[15%] absolute top-[-7%] "
                     />
                     <h1>{title}</h1>
-                    <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+                    <LetterLine />
 
                     <div className="relative">
                         <TextArea

diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,3 @@
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -67,35 +65,47 @@
 
 @font-face {
     font-family: 'BagelFatOne';
-    src: url('/fonts/BagelFatOne-Regular.ttf') format('truetype');
+    src: url('/fonts/BagelFatOne-Regular.woff') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 400;
+    font-display: swap;
+    src: url('Pretendard-Regular.woff2') format('woff2');
+}
+
 @font-face {
     font-family: 'CookieRunRegular';
-    src: url('/fonts/CookieRun Regular.ttf') format('truetype');
+    src: url('/fonts/CookieRun Regular.woff') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'InterVariableFont';
-    src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+    src: url('/fonts/Inter-VariableFont_opsz,wght.woff') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'PyeongChangPeaceLight';
-    src: url('/fonts/PyeongChangPeace-Light.ttf') format('truetype');
+    src: url('/fonts/PyeongChangPeace-Light.woff') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Sagak-sagak';
-    src: url('/fonts/Sagak-sagak.ttf');
+    src: url('/fonts/Sagak-sagak.woff');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }

diff --git a/src/pages/Home/HomePage.stories.tsx b/src/pages/Home/HomePage.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import { HomePage } from './HomePage';
+import HomePage from './HomePage';
 
 const meta: Meta<typeof HomePage> = {
     component: HomePage,

diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -26,7 +26,7 @@ export type RecommendLetter = {
     label: string;
 };
 
-export const HomePage = () => {
+const HomePage = () => {
     const { user } = useUserStore();
     const { addToast } = useToastStore();
 
@@ -175,3 +175,5 @@ export const HomePage = () => {
         </>
     );
 };
+
+export default HomePage;
diff --git a/src/pages/Letter/SelectItem/SelectItemPage.stories.tsx b/src/pages/Letter/SelectItem/SelectItemPage.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import { SelectItemPage } from './SelectItemPage';
+import SelectItemPage from './SelectItemPage';
 
 const meta: Meta<typeof SelectItemPage> = {
     component: SelectItemPage,

diff --git a/src/pages/Letter/SelectItem/SelectItemPage.tsx b/src/pages/Letter/SelectItem/SelectItemPage.tsx
@@ -4,7 +4,7 @@ import { SelectItem } from '@/components/SelectItemPage/SelectItem/SelectItem';
 import React, { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-export const SelectItemPage = () => {
+const SelectItemPage = () => {
     const navigate = useNavigate();
     const [isActive, setIsActive] = useState(false);
 
@@ -35,3 +35,5 @@ export const SelectItemPage = () => {
         </>
     );
 };
+
+export default SelectItemPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import { ErrorPage } from '@/pages/ErrorPage';
-import { HomePage } from '@/pages/Home/HomePage';
+import HomePage from '@/pages/Home/HomePage';
 import { CreateLetterPage } from '@/pages/Letter/Create/CreateLetterPage';
 import { LoginPage } from '@/pages/User/Login/LoginPage';
 import { RegisterPage } from '@/pages/User/Register/RegisterPage';
@@ -10,7 +10,7 @@ import { NotificationPage } from '@/pages/Notification/NotificationPage';
 import { SentPage } from '@/pages/SentPage';
 import { ProfileSharePage } from '@/pages/User/Profile/ProfileSharePage';
 import { LabelLotteryPage } from './Label/Lottery/LabelLotteryPage';
-import { SelectItemPage } from './Letter/SelectItem/SelectItemPage';
+import SelectItemPage from './Letter/SelectItem/SelectItemPage';
 import { MyPage } from '@/pages/User/MyPage/MyPage';
 import { SuccessLetterPage } from './Letter/Success/SuccessLetterPage';
 import { ProfilePage } from '@/pages/User/Profile/ProfilePage';

diff --git a/src/router.tsx b/src/router.tsx
@@ -3,7 +3,6 @@ import { createBrowserRouter, Outlet, Navigate } from 'react-router-dom';
 import { NavigationBar } from '@/components/Common/NavigationBar/NavigationBar';
 import {
     ErrorPage,
-    HomePage,
     CreateLetterPage,
     MyPage,
     LoginPage,
@@ -13,7 +12,6 @@ import {
     SentPage,
     ProfileSharePage,
     LabelLotteryPage,
-    SelectItemPage,
     SuccessLetterPage,
     ProfilePage,
     StoragePage,
@@ -22,11 +20,17 @@ import {
     MapLetterArchieveDetailContainerPage,
     KakaoRedirectPage
 } from './pages';
+
 const MapExplorerPage = lazy(() => import('@/pages/Map/MapExplorerPage'));
+const HomePage = lazy(() => import('@/pages/Home/HomePage'));
+const SelectItemPage = lazy(
+    () => import('@/pages/Letter/SelectItem/SelectItemPage')
+);
 
 import { tokenStorage } from './service/auth/tokenStorage';
 import { AuthProvider } from './AuthProvider';
 import { Container } from '@/components/Common/Container/Container';
+
 import { CreateMapLetterPage } from './pages/Map/Create/CreateMapLetterPage';
 import { MapSelectItemPage } from './pages/Map/Select/MapSelectItemPage';
 import { ErrorBoundary } from './ErrorBoundary';