[Feat] 공통 폰트 & 컬러 스타일 정의

.github/workflows/main.yml

@@ -0,0 +1,15 @@
+name: Review Assign
+
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+jobs:
+  assign:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: hkusu/review-assign-action@v1
+        with:
+          github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          assignees: ${{ github.actor }} # PR 작성자 자동 지정
+          reviewers: gyoyeon-kim, hhjin1, MINJI121, ozen0718, rover1523 # 리뷰어 리스트

declares.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

postcss.config.mjs

@@ -1,6 +1,6 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

src/styles/globals.css

@@ -1,26 +1,173 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  body {
+    font-family: "Pretendard", sans-serif;
+  }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@layer base {
+  :root {
+    --primary: #5534da;
+    --color-violet8: #f1effd;
+    --color-red: #d6173a;
+    --color-green: #7ac555;
+    --color-purple: #760dde;
+    --color-orange: #ffa500;
+    --color-blue: #76a5ea;
+    --color-pink: #e876ea;
+    --color-black: #000000;
+    --color-black2: #171717;
+    --color-black3: #333236;
+    --color-black4: #4b4b4b;
+    --color-gray1: #787486;
+    --color-gray2: #9fa6b2;
+    --color-gray3: #d9d9d9;
+    --color-gray4: #eeeeee;
+    --color-gray5: #fafafa;
+    --color-white: #ffffff;
+    --sortTextBgGreen: #e7f7db;
+    --sortTextBgPink: #f7dbf0;
+    --sortTextBgBlue: #dbe6f7;
+    --sortTextBgOrange: #f9eee3;
+    --sortTextGreen: #86d549;
+    --sortTextPink: #d549b6;
+    --sortTextBlue: #4981d5;
+    --sortTextOrange: #d58d49;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer utilities {
+  .font-32b {
+    @apply text-[32px] leading-[42px] font-bold;
+  }
+  .font-32sb {
+    @apply text-[32px] leading-[42px] font-semibold;
+  }
+
+  .font-24b {
+    @apply text-[24px] leading-[32px] font-bold;
+  }
+  .font-24sb {
+    @apply text-[24px] leading-[32px] font-semibold;
+  }
+  .font-24m {
+    @apply text-[24px] leading-[32px] font-medium;
+  }
+  .font-24r {
+    @apply text-[24px] leading-[32px] font-normal;
+  }
+
+  .font-20b {
+    @apply text-[20px] leading-[32px] font-bold;
+  }
+  .font-20sb {
+    @apply text-[20px] leading-[32px] font-semibold;
+  }
+  .font-20m {
+    @apply text-[20px] leading-[32px] font-medium;
+  }
+  .font-20r {
+    @apply text-[20px] leading-[32px] font-normal;
+  }
+
+  .font-18b {
+    @apply text-[18px] leading-[26px] font-bold;
+  }
+  .font-18sb {
+    @apply text-[18px] leading-[26px] font-semibold;
+  }
+  .font-18m {
+    @apply text-[18px] leading-[26px] font-medium;
+  }
+  .font-18r {
+    @apply text-[18px] leading-[26px] font-normal;
+  }
+
+  .font-16b {
+    @apply text-[16px] leading-[26px] font-bold;
   }
+  .font-16sb {
+    @apply text-[16px] leading-[26px] font-semibold;
+  }
+  .font-16m {
+    @apply text-[16px] leading-[26px] font-medium;
+  }
+  .font-16r {
+    @apply text-[16px] leading-[26px] font-normal;
+  }
+
+  .font-14b {
+    @apply text-[14px] leading-[24px] font-bold;
+  }
+  .font-14sb {
+    @apply text-[14px] leading-[24px] font-semibold;
+  }
+  .font-14m {
+    @apply text-[14px] leading-[24px] font-medium;
+  }
+  .font-14r {
+    @apply text-[14px] leading-[24px] font-normal;
+  }
+
+  .font-13sb {
+    @apply text-[13px] leading-[22px] font-semibold;
+  }
+  .font-13m {
+    @apply text-[13px] leading-[22px] font-medium;
+  }
+
+  .font-12sb {
+    @apply text-[12px] leading-[20px] font-semibold;
+  }
+  .font-12m {
+    @apply text-[12px] leading-[18px] font-medium;
+  }
+  .font-12r {
+    @apply text-[12px] leading-[18px] font-normal;
+  }
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff")
+    format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff")
+    format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff")
+    format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }

tailwind.config.ts

@@ -1,13 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/containers/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;