diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..0dce8c0a
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["@babel/env", "@babel/preset-react"]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..53f7466a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
\ No newline at end of file
diff --git a/docs/TODO.md b/docs/TODO.md
new file mode 100644
index 00000000..971f8da2
--- /dev/null
+++ b/docs/TODO.md
@@ -0,0 +1,91 @@
+## 작업순서
+
+- [ ] eslint, prettier 적용하기
+- [x] 기본 라우터 세팅(react-router-dom)
+ - [x] 다음, 뒤로가기로 페이지 이동
+- [ ] Add 페이지
+ - [x] Card 컴포넌트
+ - [x] CadrForm 컴포넌트
+ - [x] input 컴포넌트 설계
+ - [x] input onChange로 값 변경하기
+ - [x] input onChage시 validation 기능 추가
+ - [x] input 입력 완료시 focus 기능 추가
+ - [ ] Modal 컴포넌트
+- [ ] Alias 페이지
+- [ ] List 페이지
+
+- StoryBook 적용
+
+- Refactoring
+ - [ ] cardData 상위컴포넌트로 위치변경
+ - [ ] cardData들 하나의 상태(formData)로 묶기
+
+## 요구사항 리스트
+
+Focus처리
+
+- [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+- [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+- [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+- [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+
+모달(카드사 선택)
+
+- [x] 카드 번호 앞 8자리가 입력되기 전에는 emptyCard를 보여준다.
+
+- [x] 카드 번호가 8자리가 입력되면, 카드사 리스트 데이터와 비교하여, 일치하는 카드사를 찾아낸다.
+
+ - 일치하는 카드사가 있다면, '카드 class를 smallcard + 카드사color'로 바꾼다
+ - 일치하는 카드사가 없다면, 카드사 선택 모달이 보여진다.
+
+- [x] 모달에서 특정 카드사 클릭 시, 해당 카드사의 color를 적용한다.
+ - color를 적용하고, 모달을 닫는다.
+- [x] dimmed된 빈 공간 클릭 시 모달을 닫는다.
+
+#### 카드 추가
+
+- [x] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [ ] 카드 번호를 입력 받을 수 있다.
+ - [x] 카드 번호는 숫자만 입력가능하다.
+ - [x] 카드 번호 4자리마다 `-`가 삽입된다.
+ - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
+ - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
+ - [x] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+ - [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+ - [x] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+ - [x] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [ ] 만료일을 입력 받을 수 있다.
+ - [x] `MM / YY` 로 placeholder를 적용한다.
+ - [x] 월, 년 사이에 자동으로 `/`가 삽입된다.
+ - [x] 만료일은 실시간으로 카드 UI에 반영된다.
+ - [x] 월은 1이상 12이하 숫자여야 한다.
+ - [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+ - [x] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 보안코드를 입력 받을 수 있다.
+ - [x] 보안코드는 `*`으로 보여진다.
+ - [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+ - [x] 보안코드는 숫자만 입력가능하다.
+ - [x] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
+ - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
+ - [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+ - [x] 카드 번호 입력 시, `*`으로 보여진다.
+ - [x] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 카드 소유자 이름을 입력 받을 수 있다.
+ - [x] 이름은 30자리까지 입력할 수 있다.
+ - [x] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+- [x] 클릭 시, 카드 등록 완료 페이지로 이동한다.
+
+### 심화 요구사항 (선택사항)
+
+- [ ] `Storybook` 단위 테스트
+- [ ] 유효성 검증 실패에 대한 UI/UX 추가
+- [ ] 카드사 선택
+ - [x] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
+ - [x] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
+- [ ] 보안코드 툴팁
+ - [ ] 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
+ - [ ] focusout 시, 툴팁이 닫힌다.
+- [ ] 가상 키보드
+ - [ ] 마스킹 처리된 값 입력시 사용
+ - [ ] 숫자를 랜덤으로 배열
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..834c1593
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,346 @@
+
+
+
+ Sample
+
+
+ React Clean Code Payments CSS example
+
+
+
+ 1️⃣ 카드 추가
+
+
+
+
+ 2️⃣ 카드 추가 - 카드사 선택
+
+
+
< 카드 추가
+
+
+
+ 클린카드
+
+
+
+
+ 1111 - 2222 - oooo - oooo
+
+
+ NAME
+ MM / YY
+
+
+
+
+
+
+
+ 카드 소유자 이름(선택)
+
+
+ 보안코드(CVC/CVV)
+
+
+ 카드 비밀번호
+
+
+ 다음
+
+
+
+
3️⃣ 카드 추가 - 입력 완료
+
+
+
< 카드 추가
+
+
+
+ 클린카드
+
+
+
+
+ 1111 - 2222 - oooo - oooo
+
+
+ YUJO
+ 12 / 23
+
+
+
+
+
+
+
+ 카드 소유자 이름(선택)
+
+
+ 보안코드(CVC/CVV)
+
+
+ 카드 비밀번호
+
+
+ 다음
+
+
+
4️⃣ 카드 추가 완료
+
+
+
+
카드등록이 완료되었습니다.
+
+
+
+
+ 클린카드
+
+
+
+
+ 1111 - 2222 - oooo - oooo
+
+
+ YUJO
+ 12 / 23
+
+
+
+
+
+
+
+ 다음
+
+
+
5️⃣ 카드 목록
+
+
+
+
보유 카드
+
+
+
+
+ 클린카드
+
+
+
+
+ 1111 - 2222 - oooo - oooo
+
+
+ YUJO
+ 12 / 23
+
+
+
+
+
법인카드
+
+
+
React Clean Code Payments
-
-
- React Clean Code Payments CSS example
-
-
-
- 1️⃣ 카드 추가
-
-
-
-
- 2️⃣ 카드 추가 - 카드사 선택
-
-
-
< 카드 추가
-
-
-
- 클린카드
-
-
-
-
- 1111 - 2222 - oooo - oooo
-
-
- NAME
- MM / YY
-
-
-
-
-
-
-
- 카드 소유자 이름(선택)
-
-
- 보안코드(CVC/CVV)
-
-
- 카드 비밀번호
-
-
- 다음
-
-
-
-
3️⃣ 카드 추가 - 입력 완료
-
-
-
< 카드 추가
-
-
-
- 클린카드
-
-
-
-
- 1111 - 2222 - oooo - oooo
-
-
- YUJO
- 12 / 23
-
-
-
-
-
-
-
- 카드 소유자 이름(선택)
-
-
- 보안코드(CVC/CVV)
-
-
- 카드 비밀번호
-
-
- 다음
-
-
-
4️⃣ 카드 추가 완료
-
-
-
-
카드등록이 완료되었습니다.
-
-
-
-
- 클린카드
-
-
-
-
- 1111 - 2222 - oooo - oooo
-
-
- YUJO
- 12 / 23
-
-
-
-
-
-
-
- 다음
-
-
-
5️⃣ 카드 목록
-
-
-
-
보유 카드
-
-
-
-
- 클린카드
-
-
-
-
- 1111 - 2222 - oooo - oooo
-
-
- YUJO
- 12 / 23
-
-
-
-
-
법인카드
-
-
-
페이먼츠 React 모바일 페이먼츠 애플리케이션
",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack-dev-server --progress --mode development",
+ "build": "webpack --progress --mode production"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/Outwater/react-payments.git"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/Outwater/react-payments/issues"
+ },
+ "homepage": "https://github.com/Outwater/react-payments#readme",
+ "dependencies": {
+ "clean-webpack-plugin": "^4.0.0",
+ "html-webpack-plugin": "^5.5.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-router-dom": "^6.2.1"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.16.7",
+ "@babel/preset-env": "^7.16.8",
+ "@babel/preset-react": "^7.16.7",
+ "babel-loader": "^8.2.3",
+ "css-loader": "^6.5.1",
+ "file-loader": "^6.2.0",
+ "style-loader": "^3.3.1",
+ "webpack": "^5.66.0",
+ "webpack-cli": "^4.9.1",
+ "webpack-dev-server": "^4.7.3"
+ }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 00000000..1fedf587
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,12 @@
+
+
+
+ React Clean Code Payments
+
+
+
+
+
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 00000000..5eb8ee0c
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import AddPage from "./pages/Add";
+import AliasPage from "./pages/Alias";
+import ListPage from "./pages/List";
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+const App = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
new file mode 100644
index 00000000..4271b1ef
--- /dev/null
+++ b/src/components/Card.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { findColor } from "../utils/index.js";
+
+const Card = ({ card }) => {
+ return card.cardName ? (
+
+
+
+ {card.cardName}
+
+
+
+
+
+ {Object.values(card.number)
+ .map((v, i) => (i >= 2 ? "*".repeat(v.length) : v))
+ .filter(Boolean)
+ .join(" - ")}
+
+
+
+ {card.userName}
+
+ {card.expire.MM}
+ {card.expire.MM.length === 2 && " / "}
+ {card.expire.YY}
+
+
+
+
+
+
+
+ {card.cardName}
+
+
+
+
+
+ {Object.values(card.number)
+ .map((v, i) => (i >= 2 ? "*".repeat(v.length) : v))
+ .filter(Boolean)
+ .join(" - ")}
+
+
+
+ {card.userName}
+
+ {card.expire.MM}
+ {card.expire.MM.length === 2 && " / "}
+ {card.expire.YY}
+
+
+
+
+
{sign} ;
+ const renderErrorLog = (target) => {
+ return (
+ errorMsg[target] && (
+ {`(${errorMsg[target]})`}
+ )
+ );
+ };
+
+ const moveNextPage = () => {
+ let isValid = true;
+ const checkNull = (data) => data.length === 0 && (isValid = false);
+
+ Object.entries(cardData).forEach(([key, value]) => {
+ if (key === "userName") return;
+
+ typeof value === "object"
+ ? Object.values(value).forEach((v) => checkNull(v))
+ : checkNull(value);
+ });
+
+ if (!isValid) {
+ return setErrorMsg({ ...errorMsg, nullCheck: ERROR_MESSAGE.nullCheck });
+ }
+ navigate("/alias");
+ };
+
+ const [modalView, setModalView] = useState(false);
+
+ useEffect(() => {
+ const { first, second } = cardData.number;
+ if (first.length !== 4 || second.length !== 4) return;
+ if (document.activeElement !== secondCardNumberRef.current) return;
+
+ const cardCompany = findCompany(first, second);
+ cardCompany
+ ? setCardData({ ...cardData, cardName: cardCompany.name })
+ : setModalView(true);
+ }, [cardData.number]);
+ return (
+ <>
+
+
+ 카드 번호 {renderErrorLog("cardNumber")}
+
+
+
+
+
+ 카드 소유자 이름(선택){` ${cardData.userName.length} / 30`}
+
+
+
+
+ 보안코드(CVC/CVV) {renderErrorLog("cvc")}
+
+
+
+
+ 카드 비밀번호{renderErrorLog("password")}
+
+
+
+
+ 다음
+
+
+ {renderErrorLog("nullCheck")}
+ {modalView && (
+ setModalView(false)}>
+
+
+ {CARD_COMPANY_DATA.map((card) => {
+ return (
+ saveCardName(card.name)}
+ />
+ );
+ })}
+
+
+
+
+
카드등록이 완료되었습니다.
+
+
Card
+
+
+
+
+
+
+
![](\"https://techcourse-storage.s3.ap-northeast-2.amazonaws.com/0fefce79602043a9b3281ee1dd8f4be6\")