[feat] 아이콘 컴포넌트 구현 (SVG ICON) (#28)

* [feat] Nextjs 에서 svgr 파일 적용되도록 설정
- @svgr/webpack 는 SVG 파일을 인식할 수 있도록 설정
- url-loader 은 SVG 파일을 ReactComponent 로 인식할 수 있게 하도록 설정

* [feat] SVG 아이콘 등록

* [fix] 🐛 스토리북에서 svg 제대로 인식 못하는 이슈 해결

* [feat] Icon 컴포넌트 구현
- SVG 기반 Icon 컴포넌트 개발
-  svg 가 fill 로 스타일 적용하는 것도있고, stroke 로 하는 것도 있고, 하나의 svg 안에 여러 개의 fill로 있는 것도있지만, 현재 디자인을 봤을 때 stroke 만 변경해도 가능해서 stroke 값으로 색상 변경

* [feat] 디자인 시스템 구현 (#27)

* [chore] 윈도우에서 cr prettier와 eslint 충돌 오류 해결

* fix: fix window eslint error

* feat: Add GlobalStyle

* feat: Add global theme

* feat: Add theme

* feat: Add Example Component

* feat: Remove GlobalStyle

* fix: Image src missing 오류 해결

* refactor: eslint ban-ts-comment 제거

* refactor: change theme fontsize small name into sm

* refactor: Remove Example from _app.page.tsx

* props 제거

* Example Style Update

* design system upgrade

* common.css로 파일 분리

* theme 변경

* div 대신 <> 를 사용하도록 수정

* inerface 명 ~~Props 방식으로 사용하도록 변경

* package-lock.json 머지 오류 해결

* Example.tsx 괄호 정리

* border-radius 제거

* app_page.tsx 제거 및 style import 피드백 반영

* 절대 경로로 이동후 app.page.tsx로 이동

* reset이 common보다 먼저오도록 수정

* chore: storybook-addon-next-router 추가

* refactor: _app.page.tsx -> _app.tsx

* fix: borderRadius 삭제

* fix: common, reset css 순서 변경

* chore: 코드 오너 수정

Co-authored-by: sujk912 <[email protected]>

* [refactor] 코드리뷰 수정
- path alias 로 수정
- 아이콘 폴더 구조 변경
- 불필요한 코드 제거

* [refactor] Color 타입 theme 에서 관리

* [refactor] next page 파일 관리 방법 변경
- 기존 방식으로 변경

Co-authored-by: 김현우 <[email protected]>
Co-authored-by: sujk912 <[email protected]>

.gitignore

@@ -45,7 +45,7 @@ next-env.d.ts
 .LSOverride
 
 # Icon must end with two \r
-Icon
+# Icon
 
 
 # Thumbnails

.storybook/main.js

@@ -19,6 +19,27 @@ module.exports = {
         extensions: config.resolve.extensions,
       }),
     ];
+
+    config.module.rules.filter((rule) => rule.test.test('.svg')).forEach((rule) => (rule.exclude = /\.svg$/i));
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+        },
+        {
+          loader: 'url-loader',
+          options: {
+            name: 'static/media/[path][name].[ext]',
+          },
+        },
+      ],
+      type: 'javascript/auto',
+      issuer: {
+        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+      },
+    });
+
     return config;
   },
 };

next.config.js

@@ -3,7 +3,13 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   // 🐛 pages 파일에 test 파일있으면 issue 있어서, page 파일명을 변경하여 수정
-  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack', 'url-loader'],
+    });
+    return config;
+  },
 };
 
 module.exports = nextConfig;