[3단계 - 페이먼츠] 유세지(김용래) 미션 제출합니다. (#159)

Author: usageness

.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

jsconfig.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": {

package-lock.json

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { RULE_INPUT } from "constants/constants";
 import {

package.json

@@ -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";

src/components/cardRegister/CVCInput.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 {

src/components/cardRegister/CardExpireDateInput.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 
 import { RULE_INPUT } from "constants/constants";
 import {

src/components/cardRegister/CardNumbersInput.jsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 
 export const CardSelectModal = ({
   cardTypes,
-  isValid,
   handleVisible,
   handleCardType,
   handleCardTypeCheck,

src/components/cardRegister/CardPasswordInput.jsx

@@ -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};
   }
 `;