Olleh 사이트에서 아이폰6 플러스 구매하는데 오류발생…

Category
he's story, 끄적끄적
Posted
2014-11-19 16:37
세월호 참사 1주기 결코 잊지 않겠습니다.

조금 전 잠깐 짬을 내어 Olleh 사이트에 들어가 iPhone6 플러스 주문을 하는데 아주 퐌타스틱한 경험을…
일단 필자는 웹 퍼블리셔(프론트엔드 개발자)임을 먼저 밝혀둔다..

문제의 발단

사이트에서 쭉쭉 주문을 진행하며 정보입력을 하고 약관동의, 본인인증을 마치고 "주문하기"버튼을 클릭했는데 주문이 되지 않고, "약관 동의여부를 체크해 주시기 바랍니다."라는 경고창이 떴다.
필자는 약관을 좀 꼼꼼히 읽는 편이라 ;; 일괄 동의가 아닌 선택적 동의로 필수 약관들에만 동의여부를 체크했는데 혹여나 빠뜨린것이 있나 해서 다시 찬찬히 훑어 봤다.
흠.. 이상하게도.. 선택되지 않은 필수 약관은 없었다.
다시 "주문하기"를 눌러보았으나 여전히 주문은 안되고 같은 경고창이 뜨는 상황.

이렇게 되면… 직업병 발동!!! 두둥!!
Olleh 주문페이지 개발자도구 캡쳐 화면
크롬 개발자도구를 열어 일단 form 검증 부분 스크립트를 뒤져보기 시작했고, 해당 경고창을 뿌려주는 몇 개의 코드를 찾아냈다.
그리고 해당 부분의 선택 여부를 확인하는데…

문제가 된 부분

폼 검증 관련 코드 중에서 내가 걸리는 부분은 바로 다음의 코드였다.

if(!$("#agreeChk2").attr("checked")){
	alert("약관 동의여부를 체크해 주시기 바랍니다.");
	$("#agreeChk2").focus();
	$('.finishBtn').show();
	return;
}

id="agreeChk2"인 checkbox에 체크가 되어있지 않으면 약관동의를 해야 한다라는 것인데, 당황스러운건…

<div id="stplListView">
	<div style="display:none;">
		<input type="checkbox" name="agreeChk2" id="agreeChk2" checked="checked">
	</div>
	...
</div>

즉, 체크를 하라고 시켜놓은 부분이 display:none된 영역 내에 숨어서 사용자가 절대 체크를 할 수 없더라는 거다.
사실, 체크 검증을 .attr() 메서드를 사용한다라는 것도 이게 뭥미? 할 일인데 이건 뭐… 대체 작업을 어느 업체가 맡아서 한건지 참… 이거 분명 제대로 테스트 했더라면 분명 제대로 검증이 안되었을텐데… = _=a (이거 포스팅 해서 해당 업체 욕먹는거 아닌가 몰러 ;;; ㄷㄷㄷ )

어쨌든 주문은 성공… 그러나 찜찜 /=ㅁ=/

어쨌든, 해당 부분의 숨김처리를 해제하고 체크박스를 체크한 뒤 다시 "주문하기" 버튼을 클릭하니 주문이 성공이 되고, 올레샵으로부터 주문 완료되었다고 문자가 날라왔다… 쿨럭…
근데 이거 이렇게해서 주문한거 문제가 없는지 모르겠… 일부러 막아놓은 거라면 뭐.. 서버 사이드 개발자가 검증을 제대로 처리를 안해놓은거니 개발자가 깨질일이고… = _=a
난 몰라~~~ ㅋㅋ ( 문제 일으켜 놓고 나몰라라 /=ㅁ=/ )
일단 고객센터에 글 올려놓고 상황을 좀 봐야겠다 ㄷㄷㄷ

아… 그러고보니 전체 약관 동의를 클릭했다가 해제하고 하나하나 동의 체크한 것 같은데…
.attr() 메서드를 썼다면 여기서 문제가 됐을지도… = _= ㅋ

Authored By 멀더끙