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

.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

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

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 {

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

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 {

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 {

src/components/cardRegister/CardSelectModal.jsx

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

src/components/common/Button.jsx → 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};
   }
 `;

src/components/common/Card.jsx → src/components/common/Card.tsx

@@ -1,15 +1,27 @@
 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,
   cardNumbers,
   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;
 `;
 

src/components/common/Dot.jsx → 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;
 `;

src/components/common/ErrorModal.jsx → 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;
 `;

src/components/common/Form.jsx → 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>;
 };
 

src/components/common/InputBasic.jsx → 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};
   }
 `;

src/components/common/InputBox.jsx → 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"};

src/components/common/InputTitle.jsx → 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";
 `;