+ {cardError.numbers
+ ? getFirstErrorMessage(cardError.numbers)
+ : EMPTY_STRING}
+
+ }
+
+
+ handleExpirationDateBlur(
+ key as keyof CardFormError["expirationDate"],
+ e
+ )
+ }
+ />
+ ))}
+
+ {
+
+ {cardError.expirationDate
+ ? getFirstExpirationErrorMessage(cardError.expirationDate)
+ : EMPTY_STRING}
+
+ }
+
+
+
+
+ {
+
+ {cardError.owner ? cardError.owner.errorMessage : EMPTY_STRING}
+
+ }
+
+ );
+}
+
+export default Home;
diff --git a/src/styles/Card.module.css b/src/styles/Card.module.css
new file mode 100644
index 0000000000..d75375ff5e
--- /dev/null
+++ b/src/styles/Card.module.css
@@ -0,0 +1,37 @@
+.card {
+ width: 220px;
+ height: 120px;
+ margin-left: 40px;
+ background-color: #333333;
+ border-radius: 4px;
+}
+
+.logo {
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ margin-top: 4px;
+}
+
+.card-detail {
+ color: white;
+ margin: 0;
+ padding: 4px;
+ font-size: 14px;
+ margin-left: 10px;
+}
+
+.card-ic {
+ width: 30px;
+ height: 18px;
+ background-color: #ddcd78;
+ border-radius: 3px;
+ margin-left: 10px;
+ margin-top: 4px;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/src/styles/CardForm.module.css b/src/styles/CardForm.module.css
new file mode 100644
index 0000000000..4f6ed28c87
--- /dev/null
+++ b/src/styles/CardForm.module.css
@@ -0,0 +1,27 @@
+.label {
+ margin-top: 40px;
+ margin-bottom: 4px;
+}
+
+.caption {
+ color: gray;
+ font-size: 12px;
+ margin: 0;
+ padding: 0;
+}
+
+.form-label {
+ color: black;
+ font-size: 14px;
+}
+
+.error {
+ color: red;
+ height: 0.1rem;
+ font-size: 0.75rem;
+}
+
+.none {
+ height: 0.1rem;
+ font-size: 0.75rem;
+}
diff --git a/src/styles/CardFormInput.module.css b/src/styles/CardFormInput.module.css
new file mode 100644
index 0000000000..290b5fea45
--- /dev/null
+++ b/src/styles/CardFormInput.module.css
@@ -0,0 +1,14 @@
+.inputBox {
+ padding: 8px;
+ border-radius: 4px;
+ border: 1.6px solid #ccc;
+ margin-right: 10px;
+}
+
+.error-inputBox {
+ border-color: red;
+}
+
+.not-error-inputBox {
+ border-color: #d5d5d5;
+}
diff --git a/src/types/cardTypes.ts b/src/types/cardTypes.ts
new file mode 100644
index 0000000000..0aebe7742b
--- /dev/null
+++ b/src/types/cardTypes.ts
@@ -0,0 +1,24 @@
+import { INPUTS } from "../constants";
+
+export type InputName = (typeof INPUTS)[keyof typeof INPUTS];
+
+export type ChangeEvent = React.ChangeEvent & {
+ target: {
+ name: InputName;
+ value: string;
+ };
+};
+
+export type CardData = {
+ numbers: {
+ firstBlock: string;
+ secondBlock: string;
+ thirdBlock: string;
+ fourthBlock: string;
+ };
+ expirationDate: {
+ month: string;
+ year: string;
+ };
+ owner: string;
+};
diff --git a/src/types/errorTypes.ts b/src/types/errorTypes.ts
new file mode 100644
index 0000000000..fe8aab8553
--- /dev/null
+++ b/src/types/errorTypes.ts
@@ -0,0 +1,20 @@
+export interface ErrorType {
+ hasError: boolean;
+ errorMessage: string;
+}
+export interface CardNumberErrorType extends ErrorType {
+ isDisable: boolean;
+}
+export type CardFormError = {
+ numbers: {
+ firstBlock: CardNumberErrorType;
+ secondBlock: CardNumberErrorType;
+ thirdBlock: CardNumberErrorType;
+ fourthBlock: CardNumberErrorType;
+ };
+ expirationDate: {
+ month: ErrorType;
+ year: ErrorType;
+ };
+ owner: ErrorType;
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000000..7d313ac1b1
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./cardTypes";
+export * from "./errorTypes";
diff --git a/src/utils/cardNumberValidators.tsx b/src/utils/cardNumberValidators.tsx
new file mode 100644
index 0000000000..3560513699
--- /dev/null
+++ b/src/utils/cardNumberValidators.tsx
@@ -0,0 +1,116 @@
+import {
+ ERROR_MESSAGE,
+ CARD_LOGO_NUMBER,
+ MASK_SYMBOL,
+ CARD_PREFIX_LENGTH,
+ CARD_NUMBER_MAX_LENGTH,
+ EMPTY_STRING,
+ CARD_INFORMATION,
+} from "../constants";
+import { isOnlyNumber } from "./validationUtils";
+import visa from "../assets/Visa.svg";
+import master from "../assets/Mastercard.svg";
+import { CardFormError, CardData, CardNumberErrorType } from "../types";
+
+// Visa ๋๋ Master ๋ก๊ณ ์ค์
+export const setCardLogo = (value: string): string => {
+ if (value.slice(0, CARD_PREFIX_LENGTH.VISA) === CARD_LOGO_NUMBER.VISA_NUMBER)
+ return visa;
+ const first = Number(value.slice(0, CARD_PREFIX_LENGTH.MASTER));
+ if (
+ CARD_LOGO_NUMBER.MASTER_MIN_NUMBER <= first &&
+ first <= CARD_LOGO_NUMBER.MASTER_MAX_NUMBER
+ )
+ return master;
+ return EMPTY_STRING;
+};
+
+// ์ซ์๋ฅผ 'โ' ์ฒ๋ฆฌ
+export const hideNumber = (value: string): string =>
+ value.replace(/[0-9]/g, MASK_SYMBOL);
+
+// ์นด๋ ๋ฒํธ ๊ฒ์ฆ
+export const validCardNumbers = (block: string): CardNumberErrorType => {
+ if (!isOnlyNumber(block))
+ return {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.ONLY_NUMBER,
+ isDisable: false,
+ };
+
+ return {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ isDisable: false,
+ };
+};
+
+// ํด๋น ๋ธ๋ก์ด ์ซ์๋ก ์ ๋ถ ์ฑ์์ก๋์ง ํ์ธ
+const isBlockFilledWithNumbers = (numbers: string, length: number): boolean => {
+ return numbers.length === length;
+};
+
+// ์ด์ ๋ธ๋ก์ ๊ฐ์ด ์ซ์๋ก ์ ๋ถ ์ฑ์์ก๋์ง ํ์ธ
+const validBlockIsFull = (
+ prevBlock: string,
+ currentBlock: string
+): CardNumberErrorType => {
+ const isPrevFilled = isBlockFilledWithNumbers(
+ prevBlock,
+ CARD_NUMBER_MAX_LENGTH
+ );
+ const isCurrentFilled = isBlockFilledWithNumbers(
+ currentBlock,
+ CARD_NUMBER_MAX_LENGTH
+ );
+
+ return {
+ hasError: !isPrevFilled || !isCurrentFilled,
+ errorMessage:
+ !isPrevFilled || !isCurrentFilled
+ ? ERROR_MESSAGE.REQUIRE_FOUR_DIGIT_NUMBER
+ : EMPTY_STRING,
+ isDisable: !isPrevFilled,
+ };
+};
+
+// ์นด๋ ๋ฒํธ ๋ธ๋ก ๊ฒ์ฆ
+export const validCardNumbersBlock = (
+ cardNumbers: CardData["numbers"]
+): CardFormError["numbers"] => {
+ const result: CardFormError["numbers"] = {
+ firstBlock: {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ isDisable: false,
+ },
+ secondBlock: {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ isDisable: false,
+ },
+ thirdBlock: {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ isDisable: false,
+ },
+ fourthBlock: {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ isDisable: false,
+ },
+ };
+
+ const cardNumberKeys = CARD_INFORMATION.CARD_NUMBER_BLOCK;
+
+ cardNumberKeys.forEach((key, index) => {
+ if (index === 0) return;
+
+ result[key] = validBlockIsFull(
+ cardNumbers[cardNumberKeys[index - 1]],
+ cardNumbers[cardNumberKeys[index]]
+ );
+ });
+
+ return result;
+};
diff --git a/src/utils/errorHelpers.tsx b/src/utils/errorHelpers.tsx
new file mode 100644
index 0000000000..004b40488d
--- /dev/null
+++ b/src/utils/errorHelpers.tsx
@@ -0,0 +1,27 @@
+import type { CardFormError } from "../types";
+import { EMPTY_STRING, CARD_INFORMATION } from "../constants";
+
+// ์ ํจ๊ธฐ๊ฐ ๊ฒ์ฆ์์ ๊ฐ์ฅ ์ฒซ๋ฒ์งธ ์๋ฌ ๋ฉ์์ง ๋ฐํ
+export const getFirstExpirationErrorMessage = (
+ error: CardFormError["expirationDate"]
+): string => {
+ for (const field of CARD_INFORMATION.EXPIRATION_DATE) {
+ if (error[field].hasError) {
+ return error[field].errorMessage;
+ }
+ }
+ return EMPTY_STRING;
+};
+
+// ์นด๋๋ฒํธ ๊ฒ์ฆ์์ ๊ฐ์ฅ ์ฒซ๋ฒ์งธ ์๋ฌ ๋ฉ์์ง ๋ฐํ
+export const getFirstErrorMessage = (
+ error: CardFormError["numbers"]
+): string => {
+ for (const field of CARD_INFORMATION.CARD_NUMBER_BLOCK) {
+ if (error[field].hasError) {
+ return error[field].errorMessage;
+ }
+ }
+
+ return EMPTY_STRING;
+};
diff --git a/src/utils/expirationDateValidators.tsx b/src/utils/expirationDateValidators.tsx
new file mode 100644
index 0000000000..eed9723891
--- /dev/null
+++ b/src/utils/expirationDateValidators.tsx
@@ -0,0 +1,110 @@
+import { ERROR_MESSAGE, EMPTY_STRING } from "../constants";
+import { isOnlyNumber } from "./validationUtils";
+import type { ErrorType, CardFormError } from "../types";
+
+// ์ค๋ ๋ ์ง, ์ฐ๋, ์
+const today: Date = new Date();
+const currentYear: number = today.getFullYear();
+const currentMonth: number = today.getMonth() + 1;
+
+// ์
๋ ฅํ 2์๋ฆฌ ์ฐ๋๋ฅผ 4์๋ฆฌ ์ฐ๋๋ก ๋ณ๊ฒฝ
+const convertYear = (year: number): number =>
+ Math.floor(currentYear / 100) * 100 + year;
+
+// ์ซ์ ํ์๋ฆฌ ์
๋ ฅ ์ ๋์๋ฆฌ ๋ฐํ
+const convertTwoLength = (date: string): string => {
+ return date.length === 1 ? `0${date}` : date;
+};
+
+// 2๊ธ์๋ฅผ ์
๋ ฅํ๋์ง ๊ฒ์ฆ
+const isLengthTwo = (value: string): boolean => value.length === 2;
+
+// ์
๋ ฅํ ๋ฌ์ด 1์๋ถํฐ 12์ ์ฌ์ด์ธ์ง ๊ฒ์ฆ
+const isInValidMonthRange = (month: number): boolean =>
+ month >= 1 && month <= 12;
+
+// ์ ํจ๊ธฐ๊ฐ์ด ์ง๋ฌ๋์ง ํ์ธ
+const isNotPastDate = (month: number, year: number): boolean => {
+ const inputDate: Date = new Date(year, month - 1, 1);
+ return inputDate >= today;
+};
+
+// ์ ํจ๊ธฐ๊ฐ์ด 10๋
์ด๋ด์ธ์ง ํ์ธ
+const isOverMaxValidYear = (month: number, year: number): boolean => {
+ const tenYearsLaterDate = new Date(currentYear + 10, currentMonth - 1, 1);
+ const inputDate = new Date(year, month - 1, 1);
+
+ return inputDate <= tenYearsLaterDate;
+};
+
+// ์ ํจ๊ธฐ๊ฐ์ ์
๋ ฅํ '์(Month)' ๊ฒ์ฆ
+const validExpirationMonth = (inputMonth: string): ErrorType => {
+ if (!isOnlyNumber(inputMonth))
+ return { hasError: true, errorMessage: ERROR_MESSAGE.ONLY_NUMBER };
+
+ if (!isLengthTwo(convertTwoLength(inputMonth)))
+ return { hasError: true, errorMessage: ERROR_MESSAGE.MIN_LENGTH_TWO };
+
+ if (!isInValidMonthRange(Number(inputMonth)))
+ return { hasError: true, errorMessage: ERROR_MESSAGE.VALID_MONTH_RANGE };
+
+ return { hasError: false, errorMessage: EMPTY_STRING };
+};
+
+// ์ ํจ๊ธฐ๊ฐ์ ์
๋ ฅํ '์ฐ๋(Year)' ๊ฒ์ฆ
+const validExpirationYear = (inputYear: string): ErrorType => {
+ if (!isOnlyNumber(inputYear))
+ return { hasError: true, errorMessage: ERROR_MESSAGE.ONLY_NUMBER };
+
+ if (!isLengthTwo(convertTwoLength(inputYear)))
+ return { hasError: true, errorMessage: ERROR_MESSAGE.MIN_LENGTH_TWO };
+
+ return { hasError: false, errorMessage: EMPTY_STRING };
+};
+
+// ์ ํจ๊ธฐ๊ฐ ๊ฒ์ฆ ํ ์๋ฌํ์
๋ฐํ
+export const validExpirationDate = (
+ inputMonth: string,
+ inputYear: string
+): CardFormError["expirationDate"] => {
+ const monthError: ErrorType = validExpirationMonth(inputMonth);
+ const yearError: ErrorType = validExpirationYear(inputYear);
+
+ if (monthError.hasError || yearError.hasError)
+ return {
+ month: monthError,
+ year: yearError,
+ };
+
+ const monthNumber: number = Number(inputMonth);
+ const yearNumber: number = convertYear(Number(inputYear));
+
+ if (!isNotPastDate(monthNumber, yearNumber))
+ return {
+ month: {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.PAST_DATE,
+ },
+ year: {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.PAST_DATE,
+ },
+ };
+
+ if (!isOverMaxValidYear(monthNumber, yearNumber))
+ return {
+ month: {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.OVER_MAX_VALID_YEAR,
+ },
+ year: {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.OVER_MAX_VALID_YEAR,
+ },
+ };
+
+ return {
+ month: monthError,
+ year: yearError,
+ };
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000000..13251a7b58
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,6 @@
+export * from "./inputFilters";
+export * from "./ownerNameValidators";
+export * from "./expirationDateValidators";
+export * from "./cardNumberValidators";
+export * from "./errorHelpers";
+export * from "./validationUtils";
diff --git a/src/utils/inputFilters.tsx b/src/utils/inputFilters.tsx
new file mode 100644
index 0000000000..dea0fd899b
--- /dev/null
+++ b/src/utils/inputFilters.tsx
@@ -0,0 +1,16 @@
+import { EMPTY_STRING } from "../constants";
+
+// ๋๋ฌธ์๋ก ๋ณ๊ฒฝ
+export const formatStringToUpper = (text: string): string => text.toUpperCase();
+
+// ์ซ์๋ง ์
๋ ฅ ๊ฐ๋ฅ
+export const onInputOnlyNumber = (event: React.FormEvent) => {
+ const input = event.currentTarget;
+ input.value = input.value.replace(/[^0-9]/g, EMPTY_STRING);
+};
+
+// ๋ฌธ์๋ง ์
๋ ฅ ๊ฐ๋ฅ
+export const onInputOnlyString = (event: React.FormEvent) => {
+ const input = event.currentTarget;
+ input.value = input.value.replace(/[^a-zA-Z]/g, EMPTY_STRING);
+};
diff --git a/src/utils/ownerNameValidators.tsx b/src/utils/ownerNameValidators.tsx
new file mode 100644
index 0000000000..db104d4cca
--- /dev/null
+++ b/src/utils/ownerNameValidators.tsx
@@ -0,0 +1,27 @@
+import { ERROR_MESSAGE, EMPTY_STRING } from "../constants";
+import type { ErrorType } from "../types";
+
+// ์๋ฌธ๋ง ์
๋ ฅํ๋์ง ๊ฒ์ฆ
+const isEnglishOnly = (text: string): boolean => /^[A-Za-z\s]+$/.test(text);
+
+// ์ต์ ๋๊ธ์ ์ด์์ธ์ง ๊ฒ์ฆ
+const isMinLength = (text: string): boolean => text.length >= 2;
+
+// ์์ ์ ์ด๋ฆ ๊ฒ์ฆ ํ ์๋ฌ ๋ฐํ
+export const validOwnerName = (text: string): ErrorType => {
+ if (!isEnglishOnly(text))
+ return {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.ONLY_ENGLISH,
+ };
+ if (!isMinLength(text))
+ return {
+ hasError: true,
+ errorMessage: ERROR_MESSAGE.MIN_LENGTH_REQUIRED,
+ };
+
+ return {
+ hasError: false,
+ errorMessage: EMPTY_STRING,
+ };
+};
diff --git a/src/utils/validationUtils.tsx b/src/utils/validationUtils.tsx
new file mode 100644
index 0000000000..43d73eb30a
--- /dev/null
+++ b/src/utils/validationUtils.tsx
@@ -0,0 +1,4 @@
+// ์ซ์๋ง ์
๋ ฅํ๋์ง ๊ฒ์ฆ
+export const isOnlyNumber = (inputValue: string): boolean => {
+ return /^[0-9]+$/.test(inputValue);
+};
+ ) : (
+
+ )}
+