diff --git a/.storybook/main.ts b/.storybook/main.ts
index d1c3883..0bcfdb1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -26,15 +26,6 @@ const config: StorybookConfig = {
];
}
- if (config.module) {
- if (config.module.rules) {
- config.module.rules.unshift({
- test: /\.svg$/,
- use: ['@svgr/webpack'],
- });
- }
- }
-
return config;
},
};
diff --git a/@types/global.d.ts b/@types/global.d.ts
index efe1c01..fea6b6b 100644
--- a/@types/global.d.ts
+++ b/@types/global.d.ts
@@ -1,4 +1,4 @@
type ModalProps = {
isOpen: boolean;
- onClose: () => void;
+ onClose: VoidFunction;
};
diff --git a/next.config.js b/next.config.js
index 53ee1c0..91ef62f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,16 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
- swcMinify: true,
- webpack: config => {
- config.module.rules.push({
- test: /\.svg$/i,
- issuer: /\.[jt]sx?$/,
- use: ['@svgr/webpack'],
- });
-
- return config;
- },
};
module.exports = nextConfig;
diff --git a/package.json b/package.json
index cdbd1ae..e2a508e 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
"@storybook/nextjs": "^7.6.3",
"@storybook/react": "^7.6.3",
"@storybook/test": "^7.6.3",
- "@svgr/webpack": "^8.1.0",
"@testing-library/dom": "^9.3.3",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4945698..e2c4a98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,9 +67,6 @@ devDependencies:
'@storybook/test':
specifier: ^7.6.3
version: 7.6.3(vitest@1.0.1)
- '@svgr/webpack':
- specifier: ^8.1.0
- version: 8.1.0(typescript@5.3.3)
'@testing-library/dom':
specifier: ^9.3.3
version: 9.3.3
@@ -1125,16 +1122,6 @@ packages:
'@babel/helper-plugin-utils': 7.22.5
dev: true
- /@babel/plugin-transform-react-constant-elements@7.23.3(@babel/core@7.23.5):
- resolution: {integrity: sha512-zP0QKq/p6O42OL94udMgSfKXyse4RyJ0JqbQ34zDAONWjyrEsghYEyTSK5FIpmXmCpB55SHokL1cRRKHv8L2Qw==}
- engines: {node: '>=6.9.0'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- '@babel/helper-plugin-utils': 7.22.5
- dev: true
-
/@babel/plugin-transform-react-display-name@7.23.3(@babel/core@7.23.5):
resolution: {integrity: sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==}
engines: {node: '>=6.9.0'}
@@ -4219,163 +4206,6 @@ packages:
react: 18.2.0
dev: false
- /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==}
- engines: {node: '>=12'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- dev: true
-
- /@svgr/babel-preset@8.1.0(@babel/core@7.23.5):
- resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==}
- engines: {node: '>=14'}
- peerDependencies:
- '@babel/core': ^7.0.0-0
- dependencies:
- '@babel/core': 7.23.5
- '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.23.5)
- '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.23.5)
- dev: true
-
- /@svgr/core@8.1.0(typescript@5.3.3):
- resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
- engines: {node: '>=14'}
- dependencies:
- '@babel/core': 7.23.5
- '@svgr/babel-preset': 8.1.0(@babel/core@7.23.5)
- camelcase: 6.3.0
- cosmiconfig: 8.3.6(typescript@5.3.3)
- snake-case: 3.0.4
- transitivePeerDependencies:
- - supports-color
- - typescript
- dev: true
-
- /@svgr/hast-util-to-babel-ast@8.0.0:
- resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==}
- engines: {node: '>=14'}
- dependencies:
- '@babel/types': 7.23.5
- entities: 4.5.0
- dev: true
-
- /@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0):
- resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==}
- engines: {node: '>=14'}
- peerDependencies:
- '@svgr/core': '*'
- dependencies:
- '@babel/core': 7.23.5
- '@svgr/babel-preset': 8.1.0(@babel/core@7.23.5)
- '@svgr/core': 8.1.0(typescript@5.3.3)
- '@svgr/hast-util-to-babel-ast': 8.0.0
- svg-parser: 2.0.4
- transitivePeerDependencies:
- - supports-color
- dev: true
-
- /@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@5.3.3):
- resolution: {integrity: sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==}
- engines: {node: '>=14'}
- peerDependencies:
- '@svgr/core': '*'
- dependencies:
- '@svgr/core': 8.1.0(typescript@5.3.3)
- cosmiconfig: 8.3.6(typescript@5.3.3)
- deepmerge: 4.3.1
- svgo: 3.1.0
- transitivePeerDependencies:
- - typescript
- dev: true
-
- /@svgr/webpack@8.1.0(typescript@5.3.3):
- resolution: {integrity: sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==}
- engines: {node: '>=14'}
- dependencies:
- '@babel/core': 7.23.5
- '@babel/plugin-transform-react-constant-elements': 7.23.3(@babel/core@7.23.5)
- '@babel/preset-env': 7.23.5(@babel/core@7.23.5)
- '@babel/preset-react': 7.23.3(@babel/core@7.23.5)
- '@babel/preset-typescript': 7.23.3(@babel/core@7.23.5)
- '@svgr/core': 8.1.0(typescript@5.3.3)
- '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
- '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.3.3)
- transitivePeerDependencies:
- - supports-color
- - typescript
- dev: true
-
/@swc/core-darwin-arm64@1.3.100:
resolution: {integrity: sha512-XVWFsKe6ei+SsDbwmsuRkYck1SXRpO60Hioa4hoLwR8fxbA9eVp6enZtMxzVVMBi8ej5seZ4HZQeAWepbukiBw==}
engines: {node: '>=10'}
@@ -4590,11 +4420,6 @@ packages:
react: 18.2.0
dev: false
- /@trysound/sax@0.2.0:
- resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
- engines: {node: '>=10.13.0'}
- dev: true
-
/@types/aria-query@5.0.4:
resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
dev: true
@@ -6114,11 +5939,6 @@ packages:
engines: {node: '>=6'}
dev: true
- /camelcase@6.3.0:
- resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
- engines: {node: '>=10'}
- dev: true
-
/caniuse-lite@1.0.30001566:
resolution: {integrity: sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==}
@@ -6355,11 +6175,6 @@ packages:
engines: {node: '>= 6'}
dev: true
- /commander@7.2.0:
- resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
- engines: {node: '>= 10'}
- dev: true
-
/commander@8.3.0:
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
engines: {node: '>= 12'}
@@ -6616,32 +6431,6 @@ packages:
nth-check: 2.1.1
dev: true
- /css-select@5.1.0:
- resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
- dependencies:
- boolbase: 1.0.0
- css-what: 6.1.0
- domhandler: 5.0.3
- domutils: 3.1.0
- nth-check: 2.1.1
- dev: true
-
- /css-tree@2.2.1:
- resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
- engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
- dependencies:
- mdn-data: 2.0.28
- source-map-js: 1.0.2
- dev: true
-
- /css-tree@2.3.1:
- resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
- engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
- dependencies:
- mdn-data: 2.0.30
- source-map-js: 1.0.2
- dev: true
-
/css-what@6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
@@ -6657,13 +6446,6 @@ packages:
hasBin: true
dev: true
- /csso@5.0.5:
- resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
- engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
- dependencies:
- css-tree: 2.2.1
- dev: true
-
/cssstyle@3.0.0:
resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
engines: {node: '>=14'}
@@ -6976,14 +6758,6 @@ packages:
entities: 2.2.0
dev: true
- /dom-serializer@2.0.0:
- resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
- dependencies:
- domelementtype: 2.3.0
- domhandler: 5.0.3
- entities: 4.5.0
- dev: true
-
/domain-browser@4.23.0:
resolution: {integrity: sha512-ArzcM/II1wCCujdCNyQjXrAFwS4mrLh4C7DZWlaI8mdh7h3BfKdNd3bKXITfl2PT9FtfQqaGvhi1vPRQPimjGA==}
engines: {node: '>=10'}
@@ -7000,13 +6774,6 @@ packages:
domelementtype: 2.3.0
dev: true
- /domhandler@5.0.3:
- resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
- engines: {node: '>= 4'}
- dependencies:
- domelementtype: 2.3.0
- dev: true
-
/domutils@2.8.0:
resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
dependencies:
@@ -7015,14 +6782,6 @@ packages:
domhandler: 4.3.1
dev: true
- /domutils@3.1.0:
- resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
- dependencies:
- dom-serializer: 2.0.0
- domelementtype: 2.3.0
- domhandler: 5.0.3
- dev: true
-
/dot-case@3.0.4:
resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
dependencies:
@@ -9770,14 +9529,6 @@ packages:
resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==}
dev: true
- /mdn-data@2.0.28:
- resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
- dev: true
-
- /mdn-data@2.0.30:
- resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
- dev: true
-
/media-typer@0.3.0:
resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
engines: {node: '>= 0.6'}
@@ -11782,13 +11533,6 @@ packages:
is-fullwidth-code-point: 5.0.0
dev: true
- /snake-case@3.0.4:
- resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
- dependencies:
- dot-case: 3.0.4
- tslib: 2.6.2
- dev: true
-
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@@ -12123,24 +11867,6 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
- /svg-parser@2.0.4:
- resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
- dev: true
-
- /svgo@3.1.0:
- resolution: {integrity: sha512-R5SnNA89w1dYgNv570591F66v34b3eQShpIBcQtZtM5trJwm1VvxbIoMpRYY3ybTAutcKTLEmTsdnaknOHbiQA==}
- engines: {node: '>=14.0.0'}
- hasBin: true
- dependencies:
- '@trysound/sax': 0.2.0
- commander: 7.2.0
- css-select: 5.1.0
- css-tree: 2.3.1
- css-what: 6.1.0
- csso: 5.0.5
- picocolors: 1.0.0
- dev: true
-
/swc-loader@0.2.3(@swc/core@1.3.100)(webpack@5.89.0):
resolution: {integrity: sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==}
peerDependencies:
diff --git a/public/icons/close.svg b/public/icons/close.svg
deleted file mode 100644
index 1dbf79d..0000000
--- a/public/icons/close.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/src/components/LoginBottomSheet/index.tsx b/src/components/LoginBottomSheet/index.tsx
index 74ed534..2a98e45 100644
--- a/src/components/LoginBottomSheet/index.tsx
+++ b/src/components/LoginBottomSheet/index.tsx
@@ -1,43 +1,50 @@
+import Image from 'next/image';
import styled from '@emotion/styled';
-import { BottomSheet, type BottomSheetProps as LoginBottomSheetProps } from '../common/BottomSheet';
-import { Icon } from '../common/Icon';
-import { Text } from '../common/Text';
+import {
+ BottomSheet,
+ type BottomSheetProps as LoginBottomSheetProps,
+ Stack,
+ Text,
+} from '../common';
+import { CloseIcon } from '../common/Icons';
const LoginBottomSheet = ({ isShowing, onClickOutside }: LoginBottomSheetProps) => {
return (
-
-
+
+
로그인
-
+
-
+
-
구글 로그인
-
카카오 로그인
-
+
);
};
@@ -48,7 +55,7 @@ const StyledLoginBottomSheetHeader = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
- padding: 12px 0px;
+ padding: 8px 16px;
margin-bottom: 60px;
width: 100%;
`;
@@ -64,6 +71,7 @@ const StyledGoogleLoginButton = styled.div`
padding: 12px;
color: ${({ theme }) => theme.colors.gray900};
background-color: ${({ theme }) => theme.colors.white};
+ cursor: pointer;
`;
const StyledKakaoLoginButton = styled.div`
@@ -77,4 +85,5 @@ const StyledKakaoLoginButton = styled.div`
padding: 12px;
color: ${({ theme }) => theme.colors.gray900};
background-color: ${({ theme }) => theme.colors.yellow};
+ cursor: pointer;
`;
diff --git a/src/components/common/Flex/index.tsx b/src/components/common/Flex/index.tsx
index 8bbe880..969d227 100644
--- a/src/components/common/Flex/index.tsx
+++ b/src/components/common/Flex/index.tsx
@@ -43,4 +43,4 @@ const StyledFlex = styled.div`
flex-basis: ${({ basis }) => basis && basis};
flex-grow: ${({ grow }) => grow && grow};
flex-shrink: ${({ shrink }) => shrink && shrink};
-`;
\ No newline at end of file
+`;
diff --git a/src/components/common/Icon/Icon.stories.tsx b/src/components/common/Icon/Icon.stories.tsx
deleted file mode 100644
index e263788..0000000
--- a/src/components/common/Icon/Icon.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { colors } from '@/styles';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Icon as IconComponent, ICON_TYPES } from '.';
-
-type Icon = typeof IconComponent;
-
-const meta: Meta = {
- argTypes: {
- type: {
- control: 'select',
- options: [...Object.keys(ICON_TYPES)],
- },
- color: {
- control: 'select',
- options: [...Object.keys(colors)],
- },
- },
- component: IconComponent,
- title: 'Components/Icon',
-};
-
-export default meta;
-
-export const Default: StoryObj = {
- args: {
- color: 'white',
- size: 24,
- type: 'close',
- },
- render: args => ,
-};
diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
deleted file mode 100644
index cb1f6d7..0000000
--- a/src/components/common/Icon/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { type ForwardedRef, forwardRef, type SVGAttributes } from 'react';
-import { Close, Google, Kakao } from '@/constants/icons';
-import { type ColorKeys } from '@/styles';
-import styled from '@emotion/styled';
-
-export type IconType = keyof typeof ICON_TYPES;
-export type IconProps = {
- size?: number;
- color?: ColorKeys;
- type: IconType;
-} & SVGAttributes;
-
-export const ICON_TYPES = {
- google: Google,
- kakao: Kakao,
- close: Close,
-} as const;
-
-export const Icon = forwardRef(function Icon(
- { type, size = 24, color = 'white', style, ...props }: IconProps,
- ref: ForwardedRef
-) {
- const IconSvg = ICON_TYPES[type];
-
- return (
-
-
-
- );
-});
-
-const StyledIcon = styled.i<{ color: ColorKeys }>`
- display: flex;
- color: ${({ theme, color }) => theme.colors[color]};
-`;
diff --git a/src/components/common/Icons/Add.tsx b/src/components/common/Icons/Add.tsx
new file mode 100644
index 0000000..80ead12
--- /dev/null
+++ b/src/components/common/Icons/Add.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+
+export const AddIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/ArrowBack.tsx b/src/components/common/Icons/ArrowBack.tsx
new file mode 100644
index 0000000..8374e9d
--- /dev/null
+++ b/src/components/common/Icons/ArrowBack.tsx
@@ -0,0 +1,12 @@
+import { type SVGProps } from 'react';
+
+export const ArrowBackIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/Camera.tsx b/src/components/common/Icons/Camera.tsx
new file mode 100644
index 0000000..5dca896
--- /dev/null
+++ b/src/components/common/Icons/Camera.tsx
@@ -0,0 +1,12 @@
+import { type SVGProps } from 'react';
+
+export const CameraIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/Check.tsx b/src/components/common/Icons/Check.tsx
new file mode 100644
index 0000000..a6a3d8c
--- /dev/null
+++ b/src/components/common/Icons/Check.tsx
@@ -0,0 +1,12 @@
+import { type SVGProps } from 'react';
+
+export const CheckIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/Close.tsx b/src/components/common/Icons/Close.tsx
new file mode 100644
index 0000000..058a498
--- /dev/null
+++ b/src/components/common/Icons/Close.tsx
@@ -0,0 +1,12 @@
+import { type SVGProps } from 'react';
+
+export const CloseIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/Icons.stories.tsx b/src/components/common/Icons/Icons.stories.tsx
new file mode 100644
index 0000000..001c018
--- /dev/null
+++ b/src/components/common/Icons/Icons.stories.tsx
@@ -0,0 +1,76 @@
+import { type SVGProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddIcon, ArrowBackIcon, CameraIcon, CheckIcon, CloseIcon, MenuIcon, PeopleIcon } from '.';
+
+type Icon = SVGProps;
+
+const meta: Meta = {
+ argTypes: {
+ width: {
+ control: 'number',
+ },
+ height: {
+ control: 'number',
+ },
+ },
+ title: 'Components/Icons',
+};
+
+export default meta;
+
+export const Add: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const ArrowBack: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const Camera: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const Check: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const Close: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const Menu: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
+
+export const People: StoryObj = {
+ args: {
+ width: 24,
+ height: 24,
+ },
+ render: args => ,
+};
diff --git a/src/components/common/Icons/Menu.tsx b/src/components/common/Icons/Menu.tsx
new file mode 100644
index 0000000..c8bfcf6
--- /dev/null
+++ b/src/components/common/Icons/Menu.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+
+export const MenuIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/People.tsx b/src/components/common/Icons/People.tsx
new file mode 100644
index 0000000..82de1f4
--- /dev/null
+++ b/src/components/common/Icons/People.tsx
@@ -0,0 +1,12 @@
+import { type SVGProps } from 'react';
+
+export const PeopleIcon = (props: SVGProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/Icons/index.ts b/src/components/common/Icons/index.ts
new file mode 100644
index 0000000..4bfbf7a
--- /dev/null
+++ b/src/components/common/Icons/index.ts
@@ -0,0 +1,7 @@
+export * from './Add';
+export * from './ArrowBack';
+export * from './Camera';
+export * from './Check';
+export * from './Close';
+export * from './Menu';
+export * from './People';
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 1828b93..aee042a 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,2 +1,7 @@
+export * from './BottomSheet';
export * from './Button';
+export * from './Flex';
+export * from './Input';
export * from './Portal';
+export * from './Stack';
+export * from './Text';
diff --git a/src/constants/icons.ts b/src/constants/icons.ts
deleted file mode 100644
index adee102..0000000
--- a/src/constants/icons.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { ReactComponent as Close } from 'public/icons/close.svg';
-export { ReactComponent as Google } from 'public/icons/google.svg';
-export { ReactComponent as Kakao } from 'public/icons/kakao.svg';