woowacourse · JUDONGHYEOK · Apr 23, 2025 · Apr 15, 2025 · Apr 15, 2025 · Apr 15, 2025
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="../src/index.css" rel="stylesheet" />
+
+    <title>Document</title>
+  </head>
+  <body></body>
+</html>
diff --git a/README.md b/README.md
@@ -1 +1,124 @@
 # react-payments
+
+# 기능 목록
+
+## 사용자 입력
+
+- [x] 사용자는 카드 번호를 입력할 수 있다.
+  - [x] 16자리의 입력 번호를 실시간 감지하여 알맞는 브랜드 로고를 UI에 표시한다. (Visa: 4로 시작 / MasterCard: 51~55로 시작 / 그외 로고 렌더링 x )
+  - [x] 예외: 숫자만 가능 / 16자리 / 한칸에 네 자리 -> 피드백: 빨간 border & 포커스 & 밑에 피드백 문구 출력
+- [x] 사용자는 카드 유효기간을 입력할 수 있다.
+  - [x] 예외: 숫자만 가능 / 2자리 / 월은 1~12 까지 연도 25~99까지 / 오늘 날짜를 기준으로 유효한 기간인지 검증 -> 피드백: 빨간 border & 포커스 & 밑에 피드백 문구 출력
+- [x] 사용자는 CVC 번호를 입력할 수 있다.
+  - [x] 예외: 숫자만 가능 / 3자리 -> 피드백: 빨간 border & 포커스 & 밑에 피드백 문구 출력
+
+## UI 업데이트
+
+- [x] 사용자 입력에 따라 동시에 프리뷰를 업데이트한다.
+  - [x] 입력할 때마다 한자리 단위로 실시간 업데이트
+  - [x] 카드번호에 유효한 로고 실시간 업데이트
+  - [x] 카드번호 뒷 8자리는 마스킹 처리
+
+# 테스트 목록 (Storybook)
+
+## 결제 입력 테스트 파일
+
+- ### Describe
+
+  - 사용자가 카드 정보를 입력 시
+
+  - ### Context
+
+    - 사용자가 카드 번호를 입력할 경우
+    - ### It
+
+      - 사용자가 16자리를 다 채우지 않은 채 카드번호 인풋 포커스를 이탈하면 "유효하지 않은 카드번호입니다. 16자리를 입력해주세요." 피드백을 출력한다.
+      - 한 칸에 4자리를 다 채우지 않은 채 다음 포커스 이동하면 "유효하지 않은 번호입니다. 4자리를 입력해주세요." 피드백을 출력한다.
+      - 사용자가 숫자 이외를 입력하려고 하면 "유효하지 않은 입력입니다. 숫자만 입력해주세요." 피드백을 출력한다.
+
+    - ### Context
+    - 사용자가 카드 유효 기간을 입력할 경우
+    - ### It
+
+      - 사용자가 4자리를 다 채우지 않은 채 유효기간 인풋 포커스를 이탈하면 "유효하지 않은 카드번호입니다. 16자리를 입력해주세요." 피드백을 출력한다.
+      - 한 칸에 2자리를 다 채우지 않은 채 다음 포커스 이동하면 "유효하지 않은 번호입니다. 2자리를 입력해주세요." 피드백을 출력한다.
+      - 사용자가 숫자 이외를 입력하려고 하면 "유효하지 않은 입력입니다. 숫자만 입력해주세요." 피드백을 출력한다.
+      - 사용자가 현재 날짜 이전 기간을 입력할 경우 "유효하지 않은 카드입니다. 유효 기간을 확인해주세요." 피드백을 출력한다.
+
+    - ### Context
+    - 사용자가 CVC를 입력할 경우
+      - ### It
+        - 사용자가 3자리를 다 채우지 않은 채 CVC 인풋 포커스를 이탈하면 "유효하지 않은 CVC입니다. 3자리를 입력해주세요." 피드백을 출력한다.
+        - 사용자가 숫자 이외를 입력하려고 하면 "유효하지 않은 입력입니다. 숫자만 입력해주세요." 피드백을 출력한다.
+
+## 카드 프리뷰 UI 테스트 파일
+
+- ### Describe
+  - 사용자가 카드 정보를 입력 시
+  - ### Context
+    - 사용자가 카드 번호를 입력할 경우
+    - ### It
+      - 카드 번호 첫 자리가 4로 시작하면 VISA 로고가 렌더링된다.
+      - 카드 번호 첫 자리가 51~55 로 시작하면 MasterCard 로고가 렌더링된다.
+      - 사용자가 카드번호를 입력할 시 실시간으로 카드 번호가 업데이트된다.
+      - 카드번호 뒷 8자리는 마스킹 처리하여 표시한다.
+  - ### Context
+    - 사용자가 유효 기간을 입력할 경우
+    - ### It
+      - 사용자가 유효 기간을 입력할 시 실시간으로 카드 번호가 업데이트된다.
+
+# 설계 구조
+
+## 디렉터리 구조
+
+src/utils
+src/constants
+src/styles
+src/components
+
+src/components/abc/constants
+src/components/abc/styles
+
+Dom 트리구조와 비슷한 디렉터리 설계
+src/components/paymentsLayout/paymentInput/
+src/components/common
+
+## 컴포넌트 분리
+
+```js
+src/
+├── components/
+│   ├── common/
+│   │   ├── input.ts               # validator 콜백을 받아서 input 하나를 검증
+│   │   └── inputForm.ts          # input 개수만큼 input 생성 + validator 전달
+│   │
+│   ├── paymentsInputPage/
+│   │   ├── paymentsInputPage.ts  # 카드 정보 입력 페이지의 메인 컴포넌트
+│   │   │
+│   │   ├── cardInputForm/        # 카드 입력 폼 영역
+│   │   │   ├── cardInputForm.ts          # 카드 번호, 유효기간, CVC를 포함하는 폼 컴포넌트
+│   │   │   ├── cardNumberInput/
+│   │   │   │   └── cardNumberInput.ts    # 카드 번호 입력 필드
+│   │   │   ├── cardExpirationDateInput/
+│   │   │   │   └── cardExpirationDateInput.ts  # 유효기간 입력 필드
+│   │   │   └── cardCVCInput/
+│   │   │       └── cardCVCInput.ts       # CVC 입력 필드
+│   │   │
+│   │   └── cardPreview/          # 카드 미리보기 영역
+│   │       └── cardPreview.ts    # 카드 정보 시각화 (title, description, label, inputs)
+```
+
+## 상태 관리
+
+paymentsInputPage는 cardInputForm의 상태를 cardPreview에 반영
+
+- cardInputForm 은 paymentsInputPage의 setState 콜백을 받아 자식들(card~input 컴포넌트들) 상태를 변경
+
+- paymentsInputPage는 state를 cardPreview에 전달
+  - cardPreview는 state에 따라 실시간 변경
+
+# 컨벤션
+
+## CSS 작성 방식
+
+- Module CSS
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite dev --host 0.0.0.0",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

