Welcome to the Home Page
-
+ 
);
diff --git a/src/shared/assets/fonts/PretendardVariable.woff2 b/src/shared/assets/fonts/PretendardVariable.woff2
new file mode 100644
index 0000000..49c54b5
Binary files /dev/null and b/src/shared/assets/fonts/PretendardVariable.woff2 differ
diff --git a/src/shared/styles/.gitkeep b/src/shared/styles/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/styles/font-style.css.ts b/src/shared/styles/font-style.css.ts
new file mode 100644
index 0000000..1009c96
--- /dev/null
+++ b/src/shared/styles/font-style.css.ts
@@ -0,0 +1,141 @@
+import { typography } from "./tokens/typography.css";
+
+export const fontStyles = {
+ // display
+ display_b_56: {
+ fontSize: typography.fontSize[56],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ display_b_40: {
+ fontSize: typography.fontSize[40],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+
+ // title
+ title_b_36: {
+ fontSize: typography.fontSize[36],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ title_b_28: {
+ fontSize: typography.fontSize[28],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ title_m_28: {
+ fontSize: typography.fontSize[28],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ title_b_24: {
+ fontSize: typography.fontSize[24],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ title_m_24: {
+ fontSize: typography.fontSize[24],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+
+ // heading
+ hding_b_22: {
+ fontSize: typography.fontSize[22],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ hding_m_22: {
+ fontSize: typography.fontSize[22],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ hding_b_20: {
+ fontSize: typography.fontSize[20],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ hding_m_20: {
+ fontSize: typography.fontSize[20],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+
+ // headline
+ hline_b_18: {
+ fontSize: typography.fontSize[18],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ hline_m_18: {
+ fontSize: typography.fontSize[18],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+
+ // body
+ body_b_16: {
+ fontSize: typography.fontSize[16],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ body_m_16: {
+ fontSize: typography.fontSize[16],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ body_r_16: {
+ fontSize: typography.fontSize[16],
+ fontWeight: typography.fontWeight.regular,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ body_b_14: {
+ fontSize: typography.fontSize[14],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ body_m_14: {
+ fontSize: typography.fontSize[14],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ body_r_14: {
+ fontSize: typography.fontSize[14],
+ fontWeight: typography.fontWeight.regular,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+
+ // caption
+ cap_b_12: {
+ fontSize: typography.fontSize[12],
+ fontWeight: typography.fontWeight.bold,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+ cap_m_12: {
+ fontSize: typography.fontSize[12],
+ fontWeight: typography.fontWeight.medium,
+ lineHeight: typography.lineHeight.normal,
+ letterSpacing: typography.letterSpacing.normal,
+ },
+} as const;
diff --git a/src/shared/styles/tokens/.gitkeep b/src/shared/styles/tokens/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/styles/tokens/color.css.ts b/src/shared/styles/tokens/color.css.ts
new file mode 100644
index 0000000..28f5340
--- /dev/null
+++ b/src/shared/styles/tokens/color.css.ts
@@ -0,0 +1,37 @@
+export const color = {
+ // Gray scale
+ gray100: "#F1F3F7",
+ gray200: "#E1E5EB",
+ gray300: "#CBCFD7",
+ gray400: "#A6A9B0",
+ gray500: "#70757C",
+ gray600: "#5A5C63",
+ gray700: "#37383C",
+ gray800: "#212225",
+ gray900: "#171719",
+
+ // Normal (기본 콘텐츠 컬러)
+ normal: "#70737C38",
+
+ // Primary scale
+ blue100: "#F0F4FF",
+ blue200: "#DCE4FF",
+ blue300: "#C8D6FF",
+ blue400: "#A0B7FF",
+ blue500: "#7899FF",
+ blue600: "#5A81FA",
+
+ // Sub Green scale
+ green100: "#EBF8DA",
+ green200: "#CDEE9F",
+ green300: "#BDED78",
+
+ // Sub Purple scale
+ purple100: "#FCF0FF",
+ purple200: "#EDCCF8",
+ purple300: "#E196F7",
+
+ // White / Black
+ white: "#FFFFFF",
+ black: "#000000",
+} as const;
diff --git a/src/shared/styles/tokens/typography.css.ts b/src/shared/styles/tokens/typography.css.ts
new file mode 100644
index 0000000..a639f92
--- /dev/null
+++ b/src/shared/styles/tokens/typography.css.ts
@@ -0,0 +1,27 @@
+export const typography = {
+ fontSize: {
+ 12: "1.2rem",
+ 14: "1.4rem",
+ 16: "1.6rem",
+ 18: "1.8rem",
+ 20: "2rem",
+ 22: "2.2rem",
+ 24: "2.4rem",
+ 28: "2.8rem",
+ 36: "3.6rem",
+ 40: "4rem",
+ 56: "5.6rem",
+ },
+ fontWeight: {
+ regular: "400",
+ medium: "500",
+ bold: "700",
+ },
+ lineHeight: {
+ normal: "150%",
+ },
+
+ letterSpacing: {
+ normal: "-0.01em",
+ },
+} as const;
diff --git a/vite.config.ts b/vite.config.ts
index 994c048..2aae6c9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,27 +2,31 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";
import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
// https://vite.dev/config/
export default defineConfig({
- plugins: [react(),
+ plugins: [
+ react(),
+ vanillaExtractPlugin(),
svgr({
svgrOptions: {
plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
- svgoConfig: {
+ svgoConfig: {
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
- }
- }
- }
- ]
+ },
+ },
+ },
+ ],
},
- }
- })],
+ },
+ }),
+ ],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
프리텐다드
+카카오로 시작하기
+