73 lines
2.7 KiB
JavaScript
73 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import TNewPopUp from '../TPopUp/TNewPopUp'; // TNewPopUp 컴포넌트의 정확한 경로를 확인해주세요.
|
|
import css from './OptionalConfirm.module.less';
|
|
|
|
/**
|
|
* 선택 약관 동의 팝업 컴포넌트입니다.
|
|
* 이 컴포넌트는 약관 동의 UI를 표시하며, 내부에서 다른 팝업을 관리하지 않습니다.
|
|
* 버튼 클릭 이벤트는 props로 전달받아 상위 컴포넌트에서 처리합니다.
|
|
*/
|
|
const OptionalConfirm = ({
|
|
open,
|
|
spotlightId,
|
|
className,
|
|
onClose,
|
|
onOptionalTermsClick, // 약관 자세히 보기 버튼 클릭 핸들러
|
|
onOptionalAgreeClick, // 동의 버튼 클릭 핸들러
|
|
onOptionalDeclineClick, // 거절 또는 다음에 하기 버튼 클릭 핸들러
|
|
customPosition,
|
|
position,
|
|
}) => {
|
|
return (
|
|
<TNewPopUp
|
|
kind="optionalConfirm" // 이 kind에 따라 TNewPopUp 내부 UI/UX가 결정됩니다.
|
|
open={open}
|
|
spotlightId={spotlightId}
|
|
spotlightRestrict="self-only" // 필요에 따라 props로 설정 가능하게 할 수 있습니다.
|
|
className={`${css.optionalConfirmPopup} ${className || ''}`.trim()}
|
|
onClose={onClose}
|
|
onOptionalTermsClick={onOptionalTermsClick}
|
|
onOptionalAgreeClick={onOptionalAgreeClick}
|
|
onOptionalDeclineClick={onOptionalDeclineClick}
|
|
customPosition={customPosition}
|
|
position={position}
|
|
/>
|
|
);
|
|
};
|
|
|
|
OptionalConfirm.propTypes = {
|
|
/** 팝업의 표시 여부 */
|
|
open: PropTypes.bool.isRequired,
|
|
/** Spotlight ID */
|
|
spotlightId: PropTypes.string.isRequired,
|
|
/** 추가적인 CSS 클래스 */
|
|
className: PropTypes.string,
|
|
/** 팝업의 닫기 이벤트 핸들러 (ESC 키 등) */
|
|
onClose: PropTypes.func,
|
|
/** 약관 자세히 보기 버튼 클릭 시 호출될 함수 */
|
|
onOptionalTermsClick: PropTypes.func,
|
|
/** 동의 버튼 클릭 시 호출될 함수 */
|
|
onOptionalAgreeClick: PropTypes.func,
|
|
/** 거절 또는 다음에 하기 버튼 클릭 시 호출될 함수 */
|
|
onOptionalDeclineClick: PropTypes.func,
|
|
/** 사용자 정의 위치 사용 여부 */
|
|
customPosition: PropTypes.bool,
|
|
/** 사용자 정의 위치 값 (customPosition이 true일 때 사용) */
|
|
position: PropTypes.object,
|
|
};
|
|
|
|
OptionalConfirm.defaultProps = {
|
|
className: '',
|
|
onClose: () => console.log('OptionalConfirm: onClose not provided'),
|
|
onOptionalTermsClick: () => console.log('OptionalConfirm: onOptionalTermsClick not provided'),
|
|
onOptionalAgreeClick: () => console.log('OptionalConfirm: onOptionalAgreeClick not provided'),
|
|
onOptionalDeclineClick: () => console.log('OptionalConfirm: onOptionalDeclineClick not provided'),
|
|
customPosition: false,
|
|
// position: {},
|
|
};
|
|
|
|
export default OptionalConfirm;
|