feat: update font and tailwindcss theme configuration (#22)

* feat: add custom theme colors and borderRadius * feat: change font to pretendard variable * feat: update metadata * feat: add pretendard font variable * chore: move font asset to public * chore: add theme colors * fix: fix local font src path
mash-up-kr · Jun 28, 2024 · 5d6cc30 · 5d6cc30
1 parent b2a8c1e
commit 5d6cc30
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 19 deletions.
diff --git a/public/assets/pretendard-variable.ttf b/public/assets/pretendard-variable.ttf
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,16 +1,14 @@
 import React from 'react'
 
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import Script from 'next/script'
 
 import './globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
+import { pretendard } from '@/styles/fonts'
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: '꼬르륵',
+  description: '전설의 보물섬으로 가는 맛집 지도',
 }
 
 export default function RootLayout({
@@ -20,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className={inter.className}>
+      <body className={`${pretendard.className} ${pretendard.variable}`}>
         <Script
           async
           strategy="beforeInteractive"

diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -0,0 +1,9 @@
+import localFont from 'next/font/local'
+
+const pretendard = localFont({
+  src: '../../public/assets/pretendard-variable.ttf',
+  display: 'swap',
+  variable: '--font-pretendard',
+})
+
+export { pretendard }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,21 +1,43 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss'
 
 const config: Config = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/stories/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      fontFamily: {
+        pretendard: ['var(--font-pretendard)'],
+      },
+      colors: {
+        neutral: {
+          '000': '#FFFFFF',
+          '100': '#ADB1BA',
+          '200': '#ADB1BA',
+          '300': '#868B94',
+          '400': '#6D717A',
+          '500': '#4D4F54',
+          '600': '#2B2E33',
+          '700': '#212124',
+          '800': '#17171A',
+        },
+        main: {
+          orange: '#E5684C',
+          blue: '#3177FF',
+          purple: '#5D5FEF',
+          yellow: '#FFEA2F',
+          pink: '#EFA5AE',
+          green: '#00B57C',
+        },
+      },
+      borderRadius: {
+        '3xl': '20px',
       },
     },
   },
   plugins: [],
-};
-export default config;
+}
+export default config