Merge pull request #7 from osohyun0224/master

✨ feat :: 공용 컴포넌트 및 개발 styles 파일 정의

.gitignore

@@ -1 +1,5 @@
+.env
 node_modules
+dist
+.DS_Store
+build-storybook.log

.npmignore

@@ -0,0 +1,9 @@
+node_modules/
+src/
+public/
+tsconfig.json
+.storybook/
+.babelrc.json
+.eslintrc.json
+.prettierrc
+webpack.config.js

package.json

@@ -40,5 +40,13 @@
     "storybook": "^8.0.8",
     "typescript": "^5.4.5",
     "vite": "^5.2.10"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

src/stories/Button.tsx → src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './button.scss';
+import './Button.styles.css';
 
 export interface ButtonProps {
   primary?: boolean;

src/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import { Button, ButtonProps } from '@components/Button/Button';
 
 export default {
   title: 'Example/Button',

src/stories/Header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from './Button';
+import { Button } from '../components/Button/Button';
 import './header.scss';
 
 export interface HeaderProps {

src/styles/color.ts

@@ -0,0 +1,28 @@
+export interface colorType extends Record<string, string> {}
+
+export const Colors = {
+  Black: '#000000',
+  Gray900: '#191F28',
+  Gray800: '#333D4B',
+  Gray700: '#4E5968',
+  Gray600: '#6B7684',
+  Gray500: '#8B95A1',
+  Gray400: '#B0B8C1',
+  Gray300: '#D1D6DB',
+  Gray200: '#E5E8EB',
+  Gray100: '#F2F4F6',
+  Gray50: '#F9FAFB',
+  White: '#FFFFFF',
+  Ibory: 'rgba(189,210,225,0.38)',
+  Primary: '#4196FD',
+  PrimaryLight: '#0067FF1A',
+  PrimaryDark: '#3a83de',
+  Secondary: '#90C9F6',
+  SecondaryLight: '#90C9F61A',
+  Error: '#DA1E28',
+  ErrorLight: '#FF57611A',
+  Kakao: '#F1DA2A',
+  KakaoDark: '#ceba24',
+  Secondary02: '#F2B81E',
+  Yellow: '#FFBB05',
+};

src/styles/index.ts

@@ -0,0 +1,5 @@
+import { Colors } from './color'
+
+export {
+  Colors,
+};

tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+    },
     "outDir": "build",
     "module": "esnext",
     "target": "es5",

vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components')
+    }
+  }
+});

webpack.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components/'),
+      '@styles': path.resolve(__dirname, 'src/styles/')
+    }
+  }
+};