[페이먼츠 미션 Step 1] 윤생(이윤성) 미션 제출합니다. (#205)

* docs: 기능 요구사항 정리 * chore: 프로젝트 초기 세팅 * docs: 기능 요구사항 정리 * feat: InputCardData 컴포넌트 구현 * feat: Card 컴포넌트 구현 * feat: InputCardPassword 컴포넌트 구현 * feat: 카드 추가 폼 컴포넌트 구현 * feat: 카드 추가 페이지 스켈레톤 코드 작성 * feat: format 변환 로직 구현 * docs: 기능 요구사항 최신화 * feat: Card 컴포넌트 스타일 삽입 * feat: FormCardAdd 컴포넌트 스타일 주입 * feat: InputCardData 컴포넌트 스타일 주입 * feat: AddCardPage 상태 관리 로직 및 custom hook 추가 * feat: 문자열 포맷 관련 유틸함수 추가 * feat: 라우팅 관련 로직 추가 * feat: 뒤로가기 버튼 기능 구현 * feat: 재사용되는 헤더 컴포넌트 분리 * feat: 카드 리스트 페이지 마크업 * feat: 각 페이지 라우팅 * feat: input 유효성 검증 관련 유틸 함수 제작 * feat: 이미지 및 정보제공버튼 추가 * refactor: cardNumber 도메인 로직 변경 및 커스텀 훅 추가 * feat: InputCardPassword 컴포넌트 name 속성 추가 * feat: 카드 등록 기능 추가 * docs: 기능 요구사항 최신화 * fix: 만료일 유효성 검증 로직 오류 해결 * feat: 카드 추가 form 입력값 길이 유효성 검사 * refactor: Data Input Custom hook으로 변경 * refactor: Data Input Custom hook으로 변경 * refactor: 불용어 제거 * refactor: 불필요한 상태 제거 * feat: cardList 및 input css 스타일 적용 * feat: 카드 관련 css 스타일링 * feat: 이미 등록된 카드 필터링 기능 추가 * feat: ? 버튼 클릭 시 말풍선 띄우는 기능 추가 * docs: 기능 요구사항 최신화 * refactor: any 타입 제거로 인한 리팩토링 * build: github workflow 추가 * chore: 불필요한 코드 제거 * chore: 불필요한 코드 제거 * refactor: deprecated 된 코드 삭제 * refactor: 의미없는 주석 제거 * refactor: 불필요한 템플릿 리터럴 제거 * refactor: 과도하게 세분화한 컴포넌트 사용 안함 * chore: prettier 설치 * refactor: 컴포넌트 분리 및 AddCardNumberInput 스토리북 작성 * chore: storybook addon 작성 * refactor: 도메인 및 유틸관련 로직 컴포넌트로부터 분리 * refactor: 만료일 입력 컴포넌트 화 * refactor: AddCardExpireDateInput 스토리북 구현 * refactor: AddCardOwnerInput 컴포넌트 분리 * refactor: 보안코드 입력 컴포넌트 분리 * refactor: card password 컴포넌트 분리 * refactor: 로컬스토리지 카드 등록 로직 분리 * refactor: Router 역할 컴포넌트 분리 * refactor: 네이밍 일관성 있게 변경 * refactor: 너무 많은 기능을 가진 메서드 분리 * refactor: 헤더 메모이제이션 적용 * refactor: CardNumber 렌더링 성능 최적화 * refactor: import 가독성 개선 및 타입 분리 --------- Co-authored-by: dladncks1217 <dlaxodud1217@gmail.com>
woowacourse · Apr 25, 2023 · 62cbb78 · 62cbb78
1 parent 65a8a7f
commit 62cbb78
Show file tree

Hide file tree

Showing 46 changed files with 41,237 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,36 @@
+name: NodeJS with Webpack
+
+on:
+  push:
+    branches: ['step1']
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: actions/cache@v3
+        id: cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm ci
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      - run: npm run build
+
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": true
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/components/FormCardAdd.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/REQUIREMENTS.md b/REQUIREMENTS.md
diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -0,0 +1,34 @@
+## 핵심 요구사항
+
+- 어플리케이션에 내 카드 정보 등록
+
+## 페이지/ 컴포넌트 별 기능 요구사항 정리
+
+### 카드 목록 페이지
+
+- [x] 카드 추가 버튼
+- [x] 카드 추가 버튼을 눌렀을 때 카드 추가 화면으로 넘어간다,
+- [x] 초기 렌더링 시 전체 카드 목록 가져오기
+
+### 카드 추가 페이지
+
+    - [x] 뒤로가기 버튼 클릭 시 이전 페이지로.
+
+    #### 카드 정보 입력 컴포넌트
+
+    - [x] 입력값들을 입력하면 카드 화면에 바로 반영이 된다.
+    - [x] 모든 값이 유효한 값이면 다음버튼 클릭 가능하게 한다.
+    - [x] 다음 버튼을 누르면 데이터를 저장하고 등록하고 카드 목록으로 돌아간다.
+    - [x] 다음 버튼 눌렀을 때, 이미 등록된 카드를 또 등록했을 경우 오류 메시지 출력한다.
+    - [x] 카드 소유자 이름 작성 시 몇 글자인지 글자 수를 사용자에게 보여준다.
+    - [x] 카드 소유자 이름 길이는 30자로 제한한다.
+    - [x] 소유자 이름은 대문자로 표시한다.
+    - [x] 보안코드, 비밀번호는 다 온점으로 띄워준다.
+    - [x] 만료일은 두 글자까지 쓰면 자동으로 / 를 붙인다.
+    - [x] 카드번호 뒷 8자리는 온점으로 표시한다.
+    - [x] "?" 버튼에 hover 상태면 cvc에 대한 설명을 보여줌.
+    - [x] (예외) 입력값이 잘못 들어오면 오류 메시지를 띄워준다.
+
+### 카드 컴포넌트
+
+- [x] 카드 회사, 카드 번호, 카드 소유자명, 만료일 표시한다