[Feat] 디자인 시스템 초안 작성

.eslintrc.js

@@ -17,7 +17,15 @@ module.exports = {
   ],
   plugins: ['@typescript-eslint', 'testing-library'],
   ignorePatterns: ['dist/', 'node_modules/'],
-  rules: {},
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    '@typescript-eslint/ban-ts-comment': 'off',
+  },
   overrides: [
     {
       files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],

src/components/Example/Example.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import Example from '.';
+
+export default {
+  component: Example,
+  title: 'Components/Example',
+};
+
+const Template: ComponentStory<typeof Example> = (args) => <Example {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Example Word',
+};

src/components/Example/Example.style.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import theme from '../../styles/theme';
+
+const StyledButton = styled.button`
+  background-color: ${theme.color.bgSecondary};
+  color: ${theme.color.txtDanger};
+  border: 1px solid ${theme.color.borderPrimary};
+  border-radius: ${theme.borderRadius.sm};
+  padding: 8px 16px;
+  font-size: ${theme.fontSize.md};
+  font-weight: ${theme.fontWeight.bold};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  margin: 10px;
+`;
+
+export default StyledButton;

src/components/Example/Example.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import React from 'react';
+
+import StyledButton from './Example.style';
+
+interface IMyButton {
+  title: string;
+}
+
+const MyButton = ({ title, ...props }: IMyButton) => {
+  return (
+    <div>
+      <StyledButton>{title}</StyledButton>
+      <Image src={''} alt={''} {...props} />
+    </div>
+  );
+};
+
+export default MyButton;

src/components/Example/index.tsx

@@ -0,0 +1 @@
+export { default } from './Example';

src/pages/_app.page.tsx

@@ -3,12 +3,14 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import { RecoilRoot } from 'recoil';
 
+import Example from '../components/Example';
 import queryClient from '../configs/queryClient';
 import '../styles/reset.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
+      <Example title={'TEST'} />
       <QueryClientProvider client={queryClient}>
         <Component {...pageProps} />
         <ReactQueryDevtools initialIsOpen={false} />

src/styles/theme.ts

@@ -0,0 +1,47 @@
+const theme = {
+  color: {
+    bgPrimary: '#000000',
+    bgSecondary: '#00dd00',
+    txtPrimary: '#FFFFFF',
+    txtDanger: '#dd0d0d',
+    txtTertiary: '#999999',
+    borderPrimary: '#666666',
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    bold: 700,
+  },
+  fontSize: {
+    small: '12px',
+    md: '14px',
+    lg: '16px',
+  },
+  lineHeight: {
+    sm: '16px',
+    md: '20px',
+    lg: '24px',
+  },
+  spacing: {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+  },
+  responsive: {
+    sm: '480px',
+    md: '768px',
+    lg: '1024px',
+  },
+  borderRadius: {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+  },
+  shadow: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    lg: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  },
+} as const;
+
+export default theme;