diff --git a/src/entities/additional-service/ui/link-payment-step1.tsx b/src/entities/additional-service/ui/link-payment-step1.tsx new file mode 100644 index 0000000..4d1bfb8 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment-step1.tsx @@ -0,0 +1,136 @@ +import { useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { IMAGE_ROOT } from '@/shared/constants/common'; + +export const LinkPaymentStep1 = () => { + const { navigate } = useNavigate(); + + useSetOnBack(() => { + navigate(PATHS.additionalService.intro); + }); + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('SMS'); + const [formData, setFormData] = useState({ + merchant: 'nictest001m', + productName: '', + productPrice: '', + orderNumber: '', + validDate: '2025.06.30' + }); + + const handlePaymentMethodChange = (method: string) => { + setSelectedPaymentMethod(method); + }; + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value + })); + }; + + return ( + <> +
+
+
가맹점
+
+ +
+
+ +
+
발송 수단
+
+
+ handlePaymentMethodChange('SMS')} + > + SMS + + handlePaymentMethodChange('이메일')} + > + 이메일 + + handlePaymentMethodChange('카카오')} + > + 카카오 + +
+
+
+ +
+
상품명
+
+ handleInputChange('productName', e.target.value)} + /> +
+
+ +
+
상품가격
+
+ handleInputChange('productPrice', e.target.value)} + /> +
+
+ +
+
상품 주문번호
+
+ handleInputChange('orderNumber', e.target.value)} + /> +
+
+ +
+
결제 유효일
+
+
+
+ handleInputChange('validDate', e.target.value)} + /> + +
+ 까지 +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-step2.tsx b/src/entities/additional-service/ui/link-payment-step2.tsx new file mode 100644 index 0000000..3f8207d --- /dev/null +++ b/src/entities/additional-service/ui/link-payment-step2.tsx @@ -0,0 +1,164 @@ +import {ProcessStep} from "@/entities/transaction/model/types"; +import {useSetOnBack} from "@/widgets/sub-layout/use-sub-layout"; +import {useState} from "react"; + +export interface LinkPaymentStep2Props { + setProcessStep: ((processStep: ProcessStep) => void); +} + +export const LinkPaymentStep2 = ({ + setProcessStep +}: LinkPaymentStep2Props) => { + useSetOnBack(() => { + setProcessStep(ProcessStep.One); + }); + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value + })); + }; + + const [selectedPurchaserType, setSelectedPurchaserType] = useState('개인'); + const [selectedLanguage, setSelectedLanguage] = useState('국문') + const [selectedLinkContent, setSelectedLinkContent] = useState('기본'); + const [formData, setFormData] = useState({ + purchaser: '', + purchaserEmail: '', + purchaserPhone: '', + purchaserBirth: '' + }); + + const handlePurchaserTypeChange = (type: string) => { + setSelectedPurchaserType(type) + } + + const handleLanguageType = (type: string) => { + setSelectedLanguage(type) + } + + const handleLinkContent = (content: string) => { + setSelectedLinkContent(content) + } + + return ( + <> +
+
+
구매자명
+
+ handleInputChange('purchaser', e.target.value)} + /> +
+
+ +
+
구매자 이메일
+
+ handleInputChange('purchaserEmail', e.target.value)} + /> +
+
+ +
+
구매자
휴대폰 번호
+
+ handleInputChange('purchaserPhone', e.target.value)} + /> +
+
+ +
+
구매자 정보 대조
+ +
+
+
+
+
+ handlePurchaserTypeChange('개인')} + > + 개인 + + handlePurchaserTypeChange('법인')} + > + 법인 + +
+
+
+ +
+
+
+ handleInputChange('purchaserPhone', e.target.value)} + /> +
+
+ +
+
언어
+
+
+ handleLanguageType('국문')} + > + 국문 + + handleLanguageType('영문')} + > + 영문 + +
+
+
+
+
링크내용
+
+
+ handleLinkContent('기본')} + > + 기본 + + handleLinkContent('추가')} + > + 추가 + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/pages/additional-service/link-payment/link-payment-page.tsx b/src/pages/additional-service/link-payment/link-payment-page.tsx index fd97300..5c49d94 100644 --- a/src/pages/additional-service/link-payment/link-payment-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-page.tsx @@ -1,18 +1,85 @@ -import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode -} from '@/widgets/sub-layout/use-sub-layout'; +import {useState} from 'react'; +import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment-step1'; +import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment-step2'; +import {HeaderType} from '@/entities/common/model/types'; +import {ProcessStep} from '@/entities/transaction/model/types'; +import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout'; +import {useNavigate} from '@/shared/lib/hooks/use-navigate'; +import {PATHS} from "@/shared/constants/paths"; export const LinkPaymentPage = () => { - useSetHeaderTitle('링크결제'); + const { navigate } = useNavigate(); + const [processStep, setProcessStep] = useState(ProcessStep.One); + + useSetHeaderTitle('링크결제 신청'); useSetHeaderType(HeaderType.LeftArrow); - useSetFooterMode(true); + useSetFooterMode(false); + + const onClickToChangeTab = () => { + if(processStep === ProcessStep.One) { + setProcessStep(ProcessStep.Two); + } + else if(processStep === ProcessStep.Two) { + alert('완료') + navigate(PATHS.home) + } + }; return ( <> +
+
+
+
+
+
+ {(processStep === ProcessStep.One) && +
+ } + {(processStep === ProcessStep.Two) && +
+ } +
+
+ {(processStep === ProcessStep.One) && + + } + { (processStep === ProcessStep.Two) && + + } + +
+ {(processStep === ProcessStep.One) && +
+ +
+ } + {(processStep === ProcessStep.Two) && +
+ + +
+ } +
+
+
); }; \ No newline at end of file diff --git a/src/pages/transaction/cash-receit/hand-written-issuance-page.tsx b/src/pages/transaction/cash-receit/hand-written-issuance-page.tsx index 828104c..ef79314 100644 --- a/src/pages/transaction/cash-receit/hand-written-issuance-page.tsx +++ b/src/pages/transaction/cash-receit/hand-written-issuance-page.tsx @@ -1,15 +1,11 @@ -import { useState } from 'react'; -import { PATHS } from '@/shared/constants/paths'; -import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { CashReceitHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step1'; -import { CashReceitHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step2'; -import { ProcessStep } from '@/entities/transaction/model/types'; -import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode -} from '@/widgets/sub-layout/use-sub-layout'; +import {useState} from 'react'; +import {PATHS} from '@/shared/constants/paths'; +import {useNavigate} from '@/shared/lib/hooks/use-navigate'; +import {CashReceitHandWrittenIssuanceStep1} from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step1'; +import {CashReceitHandWrittenIssuanceStep2} from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step2'; +import {ProcessStep} from '@/entities/transaction/model/types'; +import {HeaderType} from '@/entities/common/model/types'; +import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout'; export const CashReceitHandWrittenIssuancePage = () => { const { navigate } = useNavigate(); @@ -40,10 +36,18 @@ export const CashReceitHandWrittenIssuancePage = () => {
-
+ {(processStep === ProcessStep.One) && +
+ } + {(processStep === ProcessStep.Two) && +
+ }
{ (processStep === ProcessStep.One) &&