setting: 폰트 및 tailwind 설정 추가

KUSITMS-30th-TEAM-C · Oct 18, 2024 · 6fd99bb · 6fd99bb
1 parent 8d232d3
commit 6fd99bb
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 21 deletions.
diff --git a/src/app/fonts/GeistMonoVF.woff b/src/app/fonts/GeistMonoVF.woff
diff --git a/src/app/fonts/GeistVF.woff b/src/app/fonts/GeistVF.woff
diff --git a/src/app/fonts/PretendardVariable.woff2 b/src/app/fonts/PretendardVariable.woff2
diff --git a/src/app/fonts/index.ts b/src/app/fonts/index.ts
@@ -0,0 +1,8 @@
+import localFont from 'next/font/local'
+
+export const pretendard = localFont({
+  src: './PretendardVariable.woff2',
+  display: 'swap',
+  weight: '45 920',
+  variable: '--pretendard',
+})
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -10,6 +10,6 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
   min-height: 100vh;
+  max-width: 600px;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,21 +1,10 @@
 import type { Metadata } from 'next'
-import localFont from 'next/font/local'
 import './globals.css'
-
-const geistSans = localFont({
-  src: './fonts/GeistVF.woff',
-  variable: '--font-geist-sans',
-  weight: '100 900',
-})
-const geistMono = localFont({
-  src: './fonts/GeistMonoVF.woff',
-  variable: '--font-geist-mono',
-  weight: '100 900',
-})
+import { pretendard } from './fonts'
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: '나의 시간조각을 모아, 조각조각',
+  description: '자투리 시간 앱',
 }
 
 export default function RootLayout({
@@ -24,12 +13,8 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang="ko">
+      <body className={pretendard.variable}>{children}</body>
     </html>
   )
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,24 @@
 import type { Config } from 'tailwindcss'
 
+const px0To10 = {
+  ...Array.from(Array(11)).reduce(
+    (acc, _, i) => ({ ...acc, [i]: `${i}px` }),
+    {},
+  ),
+}
+const px0To100 = {
+  ...Array.from(Array(101)).reduce(
+    (acc, _, i) => ({ ...acc, [i]: `${i}px` }),
+    {},
+  ),
+}
+const px0To500 = {
+  ...Array.from(Array(501)).reduce(
+    (acc, _, i) => ({ ...acc, [i]: `${i}px` }),
+    {},
+  ),
+}
+
 const config: Config = {
   content: [
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -11,8 +30,20 @@ const config: Config = {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
       },
+      width: px0To500,
+      height: px0To500,
+      borderWidth: px0To10,
+      fontSize: px0To100,
+      lineHeight: px0To100,
+      minWidth: px0To500,
+      minHeight: px0To500,
+      spacing: px0To500,
+      borderRadius: { ...px0To100, button: 6 },
     },
   },
+  fontFamily: {
+    pretendard: 'var(--pretendard)',
+  },
   plugins: [],
 }
 export default config