-
-
React 모바일 페이먼츠 애플리케이션
- - - -# 미션 키워드 -- Component -- Props -- Controlled & Uncontrolled Components -- Storybook -- Hooks API -- Context API - -# Step1 - Component-Driven Development -## 🚀 Getting Started -> `Component-Driven Development` 에 따라 UI를 구성하고 재사용 가능한 `Component`를 작성합니다. - -✔️ `모바일 타겟`의 웹 앱을 구현하며 사용하기 `편리한 모바일 UI/UX`에 대해 고민해봅니다. -✔️ 다른 라이브러리나 프레임워크 없이 오로지 `React`만으로 상태를 관리하고 컴포넌트를 설계합니다. -✔️ `재사용 가능한 Component`를 직접 작성하고 사용합니다. -✔️ `Controlled` & `Uncontrolled Components`에 입각하여 `Form`을 핸들링합니다. -✔️ [Github Repository](https://github.com/next-step/react-payments) - -## 📝 Requirements -### 필수 요구사항 -- [ ] `Storybook` 상호 작용 테스트 -- [ ] `재사용 가능한 Component` 작성 -#### 카드 추가 -- [ ] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다. -- [ ] 카드 번호를 입력 받을 수 있다. - - [ ] 카드 번호입력 폼에 라벨을 보여준다. - - [ ] 카드 번호는 숫자만 입력가능하다. - - [ ] 카드 번호 4자리마다 `-`가 삽입된다. - - [ ] 카드 번호는 실시간으로 카드 UI에 반영된다. - - [ ] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다. - - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다. - - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다. - - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다. - - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다. -- [ ] 만료일을 입력 받을 수 있다. - - [ ] 만료일 입력 폼에 라벨을 보여준다. - - [ ] `MM / YY` 로 placeholder를 적용한다. - - [ ] 월, 년 사이에 자동으로 `/`가 삽입된다. - - [ ] 만료일은 실시간으로 카드 UI에 반영된다. - - [ ] 월은 1이상 12이하 숫자여야 한다. - - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다 - - [ ] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다. -- [ ] 보안코드를 입력 받을 수 있다. - - [ ] 카드 보안코드 입력 폼에 라벨을 보여준다. - - [ ] 보안코드는 `*`으로 보여진다. - - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다. - - [ ] 보안코드는 숫자만 입력가능하다. - - [ ] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다. -- [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다. - - [ ] 카드 비밀번호 입력 폼에 라벨을 보여준다. - - [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다. - - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다. - - [ ] 카드 번호 입력 시, `*`으로 보여진다. - - [ ] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다. -- [ ] 카드 소유자 이름을 입력 받을 수 있다. - - [ ] 카드 소유자 이름 입력 폼 라벨을 보여준다. - - [ ] 이름은 30자리까지 입력할 수 있다. - - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다. -- [ ] 클릭 시, 카드 등록 완료 페이지로 이동한다. -### 심화 요구사항 (선택사항) -- [ ] `Storybook` 단위 테스트 -- [ ] 유효성 검증 실패에 대한 UI/UX 추가 -- [ ] 카드사 선택 - - [ ] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다. - - [ ] 카드사를 선택하지 않아도 모달을 닫을 수 있다. -- [ ] 보안코드 툴팁 - - [ ] 클릭 시, 보안코드 관련 안내 메시지를 보여준다. - - [ ] focusout 시, 툴팁이 닫힌다. -- [ ] 가상 키보드 - - [ ] 마스킹 처리된 값 입력시 사용 - - [ ] 숫자를 랜덤으로 배열 - -# Step2 - Controlled & Uncontrolled Components + Context API -## 🚀 Getting Started -> `Component-Driven Development` 에 따라 UI를 구성하고 재사용 가능한 `Component`를 작성합니다. - -✔️ `모바일 타겟`의 웹 앱을 구현하며 사용하기 `편리한 모바일 UI/UX`에 대해 고민해봅니다. -✔️ 다른 라이브러리나 프레임워크 없이 오로지 `React`만으로 상태를 관리하고 컴포넌트를 설계합니다. -✔️ React `Context API`를 활용합니다. -✔️ `재사용 가능한 Component`를 직접 작성하고 사용합니다. -✔️ `Controlled` & `Uncontrolled Components`에 입각하여 `Form`을 핸들링합니다. -✔️ [Github Repository](https://github.com/next-step/react-payments) -## 📝 Requirements -### 필수 요구사항 -- [ ] `Storybook` 상호 작용 테스트 -- [ ] `Controlled` & `Uncontrolled Components`에 입각하여 `Form` 핸들링 -- [ ] `Context API`를 활용해 전역 상태 관리 및 계층 재구성 -#### 카드 추가 확인 -- [ ] 이전 폼에서 입력된 카드를 보여준다. -- [ ] 카드 별칭을 입력할 수 있다. - - [ ] placeholder는 `카드 별칭 (선택)`이다. - - [ ] 빈 입력값인 경우, 카드사 이름이 별칭으로 저장된다. - - [ ] 최대 길이는 10자리이다. -- [ ] 확인 버튼을 누르면, 카드 목록 페이지로 이동한다. -#### 카드 목록 -- [ ] 카드 목록을 조회할 수 있다. -- [ ] 카드 목록은 최신순(내림차순)으로 정렬된다. -- [ ] 목록 최상단에 `+`을 누르면 카드 추가 페이지로 이동한다. -- [ ] 카드를 클릭하면, 카드 별칭 수정(카드 추가 완료 페이지)로 이동한다. -- [ ] 카드를 삭제할 수 있다. -### 선택 요구사항 -- [ ] `Storybook` 스냅샷 테스트 -- [ ] 비동기 통신 - - [ ] 다양한 도구를 활용 (예 JSON Server, Strapi 등등) - - [ ] 등록된 카드 정보를 CRUD 합니다. -- [ ] 나열된 카드 클릭시 `카드 추가 확인` 화면 재활용 - - [ ] 별칭 수정 가능 diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000..9df38515 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,11 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ], + plugins: [] + }; +}; \ No newline at end of file diff --git a/dist/bundle.js b/dist/bundle.js new file mode 100644 index 00000000..0b60fc08 --- /dev/null +++ b/dist/bundle.js @@ -0,0 +1,32 @@ +/* + * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). + * This devtool is neither made for production nor for readable output files. + * It uses "eval()" calls to create a separate source file in the browser devtools. + * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) + * or disable the default devtool with "devtool: false". + * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). + */ +/******/ (() => { // webpackBootstrap +/******/ var __webpack_modules__ = ({ + +/***/ "./src/index.jsx": +/*!***********************!*\ + !*** ./src/index.jsx ***! + \***********************/ +/***/ (() => { + +eval("throw new Error(\"Module build failed (from ./node_modules/babel-loader/lib/index.js):\\nSyntaxError: C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\src\\\\index.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:10):\\n\\n\\u001b[0m \\u001b[90m 4 |\\u001b[39m \\u001b[36mfunction\\u001b[39m \\u001b[33mApp\\u001b[39m(){\\u001b[0m\\n\\u001b[0m \\u001b[90m 5 |\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m>\\u001b[22m\\u001b[39m\\u001b[90m 6 |\\u001b[39m \\u001b[36mreturn\\u001b[39m \\u001b[33m<\\u001b[39m\\u001b[33mdiv\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[33mHello\\u001b[39m\\u001b[33m<\\u001b[39m\\u001b[33m/\\u001b[39m\\u001b[33mdiv\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[33m;\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m |\\u001b[39m \\u001b[31m\\u001b[1m^\\u001b[22m\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 7 |\\u001b[39m }\\u001b[0m\\n\\u001b[0m \\u001b[90m 8 |\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 9 |\\u001b[39m \\u001b[33mReactDOM\\u001b[39m\\u001b[33m.\\u001b[39mrender(\\u001b[33m<\\u001b[39m\\u001b[33mApp\\u001b[39m \\u001b[33m/\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[33m,\\u001b[39m document\\u001b[33m.\\u001b[39mgetElementById(\\u001b[32m'app'\\u001b[39m))\\u001b[33m;\\u001b[39m\\u001b[0m\\n\\nAdd @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.\\nIf you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.\\n at Parser._raise (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:569:17)\\n at Parser.raiseWithData (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:562:17)\\n at Parser.expectOnePlugin (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:3626:18)\\n at Parser.parseExprAtom (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:12059:18)\\n at Parser.parseExprSubscripts (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11658:23)\\n at Parser.parseUpdate (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11638:21)\\n at Parser.parseMaybeUnary (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11613:23)\\n at Parser.parseMaybeUnaryOrPrivate (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11425:61)\\n at Parser.parseExprOps (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11432:23)\\n at Parser.parseMaybeConditional (C:\\\\Users\\\\USER\\\\Desktop\\\\react-payments\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:11402:23)\");\n\n//# sourceURL=webpack://react-payments/./src/index.jsx?"); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module doesn't tell about it's top-level declarations so it can't be inlined +/******/ var __webpack_exports__ = {}; +/******/ __webpack_modules__["./src/index.jsx"](); +/******/ +/******/ })() +; \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..2fe860c3 --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 62c13d62..00000000 --- a/index.html +++ /dev/null @@ -1,346 +0,0 @@ - - - - - - - -+ {text} +
+ ) + ); +}; + +export default Message; diff --git a/src/components/cards.js b/src/components/cards.js new file mode 100644 index 00000000..3c4fb6ec --- /dev/null +++ b/src/components/cards.js @@ -0,0 +1,42 @@ +export const cards = [ + { + name: '포코', + bgColor: '#E24141', + cardNum: { cardNum1: '1111', cardNum2: '1111' }, + }, + { + name: '준', + bgColor: '#547CE4', + cardNum: { cardNum1: '2222', cardNum2: '2222' }, + }, + { + name: '공원', + bgColor: '#73BC6D', + cardNum: { cardNum1: '3333', cardNum2: '3333' }, + }, + { + name: '브랜', + bgColor: '#DE59B9', + cardNum: { cardNum1: '4444', cardNum2: '4444' }, + }, + { + name: '로이드', + bgColor: '#94DACD', + cardNum: { cardNum1: '5555', cardNum2: '5555' }, + }, + { + name: '도비', + bgColor: '#E76E9A', + cardNum: { cardNum1: '6666', cardNum2: '6666' }, + }, + { + name: '콜린', + bgColor: '#F37D3B', + cardNum: { cardNum1: '7777', cardNum2: '7777' }, + }, + { + name: '썬', + bgColor: '#FBCD58', + cardNum: { cardNum1: '8888', cardNum2: '8888' }, + }, +]; diff --git a/src/components/getCardColor.js b/src/components/getCardColor.js new file mode 100644 index 00000000..fc1d4d5e --- /dev/null +++ b/src/components/getCardColor.js @@ -0,0 +1,25 @@ +import { getCardName } from './getCardName'; + +export function getCardColor(cardNum1, cardNum2) { + const cardName = getCardName(cardNum1, cardNum2); + + if (cardName === '포코') + return { backgroundColor: '#E24141', color: 'white' }; + if (cardName === '준') return { backgroundColor: '#547CE4', color: 'white' }; + if (cardName === '공원') + return { backgroundColor: '#73BC6D', color: 'black' }; + if (cardName === '브랜') + return { backgroundColor: '#DE59B9', color: 'white' }; + if (cardName === '로이드') + return { + background: + 'radial-gradient(50% 50% at 50% 50%, rgba(4, 192, 158, 0.31) 0%, rgba(4, 192, 158, 0.457344) 65.1%, #04C09E 100%)', + color: 'black', + }; + if (cardName === '도비') + return { backgroundColor: '#E76E9A', color: 'black' }; + if (cardName === '콜린') + return { backgroundColor: '#F37D3B', color: 'black' }; + if (cardName === '썬') return { backgroundColor: ' #FBCD58', color: 'black' }; + return { backgroundColor: 'LightGray', color: 'black' }; +} diff --git a/src/components/getCardName.js b/src/components/getCardName.js new file mode 100644 index 00000000..879f54be --- /dev/null +++ b/src/components/getCardName.js @@ -0,0 +1,11 @@ +export const getCardName = (cardNum1, cardNum2) => { + if (cardNum1 === '1111' && cardNum2 === '1111') return '포코'; + if (cardNum1 === '2222' && cardNum2 === '2222') return '준'; + if (cardNum1 === '3333' && cardNum2 === '3333') return '공원'; + if (cardNum1 === '4444' && cardNum2 === '4444') return '브랜'; + if (cardNum1 === '5555' && cardNum2 === '5555') return '로이드'; + if (cardNum1 === '6666' && cardNum2 === '6666') return '도비'; + if (cardNum1 === '7777' && cardNum2 === '7777') return '콜린'; + if (cardNum1 === '8888' && cardNum2 === '8888') return '썬'; + return '유효하지 않은'; +}; diff --git a/src/context.js b/src/context.js new file mode 100644 index 00000000..28089c00 --- /dev/null +++ b/src/context.js @@ -0,0 +1,56 @@ +// 추가가 아니라 업데이트?! +// 업데이트된 데이터를 넘긴다 +import React, { createContext, useState, useContext } from 'react'; +import uuid from './uuid'; + +const MyContext = createContext(null); + +export function MyProvider({ children }) { + const [cardInMaking, setCardInMaking] = useState(null); + const [completedCards, setCompletedCards] = useState([ + { + id: uuid(), + cardNickname: '포코', + cardNums: '1111-2222-3333-4444', + expirationMonth: '04', + expirationYear: '21', + username: 'SUN', + securityCode: '', + password: '', + cardname: '법카', + }, + ]); + + return ( +