From 9e2fc2c7ae79c4bf376543e2c0a2ece38009c246 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EC=9E=AC=ED=9D=AC?= Date: Sat, 2 Dec 2023 23:11:15 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=ED=8F=B0=ED=8A=B8=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94=20(#157)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :tada: 폰트 최적화 * :sparkles: 배너 이미지 로딩 방식 수정 * :sparkles: 배너 이미지 로딩 변경 --- .../(home)/components/BannerSection.tsx | 9 +++++++- src/app/layout.tsx | 23 ++++++++++++++++++- .../header/components/AvatarWithDropdown.tsx | 5 +++- .../domain/header/sections/RightSide.tsx | 1 - src/components/domain/slider/Slider.tsx | 11 ++++++++- src/styles/globals.css | 12 ---------- tailwind.config.js | 3 +++ 7 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/app/(root)/(routes)/(home)/components/BannerSection.tsx b/src/app/(root)/(routes)/(home)/components/BannerSection.tsx index 87cd7164..cdf41f65 100644 --- 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 + return ( + + ) } export default BannerSection diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7d4dbd73..ef36beae 100644 --- 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 ( - + diff --git a/src/components/domain/header/components/AvatarWithDropdown.tsx b/src/components/domain/header/components/AvatarWithDropdown.tsx index 3a1cd6ef..9864d8dd 100644 --- 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 }) => { diff --git a/src/components/domain/header/sections/RightSide.tsx b/src/components/domain/header/sections/RightSide.tsx index 4980cb91..1885adec 100644 --- 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 index ad0343e4..1a11ea78 100644 --- 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 ( { sizes="(max-width: 640px) 100vw, 640px" quality={50} style={{ width: '100%' }} + loading={loading} + priority={priority} /> ))} diff --git a/src/styles/globals.css b/src/styles/globals.css index c9618a5b..c9b1c60a 100644 --- 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 index 75684089..bca541be 100644 --- 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: [