{}
+
+export default function ConfirmButton({ children, ...props }: ConfirmButtonProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/pages/confirm/components/ConfirmImageIcon.tsx b/src/pages/confirm/components/ConfirmImageIcon.tsx
new file mode 100644
index 0000000000..a7fc320cd5
--- /dev/null
+++ b/src/pages/confirm/components/ConfirmImageIcon.tsx
@@ -0,0 +1,26 @@
+import * as S from '../confirmPage.style';
+import CheckIconImage from './CheckIconImage';
+
+export default function ConfirmImageIcon() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/pages/confirm/components/confirmButton.style.ts b/src/pages/confirm/components/confirmButton.style.ts
new file mode 100644
index 0000000000..5b0d8df84d
--- /dev/null
+++ b/src/pages/confirm/components/confirmButton.style.ts
@@ -0,0 +1,13 @@
+import { styled } from 'styled-components';
+
+export const ConfirmButton = styled.button`
+ border-radius: 5px;
+ color: rgba(243, 243, 243, 1);
+ background: rgba(51, 51, 51, 1);
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ padding: 8px 0;
+ height: 44px;
+ width: 320px;
+`;
diff --git a/src/pages/confirm/confirmPage.style.ts b/src/pages/confirm/confirmPage.style.ts
new file mode 100644
index 0000000000..9ee5477bad
--- /dev/null
+++ b/src/pages/confirm/confirmPage.style.ts
@@ -0,0 +1,53 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+export const ContentCard = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ min-height: 100vh;
+`;
+
+export const IconContainer = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+export const TextContainer = styled.div`
+ margin: 25px 0;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const Text = styled.span`
+ font-size: 25px;
+ font-weight: 700;
+ text-align: center;
+ margin: 5px 0;
+`;
+
+export const ButtonContainer = styled.div`
+ width: 320px;
+`;
+
+export const IconImageContainer = styled.div`
+ width: 76px;
+ height: 76px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(51, 51, 51, 1);
+ border-radius: 50%;
+`;
+
+export const IconImage = styled.img`
+ border: 7.5px;
+ width: 32px;
+ height: 20px;
+`;
diff --git a/src/pages/error/ErrorPage.tsx b/src/pages/error/ErrorPage.tsx
new file mode 100644
index 0000000000..161ea8eb60
--- /dev/null
+++ b/src/pages/error/ErrorPage.tsx
@@ -0,0 +1,15 @@
+import PAGE_ROUTES from '@/constants/routes';
+import { useNavigate } from 'react-router-dom';
+
+export default function ErrorPage() {
+ const navigate = useNavigate();
+ const handleClickBackButton = () => {
+ navigate(PAGE_ROUTES.MAIN, { replace: true });
+ };
+ return (
+
+ Error가 발생했어요!
+
+
+ );
+}
diff --git a/src/pages/error/NotFoundPage.tsx b/src/pages/error/NotFoundPage.tsx
new file mode 100644
index 0000000000..00933c06aa
--- /dev/null
+++ b/src/pages/error/NotFoundPage.tsx
@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+import PAGE_ROUTES from '../../constants/routes';
+
+export default function NotFoundPage() {
+ const navigate = useNavigate();
+ const handleClickNavigateHomeButton = () => {
+ navigate(PAGE_ROUTES.MAIN, { replace: true });
+ };
+ return (
+
+ 페이지를 찾을수 없어요!
+
+
+ );
+}
diff --git a/src/pages/register/RegisterCardInfoPage.tsx b/src/pages/register/RegisterCardInfoPage.tsx
new file mode 100644
index 0000000000..2a90570cd8
--- /dev/null
+++ b/src/pages/register/RegisterCardInfoPage.tsx
@@ -0,0 +1,200 @@
+import CreditCard from '@/components/cards/CreditCard';
+import useInput from '@/hooks/useInput';
+import validate from '@/utils/validate';
+import useCardNumber from '@/hooks/useCardNumber';
+import * as S from '@/app.style';
+import useRegister from '@/hooks/useRegister';
+import useCardIssuer from '@/hooks/useCardIssuer';
+import CvcCard from '@/components/cards/CvcCard';
+import REGISTER_STEP from '@/constants/registerStep';
+import { InitialCardNumberState } from '@/types';
+import { MAX_LENGTH } from '@/constants/cardSection';
+import RoutingButton from '@/components/registerSection/RoutingButton';
+import useExpirationDate from '@/hooks/useExpirationDate';
+import CardPasswordInputSection from '@/components/registerSection/CardPasswordInputSection';
+import CardIssuerInputSection from '@/components/registerSection/CardIssuerInputSection';
+import CardOwnerNameInputSection from '@/components/registerSection/CardOwnerNameInputSection';
+import CardNumberInputSection from '@/components/registerSection/CardNumberInputSection';
+import CardCVCInputSection from '@/components/registerSection/CardCVCInputSection';
+import CardExpirationDateInputSection from '@/components/registerSection/CardExpirationDateInputSection';
+
+const initialCardNumberState: InitialCardNumberState = {
+ value: '',
+ isError: false,
+};
+
+const CARD_NUMBER_LENGTH = 4;
+
+export default function RegisterCardInfoPage() {
+ const { step, Register, nextStepHandler } = useRegister([
+ REGISTER_STEP.CARD_NUMBER,
+ REGISTER_STEP.CARD_ISSUER,
+ REGISTER_STEP.CARD_EXPIRATION_DATE,
+ REGISTER_STEP.CARD_OWNER_NAME,
+ REGISTER_STEP.CARD_CVC,
+ REGISTER_STEP.CARD_PASSWORD,
+ ] as const);
+
+ const {
+ inputValue: password,
+ onChange: handlePassword,
+ isError: passwordError,
+ ref: passwordRef,
+ onBlur: handlePasswordBlur,
+ } = useInput({
+ validators: [{ fn: (value) => validate.isValidDigit(value) }],
+ maxLength: MAX_LENGTH.PASSWORD,
+ onComplete: nextStepHandler,
+ isActiveCurrentStep: step === REGISTER_STEP.CARD_PASSWORD,
+ });
+
+ const {
+ inputValue: cvc,
+ onChange: handleCvc,
+ isError: cvcError,
+ ref: cardCvcRef,
+ onKeyDown: handleEnterCvc,
+ onBlur: handleCvcBlur,
+ } = useInput({
+ validators: [{ fn: (value) => validate.isValidDigit(value) }],
+ maxLength: MAX_LENGTH.CVC,
+ onComplete: nextStepHandler,
+ nextRef: passwordRef,
+ isActiveCurrentStep: step === REGISTER_STEP.CARD_CVC,
+ });
+
+ const {
+ inputValue: name,
+ onChange: nameChangeHandler,
+ isError: nameError,
+ onKeyDown: handleEnterName,
+ onBlur: handleNameBlur,
+ } = useInput({
+ validators: [{ fn: (value) => validate.isEnglish(value) }],
+ maxLength: MAX_LENGTH.NAME,
+ onComplete: nextStepHandler,
+ nextRef: cardCvcRef,
+ isActiveCurrentStep: step === REGISTER_STEP.CARD_OWNER_NAME,
+ });
+
+ const {
+ month,
+ monthChangeHandler,
+ monthError,
+ handleMonthBlur,
+ year,
+ yearChangeHandler,
+ yearError,
+ handleYearKeyDown,
+ handleYearBlur,
+ } = useExpirationDate({
+ nextStepHandler,
+ isActiveCurrentStep: step === REGISTER_STEP.CARD_EXPIRATION_DATE,
+ });
+
+ const { handleCardIssuer, cardIssuer } = useCardIssuer({
+ nextStepHandler,
+ isActiveCurrentStep: step === REGISTER_STEP.CARD_ISSUER,
+ });
+
+ const { cardNumbers, cardNumbersChangeHandler, cardBrand } = useCardNumber({
+ initialCardNumberStates: Array.from(
+ { length: CARD_NUMBER_LENGTH },
+ () => initialCardNumberState,
+ ),
+ nextStepHandler,
+ isValidCurrentStep: step === REGISTER_STEP.CARD_NUMBER,
+ });
+
+ const isValidAllFormStates = validate.isValidAllFormStates({
+ cardNumbers,
+ month,
+ year,
+ password,
+ cvc,
+ name,
+ });
+
+ return (
+
+
+ {step === REGISTER_STEP.CARD_CVC ? (
+
+ ) : (
+
+ )}
+
+
+ {isValidAllFormStates && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/stories/App.stories.tsx b/src/stories/App.stories.tsx
index e0df252810..154cfdb6fe 100644
--- a/src/stories/App.stories.tsx
+++ b/src/stories/App.stories.tsx
@@ -1,10 +1,23 @@
import type { Meta, StoryObj } from '@storybook/react';
-import App from '../App';
+import RegisterCardInfoPage from '@/pages/register/RegisterCardInfoPage';
+import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
const meta = {
- title: 'App',
- component: App,
-} satisfies Meta;
+ title: 'RegisterCardInfoPage',
+ component: RegisterCardInfoPage,
+ decorators: [withRouter],
+ parameters: {
+ reactRouter: reactRouterParameters({
+ location: {
+ state: {},
+ },
+ routing: {
+ path: '/confirm',
+ handle: 'App',
+ },
+ }),
+ },
+} satisfies Meta;
export default meta;
diff --git a/src/stories/CardCVCInputSection.stories.ts b/src/stories/CardCVCInputSection.stories.ts
new file mode 100644
index 0000000000..cc7192944d
--- /dev/null
+++ b/src/stories/CardCVCInputSection.stories.ts
@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardCVCInputSection from '@/components/registerSection/CardCVCInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardCVCInputSection',
+ component: CardCVCInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ value: {
+ control: 'text',
+ description: 'CVC 입력값',
+ },
+ isError: {
+ control: 'boolean',
+ description: '에러 상태에 관한 상태 값',
+ },
+ },
+ args: {
+ onChange: fn(),
+ onBlur: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/CardExpirationDateInputSection.stories.ts b/src/stories/CardExpirationDateInputSection.stories.ts
new file mode 100644
index 0000000000..6274f2b0b5
--- /dev/null
+++ b/src/stories/CardExpirationDateInputSection.stories.ts
@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardExpirationDateInputSection from '@/components/registerSection/CardExpirationDateInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardExpirationDateInputSection',
+ component: CardExpirationDateInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ month: {
+ control: 'text',
+ description: '카드 유효기간에 대한 월',
+ },
+ monthError: {
+ control: 'boolean',
+ description: '월에 대한 에러 상태 값',
+ },
+ year: {
+ control: 'text',
+ description: '카드 유효기간에 대한 연도',
+ },
+ yearError: {
+ control: 'boolean',
+ description: '연도 에러 상태 값',
+ },
+ },
+ args: {
+ monthChangeHandler: fn(),
+ handleMonthBlur: fn(),
+ yearChangeHandler: fn(),
+ handleYearKeyDown: fn(),
+ handleYearBlur: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/CardIssuerInputSection.stories.ts b/src/stories/CardIssuerInputSection.stories.ts
new file mode 100644
index 0000000000..22208e5c21
--- /dev/null
+++ b/src/stories/CardIssuerInputSection.stories.ts
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardIssuerInputSection from '@/components/registerSection/CardIssuerInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardIssuerInputSection',
+ component: CardIssuerInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ onChange: {
+ description: '카드사 변경 함수',
+ },
+ },
+ args: {
+ onChange: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/CardNumberInputSection.stories.tsx b/src/stories/CardNumberInputSection.stories.tsx
new file mode 100644
index 0000000000..40579d8161
--- /dev/null
+++ b/src/stories/CardNumberInputSection.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardNumberInputSection from '@/components/registerSection/CardNumberInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardNumberInputSection',
+ component: CardNumberInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ cardNumbers: {
+ control: 'object',
+ description: '카드 번호를 저장하는 배열',
+ },
+ },
+ args: {
+ cardNumbersChangeHandler: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ cardNumbers: [
+ { value: '0000', isError: false },
+ { value: '0000', isError: false },
+ { value: '0000', isError: false },
+ { value: '0000', isError: false },
+ ],
+ },
+};
diff --git a/src/stories/CardOwnerNameInputSection.stories.ts b/src/stories/CardOwnerNameInputSection.stories.ts
new file mode 100644
index 0000000000..53c77aa637
--- /dev/null
+++ b/src/stories/CardOwnerNameInputSection.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardOwnerNameInputSection from '@/components/registerSection/CardOwnerNameInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardOwnerNameInputSection',
+ component: CardOwnerNameInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ onChange: {
+ description: '카드사 변경 함수',
+ },
+ onBlur: {
+ description: '포커스 잃었을때 실행할 함수',
+ },
+ value: {
+ control: 'string',
+ description: '이름 입력값',
+ },
+ isError: {
+ control: 'boolean',
+ description: '에러 상태값',
+ },
+ },
+ args: {
+ onChange: fn(),
+ onBlur: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/CardPasswordInputSection.stories.ts b/src/stories/CardPasswordInputSection.stories.ts
new file mode 100644
index 0000000000..ed9601a3dd
--- /dev/null
+++ b/src/stories/CardPasswordInputSection.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CardPasswordInputSection from '@/components/registerSection/CardPasswordInputSection';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'RegisterStep/CardPasswordInputSection',
+ component: CardPasswordInputSection,
+ tags: ['autodocs'],
+ argTypes: {
+ onChange: {
+ description: '카드사 변경 함수',
+ },
+ onBlur: {
+ description: '포커스 잃었을때 실행할 함수',
+ },
+ value: {
+ control: 'string',
+ description: '비밀번호 입력값',
+ },
+ isError: {
+ control: 'boolean',
+ description: '비밀번호 입력에 대한 에러 상태값',
+ },
+ },
+ args: {
+ onChange: fn(),
+ onBlur: fn(),
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/ConfirmPage.stories.tsx b/src/stories/ConfirmPage.stories.tsx
new file mode 100644
index 0000000000..6128505776
--- /dev/null
+++ b/src/stories/ConfirmPage.stories.tsx
@@ -0,0 +1,22 @@
+import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
+import ConfirmPage from '../pages/confirm/ConfirmPage';
+
+export default {
+ title: 'Confirm Page',
+ render: () => ,
+ decorators: [withRouter],
+};
+
+export const FromHomePage = {
+ parameters: {
+ reactRouter: reactRouterParameters({
+ location: {
+ state: { isSucceed: true, cardNumbers: '1234', cardIssuer: '국민카드' },
+ },
+ routing: {
+ path: '/',
+ handle: 'Home',
+ },
+ }),
+ },
+};
diff --git a/src/stories/CreditCard.stories.tsx b/src/stories/CreditCard.stories.tsx
index 4cd5bbf264..92c4be5377 100644
--- a/src/stories/CreditCard.stories.tsx
+++ b/src/stories/CreditCard.stories.tsx
@@ -1,8 +1,8 @@
import type { Meta, StoryObj } from '@storybook/react';
-import CreditCard from '../components/CreditCard';
+import CreditCard from '../components/cards/CreditCard';
const meta = {
- title: 'CreditCard',
+ title: 'Card/CreditCard',
component: CreditCard,
tags: ['autodocs'],
argTypes: {
@@ -45,6 +45,7 @@ export const Default: Story = {
year: '00',
name: 'JOHN DOE',
cardBrand: 'none',
+ backgroundColor: '#333333',
},
};
@@ -60,6 +61,7 @@ export const Visa: Story = {
year: '29',
name: 'LIM DONGJUN',
cardBrand: 'Visa',
+ backgroundColor: '#333333',
},
};
@@ -75,5 +77,133 @@ export const Master: Story = {
year: '29',
name: 'LIM DONGJUN',
cardBrand: 'MasterCard',
+ backgroundColor: '#333333',
+ },
+};
+
+export const 신한카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(0, 70, 255, 1)',
+ },
+};
+
+export const BC카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(240, 70, 81, 1)',
+ },
+};
+
+export const 카카오뱅크: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(255, 230, 0, 1)',
+ },
+};
+
+export const 현대카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(0, 0, 0, 1)',
+ },
+};
+
+export const 우리카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(0, 123, 200, 1)',
+ },
+};
+export const 롯데카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(237, 28, 36, 1)',
+ },
+};
+
+export const 하나카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(0, 148, 144, 1)',
+ },
+};
+
+export const 국민카드: Story = {
+ args: {
+ cardNumbers: [
+ { value: '5323', isError: false },
+ { value: '1234', isError: false },
+ { value: '4321', isError: false },
+ { value: '9872', isError: false },
+ ],
+ month: '12',
+ year: '29',
+ name: 'LIM DONGJUN',
+ cardBrand: 'MasterCard',
+ backgroundColor: 'rgba(106, 96, 86, 1)',
},
};
diff --git a/src/stories/CvcCard.stories.ts b/src/stories/CvcCard.stories.ts
new file mode 100644
index 0000000000..abbc26a209
--- /dev/null
+++ b/src/stories/CvcCard.stories.ts
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CvcCard from '../components/cards/CvcCard';
+
+const meta: Meta = {
+ title: 'Card/CvcCard',
+ component: CvcCard,
+ tags: ['autodocs'],
+ argTypes: {
+ cvc: {
+ control: 'text',
+ description: 'cvc 값',
+ },
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/InputSection.stories.tsx b/src/stories/InputSection.stories.tsx
index 5db0e427a5..c0df91dd21 100644
--- a/src/stories/InputSection.stories.tsx
+++ b/src/stories/InputSection.stories.tsx
@@ -1,9 +1,16 @@
import type { Meta, StoryObj } from '@storybook/react';
-import InputSection from '../components/InputSection';
-import { CARD_NUMBER, EXPIRATION_PERIOD, OWNER_NAME } from '../constants/cardSection';
+import InputSection from '../components/registerSection/InputSection';
+import {
+ CARD_NUMBER,
+ EXPIRATION_PERIOD,
+ OWNER_NAME,
+ CARD_CVC,
+ PASSWORD,
+ CARD_ISSUER,
+} from '../constants/cardSection';
const meta = {
- title: 'InputSection',
+ title: 'Register/InputSection',
component: InputSection,
tags: ['autodocs'],
argTypes: {
@@ -50,3 +57,27 @@ export const OwnerName: Story = {
children: <>,
},
};
+
+export const CVC: Story = {
+ args: {
+ title: CARD_CVC.title,
+ inputTitle: CARD_CVC.inputTitle,
+ children: <>,
+ },
+};
+
+export const Password: Story = {
+ args: {
+ title: PASSWORD.title,
+ description: PASSWORD.description,
+ inputTitle: PASSWORD.inputTitle,
+ children: <>,
+ },
+};
+
+export const CardIssuer: Story = {
+ args: {
+ title: CARD_ISSUER.title,
+ inputTitle: CARD_ISSUER.inputTitle,
+ },
+};
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
new file mode 100644
index 0000000000..5eea331a83
--- /dev/null
+++ b/src/types/index.d.ts
@@ -0,0 +1,62 @@
+import { InputHTMLAttributes } from 'react';
+
+export interface RegisterFieldProps extends InputHTMLAttributes {
+ isError: boolean;
+}
+
+export type InitialCardNumberState = {
+ value: string;
+ isError: boolean;
+};
+
+export type RegisterStep =
+ | 'cardNumbers'
+ | 'cardIssuer'
+ | 'cardExpirationDate'
+ | 'cardOwnerName'
+ | 'cardCvc'
+ | 'cardPassword';
+
+export type RegisterComponentProps = {
+ step: RegisterStepType;
+};
+
+export type RegisterFieldInfos = {
+ cardNumbers: InitialCardNumberState[];
+ month: string;
+ year: string;
+ cvc: string;
+ password: string;
+ name: string;
+};
+
+type CardIssuer = {
+ cardIssuer: AllCardIssuer;
+};
+
+export type AllCardIssuer =
+ | ''
+ | 'BC카드'
+ | '신한카드'
+ | '카카오뱅크'
+ | '현대카드'
+ | '우리카드'
+ | '롯데카드'
+ | '하나카드'
+ | '국민카드';
+
+export type CardIssuerBackgroundColor =
+ | ''
+ | 'rgba(240, 70, 81, 1)'
+ | 'rgba(0, 70, 255, 1)'
+ | 'rgba(255, 230, 0, 1)'
+ | 'rgba(0, 0, 0, 1)'
+ | 'rgba(0, 123, 200, 1)'
+ | 'rgba(237, 28, 36, 1)'
+ | 'rgba(0, 148, 144, 1)'
+ | 'rgba(106, 96, 86, 1)';
+
+export type ConfirmPageRouteProps = {
+ cardNumbers: string;
+ cardIssuer: AllCardIssuer;
+};
diff --git a/src/utils/formatSingleDigitDate.ts b/src/utils/formatSingleDigitDate.ts
new file mode 100644
index 0000000000..d03116d0fc
--- /dev/null
+++ b/src/utils/formatSingleDigitDate.ts
@@ -0,0 +1,5 @@
+const formatSingleDigitDate = (dateValue: string) => {
+ return dateValue.padStart(2, '0');
+};
+
+export default formatSingleDigitDate;
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index 1303a697dc..4cbd564291 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -1,3 +1,6 @@
+import { MAX_LENGTH } from '@/constants/cardSection';
+import { RegisterFieldInfos, InitialCardNumberState } from '@/types';
+
const validate = {
isNumberInRange: ({
min,
@@ -26,6 +29,28 @@ const validate = {
isEnglish: (value: string) => {
return /^[a-zA-Z ]*$/.test(value);
},
+
+ isEmptyValue: (value: string) => {
+ return value.length === 0;
+ },
+
+ isValidAllFormStates: ({ cardNumbers, month, year, cvc, password, name }: RegisterFieldInfos) => {
+ const totalCardNumbers = cardNumbers
+ .map((cardNumber: InitialCardNumberState) => cardNumber.value)
+ .join('');
+
+ if (
+ month.length === MAX_LENGTH.MONTH &&
+ year.length === MAX_LENGTH.YEAR &&
+ totalCardNumbers.length === MAX_LENGTH.TOTAL_CARD_NUMBER &&
+ cvc.length === MAX_LENGTH.CVC &&
+ password.length === MAX_LENGTH.PASSWORD &&
+ name.length
+ ) {
+ return true;
+ }
+ return false;
+ },
};
export default validate;
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fbf23..deb8eb72d4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,8 +7,7 @@
"skipLibCheck": true,
/* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
+ "moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
@@ -18,8 +17,13 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"],
+ "@types/*": ["@types/*"]
+ }
},
- "include": ["src"],
+ "include": ["src", "./@types/global.d.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 97ede7ee6f..5ff5f08afd 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -3,7 +3,7 @@
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
- "moduleResolution": "bundler",
+ "moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"strict": true
},
diff --git a/vite.config.ts b/vite.config.ts
index 861b04b356..3c86cd06df 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,14 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+ // base: '/react-payments/dist',
+});