✨ 폰트 최적화 (#157)

* 🎉 폰트 최적화 * ✨ 배너 이미지 로딩 방식 수정 * ✨ 배너 이미지 로딩 변경
team-nabi · Dec 2, 2023 · 9e2fc2c · 9e2fc2c
1 parent 877302b
commit 9e2fc2c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 17 deletions.
diff --git a/src/app/(root)/(routes)/(home)/components/BannerSection.tsx b/src/app/(root)/(routes)/(home)/components/BannerSection.tsx
@@ -7,7 +7,14 @@ const BannerSection = () => {
     { url: Assets.banner2 },
     { url: Assets.banner3 },
   ]
-  return <Slider imageData={bannerArr} imageAspectRatio="auto" />
+  return (
+    <Slider
+      loading="eager"
+      priority={true}
+      imageData={bannerArr}
+      imageAspectRatio="auto"
+    />
+  )
 }
 
 export default BannerSection
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from 'next'
+import localFont from 'next/font/local'
 import Header from '@/components/domain/header'
 import { Toaster } from '@/components/ui/toast/Toaster'
 import { Environment } from '@/config/environment'
@@ -9,8 +10,28 @@ import ThemeProviderContext from '@/contexts/ThemeProviderContext'
 import { initMockApi } from '@/lib/msw/initMockApi'
 import '@/styles/globals.css'
 
+const pretendard = localFont({
+  src: [
+    {
+      path: '../../public/font/Pretendard-Regular.woff',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../../public/font/Pretendard-Bold.woff',
+      weight: '700',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-pretendard',
+  display: 'swap',
+})
+
 export const metadata: Metadata = {
   metadataBase: new URL(Environment.currentAddress()),
+  title: '물물교환 플랫폼, 나비장터',
+  description:
+    '나비장터를 통해서 필요없는 물건을 비슷한 가치의 물건과 교환해보세요.',
   openGraph: {
     title: '물물교환 플랫폼, 나비장터',
     description:
@@ -42,7 +63,7 @@ export default async function RootLayout({
 }>) {
   return (
     <html className="light" lang="ko">
-      <body>
+      <body className={pretendard.className}>
         <TanstackQueryContext>
           <ThemeProviderContext>
             <MSWWrapper>

diff --git a/src/components/domain/header/components/AvatarWithDropdown.tsx b/src/components/domain/header/components/AvatarWithDropdown.tsx
@@ -31,7 +31,10 @@ const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => {
       <DropdownMenuTrigger asChild>
         <Button variant={null}>
           <Avatar size="md">
-            <AvatarImage imgUrl={imageUrl ?? DEFAULT_PROFILE_IMG} />
+            <AvatarImage
+              alt="profile"
+              imgUrl={imageUrl ?? DEFAULT_PROFILE_IMG}
+            />
           </Avatar>
         </Button>
       </DropdownMenuTrigger>

diff --git a/src/components/domain/header/sections/RightSide.tsx b/src/components/domain/header/sections/RightSide.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React from 'react'
-import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import Button from '@/components/ui/button'
 import AppPath from '@/config/appPath'

diff --git a/src/components/domain/slider/Slider.tsx b/src/components/domain/slider/Slider.tsx
@@ -11,13 +11,20 @@ import './index.css'
 type SliderProps = {
   imageData: { url: string | StaticImageData }[]
   imageAspectRatio: string
+  loading?: 'lazy' | 'eager'
+  priority?: boolean
 }
 
 /**
  * @param {ImageData} 이미지 아이디, 이미지 url을 담은 데이터
  * @param {imageAspectRatio} swiper 크기 지정을 위한 변수
  */
-const Slider = ({ imageData, imageAspectRatio }: SliderProps) => {
+const Slider = ({
+  imageData,
+  imageAspectRatio,
+  loading = 'lazy',
+  priority = false,
+}: SliderProps) => {
   SwiperCore.use([Pagination, Autoplay])
   return (
     <Swiper
@@ -40,6 +47,8 @@ const Slider = ({ imageData, imageAspectRatio }: SliderProps) => {
             sizes="(max-width: 640px) 100vw, 640px"
             quality={50}
             style={{ width: '100%' }}
+            loading={loading}
+            priority={priority}
           />
         </SwiperSlide>
       ))}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -11,18 +11,6 @@
     --page-min-width: 320px;
     --page-max-width: 640px;
   }
-
-  @font-face {
-    font-family: Pretendard;
-    font-weight: 400;
-    src: url('../../public/font/Pretendard-Regular.woff') format('woff');
-  }
-
-  @font-face {
-    font-family: Pretendard;
-    font-weight: 700;
-    src: url('../../public/font/Pretendard-Bold.woff') format('woff');
-  }
 }
 
 @layer base {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -45,6 +45,9 @@ module.exports = {
       padding: {
         chat_input: 'var(--chat-input-height)',
       },
+      fontFamily: {
+        pretendard: ['var(--font-pretendard)'],
+      },
     },
   },
   plugins: [