Merge pull request #35 from boostcampwm-2024/feature-fe-#34

스타일링 초기 세팅

Author: djk01281

frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

frontend/package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
     "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "zustand": "^5.0.1"
   },
@@ -27,6 +29,8 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"

frontend/src/assets/fonts/Pretendard-Bold.subset.woff2

@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 600;
+  src:
+    local("Pretendard Bold"),
+    url("./assets/fonts/Pretendard-Bold.subset.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local("Pretendard SemiBold"),
+    url("./assets/fonts/Pretendard-SemiBold.subset.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local("Pretendard Medium"),
+    url("./assets/fonts/Pretendard-Medium.subset.woff2") format("woff2");
+}

frontend/src/assets/fonts/Pretendard-Medium.subset.woff2

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/src/assets/fonts/Pretendard-SemiBold.subset.woff2

@@ -2,7 +2,9 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
+    fontFamily: {
+      pretendard: ["Pretendard"],
+    },
     extend: {},
   },
-  plugins: [],
 };