[2단계 - 페이먼츠] - 버건디(전태헌) 미션 제출합니다.

.storybook/main.ts

@@ -1,20 +1,21 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    'storybook-addon-remix-react-router',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

@types/global.d.ts

@@ -0,0 +1,35 @@
+declare module 'types' {
+  export type RegisterStepProps = {
+    value: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    isError: boolean;
+    onEnter: (e: React.KeyboardEvent) => void;
+    onBlur: React.FocusEventHandler<HTMLInputElement>;
+  };
+
+  export type InitialCardNumberState = {
+    value: string;
+    isError: boolean;
+  };
+
+  export type RegisterStep =
+    | 'cardNumbers'
+    | 'cardIssuer'
+    | 'cardExpirationDate'
+    | 'cardOwnerName'
+    | 'cardCvc'
+    | 'cardPassword';
+
+  export type RegisterComponentProps = {
+    step: RegisterStepType;
+  };
+
+  export type UseDetectCompleteHookProps = {
+    cardNumbers: InitialCardNumberState[];
+    month: string;
+    year: string;
+    cvc: string;
+    password: string;
+    name: string;
+  };
+}

README-STEP2.md

@@ -0,0 +1,25 @@
+# 동적 입력 UI 구현
+
+사용자는 카드 번호를 입력할 때 동적으로 제공되는 입력 UI를 통해 집중적으로 하나의 입력 필드에만 집중할 수 있다.
+
+# 카드사 선택
+
+사용자는 카드사를 선택할 수 있고, 카드사에 따라 미리보기 카드의 색상을 변경한다.
+
+# CVC 번호
+
+CVC 번호를 입력할 때는 미리보기 카드의 뒷면을 시각적으로 보여준다.
+
+입력은 숫자만 가능하며, 유효하지 않은 값을 입력 시 피드백을 제공한다.
+
+# 폼 제출 및 상태 관리
+
+모든 카드 정보가 정확하게 입력되고 검증되었을 때 확인 버튼이 활성화된다.
+
+사용자가 입력한 정보 중 하나라도 지우거나 수정하여 유효하지 않게 되면, 확인 버튼은 보이지 않는다.
+
+# 카드 등록 완료 및 네비게이션
+
+확인 버튼을 클릭하면 사용자는 카드 등록 완료 페이지로 이동한다.
+
+카드 등록 완료 페이지에서는 카드 등록이 성공적으로 완료되었다는 메시지와 함께, 다시 카드 등록 페이지로 돌아갈 수 있는 확인 버튼을 제공한다.

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2"
   },
@@ -44,6 +45,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.2.5",
     "storybook": "^8.0.8",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }