Merge pull request #4 from Findy-org/feat/#3-color

[FEAT] ColorPaletter 설정

src/components/common/Typography/Typography.mdx

@@ -1,6 +1,6 @@
 import { Meta, Typeset } from '@storybook/blocks';
 
-<Meta title="foundations/Typography" />;
+<Meta title="foundations/Typography" />
 
 export const typography = {
   type: {

src/foundations/Colors/Color.mdx

@@ -0,0 +1,29 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { colors } from '@/styles/theme/colors';
+
+<Meta title="foundations/Colors" />
+
+<ColorPalette>
+  <ColorItem title="Primary" subtitle="primary" colors={{ primary: colors.primary }} />
+  <ColorItem title="Secondary" subtitle="secondary" colors={{ secondary: colors.secondary }} />
+  <ColorItem title="Tertiary" subtitle="tertiary" colors={{ tertiary: colors.tertiary }} />
+  <ColorItem title="White" subtitle="basic/white" colors={{ white: colors.white }} />
+  <ColorItem title="Black" subtitle="basic/black" colors={{ black: colors.black }} />
+  <ColorItem
+    title="Gray"
+    subtitle="gray scale"
+    colors={{
+      gray50: colors.gray[50],
+      gray100: colors.gray[100],
+      gray200: colors.gray[200],
+      gray300: colors.gray[300],
+      gray400: colors.gray[400],
+      gray500: colors.gray[500],
+      gray600: colors.gray[600],
+      gray700: colors.gray[700],
+      gray800: colors.gray[800],
+      gray900: colors.gray[900],
+      gray950: colors.gray[950],
+    }}
+  />
+</ColorPalette>

src/index.css

@@ -4,5 +4,5 @@
 
 @font-face {
   font-family: 'Pretendard';
-  src: url('/public/fonts/PretendardVariable.woff2');
+  src: url('/fonts/PretendardVariable.woff2');
 }

src/styles/theme/colors.ts

@@ -0,0 +1,23 @@
+export const colors = {
+  primary: '#FF6265',
+  secondary: '#FFB1B3',
+  tertiary: '#FFF5C4',
+  white: '#FFFFFF',
+  black: '#0F0F0F',
+  gray: {
+    50: '#EEF0F6',
+    100: '#DCE2E8',
+    200: '#CBD1D9',
+    300: '#B9BfC7',
+    400: '#A1AAB1',
+    500: '#7F8996',
+    600: '#626C79',
+    700: '#49535C',
+    800: '#383E45',
+    900: '#252A30',
+    950: '#15191B',
+  },
+};
+
+export type Colors = keyof typeof colors;
+export const colorNames = Object.keys(colors) as Colors[];

tailwind.config.js → tailwind.config.ts

@@ -1,8 +1,11 @@
+import { colors } from './src/styles/theme/colors';
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line no-restricted-exports
 export default {
   darkMode: ['class'],
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
+    colors,
     extend: {
       fontFamily: {
         pretendard: ['Pretendard'],

vite.config.ts

@@ -1,7 +1,13 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 
-// https://vitejs.dev/config/
+// eslint-disable-next-line no-restricted-exports
 export default defineConfig({
-  plugins: [react()],
+  plugins: [svgr(), react()],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 });