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/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/package-lock.json b/package-lock.json
index c9c9595850..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",
@@ -10646,6 +10656,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 +10677,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 +10718,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",
@@ -10710,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",
@@ -10813,19 +10882,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": {
@@ -10837,14 +10972,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": {
@@ -10857,13 +11031,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": {
@@ -24163,6 +24403,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 +24565,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..74a2606f71 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,17 @@
     "@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",
+    "@types/styled-components": "^5.1.25",
+    "@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",
+    "source-map-loader": "^3.0.1",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.7.2",
     "webpack": "^5.72.0"
   },
   "eslintConfig": {
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/components/common/Button.jsx b/src/components/common/Button.tsx
similarity index 51%
rename from src/components/common/Button.jsx
rename to src/components/common/Button.tsx
index 239634cafe..cd6c4b81a6 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.tsx
@@ -1,7 +1,23 @@
 import React from "react";
 import styled from "styled-components";
+import { COLORS } from "constants/color";
+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 (
     <ButtonBox textAlign={textAlign}>
       <ButtonText onClick={onClick} type={type} disabled={disabled}>
@@ -11,19 +27,19 @@ 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")};
 `;
 
 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.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..7402271070 100644
--- a/src/components/common/Card.jsx
+++ b/src/components/common/Card.tsx
@@ -1,5 +1,15 @@
 import React from "react";
 import styled from "styled-components";
+import { COLORS } from "constants/color";
+import { cardType, cardNumbers, expireDate, ownerName } from "types";
+
+interface CardComponent {
+  cardType: cardType;
+  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_300};
 
   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.WHITE_200};
 
   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/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;
 `;
diff --git a/src/components/common/ErrorModal.jsx b/src/components/common/ErrorModal.tsx
similarity index 74%
rename from src/components/common/ErrorModal.jsx
rename to src/components/common/ErrorModal.tsx
index bb8709f229..1626809eab 100644
--- a/src/components/common/ErrorModal.jsx
+++ b/src/components/common/ErrorModal.tsx
@@ -2,9 +2,12 @@ import React, { useContext } from "react";
 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 (
     <>
       <TipButton contents="!"></TipButton>
@@ -19,6 +22,6 @@ export const ErrorModal = () => {
 };
 
 const ErrorMessage = styled.p`
-  color: red;
+  color: ${COLORS.RED_100};
   font-weight: bold;
 `;
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 <FormStyle onSubmit={onSubmit}>{children}</FormStyle>;
 };
 
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<HTMLInputElement>;
+  maxLength: number;
+}
 
 export const InputBasic = ({
   type,
@@ -13,7 +29,7 @@ export const InputBasic = ({
   width,
   inputRef,
   maxLength,
-}) => {
+}: InputBasicComponent) => {
   return (
     <InputBasicStyle
       width={width}
@@ -31,21 +47,21 @@ export const InputBasic = ({
   );
 };
 
-const InputBasicStyle = styled.input`
-  background-color: #ecebf1;
-  color: #04c09e;
+const InputBasicStyle = styled.input<{ width: string; maxLength: number }>`
+  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/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 (
     <InputBoxStyle
       width={width}
@@ -22,13 +33,18 @@ export const InputBox = ({
   );
 };
 
-const InputBoxStyle = styled.div`
+const InputBoxStyle = styled.div<{
+  backgroundColor: string;
+  width: string;
+  justifyContent: justifyContent;
+  padding: string;
+}>`
   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/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 (
     <InputTitleStyle>
       {children} <ValidChecker isValid={isValid}>✔️</ValidChecker>
@@ -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";
 `;
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<HTMLInputElement>;
+  maxLength: number;
+}
 
 export const InputUnderline = ({
   type,
@@ -11,7 +25,7 @@ export const InputUnderline = ({
   pattern,
   inputRef,
   maxLength,
-}) => {
+}: InputUnderlineComponent) => {
   return (
     <InputUnderlineStyle
       width={width}
@@ -29,14 +43,14 @@ export const InputUnderline = ({
 
 const InputUnderlineStyle = styled.input`
   background-color: transparent;
-  color: #000000;
+  color: ${COLORS.BLACK_100};
   height: 45px;
   width: ${(props) => 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/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 (
     <ModalDimmedStyle onClick={handleVisible} isVisible={visible}>
       <ModalStyle>{children}</ModalStyle>
@@ -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/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/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 (
     <PageTitleWrapperStyle>
       <BackwardButton onClick={onClick} visible={visible} />
@@ -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;
diff --git a/src/components/common/TipButton.jsx b/src/components/common/TipButton.jsx
deleted file mode 100644
index c2b3c2da7b..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 (
-    <TipButtonContainerStyle onClick={onClick} color={color}>
-      <div>{contents}</div>
-    </TipButtonContainerStyle>
-  );
-};
-
-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 (
+    <TipButtonContainerStyle onClick={onClick} color={color}>
+      <div>{contents}</div>
+    </TipButtonContainerStyle>
+  );
+};
+
+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
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<FlexWrapperType>`
   width: ${(props) => props.width || "auto"};
   height: ${(props) => props.height || "auto"};
   display: flex;
diff --git a/src/constants/color.ts b/src/constants/color.ts
new file mode 100644
index 0000000000..900fafec6b
--- /dev/null
+++ b/src/constants/color.ts
@@ -0,0 +1,17 @@
+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",
+  GREEN_100: "#04c09e",
+  RED_100: "#ff0000",
+  RED_200: "#ff6d6d",
+};
diff --git a/src/constants/constants.js b/src/constants/constants.ts
similarity index 79%
rename from src/constants/constants.js
rename to src/constants/constants.ts
index b086007f1f..42baf102ac 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.ts
@@ -1,4 +1,6 @@
-export const CARD_TYPES = [
+import { cardType } from "types";
+
+export const CARD_TYPES: Array<cardType> = [
   { 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: 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/contexts/ErrorContext.js b/src/contexts/ErrorContext.ts
similarity index 65%
rename from src/contexts/ErrorContext.js
rename to src/contexts/ErrorContext.ts
index 4d446a0c0d..217870f29f 100644
--- a/src/contexts/ErrorContext.js
+++ 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/contexts/index.js b/src/contexts/index.ts
similarity index 100%
rename from src/contexts/index.js
rename to src/contexts/index.ts
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 && (
-        <>
-          <PageTitle>보유카드</PageTitle>
-          <FlexWrapper
-            height="calc(100vh - 50px)"
-            flexDirection="column"
-            justifyContent="flex-start"
-          >
-            {cards.list.map((_, i) => (
-              <Button
-                onClick={() =>
-                  navigate(`/cardEdit/${cards.list[i].id}?edit=true`)
-                }
-                textAlign="center"
-                key={cards.list[i].id}
-              >
-                <Card
-                  cardType={cards.list[i].cardType}
-                  cardNumbers={cards.list[i].cardNumbers}
-                  expireDate={cards.list[i].expireDate}
-                  ownerName={cards.list[i].ownerName}
-                />
-                <CardNickname>{cards.list[i].cardNickname}</CardNickname>
-              </Button>
-            ))}
+    cards.list && (
+      <>
+        <PageTitle>보유카드</PageTitle>
+        <FlexWrapper
+          height="calc(100vh - 50px)"
+          flexDirection="column"
+          justifyContent="flex-start"
+        >
+          {cards.list.map((_, i) => (
             <Button
-              onClick={() => navigate("/RegisterCard")}
+              onClick={() =>
+                navigate(`/cardEdit/${cards.list[i].id}?edit=true`)
+              }
               textAlign="center"
+              key={cards.list[i].id}
             >
-              <NewCard></NewCard>
+              <Card
+                cardType={cards.list[i].cardType}
+                cardNumbers={cards.list[i].cardNumbers}
+                expireDate={cards.list[i].expireDate}
+                ownerName={cards.list[i].ownerName}
+              />
+              <CardNickname>{cards.list[i].cardNickname}</CardNickname>
             </Button>
-          </FlexWrapper>
-        </>
-      )}
-    </>
+          ))}
+          <Button onClick={() => navigate("/RegisterCard")} textAlign="center">
+            <NewCard></NewCard>
+          </Button>
+        </FlexWrapper>
+      </>
+    )
   );
 };
 
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");
diff --git a/src/types/card.interface.ts b/src/types/card.interface.ts
new file mode 100644
index 0000000000..cbf35e499d
--- /dev/null
+++ b/src/types/card.interface.ts
@@ -0,0 +1,35 @@
+interface card {
+  id: number;
+  list: Array<cardData>;
+}
+
+interface cardData {
+  cardCVC: string;
+  cardNickname: string;
+  cardNumbers: cardNumbers;
+  cardPassword: string;
+  cardType: cardType;
+  expireDate: expireDate;
+  ownerName: ownerName;
+}
+
+interface cardType {
+  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, cardType, cardNumbers, expireDate, ownerName };
diff --git a/src/types/context.interface.ts b/src/types/context.interface.ts
new file mode 100644
index 0000000000..50f034d284
--- /dev/null
+++ b/src/types/context.interface.ts
@@ -0,0 +1,12 @@
+import { card } from "./card.interface";
+
+interface cardsType {
+  id: number;
+  list: Array<card>;
+}
+
+interface errorStateType {
+  errorMessage: string;
+}
+
+export type { errorStateType, cardsType };
diff --git a/src/types/css.type.ts b/src/types/css.type.ts
new file mode 100644
index 0000000000..30d93526e7
--- /dev/null
+++ b/src/types/css.type.ts
@@ -0,0 +1,41 @@
+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"
+  | "flex-end"
+  | "normal"
+  | "space-between"
+  | "space-around"
+  | "space-evenly"
+  | "stretch"
+  | "unset";
+type alignItems =
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "normal"
+  | "baseline"
+  | "stretch"
+  | "unset";
+
+export type {
+  FlexWrapperType,
+  textAlign,
+  buttonType,
+  inputType,
+  flexDirection,
+  justifyContent,
+  alignItems,
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000000..82bf540549
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+export * from "./context.interface";
+export * from "./card.interface";
+export * from "./css.type";
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..52f04c190d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "es6",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}