{title}
+ {closeButtonPosition === "top" && ( +
+
+
+ ),
+ ],
+ argTypes: {
+ modalPosition: {
+ description: "모달의 위치",
+ control: {
+ type: "radio",
+ options: ["center", "bottom"],
+ },
+ },
+ title: {
+ description: "모달의 제목",
+ },
+ closeButtonPosition: {
+ description: "닫기 버튼의 위치",
+ control: {
+ type: "radio",
+ options: ["top", "bottom"],
+ },
+ },
+ children: {
+ description: "모달의 내용",
+ control: {
+ type: "text",
+ },
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObjHooks Modules
+
+
+ handleCardHolderChange(e.target.value)}
+ />
+ {!cardHolderValidation.isValid && (
+ {cardHolderValidation.errorMessage}
+ )}
+
+
+
+
+ handleCardPasswordChange(e.target.value)}
+ />
+ {!cardPasswordValidation.isValid && (
+ {cardPasswordValidation.errorMessage}
+ )}
+
+
+
+
+ handleCardCVCChange(e.target.value)}
+ />
+ {!cardCVCValidation.isValid && (
+ {cardCVCValidation.errorMessage}
+ )}
+
+
+
+
+ handleCardExpiryDateChange("month", e.target.value)}
+ />
+ handleCardExpiryDateChange("year", e.target.value)}
+ />
+ {!cardExpiryDateValidation.isValid && (
+ {cardExpiryDateValidation.errorMessage}
+ )}
+
+
+
+
+ {cardNumberKeys.map((key, index) => (
+ handleCardNumbersChange(key, e.target.value)}
+ />
+ ))}
+ {!cardNumbersValidation.isValid && (
+ {cardNumbersValidation.errorMessage}
+ )}
+
+
+
+
+
);
}
diff --git a/hooks/src/lib/constants/errorMessage.ts b/hooks/src/lib/constants/errorMessage.ts
new file mode 100644
index 000000000..2fdaa65fd
--- /dev/null
+++ b/hooks/src/lib/constants/errorMessage.ts
@@ -0,0 +1,25 @@
+export const ERROR_MESSAGE = {
+ NO_INPUT: "입력필드는 비어있을 수 없습니다.",
+ CARD_HOLDER: {
+ INVALID_CHARACTERS: "카드 소유자 이름은 영어 대문자와 공백만 입력 가능합니다.",
+ MAX_LENGTH_EXCEEDED: "카드 소유자 이름은 공백 포함 15자까지만 입력 가능합니다.",
+ },
+ CARD__NUMBER: {
+ INVALID_NUMBERS: "카드 번호는 숫자만 입력 가능합니다.",
+ MAX_LENGTH_EXCEEDED: "카드 번호는 4자리까지만 입력 가능합니다.",
+ },
+ CARD_CVC: {
+ INVALID_CHARACTERS: "카드 CVC는 숫자만 입력 가능합니다.",
+ MAX_LENGTH_EXCEEDED: "카드 CVC는 3자리까지만 입력 가능합니다.",
+ },
+ CARD_EXPIRY_DATE: {
+ INVALID_MONTH_FORMAT: "카드 유효기간의 월은 숫자만 입력 가능합니다.",
+ MONTH_OUT_OF_RANGE: "카드 유효기간의 월은 1부터 12까지만 입력 가능합니다.",
+ INVALID_YEAR_FORMAT: "카드 유효기간의 년은 숫자만 입력 가능합니다.",
+ EXPIRED_CARD: "카드 유효기간이 만료되었습니다.",
+ },
+ CARD_PASSWORD: {
+ INVALID_CHARACTERS: "카드 비밀번호는 숫자만 입력 가능합니다.",
+ MAX_LENGTH_EXCEEDED: "카드 비밀번호는 2자리까지만 입력 가능합니다.",
+ },
+};
diff --git a/hooks/src/lib/hooks/useCVC.ts b/hooks/src/lib/hooks/useCVC.ts
new file mode 100644
index 000000000..36bb67ec5
--- /dev/null
+++ b/hooks/src/lib/hooks/useCVC.ts
@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { ValidationResult } from "../../type";
+import { ERROR_MESSAGE } from "../constants/errorMessage";
+
+export function useCVC(): [string, (value: string) => void, ValidationResult] {
+ const [password, setPassword] = useState("");
+ const [isTouched, setIsTouched] = useState(false);
+
+ function validatePassword(value: string): ValidationResult {
+ // 인풋을 클릭했지만 아무런 입력이 없다면 에러 발생
+ if (isTouched && value === "") {
+ return { isValid: false, errorMessage: ERROR_MESSAGE.NO_INPUT };
+ }
+
+ // 입력된 문자열이 숫자가 아니라면 에러 발생
+ if (!/^\d+$/.test(value) && isTouched) {
+ return { isValid: false, errorMessage: ERROR_MESSAGE.CARD_CVC.INVALID_CHARACTERS };
+ }
+
+ // 입력된 문자열이 1부터 999 사이의 3자리가 아니라면 에러 발생
+ if (!/^\d{3}$/.test(value) && isTouched) {
+ return { isValid: false, errorMessage: ERROR_MESSAGE.CARD_CVC.MAX_LENGTH_EXCEEDED };
+ }
+
+ return { isValid: true };
+ }
+
+ function handlePasswordChange(value: string) {
+ if (!isTouched) setIsTouched(true);
+ setPassword(value);
+ }
+
+ return [password, handlePasswordChange, validatePassword(password)];
+}
diff --git a/hooks/src/lib/hooks/useCardHolder.ts b/hooks/src/lib/hooks/useCardHolder.ts
new file mode 100644
index 000000000..ef722c5f6
--- /dev/null
+++ b/hooks/src/lib/hooks/useCardHolder.ts
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { ValidationResult } from "../../type";
+import { ERROR_MESSAGE } from "../constants/errorMessage";
+
+export function useCardHolder(): [string, (value: string) => void, ValidationResult] {
+ const [cardHolder, setCardHolder] = useState("");
+ const [isTouched, setIsTouched] = useState(false);
+
+ function validateCardHolder(value: string): ValidationResult {
+ // 인풋을 클릭했지만 아무런 입력이 없다면 에러 발생
+ if (isTouched && value === "") {
+ return { isValid: false, errorMessage: ERROR_MESSAGE.NO_INPUT };
+ }
+
+ // 입력된 문자열이 영어 대문자와 공백이 아니라면 에러 발생
+ if (!/^[A-Z\s]*$/.test(value) && isTouched) {
+ return {
+ isValid: false,
+ errorMessage: ERROR_MESSAGE.CARD_HOLDER.INVALID_CHARACTERS,
+ };
+ }
+
+ // 입력된 문자열의 길이가 공백 포함 15글자를 넘어가면 에러 발생
+ if (value.length > 15 && isTouched) {
+ return {
+ isValid: false,
+ errorMessage: ERROR_MESSAGE.CARD_HOLDER.MAX_LENGTH_EXCEEDED,
+ };
+ }
+
+ return { isValid: true };
+ }
+
+ function handleCardHolderChange(value: string) {
+ if (!isTouched) setIsTouched(true);
+ setCardHolder(value);
+ }
+
+ return [cardHolder, handleCardHolderChange, validateCardHolder(cardHolder)];
+}
diff --git a/hooks/src/lib/hooks/useCardIssuer.ts b/hooks/src/lib/hooks/useCardIssuer.ts
new file mode 100644
index 000000000..a4bbb0d21
--- /dev/null
+++ b/hooks/src/lib/hooks/useCardIssuer.ts
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { ValidationResult } from "../../type";
+import { ERROR_MESSAGE } from "../constants/errorMessage";
+
+export function useCardIssuer(): [string, (value: string) => void, ValidationResult] {
+ const [cardIssuer, setCardIssuer] = useState("");
+ const [isTouched, setIsTouched] = useState(false);
+
+ function validateCardIssuer(value: string): ValidationResult {
+ // 인풋을 클릭했지만 아무런 입력이 없다면 에러 발생
+ if (isTouched && value === "") {
+ return { isValid: false, errorMessage: ERROR_MESSAGE.NO_INPUT };
+ }
+
+ return { isValid: true };
+ }
+
+ function handleCardIssuerChange(value: string) {
+ if (!isTouched) setIsTouched(true);
+ setCardIssuer(value);
+ }
+
+ return [cardIssuer, handleCardIssuerChange, validateCardIssuer(cardIssuer)];
+}
diff --git a/hooks/src/lib/hooks/useCardNumber.ts b/hooks/src/lib/hooks/useCardNumber.ts
new file mode 100644
index 000000000..b75331b58
--- /dev/null
+++ b/hooks/src/lib/hooks/useCardNumber.ts
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { ValidationResult } from "../../type";
+import { ERROR_MESSAGE } from "../constants/errorMessage";
+
+type CardNumbers = {
+ first: string;
+ second: string;
+ third: string;
+ fourth: string;
+};
+
+type TouchedState = {
+ [key in keyof CardNumbers]: boolean;
+};
+
+export function useCardNumber(): [
+ CardNumbers,
+ (option: keyof CardNumbers, value: string) => void,
+ ValidationResult
+] {
+ const [cardNumbers, setCardNumbers] = useState
+ {cardNames.map((name) => (
+
+ {!cardIssuerValidation.isValid && (
+ {cardIssuerValidation.errorMessage}
+ )}
+ handleCardIssuerChange(cardIssuer === name ? "" : name)}
+ style={{
+ display: "inline-block",
+ padding: "8px",
+ border: `2px solid ${cardIssuer === name ? "blue" : "gray"}`,
+ borderRadius: "4px",
+ margin: "5px",
+ cursor: "pointer",
+ }}
+ >
+ {name}
+
+ ))}
+