[FE] 해커톤 범위 디자인시스템 구현 (#36)

* feat: FixedButton Component 구현 Co-authored-by: soi-ha <[email protected]> * feat: Input component 구현 Co-authored-by: soi-ha <[email protected]> * feat: Title component 구현 Co-authored-by: soi-ha <[email protected]> * feat: BottomSheet component 구현 Co-authored-by: soi-ha <[email protected]> * fix: BottomSheet component 빌드 오류 해결 * move: 전체적인 파일 경로 수정정 * move: 전체적인 파일 경로 수정 * fix: npm build를 위한 설정 변경 * feat: IconButton Component 추가 * design: IconButton height가 제대로 적용되지 않는 오류 수정 * feat: npm 배포를 위한 환경설정 및 파일 경로 수정 Co-authored-by: Soyeon Choe <[email protected]> * style: eslint 적용 * design: globalStyle root BG 변경 * design: globalStyle background 변경 * fix: Title type 변경 * chore: storybook svg 사용을 위한 main.ts 설정 * feat: BillItem component 구현 * feat: InOutItem Component 구현 * feat: StepItemComponent 구현 * chore: storybook preview background color 수정 * chore: tsconfig.json sourcemap 속성 변경 * chore: npm v0.1.0 배포 --------- Co-authored-by: soi-ha <[email protected]> Co-authored-by: Soyeon Choe <[email protected]>
woowacourse-teams · Jul 18, 2024 · f043fa0 · f043fa0
1 parent 3b41054
commit f043fa0
Show file tree

Hide file tree

Showing 62 changed files with 1,945 additions and 2,180 deletions.
diff --git a/HDesign/.npmignore b/HDesign/.npmignore
@@ -0,0 +1,7 @@
+node_modules/
+src/
+tsconfig.json
+.storybook/
+.eslintrc.json
+.prettierrc
+webpack.config.js
diff --git a/HDesign/.storybook/main.ts b/HDesign/.storybook/main.ts
@@ -1,7 +1,9 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
 import type {StorybookConfig} from '@storybook/react-webpack5';
+import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-webpack5-compiler-swc',
     '@storybook/addon-onboarding',
@@ -14,5 +16,31 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
+  webpackFinal: async config => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+        '@components': path.resolve(__dirname, '../src/components'),
+        '@assets': path.resolve(__dirname, '../src/assets'),
+        '@token': path.resolve(__dirname, '../src/token'),
+        '@theme': path.resolve(__dirname, '../src/theme'),
+      };
+    }
+
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
 };
 export default config;
diff --git a/HDesign/.storybook/preview.tsx b/HDesign/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type {Preview} from '@storybook/react';
-import {HDesignProvider} from '../lib/theme/HDesignProvider';
+import {HDesignProvider} from '../src/theme/HDesignProvider';
 
 const preview: Preview = {
   parameters: {
@@ -11,6 +11,23 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      defaultViewport: {
+        styles: {
+          width: '375px',
+          height: '812px',
+        },
+      },
+    },
+    backgrounds: {
+      default: 'gray',
+      values: [
+        {
+          name: 'gray',
+          value: '#f3f3f3',
+        },
+      ],
+    },
   },
   decorators: [
     Story => (

diff --git a/HDesign/eslint.config.mjs b/HDesign/eslint.config.mjs
@@ -84,21 +84,6 @@ export default [
               group: 'external',
               position: 'before',
             },
-            {
-              pattern: '@hooks/*',
-              group: 'internal',
-              position: 'after',
-            },
-            {
-              pattern: '@apis/*',
-              group: 'internal',
-              position: 'after',
-            },
-            {
-              pattern: '@pages/*',
-              group: 'internal',
-              position: 'after',
-            },
             {
               pattern: '@components/*',
               group: 'internal',
@@ -110,12 +95,12 @@ export default [
               position: 'after',
             },
             {
-              pattern: '@utils/*',
+              pattern: '@theme/*',
               group: 'internal',
               position: 'after',
             },
             {
-              pattern: '@constants/*',
+              pattern: '@token/*',
               group: 'internal',
               position: 'after',
             },

diff --git a/HDesign/lib/index.ts b/HDesign/lib/index.ts
diff --git a/HDesign/lib/theme/theme.type.ts b/HDesign/lib/theme/theme.type.ts