이번엔 옵션 이미지를 편집 하려고 해.

'퍼센티 이미지 에디터'를 연 이후에는 썸네일 이미지번역과 같아.

옵션수정 페이지에 대해 설명해 줄께.

옵션페이지에는 각 옵션에 옵션이미지가 존재할 경우에만 편집버튼이 존재하고 활성화 되어있어.
2가지를 고려해야해.

1. 옵션이 선택되었을때와 제외되었을때의 상태가 아래처럼 조금 달라.

선택된 옵션일 경우 요소상태
<div class="sc-gkRewV dxxtNb"><div class="ant-row css-1li46mu" style="margin-bottom: 4px;"><div class="ant-col css-1li46mu" style="flex: 1 1 auto;"><div class="sc-ifjxht jIguTm"><span class="sc-cbelJu kYrOnf FootnoteDescription ">썸네일로 복사</span></div></div></div><img src="https://file.percenty.co.kr/public/652bed8e865b1f32ea62bf1f/products/67e250011cd42d3e6534a4c9/1ecdfd13-ebf2-4bb2-8c78-880c4c7c147f.jpg" class="sc-bklklh kxLUIk"><div class="ant-row ant-row-no-wrap ant-row-space-between ant-row-middle css-1li46mu" style="margin-top: 4px;"><div class="ant-col css-1li46mu"><div class="sc-blFMiU jOJneF"><span class="sc-cbelJu kYrOnf FootnoteDescription ">삭제</span></div></div><div class="ant-col css-1li46mu"><div class="sc-ifjxht jIguTm"><span role="img" aria-label="edit" class="anticon anticon-edit" style="margin-right: 4px; font-size: 12px;"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span><span class="sc-cbelJu kYrOnf FootnoteDescription ">편집</span></div></div></div></div>

제외된 옵션일 경우 요소상태
<div class="sc-gkRewV dxxtNb"><div class="ant-row css-1li46mu" style="margin-bottom: 4px;"><div class="ant-col css-1li46mu" style="flex: 1 1 auto;"><div class="sc-ifjxht jIguTm"><span class="sc-cbelJu kYrOnf FootnoteDescription ">썸네일로 복사</span></div></div></div><img src="https://file.percenty.co.kr/public/652bed8e865b1f32ea62bf1f/products/67e250011cd42d3e6534a4c9/1ecdfd13-ebf2-4bb2-8c78-880c4c7c147f.jpg" class="sc-bklklh kxLUIk"><div class="ant-row ant-row-no-wrap ant-row-space-between ant-row-middle css-1li46mu" style="margin-top: 4px;"><div class="ant-col css-1li46mu"><div class="sc-blFMiU jOJneF"><span class="sc-cbelJu kYrOnf FootnoteDescription ">삭제</span></div></div><div class="ant-col css-1li46mu"><div class="sc-ifjxht jIguTm"><span role="img" aria-label="edit" class="anticon anticon-edit" style="margin-right: 4px; font-size: 12px;"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span><span class="sc-cbelJu kYrOnf FootnoteDescription ">편집</span></div></div></div><div class="sc-fGdiLE jYQUZ"><span class="sc-iUHWHT gzAcNZ">제외된 옵션</span></div></div>

2. 옵션이미지가 있을 경우와 없을 경우의 상태가 아래처럼 조금 달라.
편집버튼의 요소
<span role="img" aria-label="edit" class="anticon anticon-edit" style="margin-right: 4px; font-size: 12px;"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span>


옵션이미지가 있는 경우
class="sc-gkRewV dxxtNb"
옵션이미지가 없는 경우
class="sc-kGJcXs gSfApW"

1번옵션카드 css
"div#productMainContentContainerId li:nth-child(1) > div > div:nth-child(1) > div > div:nth-child(2) > div"
2번옵션카드 css
"div#productMainContentContainerId li:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) > div"