From 1bc049bdf62b4b7022b0fd24349a64367453d3ad Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 2 Jul 2024 10:48:13 +0900 Subject: [PATCH] Chore: Setting eslint and etc css --- .eslintrc.js | 34 ++++++++++++++++++++ .eslintrc.json | 6 ---- package-lock.json | 81 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 10 ++++-- src/App.css | 64 +++++++++++++++++++++++++++++++++---- 5 files changed, 180 insertions(+), 15 deletions(-) create mode 100644 .eslintrc.js delete mode 100644 .eslintrc.json diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c722049 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,34 @@ +module.exports = { + parser: '@typescript-eslint/parser', + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + 'plugin:storybook/recommended', + ], + plugins: ['react', '@typescript-eslint', 'prettier', 'storybook'], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + react: { + version: 'detect', + }, + }, + rules: { + 'prettier/prettier': 'error', + 'react/prop-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + }, + overrides: [ + { + files: ['*.stories.@(ts|tsx|js|jsx|mdx)'], + rules: {}, + }, + ], +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 0c58165..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": [ - "plugin:storybook/recommended", - "plugin:storybook/recommended" - ] -} diff --git a/package-lock.json b/package-lock.json index 536ef2c..2b924ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,6 @@ "@types/react-dom": "^18.3.0", "axios": "^1.7.2", "eslint": "^8.57.0", - "eslint-plugin-react": "^7.34.3", "prettier": "^3.3.2", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -38,7 +37,11 @@ "@storybook/react": "^8.1.10", "@storybook/react-webpack5": "^8.1.10", "@storybook/test": "^8.1.10", + "@typescript-eslint/parser": "^5.62.0", "chromatic": "^11.5.4", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.34.3", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-storybook": "^0.8.0", "prop-types": "^15.8.1", "storybook": "^8.1.10", @@ -4398,6 +4401,18 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz", @@ -14993,6 +15008,36 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, + "node_modules/eslint-plugin-prettier": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" + }, + "peerDependencies": { + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" + }, + "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/eslint-plugin-react": { "version": "7.34.3", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.3.tgz", @@ -15564,6 +15609,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "dev": true + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -22931,6 +22982,18 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -25521,6 +25584,22 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index bc6114c..0a27cb9 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "@types/react-dom": "^18.3.0", "axios": "^1.7.2", "eslint": "^8.57.0", - "eslint-plugin-react": "^7.34.3", "prettier": "^3.3.2", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -29,7 +28,10 @@ "eject": "react-scripts eject", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "chromatic": "chromatic" + "chromatic": "chromatic", + "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", + "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix", + "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'" }, "eslintConfig": { "extends": [ @@ -60,7 +62,11 @@ "@storybook/react": "^8.1.10", "@storybook/react-webpack5": "^8.1.10", "@storybook/test": "^8.1.10", + "@typescript-eslint/parser": "^5.62.0", "chromatic": "^11.5.4", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.34.3", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-storybook": "^0.8.0", "prop-types": "^15.8.1", "storybook": "^8.1.10", diff --git a/src/App.css b/src/App.css index a04f6df..6eefcc6 100644 --- a/src/App.css +++ b/src/App.css @@ -44,7 +44,8 @@ html, /* 3 */ tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; /* 4 */ font-feature-settings: normal; /* 5 */ @@ -87,7 +88,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr:where([title]) { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -133,7 +134,7 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */ font-feature-settings: normal; /* 2 */ @@ -389,7 +390,7 @@ Set the default cursor for buttons. */ button, -[role="button"] { +[role='button'] { cursor: pointer; } @@ -437,7 +438,9 @@ video { display: none; } -*, ::before, ::after { +*, +::before, +::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -577,6 +580,10 @@ video { height: 100%; } +.h-12 { + height: 3rem; +} + .w-2 { width: 0.5rem; } @@ -585,8 +592,17 @@ video { width: 100%; } +.w-32 { + width: 8rem; +} + +.w-96 { + width: 24rem; +} + @keyframes ping { - 75%, 100% { + 75%, + 100% { transform: scale(2); opacity: 0; } @@ -622,6 +638,14 @@ video { border-width: 0px; } +.border { + border-width: 1px; +} + +.border-solid { + border-style: solid; +} + .border-none { border-style: none; } @@ -636,6 +660,11 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.border-\[\#E3E5E5\] { + --tw-border-opacity: 1; + border-color: rgb(227 229 229 / var(--tw-border-opacity)); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -651,19 +680,37 @@ video { background-color: rgb(227 229 229 / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .p-4 { padding: 1rem; } +.pl-4 { + padding-left: 1rem; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .font-bold { font-weight: 700; } +.font-normal { + font-weight: 400; +} + .text-red-300 { --tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity)); @@ -672,3 +719,8 @@ video { .delay-150 { transition-delay: 150ms; } + +.placeholder\:text-\[\#72777A\]::placeholder { + --tw-text-opacity: 1; + color: rgb(114 119 122 / var(--tw-text-opacity)); +}