107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { SettlementAgencyBottomAgreeProps } from '../../model/types';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
export const SettlementAgencyBottomAgree = ({
|
|
bottomAgreeOn,
|
|
setBottomAgreeOn
|
|
}: SettlementAgencyBottomAgreeProps) => {
|
|
|
|
const variants = {
|
|
hidden: { y: '100%' },
|
|
visible: { y: '0%' },
|
|
};
|
|
|
|
const onClickToClose = () => {
|
|
setBottomAgreeOn(false);
|
|
};
|
|
|
|
const onClickToSaveSettlementAgencyAgree = () => {
|
|
|
|
};
|
|
return (
|
|
<>
|
|
{bottomAgreeOn &&
|
|
<div className="bg-dim"></div>
|
|
}
|
|
<motion.div
|
|
className="bottomsheet"
|
|
initial="hidden"
|
|
animate={ (bottomAgreeOn)? 'visible': 'hidden' }
|
|
variants={ variants }
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<div className="bottomsheet-header">
|
|
<div className="bottomsheet-title">
|
|
<h2>무이자 정보</h2>
|
|
<button
|
|
className="close-btn"
|
|
type="button"
|
|
>
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_close.svg' }
|
|
alt="닫기"
|
|
onClick={ () => onClickToClose() }
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="agree-section">
|
|
<div className="agree-desc pb10">본 정산 내역은 정산금 지급 동의 확인을 위한<br/>것입니다.</div>
|
|
<div className="agree-desc pb10">동의 시 수정 불가, 미동의 또는 거절 시 지급이 보류될 수 있습니다.</div>
|
|
<div className="agree-desc pb16">지급 계좌·정산매장 정보 변경 시 반드시<br/>수정해야 합니다.</div>
|
|
<div className="agree-desc pb16">빠른 출금은 동의대기/기한초과/출금실패 시 신청 가능하며, 신청 시간(10시 전·후)에 따라 당일 또는 익일 처리됩니다.</div>
|
|
<div className="agree-desc pb16">이용자 정보 오기입(계좌번호, 사업자 정보 등)으로 인한 오지급·오류는 당사가 책임지지 않습니다.</div>
|
|
<div className="sheet-divider"></div>
|
|
|
|
<div className="agree-radio-group">
|
|
<div className="check_box">
|
|
<input
|
|
id="r1"
|
|
className="checkbox"
|
|
type="radio"
|
|
name="r"
|
|
/>
|
|
<label
|
|
className="gtr"
|
|
htmlFor="r1"
|
|
></label>정산동의
|
|
</div>
|
|
<div className="check_box">
|
|
<input
|
|
id="r2"
|
|
className="checkbox"
|
|
type="radio"
|
|
name="r"
|
|
/>
|
|
<label
|
|
className="gtr"
|
|
htmlFor="r2"
|
|
></label>정산거절
|
|
</div>
|
|
<div className="check_box">
|
|
<input
|
|
className="checkbox"
|
|
id="r3"
|
|
type="radio"
|
|
name="r"
|
|
/>
|
|
<label
|
|
className="gtr"
|
|
htmlFor="r3"
|
|
></label>빠른 출금
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bottomsheet-footer">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
type="button"
|
|
onClick={ () => onClickToSaveSettlementAgencyAgree() }
|
|
>저장</button>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}; |