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

.eslintrc.js

@@ -17,7 +17,14 @@ module.exports = {
   ],
   plugins: ['@typescript-eslint', 'testing-library'],
   ignorePatterns: ['dist/', 'node_modules/'],
-  rules: {},
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+  },
   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,25 @@
+import styled from '@emotion/styled';
+
+import theme from '../../styles/theme';
+
+const StyledButton = styled.button`
+  background-color: ${theme.color.bgSecondary};
+  color: ${theme.color.primaryLight};
+  border: 1px solid ${theme.color.borderPrimary};
+  border-radius: ${theme.borderRadius.sm};
+  padding: 8px 16px;
+  line-height: ${theme.lineHeight.lg};
+  font-size: ${theme.fontSize.md};
+  font-weight: ${theme.fontWeight.bold};
+  font-family: ${theme.fontFamily.mainTitle};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  margin: 10px;
+
+  &:hover {
+    background-color: ${theme.color.bgThird};
+    color: ${theme.color.primaryDark};
+  }
+`;
+
+export default StyledButton;

src/components/Example/Example.tsx

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

src/components/Example/index.tsx

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

src/styles/reset.css

@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
@@ -89,6 +96,7 @@ video {
   border: 0;
   font-size: 100%;
   font: inherit;
+  font-family: 'Pretendard-Regular', 'Noto Sans CJK KR', syne;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
@@ -107,6 +115,8 @@ section {
 }
 body {
   line-height: 1;
+  background-color: #101012;
+  color: #f1f3f5;
 }
 ol,
 ul {
@@ -127,3 +137,19 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+h1 {
+  font-size: 20pt;
+  font-weight: bold;
+}
+h2 {
+  font-size: 18pt;
+  font-weight: medium;
+}
+h3 {
+  font-size: 16pt;
+  font-weight: regular;
+}
+p {
+  font-size: 14pt;
+  font-weight: regular;
+}

src/styles/theme.ts

@@ -0,0 +1,65 @@
+const theme = {
+  color: {
+    // common color
+    dark0: '#c1c2c5',
+    dark1: '#a6a7ab',
+    dark2: '#909296',
+    dark3: '#5c5f66',
+    dark4: '#373a40',
+    dark5: '#2c2e33',
+    dark6: '#25262b',
+    dark7: '#1a1b1e',
+    dark8: '#141517',
+    dark9: '#101113',
+    primaryLight: '#d2fa64',
+    primaryDark: '#b2dd3c',
+    secondaryLight: '#ff3d60',
+    secondaryDark: '#e02d4d',
+    // specialized color
+    bgPrimary: '#101012',
+    bgSecondary: '#212529',
+    bgThird: '#2c2e33',
+    topicPrimary: '#ff7991',
+    topicSecondary: '#aef19d',
+    txtPrimary: '#f1f3f5',
+    txtSecondary: '#6E7178',
+    txtDanger: '#ff0000',
+    borderPrimary: '#f8f9fa',
+  },
+  fontFamily: {
+    basic: 'Pretendard',
+    mainTitle: 'Syne',
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    bold: 700,
+  },
+  fontSize: {
+    xxsm: '8px',
+    xsm: '12px',
+    sm: '14px',
+    md: '15px',
+    lg: '16px',
+    xlg: '18px',
+    xxlg: '20px',
+    xxxlg: '24px',
+  },
+  lineHeight: {
+    md: '130%',
+    lg: '150%',
+  },
+  // TODO: 반응형 도입시 재정의 필요. (임시로 기준값 설정한 상태)
+  responsive: {
+    sm: '480px',
+    md: '768px',
+    lg: '1024px',
+  },
+  borderRadius: {
+    sm: '10px', // card item
+    md: '20px', // card
+    lg: '16px', // hashtag
+  },
+} as const;
+
+export default theme;