React | javascript 로 받은 form형태 react form으로 변환 하기 (에스크로 인증마크 설정)

ESCROW 마크

전달받은 코드

회사에서 프로젝트가 1차 마무리 될 쯤, 운영팀 쪽에서 에스크로 인증 마크를 푸터 하단에 넣어달라는 요청을 받았습니다. 단순히 인증마크 이미지만 추가하면 되는건가 생각했는데, 전달 받은 내용엔 자바스크립트가 포함이...🧐

 

<!-- 기업은행안심이체 인증마크 적용 시작-->
<script>
function onPopAuthMark(key)
{
   window.open('','AUTHMARK_POPUP','height=900, width=630, status=yes, toolbar=no, menubar=no, location=no');
   document.AUTHMARK_FORM.authmarkinfo.value = key;
   document.AUTHMARK_FORM.action='https://kiup.ibk.co.kr/uib/jsp/guest/esc/esc25/getAuthMark.jsp';
   document.AUTHMARK_FORM.target='AUTHMARK_POPUP';
   document.AUTHMARK_FORM.submit();
}
</script>

<FORM name='AUTHMARK_FORM' METHOD='POST'>
    <input type="hidden" name="authmarkinfo">
</FORM>

<a href="javascript:onPopAuthMark('yourPrivateKey1234')">
	<img src='https://kiup.ibk.co.kr/IBK/uib/ecb/img/KO/esc/sub/imgIbkMark.gif' alt='인증마크' border='0'/>
</a>
<!--기업은행안심이체 인증마크 적용 종료 -->

전달받은 코드를 간단하게 살펴보자면, 인증마크 버튼을 누르면 전달받은 키를 은행쪽의 주소로 전달하게 되고 그 전달받은 값을 윈도우 팝업형식으로 띄어주는 코드네요.

index.html 파일에 전달받은 코드 그대로 복붙하게 되면 결과를 바로 볼 수 있지만 저는 원하는 위치에 삽입해야했고 react에 그대로 적용했을때는 타입에러가 나서 그대로 사용할 수 없었기 때문에 react form 형식으로 바꿔보려 했습니다.

 

React form

const key = "전달받은키"

const openMark = (e) => {
    e.preventDefault();
    window.open(
      '',
      'AUTHMARK_POPUP',
      'height=900, width=630, status=yes, toolbar=no, menubar=no, location=no'
    );
    e.target.action =
      'https://kiup.ibk.co.kr/uib/jsp/guest/esc/esc25/getAuthMark.jsp';
    e.target.target = 'AUTHMARK_POPUP';
    e.target.submit();
 };
 

...

<form name="AUTHMARK_FORM" onSubmit={openMark}>
	<input type="hidden" name="authmarkinfo" value={key} />
	<button type="submit">
		<img src="https://kiup.ibk.co.kr/IBK/uib/ecb/img/KO/esc/sub/imgIbkMark.gif"
        alt="인증마크" />
	</button>
</form>

form 태그 안에 key 값을 받는 input과, img를 클릭했을 때 onSubmit 함수가 실행될 수 있도록 img를 button태그로 감싸주었고, 전달받은 키는 input value에 바로 넣어주었습니다.

openMark라는 submit 함수를 만들어 내부에 전달받은 자바스크립트를 조금 변형시켜 넣어주었습니다. 

 

---

완료

에스크로 인증마크를 클릭했을때 뜨는 판매자확인정보 팝업.

 

 

👾 기존에는 api post를 써서 고객의 정보들을 전달하는 일이 많아 굳이 form을 쓰지않아 처음 react 방식으로 변환하는데 애를 좀 먹었습니다. 처음 쓰는 이벤트들은 꼭 콘솔로 찍어 확인해보자..!