- 링크결제 확인 페이지 잘림 수정, 이전 버튼 클릭 시 전 step2,1 으로 Form 유지한채 이동
This commit is contained in:
@@ -131,9 +131,14 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
|
|||||||
<div className="issue-field">
|
<div className="issue-field">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
inputMode="text"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
value={formData.moid}
|
value={formData.moid}
|
||||||
onChange={(e) => handleInputChange('moid', e.target.value)}
|
onChange={(e) => {
|
||||||
|
// 영문자와 숫자만 허용 (한글, 특수문자 제거)
|
||||||
|
const cleanedValue = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
|
||||||
|
handleInputChange('moid', cleanedValue);
|
||||||
|
}}
|
||||||
onFocus={handleInputFocus}
|
onFocus={handleInputFocus}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -91,7 +91,9 @@ export const LinkPaymentApplyConfirmPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onClickToBack = () => {
|
const onClickToBack = () => {
|
||||||
navigate(-1);
|
navigate(PATHS.additionalService.linkPayment.request, {
|
||||||
|
state: { formData, returnToStep: 2 }
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -11,12 +11,14 @@ import { IdentityType, Language } from '@/entities/additional-service/model/type
|
|||||||
import { LinkContentType, LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
|
import { LinkContentType, LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
|
||||||
import { useStore } from '@/shared/model/store';
|
import { useStore } from '@/shared/model/store';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { useLocation } from 'react-router';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const LinkPaymentApplyPage = () => {
|
export const LinkPaymentApplyPage = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
|
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
|
||||||
const userMid = useStore.getState().UserStore.mid;
|
const userMid = useStore.getState().UserStore.mid;
|
||||||
@@ -27,8 +29,15 @@ export const LinkPaymentApplyPage = () => {
|
|||||||
});
|
});
|
||||||
const initialMid = (midItem.length > 0) ? userMid : (midOptionsWithoutGids.length > 0 ? midOptionsWithoutGids[0]?.value || '' : '');
|
const initialMid = (midItem.length > 0) ? userMid : (midOptionsWithoutGids.length > 0 ? midOptionsWithoutGids[0]?.value || '' : '');
|
||||||
|
|
||||||
const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
|
// location.state에서 formData와 returnToStep 받기
|
||||||
const [formData, setFormData] = useState<LinkPaymentFormData>({
|
const savedFormData = location.state?.formData;
|
||||||
|
const returnToStep = location.state?.returnToStep;
|
||||||
|
|
||||||
|
const [processStep, setProcessStep] = useState<ProcessStep>(
|
||||||
|
returnToStep === 2 ? ProcessStep.Two : ProcessStep.One
|
||||||
|
);
|
||||||
|
const [formData, setFormData] = useState<LinkPaymentFormData>(
|
||||||
|
savedFormData || {
|
||||||
mid: initialMid,
|
mid: initialMid,
|
||||||
sendMethod: LinkPaymentSendMethod.SMS,
|
sendMethod: LinkPaymentSendMethod.SMS,
|
||||||
goodsName: '',
|
goodsName: '',
|
||||||
@@ -43,7 +52,8 @@ export const LinkPaymentApplyPage = () => {
|
|||||||
identityValue: '',
|
identityValue: '',
|
||||||
language: Language.KR,
|
language: Language.KR,
|
||||||
linkContentType: LinkContentType.BASIC
|
linkContentType: LinkContentType.BASIC
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
useSetHeaderTitle(t('additionalService.linkPayment.applyTitle'));
|
useSetHeaderTitle(t('additionalService.linkPayment.applyTitle'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
|
|||||||
@@ -579,6 +579,34 @@ main.pop{
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 링크결제 확인 페이지 */
|
||||||
|
main.pop {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.pop .sub-wrap {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-bottom: 120px;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.pop .preview-body {
|
||||||
|
max-width: 338px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.pop .apply-row {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.resend-text {
|
.resend-text {
|
||||||
word-break: break-all !important;
|
word-break: break-all !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user