Merge pull request #35 from softeerbootcamp4th/dev-darkdulgi

[design] 폰트 적용 #4

src/App.jsx

@@ -1,7 +1,11 @@
 function App() {
   return (
-    <div>
-      <span>Hello Orange</span>
+    <div className="text-5xl">
+      <div className="flex flex-col">
+        <span>다람쥐 헌 쳇바퀴에 타고파</span>
+        <span>Hyundai Sans Text Office</span>
+        <span className="font-ds-digital">0123456789</span>
+      </div>
     </div>
   );
 }

src/index.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "ds-digital";
+  src: url("/font/DS-DIGI.TTF") format("truetype");
+}
+
+@font-face {
+  font-family: "hdsans";
+  src: url("/font/HyundaiSansTextOffice-Medium.woff") format("woff"), url("/font/HyundaiSansTextOffice-Medium.ttf") format("truetype")
+}
+
+@layer base {
+  body {
+    font-family: "hdsans";
+  }
+}

tailwind.config.js

@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    fontFamily: {
+      "ds-digital": ["ds-digital"],
+      "hdsans": ["hdsans"],
+    },
   },
   plugins: [],
-}
-
+};

vite.config.js

@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "./",
   plugins: [react()],
-})
+  resolve: {
+    alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
+  },
+});