[ERP project] #03. Issues CPopover 과 button, css(pointer-event) error 이슈
문제 발생
위의 사진에 있는 우측 명세표에서 명세표를 열면 글씨가 뒤로 가면서 CPopover 과 button, css(pointer-event) error 이슈 발생 명세 디자인을 하다 보니 기존 세금 컨텐츠를 일시적으로 가려두고 버튼을 눌렀을 때만 보이게 작업을 진행을 원했고, 작업을 하다보니 닫기 버튼을 눌렀을 때 가려져 있던 컨텐츠와 버튼 이벤트가 출동하여 이슈가 발생.
해결 방법
해결책으로 receipt__content 부분에 pointer-event를 통해 none값을 주었고, 해당 값을 주자 CPopover(팝오버) 즉, 마우스오버 까지 none 값으로 노출이 안되는 상황 발생. 해결 방법으로는 pointer-event 값을 none 값을 안준 나머지 css에 auto 값을 주어 닫기 버튼을 눌렀을 때 세금 명세 컨텐츠는 마우스 이벤트 none 으로 막고 그 이외에 상황엔 마우스 hover시에 정상작동 하도록 하나하나 지정해주었다.
오류 발생 코드 참고
<CCol xs={12} md={6}>
<h4 className="PayTitle">
계산 결과 확인
<br />⤵
</h4>
<div className="receiptName">
<article className={`receipt ${isActive ? "active" : ""}`}>
<section class="receipt__half upper">
<p className="sm">2023년 기준 명세</p>
<div className="receipt__content">
{/* 위의 사진에 있는 우측 명세표에서 명세표를 열면 글씨가 뒤로 가면서
CPopover 과 button, css(pointer-event) error 이슈 발생
명세 디자인을 하다 보니 기존 세금 컨텐츠를 일시적으로
가려두고 버튼을 눌렀을 때만 보이게 작업을 진행을 원했고,
작업을 하다보니 닫기 버튼을 눌렀을 때 가려져 있던 컨텐츠와 버튼 이벤트가 출동하여 이슈가 발생.
그래서 해결책으로 receipt__content 부분에 pointer-event를 통해 none값을 주었고, 해당 값을 주자 CPopover(팝오버)
즉, 마우스오버 까지 none 값으로 노출이 안되는 상황 발생.
해결 방법으로는 pointer-event 값을 none 값을 안준 나머지 css에 auto 값을 주어
닫기 버튼을 눌렀을 때 세금 명세 컨텐츠는 마우스 이벤트 none 으로 막고
그 이외에 상황엔 마우스 hover시에 정상작동 하도록 하나하나 지정해주었다. */}
<CRow>
<CCol xs={6}>
<CPopover
content="월 소득액(비과세액 제외)에서 4.5%를 공제합니다. 근로자, 기업 각 각 4.5% 씩 부담합니다 "
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span
className="d-inline-block" // 팝오버를 보이도록 상태 업데이트
>
{" "}
국민연금{" "}
</span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {pension.toLocaleString()}
</CCol>
<CCol xs={6}>
<CPopover
content="월 소득액(비과세 제외)에서 7.09% 를 공제합니다. 근로자 기업 각각 3.545% 씩 부담합니다"
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span className="d-inline-block">건강보험</span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {healthInsurance.toLocaleString()}
</CCol>
<CCol xs={6}>
<CPopover
content="건강보험금액의 12.81%를 공제합니다"
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span className="d-inline-block"> 장기요양 </span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {jang.toLocaleString()}
</CCol>
<CCol xs={6}>
<CPopover
content="월 소득액(비과세 제외)에서 0.9% 공제합니다"
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span className="d-inline-block"> 고용보험 </span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {employmentInsurance.toLocaleString()}
</CCol>
<CCol xs={6}>
<CPopover
content="급여와 부양가족수에 따라 국세청의 근로소득 간이세액표 자료를 기준으로 공제합니다 "
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span className="d-inline-block"> 근로소득세 </span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {jap.toLocaleString()}
</CCol>
<CCol xs={6}>
<CPopover
content="소득세의 10%를 공제합니다."
placement="left"
trigger={["hover", "focus"]}
id="popover-content"
>
<span className="d-inline-block"> 지방소득세 </span>
</CPopover>
</CCol>
<CCol xs={6} className="rightCol">
{" "}
₩ {miniJap.toLocaleString()}
</CCol>
<p className="smP">
🔔 각 항목 별 마우스 오버시 상세정보 확인 가능합니다.
</p>
</CRow>
Leave a comment