From 982d35158c912f6c102301511f900be54a0df1a7 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 20:24:48 +0900 Subject: [PATCH 01/39] chore: install dependency svgr --- package-lock.json | 371 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 8 +- src/vite-env.d.ts | 1 + svg.d.ts | 4 + tsconfig.json | 5 +- vite.config.ts | 3 +- 6 files changed, 381 insertions(+), 11 deletions(-) create mode 100644 svg.d.ts diff --git a/package-lock.json b/package-lock.json index a5c7824..e713ead 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,17 +9,18 @@ "version": "0.0.0", "dependencies": { "@emotion/babel-plugin": "^11.12.0", + "@emotion/css": "^11.13.0", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.56.2", "csstype": "^3.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "zustand": "^4.5.5" }, "devDependencies": { "@chromatic-com/storybook": "^2.0.2", - "@emotion/css": "^11.13.0", "@eslint/js": "^9.9.0", "@storybook/addon-essentials": "^8.3.0", "@storybook/addon-interactions": "^8.3.0", @@ -47,7 +48,8 @@ "storybook": "^8.3.0", "typescript": "5.5", "typescript-eslint": "^8.0.1", - "vite": "^5.4.1" + "vite": "^5.4.1", + "vite-plugin-svgr": "^4.2.0" } }, "node_modules/@adobe/css-tools": { @@ -488,7 +490,6 @@ "version": "11.13.0", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.13.0.tgz", "integrity": "sha512-BUk99ylT+YHl+W/HN7nv1RCTkDYmKKqa1qbvM/qLSQEg61gipuBF5Hptk/2/ERmX2DCv0ccuFGhz9i0KSZOqPg==", - "dev": true, "dependencies": { "@emotion/babel-plugin": "^11.12.0", "@emotion/cache": "^11.13.0", @@ -1437,6 +1438,14 @@ "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -2333,6 +2342,245 @@ "storybook": "^8.3.0" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "engines": { + "node": ">=14" + }, + "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": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "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": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@tanstack/query-core": { "version": "5.56.2", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz", @@ -2754,7 +3002,7 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "devOptional": true }, "node_modules/@types/qs": { "version": "6.9.16", @@ -2772,7 +3020,7 @@ "version": "18.3.5", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -3509,6 +3757,18 @@ "node": ">=6" } }, + "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/caniuse-lite": { "version": "1.0.30001660", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz", @@ -3971,6 +4231,16 @@ "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -3998,6 +4268,18 @@ "node": ">= 0.8" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/environment": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz", @@ -5892,6 +6174,15 @@ "get-func-name": "^2.0.1" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -6263,6 +6554,16 @@ "node": ">= 0.6" } }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-releases": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", @@ -6931,6 +7232,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/recast": { "version": "0.23.9", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz", @@ -7391,6 +7722,16 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -7591,6 +7932,12 @@ "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/telejson": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz", @@ -8068,6 +8415,20 @@ } } }, + "node_modules/vite-plugin-svgr": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz", + "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.5", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": "^2.6.0 || 3 || 4 || 5" + } + }, "node_modules/webpack-virtual-modules": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", diff --git a/package.json b/package.json index b48b6c0..e87d6fd 100644 --- a/package.json +++ b/package.json @@ -19,18 +19,19 @@ "lint-staged": { "**/*.{tsx,ts,jsx,js}": [ "eslint --fix --cache", - "prettier --write --cache" + "prettier --write --cache" ] }, "dependencies": { "@emotion/babel-plugin": "^11.12.0", + "@emotion/css": "^11.13.0", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", - "@emotion/css": "^11.13.0", "@tanstack/react-query": "^5.56.2", "csstype": "^3.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "zustand": "^4.5.5" }, "devDependencies": { @@ -62,7 +63,8 @@ "storybook": "^8.3.0", "typescript": "5.5", "typescript-eslint": "^8.0.1", - "vite": "^5.4.1" + "vite": "^5.4.1", + "vite-plugin-svgr": "^4.2.0" }, "eslintConfig": { "extends": [ diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..b1f45c7 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,2 @@ /// +/// diff --git a/svg.d.ts b/svg.d.ts new file mode 100644 index 0000000..5d874a6 --- /dev/null +++ b/svg.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: React.FC>; + export default content; +} diff --git a/tsconfig.json b/tsconfig.json index 0d59e98..36b5e24 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, - + "types": ["vite-plugin-svgr/client"], /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, @@ -41,6 +41,7 @@ "include": [ "src", "vite.config.ts", - ".storybook" + ".storybook", + "svg.d.ts" ] } diff --git a/vite.config.ts b/vite.config.ts index f445b6c..4394f4d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,11 @@ import { defineConfig } from 'vite'; import { resolve } from 'path'; import react from '@vitejs/plugin-react'; +import svgr from 'vite-plugin-svgr'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react({ jsxImportSource: '@emotion/react' })], + plugins: [react({ jsxImportSource: '@emotion/react' }), svgr()], resolve: { alias: [ { find: '@', replacement: resolve(__dirname, 'src') }, From 8b3bc0f9807c59ce483217b23a014e6e69e74337 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 20:28:24 +0900 Subject: [PATCH 02/39] feat: add routing to createBrowserRouter --- src/App.tsx | 9 ++++++++- src/main.tsx | 10 +++------- src/routes/path.ts | 4 ++++ src/routes/router.tsx | 12 ++++++++++++ 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f85be72..5e37160 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,12 @@ +import AppProviders from '@components/providers'; +import { Outlet } from 'react-router-dom'; + function App() { - return

helloWorld!

; + return ( + + + + ); } export default App; diff --git a/src/main.tsx b/src/main.tsx index 796f90e..65bb32c 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,5 @@ import { createRoot } from 'react-dom/client'; -import App from './App.tsx'; -import AppProviders from '@components/providers/index.tsx'; +import { RouterProvider } from 'react-router-dom'; +import { router } from './routes/router.tsx'; -createRoot(document.getElementById('root')!).render( - - - , -); +createRoot(document.getElementById('root')!).render(); diff --git a/src/routes/path.ts b/src/routes/path.ts index e69de29..98ae80f 100644 --- a/src/routes/path.ts +++ b/src/routes/path.ts @@ -0,0 +1,4 @@ +export const ROUTE_PATH = { + HOME: '/', + SIGN_IN: '/sign-in', +}; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index e69de29..6bc74ec 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -0,0 +1,12 @@ +import { createBrowserRouter } from 'react-router-dom'; +import { ROUTE_PATH } from './path'; +import App from '@/App'; +import SignIn from '@/pages/auth/SignIn'; + +export const router = createBrowserRouter([ + { + path: ROUTE_PATH.HOME, + element: , + children: [{ path: ROUTE_PATH.SIGN_IN, element: }], + }, +]); From f331e3f273616ababa33f69593dc0c09ceb0b61d Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 20:28:59 +0900 Subject: [PATCH 03/39] feat: add InnerContainer component --- .../common/InnerContainer/index.stories.tsx | 37 +++++++++++++++++++ .../common/InnerContainer/index.tsx | 20 ++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/components/common/InnerContainer/index.stories.tsx create mode 100644 src/components/common/InnerContainer/index.tsx diff --git a/src/components/common/InnerContainer/index.stories.tsx b/src/components/common/InnerContainer/index.stories.tsx new file mode 100644 index 0000000..4a251c9 --- /dev/null +++ b/src/components/common/InnerContainer/index.stories.tsx @@ -0,0 +1,37 @@ +import { Meta, StoryObj } from '@storybook/react'; +import InnerContainer from '.'; +import Flex from '../Flex'; + +const meta: Meta = { + title: 'common/InnerContainer', + component: InnerContainer, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + maxWidth: '1000px', + }, + render: (args) => ( + + +
Box 1
+
Box 2
+
Box 3
+ + + ), +}; + +const boxStyle = { + width: '100px', + height: '100px', + backgroundColor: 'lightblue', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; diff --git a/src/components/common/InnerContainer/index.tsx b/src/components/common/InnerContainer/index.tsx new file mode 100644 index 0000000..4700c20 --- /dev/null +++ b/src/components/common/InnerContainer/index.tsx @@ -0,0 +1,20 @@ +import styled from '@emotion/styled'; +import { HTMLAttributes, ReactNode } from 'react'; + +type Props = { + maxWidth: string; + children: ReactNode; +} & HTMLAttributes; + +export default function InnerContainer({ maxWidth, children, ...rest }: Props) { + return ( + + {children} + + ); +} + +const Container = styled.div<{ maxWidth: string }>` + max-width: ${({ maxWidth }) => maxWidth}; + margin: 0 auto; +`; From f1d87abf1fe3bb07bd7b1beb34f4bc4e83048113 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 20:30:53 +0900 Subject: [PATCH 04/39] refactor: add barrel export pattern for common components --- src/components/common/Modal/index.tsx | 6 ++++-- src/components/common/index.ts | 6 ++++++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 src/components/common/index.ts diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx index cdee1b1..8b1a9a6 100644 --- a/src/components/common/Modal/index.tsx +++ b/src/components/common/Modal/index.tsx @@ -7,7 +7,7 @@ export type Props = { borderRadius?: string; } & React.HTMLAttributes; -export const Modal = ({ textChildren, buttonChildren, borderRadius = '12px', ...props }: Props) => { +const Modal = ({ textChildren, buttonChildren, borderRadius = '12px', ...props }: Props) => { return ( @@ -24,7 +24,7 @@ const Card = styled.div<{ borderRadius: string }>` display: flex; justify-content: center; align-items: center; - backgroundcolor: #fff; + background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); `; @@ -51,3 +51,5 @@ const ButtonWrapper = styled.div` justify-content: center; align-items: center; `; + +export default Modal; diff --git a/src/components/common/index.ts b/src/components/common/index.ts new file mode 100644 index 0000000..9fe4381 --- /dev/null +++ b/src/components/common/index.ts @@ -0,0 +1,6 @@ +export { default as Button } from './Button'; +export { default as Card } from './Card'; +export { default as Flex } from './Flex'; +export { default as InnerContainer } from './InnerContainer'; +export { default as Input } from './Input'; +export { default as Modal } from './Modal'; From 3646737db348397dc3fca4b630db8ac3cd067d54 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 21:03:28 +0900 Subject: [PATCH 05/39] feat: add Typo component --- src/assets/styles/emotion.d.ts | 5 ++- src/assets/styles/global/palettes.ts | 6 ++- src/components/common/Typo/index.stories.tsx | 42 ++++++++++++++++++++ src/components/common/Typo/index.tsx | 19 +++++++++ src/components/common/index.ts | 1 + 5 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 src/components/common/Typo/index.stories.tsx create mode 100644 src/components/common/Typo/index.tsx diff --git a/src/assets/styles/emotion.d.ts b/src/assets/styles/emotion.d.ts index 0685ded..ae2038f 100644 --- a/src/assets/styles/emotion.d.ts +++ b/src/assets/styles/emotion.d.ts @@ -1,8 +1,9 @@ +// styles/emotion.d.ts import '@emotion/react'; -import { PalettesTypes } from './global/palettes'; +import { palettes } from './global/palettes'; declare module '@emotion/react' { export interface Theme { - palettes: PalettesTypes; + palettes: typeof palettes; } } diff --git a/src/assets/styles/global/palettes.ts b/src/assets/styles/global/palettes.ts index f001c5e..53ee398 100644 --- a/src/assets/styles/global/palettes.ts +++ b/src/assets/styles/global/palettes.ts @@ -1,6 +1,8 @@ export const palettes = { white: '#fff', + black: '#000', + gray: '#5E6670', borderGray: '#e4e5e8', -}; +} as const; -export type PalettesTypes = typeof palettes; +export type PalettesTypes = keyof typeof palettes; diff --git a/src/components/common/Typo/index.stories.tsx b/src/components/common/Typo/index.stories.tsx new file mode 100644 index 0000000..8a0888e --- /dev/null +++ b/src/components/common/Typo/index.stories.tsx @@ -0,0 +1,42 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Typo from '.'; +import { PalettesTypes } from '@assets/styles/global/palettes'; +import { ThemeProvider } from '@emotion/react'; +import theme from '@/assets/styles/theme'; + +const meta: Meta = { + title: 'common/Typo', + component: Typo, + tags: ['autodocs'], + decorators: [ + (Story) => { + return ( + + + + ); + }, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Gray: Story = { + args: { + element: 'h1', + size: '24px', + color: 'gray' as PalettesTypes, + children: 'Hello World!', + }, +}; + +export const Black: Story = { + args: { + element: 'span', + size: '16px', + color: 'black' as PalettesTypes, + children: 'Hello World!', + }, +}; diff --git a/src/components/common/Typo/index.tsx b/src/components/common/Typo/index.tsx new file mode 100644 index 0000000..7be67dc --- /dev/null +++ b/src/components/common/Typo/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { useTheme } from '@emotion/react'; +import { PalettesTypes } from '@/assets/styles/global/palettes'; + +type Props = { + element?: keyof JSX.IntrinsicElements; + size?: string; + color?: PalettesTypes; + style?: React.CSSProperties; + children: React.ReactNode; +}; + +export default function Typo({ element = 'div', size, color, children, style }: Props) { + const theme = useTheme(); + const Component = element; + const textColor = color ? theme.palettes[color] : 'black'; + + return {children}; +} diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 9fe4381..1fa37e2 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -4,3 +4,4 @@ export { default as Flex } from './Flex'; export { default as InnerContainer } from './InnerContainer'; export { default as Input } from './Input'; export { default as Modal } from './Modal'; +export { default as Typo } from './Typo'; From 0e435db70e7d1c4b4ee0cce6b713c8357e28f6d6 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 30 Sep 2024 21:10:06 +0900 Subject: [PATCH 06/39] feat: add SignIn page --- src/assets/icons/icon-google.svg | 13 ++ src/assets/images/signin-Illustration.svg | 252 ++++++++++++++++++++++ src/components/common/Flex/index.tsx | 4 +- src/pages/auth/SignIn/index.tsx | 40 ++++ 4 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/icon-google.svg create mode 100644 src/assets/images/signin-Illustration.svg create mode 100644 src/pages/auth/SignIn/index.tsx diff --git a/src/assets/icons/icon-google.svg b/src/assets/icons/icon-google.svg new file mode 100644 index 0000000..51fcfd2 --- /dev/null +++ b/src/assets/icons/icon-google.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/images/signin-Illustration.svg b/src/assets/images/signin-Illustration.svg new file mode 100644 index 0000000..b257b75 --- /dev/null +++ b/src/assets/images/signin-Illustration.svg @@ -0,0 +1,252 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/Flex/index.tsx b/src/components/common/Flex/index.tsx index bba89d1..c0d017a 100644 --- a/src/components/common/Flex/index.tsx +++ b/src/components/common/Flex/index.tsx @@ -3,8 +3,8 @@ import type * as CSS from 'csstype'; import { HTMLAttributes } from 'react'; type FlexGap = { - x: string; - y: string; + x?: string; + y?: string; }; interface FlexProps { diff --git a/src/pages/auth/SignIn/index.tsx b/src/pages/auth/SignIn/index.tsx new file mode 100644 index 0000000..866c88c --- /dev/null +++ b/src/pages/auth/SignIn/index.tsx @@ -0,0 +1,40 @@ +import { InnerContainer, Flex, Typo, Button } from '@components/common'; +import Footer from '@features/layout/footer'; +import Header from '@features/layout/Header'; + +import GoogleIcon from '@assets/icons/icon-google.svg?react'; +import Illustration from '@assets/images/signin-Illustration.svg?react'; + +export default function SignIn() { + return ( + <> +
+
+ + +
+
+ + 지금 바로 시작하세요. 🚀 + + + 안정적이고 투명한 고용 관계의 시작, 지금 바로 경험해보세요! + +
+ +
+ + + +
+