From 196dd395a9bdd967942e2dab06792eb03193ed5f Mon Sep 17 00:00:00 2001 From: KIMSEUNGGYU <45627868+KIMSEUNGGYU@users.noreply.github.com> Date: Wed, 4 Jan 2023 13:29:20 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(SV?= =?UTF-8?q?G=20ICON)=20(#28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [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 * [refactor] 코드리뷰 수정 - path alias 로 수정 - 아이콘 폴더 구조 변경 - 불필요한 코드 제거 * [refactor] Color 타입 theme 에서 관리 * [refactor] next page 파일 관리 방법 변경 - 기존 방식으로 변경 Co-authored-by: 김현우 <45786387+hwookim@users.noreply.github.com> Co-authored-by: sujk912 --- .gitignore | 2 +- .storybook/main.js | 21 + next.config.js | 8 +- package-lock.json | 584 +++++++++++++++++++- package.json | 4 +- src/assets/icon/arrow_down.svg | 3 + src/assets/icon/arrow_right.svg | 3 + src/assets/icon/arrow_up.svg | 3 + src/assets/icon/clap.svg | 6 + src/assets/icon/create.svg | 5 + src/assets/icon/delete.svg | 5 + src/assets/icon/emoji_bubble.svg | 9 + src/assets/icon/emoji_career.svg | 9 + src/assets/icon/emoji_computer.svg | 9 + src/assets/icon/emoji_hands_up.svg | 9 + src/assets/icon/emoji_paint.svg | 9 + src/assets/icon/emoji_paper.svg | 9 + src/assets/icon/emoji_thumbs_up.svg | 9 + src/assets/icon/image.svg | 5 + src/assets/icon/index.tsx | 18 + src/assets/icon/more.svg | 5 + src/assets/icon/search.svg | 4 + src/assets/icon/share.svg | 5 + src/assets/icon/vote.svg | 3 + src/components/common/Icon/Icon.stories.tsx | 28 + src/components/common/Icon/Icon.tsx | 38 ++ src/components/common/Icon/index.tsx | 1 + src/pages/index.stories.tsx | 2 +- src/pages/{Home.test.tsx => index.test.tsx} | 2 +- src/pages/{index.page.tsx => index.tsx} | 0 src/styles/theme.ts | 2 + src/types/svg.d.ts | 7 + 32 files changed, 821 insertions(+), 6 deletions(-) create mode 100644 src/assets/icon/arrow_down.svg create mode 100644 src/assets/icon/arrow_right.svg create mode 100644 src/assets/icon/arrow_up.svg create mode 100644 src/assets/icon/clap.svg create mode 100644 src/assets/icon/create.svg create mode 100644 src/assets/icon/delete.svg create mode 100644 src/assets/icon/emoji_bubble.svg create mode 100644 src/assets/icon/emoji_career.svg create mode 100644 src/assets/icon/emoji_computer.svg create mode 100644 src/assets/icon/emoji_hands_up.svg create mode 100644 src/assets/icon/emoji_paint.svg create mode 100644 src/assets/icon/emoji_paper.svg create mode 100644 src/assets/icon/emoji_thumbs_up.svg create mode 100644 src/assets/icon/image.svg create mode 100644 src/assets/icon/index.tsx create mode 100644 src/assets/icon/more.svg create mode 100644 src/assets/icon/search.svg create mode 100644 src/assets/icon/share.svg create mode 100644 src/assets/icon/vote.svg create mode 100644 src/components/common/Icon/Icon.stories.tsx create mode 100644 src/components/common/Icon/Icon.tsx create mode 100644 src/components/common/Icon/index.tsx rename src/pages/{Home.test.tsx => index.test.tsx} (89%) rename src/pages/{index.page.tsx => index.tsx} (100%) create mode 100644 src/types/svg.d.ts diff --git a/.gitignore b/.gitignore index 6e37ef3..7f72a18 100644 --- a/.gitignore +++ b/.gitignore @@ -45,7 +45,7 @@ next-env.d.ts .LSOverride # Icon must end with two \r -Icon +# Icon # Thumbnails diff --git a/.storybook/main.js b/.storybook/main.js index 0c28ef2..42f0438 100644 --- a/.storybook/main.js +++ b/.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; }, }; diff --git a/next.config.js b/next.config.js index 2affd97..e933eb3 100644 --- a/next.config.js +++ b/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; diff --git a/package-lock.json b/package-lock.json index d2f2c64..ef38f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@storybook/manager-webpack5": "^6.5.13", "@storybook/react": "^6.5.13", "@storybook/testing-library": "^0.0.13", + "@svgr/webpack": "^6.5.1", "@tanstack/react-query-devtools": "^4.16.1", "@testing-library/cypress": "^8.0.7", "@testing-library/jest-dom": "^5.16.5", @@ -55,7 +56,8 @@ "start-server-and-test": "^1.14.0", "storybook-addon-next-router": "^4.0.2", "tsconfig-paths-webpack-plugin": "^4.0.0", - "typescript": "4.8.4" + "typescript": "4.8.4", + "url-loader": "^4.1.1" } }, "node_modules/@adobe/css-tools": { @@ -1790,6 +1792,21 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-react-constant-elements": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz", + "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-react-display-name": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz", @@ -10686,6 +10703,275 @@ "node": ">=8" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz", + "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz", + "integrity": "sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz", + "integrity": "sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz", + "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz", + "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz", + "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz", + "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz", + "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz", + "integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==", + "dev": true, + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "^6.5.1", + "@svgr/babel-plugin-remove-jsx-attribute": "*", + "@svgr/babel-plugin-remove-jsx-empty-expression": "*", + "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1", + "@svgr/babel-plugin-svg-dynamic-title": "^6.5.1", + "@svgr/babel-plugin-svg-em-dimensions": "^6.5.1", + "@svgr/babel-plugin-transform-react-native-svg": "^6.5.1", + "@svgr/babel-plugin-transform-svg-component": "^6.5.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz", + "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@svgr/babel-preset": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "camelcase": "^6.2.0", + "cosmiconfig": "^7.0.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz", + "integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.20.0", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz", + "integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@svgr/babel-preset": "^6.5.1", + "@svgr/hast-util-to-babel-ast": "^6.5.1", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "^6.0.0" + } + }, + "node_modules/@svgr/plugin-svgo": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz", + "integrity": "sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==", + "dev": true, + "dependencies": { + "cosmiconfig": "^7.0.1", + "deepmerge": "^4.2.2", + "svgo": "^2.8.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/webpack": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz", + "integrity": "sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-constant-elements": "^7.18.12", + "@babel/preset-env": "^7.19.4", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@svgr/core": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "@svgr/plugin-svgo": "^6.5.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, "node_modules/@swc/helpers": { "version": "0.4.11", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", @@ -11080,6 +11366,15 @@ "node": ">=6.9.0" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/aria-query": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz", @@ -15560,6 +15855,28 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-tree/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -15590,6 +15907,18 @@ "node": ">=4" } }, + "node_modules/csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dev": true, + "dependencies": { + "css-tree": "^1.1.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -23647,6 +23976,12 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, "node_modules/mdurl": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", @@ -28963,6 +29298,42 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true + }, + "node_modules/svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "dev": true, + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -32471,6 +32842,15 @@ "@babel/helper-plugin-utils": "^7.18.6" } }, + "@babel/plugin-transform-react-constant-elements": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz", + "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.20.2" + } + }, "@babel/plugin-transform-react-display-name": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz", @@ -39288,6 +39668,140 @@ } } }, + "@svgr/babel-plugin-add-jsx-attribute": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz", + "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==", + "dev": true + }, + "@svgr/babel-plugin-remove-jsx-attribute": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz", + "integrity": "sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==", + "dev": true + }, + "@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz", + "integrity": "sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==", + "dev": true + }, + "@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz", + "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==", + "dev": true + }, + "@svgr/babel-plugin-svg-dynamic-title": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz", + "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==", + "dev": true + }, + "@svgr/babel-plugin-svg-em-dimensions": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz", + "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==", + "dev": true + }, + "@svgr/babel-plugin-transform-react-native-svg": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz", + "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==", + "dev": true + }, + "@svgr/babel-plugin-transform-svg-component": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz", + "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==", + "dev": true + }, + "@svgr/babel-preset": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz", + "integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==", + "dev": true, + "requires": { + "@svgr/babel-plugin-add-jsx-attribute": "^6.5.1", + "@svgr/babel-plugin-remove-jsx-attribute": "*", + "@svgr/babel-plugin-remove-jsx-empty-expression": "*", + "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1", + "@svgr/babel-plugin-svg-dynamic-title": "^6.5.1", + "@svgr/babel-plugin-svg-em-dimensions": "^6.5.1", + "@svgr/babel-plugin-transform-react-native-svg": "^6.5.1", + "@svgr/babel-plugin-transform-svg-component": "^6.5.1" + } + }, + "@svgr/core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz", + "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==", + "dev": true, + "requires": { + "@babel/core": "^7.19.6", + "@svgr/babel-preset": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "camelcase": "^6.2.0", + "cosmiconfig": "^7.0.1" + }, + "dependencies": { + "camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true + } + } + }, + "@svgr/hast-util-to-babel-ast": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz", + "integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==", + "dev": true, + "requires": { + "@babel/types": "^7.20.0", + "entities": "^4.4.0" + } + }, + "@svgr/plugin-jsx": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz", + "integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==", + "dev": true, + "requires": { + "@babel/core": "^7.19.6", + "@svgr/babel-preset": "^6.5.1", + "@svgr/hast-util-to-babel-ast": "^6.5.1", + "svg-parser": "^2.0.4" + } + }, + "@svgr/plugin-svgo": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz", + "integrity": "sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==", + "dev": true, + "requires": { + "cosmiconfig": "^7.0.1", + "deepmerge": "^4.2.2", + "svgo": "^2.8.0" + } + }, + "@svgr/webpack": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz", + "integrity": "sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==", + "dev": true, + "requires": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-constant-elements": "^7.18.12", + "@babel/preset-env": "^7.19.4", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@svgr/core": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "@svgr/plugin-svgo": "^6.5.1" + } + }, "@swc/helpers": { "version": "0.4.11", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", @@ -39567,6 +40081,12 @@ } } }, + "@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true + }, "@types/aria-query": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz", @@ -43169,6 +43689,24 @@ "nth-check": "^2.0.1" } }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -43187,6 +43725,15 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dev": true, + "requires": { + "css-tree": "^1.1.2" + } + }, "cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -49313,6 +49860,12 @@ "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==", "dev": true }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, "mdurl": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", @@ -53474,6 +54027,35 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true + }, + "svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "dev": true, + "requires": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + }, + "dependencies": { + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true + } + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 8145cc1..23f0fab 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@storybook/manager-webpack5": "^6.5.13", "@storybook/react": "^6.5.13", "@storybook/testing-library": "^0.0.13", + "@svgr/webpack": "^6.5.1", "@tanstack/react-query-devtools": "^4.16.1", "@testing-library/cypress": "^8.0.7", "@testing-library/jest-dom": "^5.16.5", @@ -63,7 +64,8 @@ "start-server-and-test": "^1.14.0", "storybook-addon-next-router": "^4.0.2", "tsconfig-paths-webpack-plugin": "^4.0.0", - "typescript": "4.8.4" + "typescript": "4.8.4", + "url-loader": "^4.1.1" }, "msw": { "workerDirectory": "public" diff --git a/src/assets/icon/arrow_down.svg b/src/assets/icon/arrow_down.svg new file mode 100644 index 0000000..6891916 --- /dev/null +++ b/src/assets/icon/arrow_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/arrow_right.svg b/src/assets/icon/arrow_right.svg new file mode 100644 index 0000000..3ebe046 --- /dev/null +++ b/src/assets/icon/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/arrow_up.svg b/src/assets/icon/arrow_up.svg new file mode 100644 index 0000000..ce94036 --- /dev/null +++ b/src/assets/icon/arrow_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/clap.svg b/src/assets/icon/clap.svg new file mode 100644 index 0000000..9158d48 --- /dev/null +++ b/src/assets/icon/clap.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icon/create.svg b/src/assets/icon/create.svg new file mode 100644 index 0000000..66eca06 --- /dev/null +++ b/src/assets/icon/create.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/delete.svg b/src/assets/icon/delete.svg new file mode 100644 index 0000000..926318c --- /dev/null +++ b/src/assets/icon/delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/emoji_bubble.svg b/src/assets/icon/emoji_bubble.svg new file mode 100644 index 0000000..7c71ab3 --- /dev/null +++ b/src/assets/icon/emoji_bubble.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_career.svg b/src/assets/icon/emoji_career.svg new file mode 100644 index 0000000..c2522a1 --- /dev/null +++ b/src/assets/icon/emoji_career.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_computer.svg b/src/assets/icon/emoji_computer.svg new file mode 100644 index 0000000..89a3468 --- /dev/null +++ b/src/assets/icon/emoji_computer.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_hands_up.svg b/src/assets/icon/emoji_hands_up.svg new file mode 100644 index 0000000..49aa630 --- /dev/null +++ b/src/assets/icon/emoji_hands_up.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_paint.svg b/src/assets/icon/emoji_paint.svg new file mode 100644 index 0000000..b44bc63 --- /dev/null +++ b/src/assets/icon/emoji_paint.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_paper.svg b/src/assets/icon/emoji_paper.svg new file mode 100644 index 0000000..16aea40 --- /dev/null +++ b/src/assets/icon/emoji_paper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/emoji_thumbs_up.svg b/src/assets/icon/emoji_thumbs_up.svg new file mode 100644 index 0000000..a3a8877 --- /dev/null +++ b/src/assets/icon/emoji_thumbs_up.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/image.svg b/src/assets/icon/image.svg new file mode 100644 index 0000000..b50f9f9 --- /dev/null +++ b/src/assets/icon/image.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/index.tsx b/src/assets/icon/index.tsx new file mode 100644 index 0000000..41bf8c5 --- /dev/null +++ b/src/assets/icon/index.tsx @@ -0,0 +1,18 @@ +export { ReactComponent as ArrowDown } from './arrow_down.svg'; +export { ReactComponent as ArrowRight } from './arrow_right.svg'; +export { ReactComponent as ArrowUp } from './arrow_up.svg'; +export { ReactComponent as Clap } from './clap.svg'; +export { ReactComponent as Create } from './create.svg'; +export { ReactComponent as Delete } from './delete.svg'; +export { ReactComponent as Bubble } from './emoji_bubble.svg'; +export { ReactComponent as Career } from './emoji_career.svg'; +export { ReactComponent as Computer } from './emoji_computer.svg'; +export { ReactComponent as HandsUp } from './emoji_hands_up.svg'; +export { ReactComponent as Paint } from './emoji_paint.svg'; +export { ReactComponent as Paper } from './emoji_paper.svg'; +export { ReactComponent as ThumbsUp } from './emoji_thumbs_up.svg'; +export { ReactComponent as Image } from './image.svg'; +export { ReactComponent as More } from './more.svg'; +export { ReactComponent as Search } from './search.svg'; +export { ReactComponent as Share } from './share.svg'; +export { ReactComponent as Vote } from './vote.svg'; diff --git a/src/assets/icon/more.svg b/src/assets/icon/more.svg new file mode 100644 index 0000000..8ba3df7 --- /dev/null +++ b/src/assets/icon/more.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/search.svg b/src/assets/icon/search.svg new file mode 100644 index 0000000..9453f42 --- /dev/null +++ b/src/assets/icon/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon/share.svg b/src/assets/icon/share.svg new file mode 100644 index 0000000..36e0094 --- /dev/null +++ b/src/assets/icon/share.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/vote.svg b/src/assets/icon/vote.svg new file mode 100644 index 0000000..89e617a --- /dev/null +++ b/src/assets/icon/vote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/Icon/Icon.stories.tsx b/src/components/common/Icon/Icon.stories.tsx new file mode 100644 index 0000000..ab14b57 --- /dev/null +++ b/src/components/common/Icon/Icon.stories.tsx @@ -0,0 +1,28 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; + +import Icon from './Icon'; + +export default { + title: 'Commons/Icon', + component: Icon, + argTypes: { + size: { control: 'number', name: 'size(px)' }, + width: { control: 'text', name: 'width(px)' }, + height: { control: 'text', name: 'height(px)' }, + }, + args: {}, +} as ComponentMeta; + +const Template: ComponentStory = ({ ...args }) => ; + +export const Default = Template.bind({}); +Default.args = { + name: 'ArrowDown', +}; + +export const 사이즈_컬러 = Template.bind({}); +사이즈_컬러.args = { + name: 'ArrowDown', + size: 50, + color: 'Primary1', +}; diff --git a/src/components/common/Icon/Icon.tsx b/src/components/common/Icon/Icon.tsx new file mode 100644 index 0000000..7cdb440 --- /dev/null +++ b/src/components/common/Icon/Icon.tsx @@ -0,0 +1,38 @@ +/** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; +import { SVGProps } from 'react'; + +import * as icon from '@src/assets/icon'; +import theme, { ThemeColor } from '@src/styles/theme'; + +export type IconNameType = keyof typeof icon; + +const colors = theme.color; +const DEFAULT_SIZE = 24; + +interface SVGIconProps extends SVGProps { + /** 등록된 icon name */ + name: IconNameType; + size?: number; + width?: string; + height?: string; + /** 디자인 시스템 기반 컬러 Name */ + color?: ThemeColor; +} + +const Icon = ({ name, size = DEFAULT_SIZE, width, height, color, style, ...props }: SVGIconProps) => { + const SVGIcon = icon[name]; + + const IconStyles = css` + &, + path { + ${color ? `stroke: ${colors[color]} !important;` : ''} + width: ${width ?? `${size}px`}; + height: ${height ?? `${size}px`}; + } + `; + + return ; +}; + +export default Icon; diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx new file mode 100644 index 0000000..dc6b45c --- /dev/null +++ b/src/components/common/Icon/index.tsx @@ -0,0 +1 @@ +export { default } from './Icon'; diff --git a/src/pages/index.stories.tsx b/src/pages/index.stories.tsx index 7cd603c..01ca33e 100644 --- a/src/pages/index.stories.tsx +++ b/src/pages/index.stories.tsx @@ -1,7 +1,7 @@ import { ComponentStory } from '@storybook/react'; import React from 'react'; -import Home from './index.page'; +import Home from '.'; export default { component: Home, diff --git a/src/pages/Home.test.tsx b/src/pages/index.test.tsx similarity index 89% rename from src/pages/Home.test.tsx rename to src/pages/index.test.tsx index 703e873..38ca5e7 100644 --- a/src/pages/Home.test.tsx +++ b/src/pages/index.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import Home from './index.page'; +import Home from '.'; describe('Home', () => { it('renders a headig', () => { diff --git a/src/pages/index.page.tsx b/src/pages/index.tsx similarity index 100% rename from src/pages/index.page.tsx rename to src/pages/index.tsx diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 9271fe4..af4dbd0 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -54,4 +54,6 @@ const theme = { }, } as const; +export type ThemeColor = keyof typeof theme.color; + export default theme; diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts new file mode 100644 index 0000000..7458a9b --- /dev/null +++ b/src/types/svg.d.ts @@ -0,0 +1,7 @@ +declare module '*.svg' { + import React = require('react'); + + export const ReactComponent: React.FC>; + const src: string; + export default src; +}