From fcf05b1b5b6a47a1cb345752262291a36dc3ffd4 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sat, 28 May 2022 16:06:33 +0900 Subject: [PATCH 01/26] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EA=B4=84=ED=98=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 6 ++-- src/pages/CardListPage.jsx | 59 +++++++++++++++++--------------------- 2 files changed, 30 insertions(+), 35 deletions(-) diff --git a/src/index.css b/src/index.css index ec2585e8c0..4a1df4db71 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/pages/CardListPage.jsx b/src/pages/CardListPage.jsx index c6c28a4fc1..6581a6a460 100644 --- a/src/pages/CardListPage.jsx +++ b/src/pages/CardListPage.jsx @@ -16,42 +16,37 @@ export const CardListPage = () => { const cards = useContext(CardContext); return ( - <> - {cards.list && ( - <> - 보유카드 - - {cards.list.map((_, i) => ( - - ))} + cards.list && ( + <> + 보유카드 + + {cards.list.map((_, i) => ( - - - )} - + ))} + + + + ) ); }; From 87e26fe286e470dce995c42033790e1cb66120f3 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 17:53:43 +0900 Subject: [PATCH 02/26] =?UTF-8?q?chore:=20type=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 109 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 +++ 2 files changed, 114 insertions(+) diff --git a/package-lock.json b/package-lock.json index c9c9595850..7a3d7bbcba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10646,6 +10646,12 @@ "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -10661,6 +10667,34 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "@types/react": { + "version": "18.0.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz", + "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true + } + } + }, + "@types/react-dom": { + "version": "18.0.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz", + "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -10674,6 +10708,12 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -24163,6 +24203,69 @@ "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", "dev": true }, + "ts-loader": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.0.tgz", + "integrity": "sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "ts-pnp": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz", @@ -24262,6 +24365,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz", + "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==", + "dev": true + }, "uglify-js": { "version": "3.15.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.4.tgz", diff --git a/package.json b/package.json index d6f9e6b1f6..bcf454169b 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,14 @@ "@storybook/preset-create-react-app": "^4.1.0", "@storybook/react": "^6.5.0-beta.1", "@storybook/testing-library": "^0.0.11", + "@types/react": "^18.0.9", + "@types/react-dom": "^18.0.5", "chromatic": "^6.5.4", "eslint": "^8.14.0", "eslint-plugin-react": "^7.29.4", + "source-map-loader": "^3.0.1", + "ts-loader": "^9.3.0", + "typescript": "^4.7.2", "webpack": "^5.72.0" }, "eslintConfig": { From 5e73badb53d7fd7e12dc033d2820df2e6130f766 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 18:24:12 +0900 Subject: [PATCH 03/26] =?UTF-8?q?chore:=20jsconfig=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?tsconfig=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jsconfig.json | 6 ------ tsconfig.json | 10 ++++++++++ 2 files changed, 10 insertions(+), 6 deletions(-) delete mode 100644 jsconfig.json create mode 100644 tsconfig.json diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 5875dc5b65..0000000000 --- a/jsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "src" - }, - "include": ["src"] -} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000000..3fbe2e912e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "module": "es6", + "moduleResolution": "node", + "esModuleInterop": true, + "sourceMap": true, + "baseUrl": "src" + }, + "include": ["src"] +} From 26b75a52ef11f6e9d7d82419edd500c90f7f4fd1 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 20:01:14 +0900 Subject: [PATCH 04/26] =?UTF-8?q?chore:=20typescript=20eslint=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 7 +- package-lock.json | 217 +++++++++++++++++++++++++++++++++++++++++----- package.json | 2 + 3 files changed, 202 insertions(+), 24 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 9bfb5c260c..105791549a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,7 +3,12 @@ "browser": true, "es2021": true }, - "extends": ["eslint:recommended", "plugin:react/recommended"], + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true diff --git a/package-lock.json b/package-lock.json index 7a3d7bbcba..a1203cdd81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10853,19 +10853,85 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==" }, "@typescript-eslint/eslint-plugin": { - "version": "5.21.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.21.0.tgz", - "integrity": "sha512-fTU85q8v5ZLpoZEyn/u1S2qrFOhi33Edo2CZ0+q1gDaWWm0JuPh3bgOyU8lM0edIEYgKLDkPFiZX2MOupgjlyg==", - "requires": { - "@typescript-eslint/scope-manager": "5.21.0", - "@typescript-eslint/type-utils": "5.21.0", - "@typescript-eslint/utils": "5.21.0", - "debug": "^4.3.2", + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz", + "integrity": "sha512-oGCmo0PqnRZZndr+KwvvAUvD3kNE4AfyoGCwOZpoCncSh4MVD06JTE8XQa2u9u+NX5CsyZMBTEc2C72zx38eYA==", + "requires": { + "@typescript-eslint/scope-manager": "5.26.0", + "@typescript-eslint/type-utils": "5.26.0", + "@typescript-eslint/utils": "5.26.0", + "debug": "^4.3.4", "functional-red-black-tree": "^1.0.1", - "ignore": "^5.1.8", + "ignore": "^5.2.0", "regexpp": "^3.2.0", - "semver": "^7.3.5", + "semver": "^7.3.7", "tsutils": "^3.21.0" + }, + "dependencies": { + "@typescript-eslint/scope-manager": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.26.0.tgz", + "integrity": "sha512-gVzTJUESuTwiju/7NiTb4c5oqod8xt5GhMbExKsCTp6adU3mya6AGJ4Pl9xC7x2DX9UYFsjImC0mA62BCY22Iw==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0" + } + }, + "@typescript-eslint/types": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.26.0.tgz", + "integrity": "sha512-8794JZFE1RN4XaExLWLI2oSXsVImNkl79PzTOOWt9h0UHROwJedNOD2IJyfL0NbddFllcktGIO2aOu10avQQyA==" + }, + "@typescript-eslint/typescript-estree": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.26.0.tgz", + "integrity": "sha512-EyGpw6eQDsfD6jIqmXP3rU5oHScZ51tL/cZgFbFBvWuCwrIptl+oueUZzSmLtxFuSOQ9vDcJIs+279gnJkfd1w==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + } + }, + "@typescript-eslint/utils": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.26.0.tgz", + "integrity": "sha512-PJFwcTq2Pt4AMOKfe3zQOdez6InIDOjUJJD3v3LyEtxHGVVRK3Vo7Dd923t/4M9hSH2q2CLvcTdxlLPjcIk3eg==", + "requires": { + "@types/json-schema": "^7.0.9", + "@typescript-eslint/scope-manager": "5.26.0", + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/typescript-estree": "5.26.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.26.0.tgz", + "integrity": "sha512-wei+ffqHanYDOQgg/fS6Hcar6wAWv0CUPQ3TZzOWd2BLfgP539rb49bwua8WRAs7R6kOSLn82rfEu2ro6Llt8Q==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "eslint-visitor-keys": "^3.3.0" + } + }, + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==" + } } }, "@typescript-eslint/experimental-utils": { @@ -10877,14 +10943,53 @@ } }, "@typescript-eslint/parser": { - "version": "5.21.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.21.0.tgz", - "integrity": "sha512-8RUwTO77hstXUr3pZoWZbRQUxXcSXafZ8/5gpnQCfXvgmP9gpNlRGlWzvfbEQ14TLjmtU8eGnONkff8U2ui2Eg==", - "requires": { - "@typescript-eslint/scope-manager": "5.21.0", - "@typescript-eslint/types": "5.21.0", - "@typescript-eslint/typescript-estree": "5.21.0", - "debug": "^4.3.2" + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.26.0.tgz", + "integrity": "sha512-n/IzU87ttzIdnAH5vQ4BBDnLPly7rC5VnjN3m0xBG82HK6rhRxnCb3w/GyWbNDghPd+NktJqB/wl6+YkzZ5T5Q==", + "requires": { + "@typescript-eslint/scope-manager": "5.26.0", + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/typescript-estree": "5.26.0", + "debug": "^4.3.4" + }, + "dependencies": { + "@typescript-eslint/scope-manager": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.26.0.tgz", + "integrity": "sha512-gVzTJUESuTwiju/7NiTb4c5oqod8xt5GhMbExKsCTp6adU3mya6AGJ4Pl9xC7x2DX9UYFsjImC0mA62BCY22Iw==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0" + } + }, + "@typescript-eslint/types": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.26.0.tgz", + "integrity": "sha512-8794JZFE1RN4XaExLWLI2oSXsVImNkl79PzTOOWt9h0UHROwJedNOD2IJyfL0NbddFllcktGIO2aOu10avQQyA==" + }, + "@typescript-eslint/typescript-estree": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.26.0.tgz", + "integrity": "sha512-EyGpw6eQDsfD6jIqmXP3rU5oHScZ51tL/cZgFbFBvWuCwrIptl+oueUZzSmLtxFuSOQ9vDcJIs+279gnJkfd1w==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.26.0.tgz", + "integrity": "sha512-wei+ffqHanYDOQgg/fS6Hcar6wAWv0CUPQ3TZzOWd2BLfgP539rb49bwua8WRAs7R6kOSLn82rfEu2ro6Llt8Q==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "eslint-visitor-keys": "^3.3.0" + } + } } }, "@typescript-eslint/scope-manager": { @@ -10897,13 +11002,79 @@ } }, "@typescript-eslint/type-utils": { - "version": "5.21.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.21.0.tgz", - "integrity": "sha512-MxmLZj0tkGlkcZCSE17ORaHl8Th3JQwBzyXL/uvC6sNmu128LsgjTX0NIzy+wdH2J7Pd02GN8FaoudJntFvSOw==", + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.26.0.tgz", + "integrity": "sha512-7ccbUVWGLmcRDSA1+ADkDBl5fP87EJt0fnijsMFTVHXKGduYMgienC/i3QwoVhDADUAPoytgjbZbCOMj4TY55A==", "requires": { - "@typescript-eslint/utils": "5.21.0", - "debug": "^4.3.2", + "@typescript-eslint/utils": "5.26.0", + "debug": "^4.3.4", "tsutils": "^3.21.0" + }, + "dependencies": { + "@typescript-eslint/scope-manager": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.26.0.tgz", + "integrity": "sha512-gVzTJUESuTwiju/7NiTb4c5oqod8xt5GhMbExKsCTp6adU3mya6AGJ4Pl9xC7x2DX9UYFsjImC0mA62BCY22Iw==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0" + } + }, + "@typescript-eslint/types": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.26.0.tgz", + "integrity": "sha512-8794JZFE1RN4XaExLWLI2oSXsVImNkl79PzTOOWt9h0UHROwJedNOD2IJyfL0NbddFllcktGIO2aOu10avQQyA==" + }, + "@typescript-eslint/typescript-estree": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.26.0.tgz", + "integrity": "sha512-EyGpw6eQDsfD6jIqmXP3rU5oHScZ51tL/cZgFbFBvWuCwrIptl+oueUZzSmLtxFuSOQ9vDcJIs+279gnJkfd1w==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/visitor-keys": "5.26.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + } + }, + "@typescript-eslint/utils": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.26.0.tgz", + "integrity": "sha512-PJFwcTq2Pt4AMOKfe3zQOdez6InIDOjUJJD3v3LyEtxHGVVRK3Vo7Dd923t/4M9hSH2q2CLvcTdxlLPjcIk3eg==", + "requires": { + "@types/json-schema": "^7.0.9", + "@typescript-eslint/scope-manager": "5.26.0", + "@typescript-eslint/types": "5.26.0", + "@typescript-eslint/typescript-estree": "5.26.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.26.0.tgz", + "integrity": "sha512-wei+ffqHanYDOQgg/fS6Hcar6wAWv0CUPQ3TZzOWd2BLfgP539rb49bwua8WRAs7R6kOSLn82rfEu2ro6Llt8Q==", + "requires": { + "@typescript-eslint/types": "5.26.0", + "eslint-visitor-keys": "^3.3.0" + } + }, + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==" + } } }, "@typescript-eslint/types": { diff --git a/package.json b/package.json index bcf454169b..08170e90bd 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,8 @@ "@storybook/testing-library": "^0.0.11", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.5", + "@typescript-eslint/eslint-plugin": "^5.26.0", + "@typescript-eslint/parser": "^5.26.0", "chromatic": "^6.5.4", "eslint": "^8.14.0", "eslint-plugin-react": "^7.29.4", From 7fe9c37bf6179a76cdec56c51cb15a102fca84cf Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 22:04:37 +0900 Subject: [PATCH 05/26] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B3=80=EC=88=98=20=EC=84=A0?= =?UTF-8?q?=EC=96=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/cardRegister/CVCInput.jsx | 2 +- src/components/cardRegister/CardExpireDateInput.jsx | 2 +- src/components/cardRegister/CardNumbersInput.jsx | 2 +- src/components/cardRegister/CardPasswordInput.jsx | 2 +- src/components/cardRegister/CardSelectModal.jsx | 1 - src/pages/CardModifyPage.jsx | 2 +- 6 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/cardRegister/CVCInput.jsx b/src/components/cardRegister/CVCInput.jsx index 91b968b7b9..0b438fbb5c 100644 --- a/src/components/cardRegister/CVCInput.jsx +++ b/src/components/cardRegister/CVCInput.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { RULE_INPUT } from "constants/constants"; import { diff --git a/src/components/cardRegister/CardExpireDateInput.jsx b/src/components/cardRegister/CardExpireDateInput.jsx index 87687cbb1e..655566c83d 100644 --- a/src/components/cardRegister/CardExpireDateInput.jsx +++ b/src/components/cardRegister/CardExpireDateInput.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { currentDate } from "utils/currentDate"; import { RULE_INPUT } from "constants/constants"; diff --git a/src/components/cardRegister/CardNumbersInput.jsx b/src/components/cardRegister/CardNumbersInput.jsx index 0ddb21ad44..a032412b8e 100644 --- a/src/components/cardRegister/CardNumbersInput.jsx +++ b/src/components/cardRegister/CardNumbersInput.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef } from "react"; import { RULE_INPUT } from "constants/constants"; import { diff --git a/src/components/cardRegister/CardPasswordInput.jsx b/src/components/cardRegister/CardPasswordInput.jsx index 9488e7532c..f6596a7a35 100644 --- a/src/components/cardRegister/CardPasswordInput.jsx +++ b/src/components/cardRegister/CardPasswordInput.jsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useRef } from "react"; import { RULE_INPUT } from "constants/constants"; import { diff --git a/src/components/cardRegister/CardSelectModal.jsx b/src/components/cardRegister/CardSelectModal.jsx index b9c5a990cf..466773767a 100644 --- a/src/components/cardRegister/CardSelectModal.jsx +++ b/src/components/cardRegister/CardSelectModal.jsx @@ -3,7 +3,6 @@ import styled from "styled-components"; export const CardSelectModal = ({ cardTypes, - isValid, handleVisible, handleCardType, handleCardTypeCheck, diff --git a/src/pages/CardModifyPage.jsx b/src/pages/CardModifyPage.jsx index 998805a0c3..24498e23f8 100644 --- a/src/pages/CardModifyPage.jsx +++ b/src/pages/CardModifyPage.jsx @@ -14,7 +14,7 @@ import { export const CardModifyPage = () => { const cards = useContext(CardContext); const navigate = useNavigate(); - const [searchParams, setSearchParams] = useSearchParams(); + const [searchParams] = useSearchParams(); const { id } = useParams(); const isEditMode = searchParams.get("edit"); From d2f9ea1e6011239a6a254d032fe9cb6fc02fa361 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 22:21:58 +0900 Subject: [PATCH 06/26] =?UTF-8?q?fix:=20=EB=B9=84=EC=96=B4=EC=9E=88?= =?UTF-8?q?=EB=8A=94=20=ED=99=94=EC=82=B4=ED=91=9C=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TipButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/TipButton.jsx b/src/components/common/TipButton.jsx index c2b3c2da7b..de6ef309e4 100644 --- a/src/components/common/TipButton.jsx +++ b/src/components/common/TipButton.jsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -export const TipButton = ({ onClick = () => {}, contents, color }) => { +export const TipButton = ({ onClick, contents, color }) => { return (
{contents}
From 1f0a91a965d383f15e880506a9ef6ef6dde3a5c8 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Sun, 29 May 2022 23:23:50 +0900 Subject: [PATCH 07/26] =?UTF-8?q?chore:=20@types/styled-components=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 29 +++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 30 insertions(+) diff --git a/package-lock.json b/package-lock.json index a1203cdd81..034a3f5658 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10521,6 +10521,16 @@ "@types/unist": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -10750,6 +10760,25 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/styled-components": { + "version": "5.1.25", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz", + "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true + } + } + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", diff --git a/package.json b/package.json index 08170e90bd..74a2606f71 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@storybook/testing-library": "^0.0.11", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.5", + "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.26.0", "@typescript-eslint/parser": "^5.26.0", "chromatic": "^6.5.4", From 72062ad2cff62ba744b43c72d30d6a9ec8502727 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 00:59:46 +0900 Subject: [PATCH 08/26] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/{constants.js => constants.ts} | 6 ++++-- src/types/index.ts | 1 + src/types/interface.ts | 6 ++++++ 3 files changed, 11 insertions(+), 2 deletions(-) rename src/constants/{constants.js => constants.ts} (80%) create mode 100644 src/types/index.ts create mode 100644 src/types/interface.ts diff --git a/src/constants/constants.js b/src/constants/constants.ts similarity index 80% rename from src/constants/constants.js rename to src/constants/constants.ts index b086007f1f..3b464c5b38 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.ts @@ -1,4 +1,6 @@ -export const CARD_TYPES = [ +import { card } from "types"; + +export const CARD_TYPES: Array = [ { name: "포코", color: "gold" }, { name: "준", color: "#9edbd0" }, { name: "공원", color: "#55bf55" }, @@ -9,7 +11,7 @@ export const CARD_TYPES = [ { name: "록바", color: "#d19c89" }, ]; -export const CARD_TYPES_DEFAULT = { name: "", color: "" }; +export const CARD_TYPES_DEFAULT: card = { name: "", color: "" }; export const MODAL_NAME = { CARD_TYPE: "cardType", diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000000..8b951ec70c --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1 @@ +export * from "./interface"; diff --git a/src/types/interface.ts b/src/types/interface.ts new file mode 100644 index 0000000000..b1b7776e01 --- /dev/null +++ b/src/types/interface.ts @@ -0,0 +1,6 @@ +interface card { + name: string; + color: string; +} + +export type { card }; From c7fa8c1524f723c640061703a85a722fef502eec Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:00:27 +0900 Subject: [PATCH 09/26] =?UTF-8?q?refactor:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{Button.jsx => Button.tsx} | 19 +++++++++++++++++-- src/types/css.type.ts | 4 ++++ src/types/index.ts | 1 + tsconfig.json | 1 + 4 files changed, 23 insertions(+), 2 deletions(-) rename src/components/common/{Button.jsx => Button.tsx} (59%) create mode 100644 src/types/css.type.ts diff --git a/src/components/common/Button.jsx b/src/components/common/Button.tsx similarity index 59% rename from src/components/common/Button.jsx rename to src/components/common/Button.tsx index 239634cafe..c9709088c4 100644 --- a/src/components/common/Button.jsx +++ b/src/components/common/Button.tsx @@ -1,7 +1,22 @@ import React from "react"; import styled from "styled-components"; +import { textAlign, buttonType } from "types"; -export const Button = ({ children, onClick, disabled, type, textAlign }) => { +interface ButtonComponent { + children: React.ReactNode; + onClick: () => void; + disabled: boolean; + type: buttonType; + textAlign: textAlign; +} + +export const Button = ({ + children, + onClick, + disabled, + type, + textAlign, +}: ButtonComponent) => { return ( @@ -11,7 +26,7 @@ export const Button = ({ children, onClick, disabled, type, textAlign }) => { ); }; -const ButtonBox = styled.div` +const ButtonBox = styled.div<{ textAlign: textAlign }>` width: 100%; text-align: ${(props) => (props.textAlign ? props.textAlign : "right")}; `; diff --git a/src/types/css.type.ts b/src/types/css.type.ts new file mode 100644 index 0000000000..bd626ff200 --- /dev/null +++ b/src/types/css.type.ts @@ -0,0 +1,4 @@ +type textAlign = "left" | "center" | "right"; +type buttonType = "button" | "submit" | "reset"; + +export type { textAlign, buttonType }; diff --git a/src/types/index.ts b/src/types/index.ts index 8b951ec70c..3e50110b45 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1 +1,2 @@ export * from "./interface"; +export * from "./css.type"; diff --git a/tsconfig.json b/tsconfig.json index 3fbe2e912e..52f04c190d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "jsx": "react", "module": "es6", "moduleResolution": "node", "esModuleInterop": true, From 1592fec14800ca0360bffeb383637c20f39fc0a6 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:21:59 +0900 Subject: [PATCH 10/26] =?UTF-8?q?chore:=20color=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/color.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/constants/color.ts diff --git a/src/constants/color.ts b/src/constants/color.ts new file mode 100644 index 0000000000..263fa43c44 --- /dev/null +++ b/src/constants/color.ts @@ -0,0 +1,5 @@ +export const COLORS = { + GRAY_100: "#D2D2D2", + GRAY_200: "#525252", + YELLOW_100: "#cbba64", +}; From 3a4b9571aecdacbe201a71c0622c2dcbc17256c1 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:22:31 +0900 Subject: [PATCH 11/26] =?UTF-8?q?refactor:=20Card=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{Card.jsx => Card.tsx} | 24 +++++++++++++++----- src/types/card.interface.ts | 20 ++++++++++++++++ src/types/index.ts | 2 +- src/types/interface.ts | 6 ----- 4 files changed, 39 insertions(+), 13 deletions(-) rename src/components/common/{Card.jsx => Card.tsx} (80%) create mode 100644 src/types/card.interface.ts delete mode 100644 src/types/interface.ts diff --git a/src/components/common/Card.jsx b/src/components/common/Card.tsx similarity index 80% rename from src/components/common/Card.jsx rename to src/components/common/Card.tsx index 0bbc2ac8f3..40bbf1c645 100644 --- a/src/components/common/Card.jsx +++ b/src/components/common/Card.tsx @@ -1,5 +1,15 @@ +import { COLORS } from "constants/color"; import React from "react"; import styled from "styled-components"; +import { card, cardNumbers, expireDate, ownerName } from "types"; + +interface CardComponent { + cardType: card; + cardNumbers: cardNumbers; + expireDate: expireDate; + ownerName: ownerName; + handleModalVisible: () => void; +} export const Card = ({ cardType, @@ -7,9 +17,11 @@ export const Card = ({ expireDate, ownerName, handleModalVisible, -}) => { +}: CardComponent) => { const formattedCardNumbers = Object.values(cardNumbers) - .map((number, idx) => (idx <= 1 ? number : "•".repeat(number.length))) + .map((number: string, idx: number) => + idx <= 1 ? number : "•".repeat(number.length) + ) .join(" "); return ( @@ -41,12 +53,12 @@ const CardBox = styled.div` display: flex; align-items: center; justify-content: center; - color: #525252; + color: ${COLORS.GRAY_200}; margin: 10px 0; `; -const SmallCard = styled.div` +const SmallCard = styled.div<{ backgroundColor: string }>` display: flex; flex-direction: column; align-items: center; @@ -55,7 +67,7 @@ const SmallCard = styled.div` width: 208px; height: 130px; - background: ${(props) => props.backgroundColor || "#D2D2D2"}; + background: ${(props) => props.backgroundColor || COLORS.GRAY_100}; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); border-radius: 5px; @@ -68,7 +80,7 @@ const SmallCardChip = styled.div` left: 95px; top: 122px; - background: #cbba64; + background: ${COLORS.YELLOW_100}; border-radius: 4px; `; diff --git a/src/types/card.interface.ts b/src/types/card.interface.ts new file mode 100644 index 0000000000..fe9012a85e --- /dev/null +++ b/src/types/card.interface.ts @@ -0,0 +1,20 @@ +interface card { + name: string; + color: string; +} + +interface cardNumbers { + firstNumber: string; + secondNumber: string; + thirdNumber: string; + fourthNumber: string; +} + +interface expireDate { + month: string; + year: string; +} + +type ownerName = string; + +export type { card, cardNumbers, expireDate, ownerName }; diff --git a/src/types/index.ts b/src/types/index.ts index 3e50110b45..3da3afd473 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,2 +1,2 @@ -export * from "./interface"; +export * from "./card.interface"; export * from "./css.type"; diff --git a/src/types/interface.ts b/src/types/interface.ts deleted file mode 100644 index b1b7776e01..0000000000 --- a/src/types/interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -interface card { - name: string; - color: string; -} - -export type { card }; From a6caad6d47aedd91687762e997e283fd438ded0e Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:25:30 +0900 Subject: [PATCH 12/26] =?UTF-8?q?refactor:=20Buton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20color=20=EC=83=81=EC=88=98=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Button.tsx | 5 +++-- src/components/common/Card.tsx | 6 +++--- src/constants/color.ts | 6 ++++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index c9709088c4..cd6c4b81a6 100644 --- a/src/components/common/Button.tsx +++ b/src/components/common/Button.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; import { textAlign, buttonType } from "types"; interface ButtonComponent { @@ -32,13 +33,13 @@ const ButtonBox = styled.div<{ textAlign: textAlign }>` `; const ButtonText = styled.button` - color: #04c09e; + color: ${COLORS.GREEN_100}; background-color: transparent; border: none; font-weight: bold; cursor: pointer; &:disabled { - color: #ecebf1; + color: ${COLORS.WHITE_100}; } `; diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 40bbf1c645..7971c56e9b 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -1,6 +1,6 @@ -import { COLORS } from "constants/color"; import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; import { card, cardNumbers, expireDate, ownerName } from "types"; interface CardComponent { @@ -53,7 +53,7 @@ const CardBox = styled.div` display: flex; align-items: center; justify-content: center; - color: ${COLORS.GRAY_200}; + color: ${COLORS.GRAY_100}; margin: 10px 0; `; @@ -67,7 +67,7 @@ const SmallCard = styled.div<{ backgroundColor: string }>` width: 208px; height: 130px; - background: ${(props) => props.backgroundColor || COLORS.GRAY_100}; + background: ${(props) => props.backgroundColor || COLORS.WHITE_200}; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); border-radius: 5px; diff --git a/src/constants/color.ts b/src/constants/color.ts index 263fa43c44..a0d6eba7ba 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -1,5 +1,7 @@ export const COLORS = { - GRAY_100: "#D2D2D2", - GRAY_200: "#525252", + WHITE_100: "#ecebf1", + WHITE_200: "#D2D2D2", + GRAY_100: "#525252", YELLOW_100: "#cbba64", + GREEN_100: "#04c09e", }; From 2e74607a3570c1e5d7601f4eb8d650049bacd7b5 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:28:25 +0900 Subject: [PATCH 13/26] =?UTF-8?q?refactor:=20Dot=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{Dot.jsx => Dot.tsx} | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename src/components/common/{Dot.jsx => Dot.tsx} (82%) diff --git a/src/components/common/Dot.jsx b/src/components/common/Dot.tsx similarity index 82% rename from src/components/common/Dot.jsx rename to src/components/common/Dot.tsx index 0f88dd62d6..96d2ea314f 100644 --- a/src/components/common/Dot.jsx +++ b/src/components/common/Dot.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; export const Dot = () => { return ( @@ -19,7 +20,7 @@ const DotContainerStyle = styled.div` const DotStyle = styled.div` border-radius: 50%; - background-color: #04c09e; + background-color: ${COLORS.GREEN_100}; width: 4px; height: 4px; `; From e766045a5474f451e991e4937ad868763db1484d Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:38:34 +0900 Subject: [PATCH 14/26] =?UTF-8?q?refactor:=20ErrorModal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{ErrorModal.jsx => ErrorModal.tsx} | 4 +++- src/constants/color.ts | 4 +++- src/contexts/{ErrorContext.js => ErrorContext.ts} | 0 src/contexts/{index.js => index.ts} | 0 4 files changed, 6 insertions(+), 2 deletions(-) rename src/components/common/{ErrorModal.jsx => ErrorModal.tsx} (88%) rename src/contexts/{ErrorContext.js => ErrorContext.ts} (100%) rename src/contexts/{index.js => index.ts} (100%) diff --git a/src/components/common/ErrorModal.jsx b/src/components/common/ErrorModal.tsx similarity index 88% rename from src/components/common/ErrorModal.jsx rename to src/components/common/ErrorModal.tsx index bb8709f229..7cc953267a 100644 --- a/src/components/common/ErrorModal.jsx +++ b/src/components/common/ErrorModal.tsx @@ -2,9 +2,11 @@ import React, { useContext } from "react"; import styled from "styled-components"; import { ErrorContext } from "contexts"; import { TipButton } from "."; +import { COLORS } from "constants/color"; export const ErrorModal = () => { const errorState = useContext(ErrorContext); + return ( <> @@ -19,6 +21,6 @@ export const ErrorModal = () => { }; const ErrorMessage = styled.p` - color: red; + color: ${COLORS.RED_100}; font-weight: bold; `; diff --git a/src/constants/color.ts b/src/constants/color.ts index a0d6eba7ba..e6f54bcd19 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -1,7 +1,9 @@ export const COLORS = { WHITE_100: "#ecebf1", WHITE_200: "#D2D2D2", - GRAY_100: "#525252", + GRAY_100: "#bababa", + GRAY_200: "#525252", YELLOW_100: "#cbba64", GREEN_100: "#04c09e", + RED_100: "#ff0000", }; diff --git a/src/contexts/ErrorContext.js b/src/contexts/ErrorContext.ts similarity index 100% rename from src/contexts/ErrorContext.js rename to src/contexts/ErrorContext.ts diff --git a/src/contexts/index.js b/src/contexts/index.ts similarity index 100% rename from src/contexts/index.js rename to src/contexts/index.ts From 4eabc4e91beabef9c494a109e1333ccd58f43fa3 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:39:14 +0900 Subject: [PATCH 15/26] =?UTF-8?q?refactor:=20TipButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TipButton.jsx | 22 --------------- src/components/common/TipButton.tsx | 29 ++++++++++++++++++++ src/components/common/{index.js => index.ts} | 0 3 files changed, 29 insertions(+), 22 deletions(-) delete mode 100644 src/components/common/TipButton.jsx create mode 100644 src/components/common/TipButton.tsx rename src/components/common/{index.js => index.ts} (100%) diff --git a/src/components/common/TipButton.jsx b/src/components/common/TipButton.jsx deleted file mode 100644 index de6ef309e4..0000000000 --- a/src/components/common/TipButton.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -export const TipButton = ({ onClick, contents, color }) => { - return ( - -
{contents}
- - ); -}; - -const TipButtonContainerStyle = styled.div` - border-radius: 50%; - border: 1px solid ${(props) => props.color || "#bababa"}; - color: ${(props) => props.color || "#bababa"}; - width: 25px; - height: 25px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -`; diff --git a/src/components/common/TipButton.tsx b/src/components/common/TipButton.tsx new file mode 100644 index 0000000000..350152bd09 --- /dev/null +++ b/src/components/common/TipButton.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import styled from "styled-components"; +import { COLORS } from "constants/color"; + +interface TipButtonComponent { + onClick?: () => void; + contents: string; + color?: string; +} + +export const TipButton = ({ onClick, contents, color }: TipButtonComponent) => { + return ( + +
{contents}
+ + ); +}; + +const TipButtonContainerStyle = styled.div<{ color: string }>` + border-radius: 50%; + border: 1px solid ${(props) => props.color || COLORS.GRAY_100}; + color: ${(props) => props.color || COLORS.GRAY_100}; + width: 25px; + height: 25px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +`; diff --git a/src/components/common/index.js b/src/components/common/index.ts similarity index 100% rename from src/components/common/index.js rename to src/components/common/index.ts From 88564bcbdf7dad5ea0c3e385110154e395f9e682 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 01:41:23 +0900 Subject: [PATCH 16/26] =?UTF-8?q?refactor:=20Form=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{Form.jsx => Form.tsx} | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) rename src/components/common/{Form.jsx => Form.tsx} (53%) diff --git a/src/components/common/Form.jsx b/src/components/common/Form.tsx similarity index 53% rename from src/components/common/Form.jsx rename to src/components/common/Form.tsx index 35ccf6e156..2b0607a302 100644 --- a/src/components/common/Form.jsx +++ b/src/components/common/Form.tsx @@ -1,7 +1,12 @@ import React from "react"; import styled from "styled-components"; -export const Form = ({ onSubmit, children }) => { +interface FormComponent { + onSubmit: () => void; + children: React.ReactNode; +} + +export const Form = ({ onSubmit, children }: FormComponent) => { return {children}; }; From ea26d118896a82e300a11e554b4d899b5e3aa937 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 02:12:09 +0900 Subject: [PATCH 17/26] =?UTF-8?q?refactor:=20InputBasic=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Card.tsx | 2 +- .../common/{InputBasic.jsx => InputBasic.tsx} | 28 +++++++++++++++---- src/constants/color.ts | 4 ++- src/types/css.type.ts | 3 +- 4 files changed, 28 insertions(+), 9 deletions(-) rename src/components/common/{InputBasic.jsx => InputBasic.tsx} (56%) diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 7971c56e9b..b9d31d308d 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -53,7 +53,7 @@ const CardBox = styled.div` display: flex; align-items: center; justify-content: center; - color: ${COLORS.GRAY_100}; + color: ${COLORS.GRAY_300}; margin: 10px 0; `; diff --git a/src/components/common/InputBasic.jsx b/src/components/common/InputBasic.tsx similarity index 56% rename from src/components/common/InputBasic.jsx rename to src/components/common/InputBasic.tsx index 4d3595d946..2e9bc69951 100644 --- a/src/components/common/InputBasic.jsx +++ b/src/components/common/InputBasic.tsx @@ -1,5 +1,21 @@ import React from "react"; import styled from "styled-components"; +import { inputType } from "types"; +import { COLORS } from "constants/color"; + +interface InputBasicComponent { + type: inputType; + placeholder: string; + value: string; + onChange: () => void; + onBlur: () => void; + id: string; + dataTestId: string; + pattern: string; + width: string; + inputRef: React.RefObject; + maxLength: number; +} export const InputBasic = ({ type, @@ -13,7 +29,7 @@ export const InputBasic = ({ width, inputRef, maxLength, -}) => { +}: InputBasicComponent) => { return ( ` + background-color: ${COLORS.WHITE_100}; + color: ${COLORS.GREEN_100}; height: 45px; width: ${(props) => props.width || "100%"}; text-align: center; outline: 2px solid transparent; outline-offset: 2px; font-size: 16px; - border-color: #9ca3af; + border-color: ${COLORS.GRAY_200}; border: none; border-radius: 0.25rem; font-weight: bold; &:invalid { - color: #ff6d6d; + color: ${COLORS.RED_200}; } `; diff --git a/src/constants/color.ts b/src/constants/color.ts index e6f54bcd19..b208d3050e 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -2,8 +2,10 @@ export const COLORS = { WHITE_100: "#ecebf1", WHITE_200: "#D2D2D2", GRAY_100: "#bababa", - GRAY_200: "#525252", + GRAY_200: "#9ca3af", + GRAY_300: "#525252", YELLOW_100: "#cbba64", GREEN_100: "#04c09e", RED_100: "#ff0000", + RED_200: "#ff6d6d", }; diff --git a/src/types/css.type.ts b/src/types/css.type.ts index bd626ff200..0d4c58973a 100644 --- a/src/types/css.type.ts +++ b/src/types/css.type.ts @@ -1,4 +1,5 @@ type textAlign = "left" | "center" | "right"; type buttonType = "button" | "submit" | "reset"; +type inputType = "text" | "password" | "number"; -export type { textAlign, buttonType }; +export type { textAlign, buttonType, inputType }; From d34f437843a52d9af90dc90ece86674c8b3f9cb1 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 02:12:50 +0900 Subject: [PATCH 18/26] =?UTF-8?q?refactor:=20InputBox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{InputBox.jsx => InputBox.tsx} | 24 +++++++++++++++---- src/constants/color.ts | 1 + src/types/css.type.ts | 12 +++++++++- 3 files changed, 32 insertions(+), 5 deletions(-) rename src/components/common/{InputBox.jsx => InputBox.tsx} (54%) diff --git a/src/components/common/InputBox.jsx b/src/components/common/InputBox.tsx similarity index 54% rename from src/components/common/InputBox.jsx rename to src/components/common/InputBox.tsx index ec547eec4e..8fa8e790d8 100644 --- a/src/components/common/InputBox.jsx +++ b/src/components/common/InputBox.tsx @@ -1,5 +1,16 @@ +import { COLORS } from "constants/color"; import React from "react"; import styled from "styled-components"; +import { justifyContent } from "types"; + +interface InputBoxComponent { + children: React.ReactNode; + width: string; + color: string; + backgroundColor: string; + justifyContent: justifyContent; + padding: string; +} export const InputBox = ({ children, @@ -8,7 +19,7 @@ export const InputBox = ({ backgroundColor, justifyContent, padding, -}) => { +}: InputBoxComponent) => { return ( ` display: flex; align-items: center; margin-top: 0.375rem; - color: ${(props) => props.color || "#d3d3d3"}; + color: ${(props) => props.color || COLORS.WHITE_150}; border-radius: 0.25rem; - background-color: ${(props) => props.backgroundColor || "#ecebf1"}; + background-color: ${(props) => props.backgroundColor || COLORS.WHITE_100}; width: ${(props) => props.width || "unset"}; justify-content: ${(props) => props.justifyContent || "unset"}; padding: ${(props) => props.padding || "0"}; diff --git a/src/constants/color.ts b/src/constants/color.ts index b208d3050e..8f0afbc02b 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -1,5 +1,6 @@ export const COLORS = { WHITE_100: "#ecebf1", + WHITE_150: "#d3d3d3", WHITE_200: "#D2D2D2", GRAY_100: "#bababa", GRAY_200: "#9ca3af", diff --git a/src/types/css.type.ts b/src/types/css.type.ts index 0d4c58973a..352d89ee71 100644 --- a/src/types/css.type.ts +++ b/src/types/css.type.ts @@ -1,5 +1,15 @@ type textAlign = "left" | "center" | "right"; type buttonType = "button" | "submit" | "reset"; type inputType = "text" | "password" | "number"; +type justifyContent = + | "flex-start" + | "center" + | "flex-end" + | "normal" + | "space-between" + | "space-around" + | "space-evenly" + | "stretch" + | "unset"; -export type { textAlign, buttonType, inputType }; +export type { textAlign, buttonType, inputType, justifyContent }; From c400a9d97af71965f58204f9f1d6b22c7bc8c6e7 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 02:58:35 +0900 Subject: [PATCH 19/26] =?UTF-8?q?refactor:=20context=20state=20type=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/ErrorModal.tsx | 3 ++- src/contexts/ErrorContext.ts | 3 ++- src/types/context.interface.ts | 5 +++++ src/types/index.ts | 1 + 4 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 src/types/context.interface.ts diff --git a/src/components/common/ErrorModal.tsx b/src/components/common/ErrorModal.tsx index 7cc953267a..1626809eab 100644 --- a/src/components/common/ErrorModal.tsx +++ b/src/components/common/ErrorModal.tsx @@ -3,9 +3,10 @@ import styled from "styled-components"; import { ErrorContext } from "contexts"; import { TipButton } from "."; import { COLORS } from "constants/color"; +import { errorStateType } from "types"; export const ErrorModal = () => { - const errorState = useContext(ErrorContext); + const errorState: errorStateType = useContext(ErrorContext); return ( <> diff --git a/src/contexts/ErrorContext.ts b/src/contexts/ErrorContext.ts index 4d446a0c0d..217870f29f 100644 --- a/src/contexts/ErrorContext.ts +++ b/src/contexts/ErrorContext.ts @@ -1,6 +1,7 @@ import React from "react"; +import { errorStateType } from "types"; -export const errorState = { +export const errorState: errorStateType = { errorMessage: "에러 메시지가 입력되지 않았습니다.", }; diff --git a/src/types/context.interface.ts b/src/types/context.interface.ts new file mode 100644 index 0000000000..3a4afb7910 --- /dev/null +++ b/src/types/context.interface.ts @@ -0,0 +1,5 @@ +interface errorStateType { + errorMessage: string; +} + +export type { errorStateType }; diff --git a/src/types/index.ts b/src/types/index.ts index 3da3afd473..82bf540549 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,2 +1,3 @@ +export * from "./context.interface"; export * from "./card.interface"; export * from "./css.type"; From 8a1b6bc91104a6f2f5ae62e7f200d13befd6dac8 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 02:59:00 +0900 Subject: [PATCH 20/26] =?UTF-8?q?refactor:=20InputTitle=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{InputTitle.jsx => InputTitle.tsx} | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) rename src/components/common/{InputTitle.jsx => InputTitle.tsx} (62%) diff --git a/src/components/common/InputTitle.jsx b/src/components/common/InputTitle.tsx similarity index 62% rename from src/components/common/InputTitle.jsx rename to src/components/common/InputTitle.tsx index e5d2388f1f..fe99b25521 100644 --- a/src/components/common/InputTitle.jsx +++ b/src/components/common/InputTitle.tsx @@ -1,7 +1,13 @@ +import { COLORS } from "constants/color"; import React from "react"; import styled from "styled-components"; -export const InputTitle = ({ children, isValid }) => { +interface InputTitleComponent { + children: React.ReactNode; + isValid: boolean; +} + +export const InputTitle = ({ children, isValid }: InputTitleComponent) => { return ( {children} ✔️ @@ -19,10 +25,10 @@ const InputTitleStyle = styled.label` margin-bottom: 4px; - color: #525252; + color: ${COLORS.GRAY_300}; `; -const ValidChecker = styled.span` +const ValidChecker = styled.span<{ isValid: boolean }>` display: ${(props) => (props.isValid ? "inline" : "none")}; margin: "0 10px"; `; From 0b4b9e6b605370b0ed0bb82ecca10e19e6c17b73 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:02:37 +0900 Subject: [PATCH 21/26] =?UTF-8?q?refactor:=20InputUnderline=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...{InputUnderline.jsx => InputUnderline.tsx} | 20 ++++++++++++++++--- src/constants/color.ts | 2 ++ 2 files changed, 19 insertions(+), 3 deletions(-) rename src/components/common/{InputUnderline.jsx => InputUnderline.tsx} (64%) diff --git a/src/components/common/InputUnderline.jsx b/src/components/common/InputUnderline.tsx similarity index 64% rename from src/components/common/InputUnderline.jsx rename to src/components/common/InputUnderline.tsx index 2b19350e70..91ded13e75 100644 --- a/src/components/common/InputUnderline.jsx +++ b/src/components/common/InputUnderline.tsx @@ -1,5 +1,19 @@ import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; +import { inputType } from "types"; + +interface InputUnderlineComponent { + type: inputType; + placeholder: string; + value: string; + onChange: () => void; + id: string; + width: string; + pattern: string; + inputRef: React.RefObject; + maxLength: number; +} export const InputUnderline = ({ type, @@ -11,7 +25,7 @@ export const InputUnderline = ({ pattern, inputRef, maxLength, -}) => { +}: InputUnderlineComponent) => { return ( props.width || "100%"}; text-align: center; outline: 2px solid transparent; outline-offset: 2px; font-size: 16px; - border-color: #737373; + border-color: ${COLORS.GRAY_250}; border-style: none none solid none; border-width: 1.5px; `; diff --git a/src/constants/color.ts b/src/constants/color.ts index 8f0afbc02b..db8f2d26b2 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -4,7 +4,9 @@ export const COLORS = { WHITE_200: "#D2D2D2", GRAY_100: "#bababa", GRAY_200: "#9ca3af", + GRAY_250: "#737373", GRAY_300: "#525252", + BLACK_100: "#000000", YELLOW_100: "#cbba64", GREEN_100: "#04c09e", RED_100: "#ff0000", From 7a686b3280e8f64b72381f5b896e05b7533a5f89 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:05:01 +0900 Subject: [PATCH 22/26] =?UTF-8?q?refactor:=20Modal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{Modal.jsx => Modal.tsx} | 13 ++++++++++--- src/constants/color.ts | 1 + 2 files changed, 11 insertions(+), 3 deletions(-) rename src/components/common/{Modal.jsx => Modal.tsx} (69%) diff --git a/src/components/common/Modal.jsx b/src/components/common/Modal.tsx similarity index 69% rename from src/components/common/Modal.jsx rename to src/components/common/Modal.tsx index cd9172a853..984e4a0948 100644 --- a/src/components/common/Modal.jsx +++ b/src/components/common/Modal.tsx @@ -1,7 +1,14 @@ import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; -export const Modal = ({ children, visible, handleVisible }) => { +interface ModalComponent { + children: React.ReactNode; + visible: boolean; + handleVisible: () => void; +} + +export const Modal = ({ children, visible, handleVisible }: ModalComponent) => { return ( {children} @@ -9,7 +16,7 @@ export const Modal = ({ children, visible, handleVisible }) => { ); }; -const ModalDimmedStyle = styled.div` +const ModalDimmedStyle = styled.div<{ isVisible: boolean }>` width: 100%; height: 100%; @@ -39,7 +46,7 @@ const ModalStyle = styled.div` align-items: center; flex-wrap: wrap; - background: #fff; + background: ${COLORS.WHITE_50}; z-index: 10; flex-direction: column; `; diff --git a/src/constants/color.ts b/src/constants/color.ts index db8f2d26b2..90d021d532 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -1,4 +1,5 @@ export const COLORS = { + WHITE_50: "#FFFFFF", WHITE_100: "#ecebf1", WHITE_150: "#d3d3d3", WHITE_200: "#D2D2D2", From 0b9627a8abee9df51caefb1369ab4f1dd843c5d0 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:07:43 +0900 Subject: [PATCH 23/26] =?UTF-8?q?refactor:=20NewCard=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{NewCard.jsx => NewCard.tsx} | 5 +++-- src/constants/color.ts | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) rename src/components/common/{NewCard.jsx => NewCard.tsx} (80%) diff --git a/src/components/common/NewCard.jsx b/src/components/common/NewCard.tsx similarity index 80% rename from src/components/common/NewCard.jsx rename to src/components/common/NewCard.tsx index ad8c6367e3..f63e2e8a87 100644 --- a/src/components/common/NewCard.jsx +++ b/src/components/common/NewCard.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { COLORS } from "constants/color"; export const NewCard = () => { return ( @@ -13,7 +14,7 @@ const CardBox = styled.div` display: flex; align-items: center; justify-content: center; - background-color: #e5e5e5; + background-color: ${COLORS.WHITE_125}; width: 208px; height: 130px; @@ -24,7 +25,7 @@ const CardBox = styled.div` `; const CardSymbol = styled.div` - color: #575757; + color: ${COLORS.GRAY_275}; font-weight: bold; font-size: 36px; `; diff --git a/src/constants/color.ts b/src/constants/color.ts index 90d021d532..900fafec6b 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -1,11 +1,13 @@ export const COLORS = { WHITE_50: "#FFFFFF", WHITE_100: "#ecebf1", + WHITE_125: "#e5e5e5", WHITE_150: "#d3d3d3", WHITE_200: "#D2D2D2", GRAY_100: "#bababa", GRAY_200: "#9ca3af", GRAY_250: "#737373", + GRAY_275: "#575757", GRAY_300: "#525252", BLACK_100: "#000000", YELLOW_100: "#cbba64", From 5f7af3a7b5b11a89f2755e3062ff9354fd2f2a80 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:09:02 +0900 Subject: [PATCH 24/26] =?UTF-8?q?refactor:=20PageTitle=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{PageTitle.jsx => PageTitle.tsx} | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) rename src/components/common/{PageTitle.jsx => PageTitle.tsx} (69%) diff --git a/src/components/common/PageTitle.jsx b/src/components/common/PageTitle.tsx similarity index 69% rename from src/components/common/PageTitle.jsx rename to src/components/common/PageTitle.tsx index 0f220f6f2c..3b1edaa27f 100644 --- a/src/components/common/PageTitle.jsx +++ b/src/components/common/PageTitle.tsx @@ -1,7 +1,17 @@ import React from "react"; import styled from "styled-components"; -export const PageTitle = ({ children, onClick, visible }) => { +interface PageTitleComponent { + children: React.ReactNode; + onClick: () => void; + visible: boolean; +} + +export const PageTitle = ({ + children, + onClick, + visible, +}: PageTitleComponent) => { return ( @@ -18,7 +28,7 @@ const PageTitleWrapperStyle = styled.div` align-items: center; `; -const BackwardButton = styled.span` +const BackwardButton = styled.span<{ visible: boolean }>` display: ${(props) => (props.visible ? "inline" : "none")}; width: 8px; height: 8px; From 8dc34a5631abedbd883734a9fea884d54472432b Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:17:26 +0900 Subject: [PATCH 25/26] =?UTF-8?q?refactor:=20styled=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{styled.jsx => styled.tsx} | 3 +- src/types/css.type.ts | 28 ++++++++++++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) rename src/components/common/{styled.jsx => styled.tsx} (82%) diff --git a/src/components/common/styled.jsx b/src/components/common/styled.tsx similarity index 82% rename from src/components/common/styled.jsx rename to src/components/common/styled.tsx index 841391bfec..8611657811 100644 --- a/src/components/common/styled.jsx +++ b/src/components/common/styled.tsx @@ -1,10 +1,11 @@ import styled from "styled-components"; +import { FlexWrapperType } from "types"; export const InputContainer = styled.div` margin: 16px 0; `; -export const FlexWrapper = styled.div` +export const FlexWrapper = styled.div` width: ${(props) => props.width || "auto"}; height: ${(props) => props.height || "auto"}; display: flex; diff --git a/src/types/css.type.ts b/src/types/css.type.ts index 352d89ee71..30d93526e7 100644 --- a/src/types/css.type.ts +++ b/src/types/css.type.ts @@ -1,6 +1,16 @@ +interface FlexWrapperType { + width: string; + height: string; + flexDirection: flexDirection; + justifyContent: justifyContent; + alignItems: alignItems; + gap: string; +} + type textAlign = "left" | "center" | "right"; type buttonType = "button" | "submit" | "reset"; type inputType = "text" | "password" | "number"; +type flexDirection = "row" | "column" | "unset"; type justifyContent = | "flex-start" | "center" @@ -11,5 +21,21 @@ type justifyContent = | "space-evenly" | "stretch" | "unset"; +type alignItems = + | "flex-start" + | "center" + | "flex-end" + | "normal" + | "baseline" + | "stretch" + | "unset"; -export type { textAlign, buttonType, inputType, justifyContent }; +export type { + FlexWrapperType, + textAlign, + buttonType, + inputType, + flexDirection, + justifyContent, + alignItems, +}; From 2d49132bd537c2656c63bf6ade80cf3cfcf6f095 Mon Sep 17 00:00:00 2001 From: "YongRae_Kim (Usage)" Date: Mon, 30 May 2022 03:41:03 +0900 Subject: [PATCH 26/26] =?UTF-8?q?refactor:=20card=20context=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Card.tsx | 4 ++-- src/constants/constants.ts | 6 +++--- src/contexts/{CardContext.js => CardContext.ts} | 3 ++- src/types/card.interface.ts | 17 ++++++++++++++++- src/types/context.interface.ts | 9 ++++++++- 5 files changed, 31 insertions(+), 8 deletions(-) rename src/contexts/{CardContext.js => CardContext.ts} (64%) diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index b9d31d308d..7402271070 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -1,10 +1,10 @@ import React from "react"; import styled from "styled-components"; import { COLORS } from "constants/color"; -import { card, cardNumbers, expireDate, ownerName } from "types"; +import { cardType, cardNumbers, expireDate, ownerName } from "types"; interface CardComponent { - cardType: card; + cardType: cardType; cardNumbers: cardNumbers; expireDate: expireDate; ownerName: ownerName; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 3b464c5b38..42baf102ac 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,6 +1,6 @@ -import { card } from "types"; +import { cardType } from "types"; -export const CARD_TYPES: Array = [ +export const CARD_TYPES: Array = [ { name: "포코", color: "gold" }, { name: "준", color: "#9edbd0" }, { name: "공원", color: "#55bf55" }, @@ -11,7 +11,7 @@ export const CARD_TYPES: Array = [ { name: "록바", color: "#d19c89" }, ]; -export const CARD_TYPES_DEFAULT: card = { name: "", color: "" }; +export const CARD_TYPES_DEFAULT: cardType = { name: "", color: "" }; export const MODAL_NAME = { CARD_TYPE: "cardType", diff --git a/src/contexts/CardContext.js b/src/contexts/CardContext.ts similarity index 64% rename from src/contexts/CardContext.js rename to src/contexts/CardContext.ts index 3525baad73..ccd0cdf225 100644 --- a/src/contexts/CardContext.js +++ b/src/contexts/CardContext.ts @@ -1,6 +1,7 @@ import React from "react"; +import { card } from "types"; -export const cards = { +export const cards: card = { id: 0, list: [], }; diff --git a/src/types/card.interface.ts b/src/types/card.interface.ts index fe9012a85e..cbf35e499d 100644 --- a/src/types/card.interface.ts +++ b/src/types/card.interface.ts @@ -1,4 +1,19 @@ interface card { + id: number; + list: Array; +} + +interface cardData { + cardCVC: string; + cardNickname: string; + cardNumbers: cardNumbers; + cardPassword: string; + cardType: cardType; + expireDate: expireDate; + ownerName: ownerName; +} + +interface cardType { name: string; color: string; } @@ -17,4 +32,4 @@ interface expireDate { type ownerName = string; -export type { card, cardNumbers, expireDate, ownerName }; +export type { card, cardType, cardNumbers, expireDate, ownerName }; diff --git a/src/types/context.interface.ts b/src/types/context.interface.ts index 3a4afb7910..50f034d284 100644 --- a/src/types/context.interface.ts +++ b/src/types/context.interface.ts @@ -1,5 +1,12 @@ +import { card } from "./card.interface"; + +interface cardsType { + id: number; + list: Array; +} + interface errorStateType { errorMessage: string; } -export type { errorStateType }; +export type { errorStateType, cardsType };