diff --git a/public/Mastercard.png b/public/Mastercard.png
diff --git a/public/Visa.png b/public/Visa.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,9 @@
-import "./App.css";
-
+import './App.css';
+import PaymentInputPage from './components/paymentInputPage/PaymentInputPage';
 function App() {
   return (
     <>
-      <h1>React Payments</h1>
+      <PaymentInputPage />
     </>
   );
 }

diff --git a/src/color.css b/src/color.css
@@ -0,0 +1,7 @@
+:root {
+  --grey: #acacac;
+  --black: #000000;
+  --white: #ffffff;
+  --red: #ff3d3d;
+  --gold: #ddcd78;
+}
diff --git a/src/components/common/InputForm/Input/Input.module.css b/src/components/common/InputForm/Input/Input.module.css
@@ -0,0 +1,17 @@
+.input {
+  width: 100%;
+  border: 1px solid var(--grey);
+  border-radius: 4px;
+  color: var(--black);
+  padding: 12px 8px;
+  &::placeholder {
+    color: var(--grey);
+  }
+
+  &:focus {
+    border: 1px solid var(--black);
+  }
+  &.isNotValid {
+    border: 1px solid var(--red);
+  }
+}
diff --git a/src/components/common/InputForm/Input/Input.tsx b/src/components/common/InputForm/Input/Input.tsx
@@ -0,0 +1,34 @@
+import { ComponentProps, Dispatch, SetStateAction, useState } from 'react';
+import styles from './Input.module.css';
+
+export interface InputProps extends Omit<ComponentProps<'input'>, 'onChange'> {
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    setState: Dispatch<SetStateAction<boolean>>
+  ) => void;
+}
+
+function Input({
+  type,
+  onChange,
+  name,
+  id,
+  placeholder,
+  maxLength,
+}: InputProps) {
+  const [isValid, setIsValid] = useState<boolean>(true);
+
+  return (
+    <input
+      type={type}
+      name={name}
+      id={id}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      onChange={(e) => onChange(e, setIsValid)}
+      className={`${styles.input} ${!isValid && styles.isNotValid} tx-md`}
+    />
+  );
+}
+
+export default Input;
diff --git a/src/components/common/InputForm/InputForm.module.css b/src/components/common/InputForm/InputForm.module.css
@@ -0,0 +1,43 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.inputForm {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.inputContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  color: var(--black);
+}
+
+.titleBox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & p {
+    color: var(--grey);
+  }
+}
+
+.feedbackMessage {
+  color: var(--red);
+  height: 18px;
+}
diff --git a/src/components/common/InputForm/InputForm.tsx b/src/components/common/InputForm/InputForm.tsx
@@ -0,0 +1,38 @@
+import styles from './InputForm.module.css';
+
+export interface InputFormProps {
+  title: string;
+  label: string;
+  description?: string;
+  feedbackMessage?: string;
+  children: React.ReactNode;
+}
+
+function InputForm(props: InputFormProps) {
+  const { title, label, description, feedbackMessage } = props;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBox}>
+        <h3 className='tx-xl'>{title}</h3>
+        {description && <p className='tx-md'>{description}</p>}
+      </div>
+      <div className={styles.inputBox}>
+        <label className='tx-lg'>{label}</label>
+        <div className={styles.inputContainer}>{props.children}</div>
+        <p
+          style={
+            feedbackMessage
+              ? { visibility: 'visible' }
+              : { visibility: 'hidden' }
+          }
+          className={`${styles.feedbackMessage}`}
+        >
+          {feedbackMessage}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default InputForm;
diff --git a/src/components/paymentInputPage/PaymentInputPage.module.css b/src/components/paymentInputPage/PaymentInputPage.module.css
@@ -0,0 +1,16 @@
+.section {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.container {
+  width: 390px;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid var(--grey);
+  border-radius: 4px;
+  padding: 28px;
+  gap: 40px;
+}
diff --git a/src/components/paymentInputPage/PaymentInputPage.tsx b/src/components/paymentInputPage/PaymentInputPage.tsx
@@ -0,0 +1,26 @@
+import CardPreview from './cardPreview/CardPreview';
+import CardInputForm from './cardInputForm/CardInputForm';
+import styles from './PaymentInputPage.module.css';
+import { useState } from 'react';
+
+function PaymentInputPage() {
+  const [cardNumbers, setCardNumbers] = useState<string[]>([]);
+  const [expirationDate, setExpirationDate] = useState<string[]>([]);
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.container}>
+        <CardPreview
+          cardNumbers={cardNumbers}
+          expirationDate={expirationDate}
+        />
+        <CardInputForm
+          setCardNumbers={setCardNumbers}
+          setExpirationDate={setExpirationDate}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default PaymentInputPage;
diff --git a/src/components/paymentInputPage/cardInputForm/CardInputForm.module.css b/src/components/paymentInputPage/cardInputForm/CardInputForm.module.css
@@ -0,0 +1,5 @@
+.cardInputForm {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+}
diff --git a/src/components/paymentInputPage/cardInputForm/CardInputForm.tsx b/src/components/paymentInputPage/cardInputForm/CardInputForm.tsx
@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import CardCVCInput from './cardInput/CardCVCInput';
+import CardExpirationDateInput from './cardInput/CardExpirationDateInput';
+import CardNumberInput from './cardInput/CardNumberInput';
+import styles from './cardInputForm.module.css';
+
+interface CardInputFormProps {
+  setCardNumbers: Dispatch<SetStateAction<string[]>>;
+  setExpirationDate: Dispatch<SetStateAction<string[]>>;
+}
+
+function CardInputForm({
+  setCardNumbers,
+  setExpirationDate,
+}: CardInputFormProps) {
+  return (
+    <div className={styles.cardInputForm}>
+      <CardNumberInput setCardNumbers={setCardNumbers} />
+      <CardExpirationDateInput setExpirationDate={setExpirationDate} />
+      <CardCVCInput />
+    </div>
+  );
+}
+export default CardInputForm;