01
운영 화면 동작을 거꾸로 따라가 문서에 없던 예외 조건을 찾았습니다
- 고른 것
- 운영 화면을 직접 써 보며 동작을 거꾸로 따라가고 옮긴 화면마다 같은 조건을 만들어 비교했습니다.
- 결과
- 포인트 적립 약관에 동의하지 않았을 때만 뜨는 팝업 같은 예외 조건을 찾아 새 화면에 구현했습니다.
회사에서 한 일 / 임직원 쇼핑몰 React SPA 재구축
임직원 쇼핑몰 React SPA 재구축
대형 통신사 자회사 임직원 쇼핑몰(수탁), 쇼핑몰 프론트엔드 단독과 일부 백엔드 API
JSP로 된 임직원 쇼핑몰의 사용자 화면(PC와 모바일)을 React SPA로 혼자 다시 만든 수탁 프로젝트입니다. 회사 백엔드 팀이 관리자 시스템과 새 백엔드를 만드는 동안 새 API가 나오는 대로 붙였고 필요한 백엔드 API 일부는 직접 만들었습니다.
기간7개월
2024년 2월부터 8월까지
프론트엔드1인
PC와 모바일 사용자 화면 전체
개통 신청서iframe
외부 업체 화면, 결과는 서버가 돌려준 페이지로
외부 연동 화면2곳
개통 신청서(iframe), 통신사 계정 로그인 창
배경
기존 JSP 쇼핑몰은 소스를 실행하기도 문서를 확인하기도 어려웠습니다. 운영 중인 화면이 사실상 유일한 명세였습니다.
다시 만든 쇼핑몰 사용자 화면의 첫 화면 (로고와 계정 정보는 가림)
한 일과 판단
02
iframe으로만 넣을 수 있는 개통 신청서의 결과를 서버를 거쳐 받았습니다
- 상황
- 휴대폰 상품은 주문을 만든 뒤 외부 업체의 개통 신청서(TGate)까지 써야 끝나고 신청서는 iframe으로만 넣을 수 있었습니다.
- 고른 것
- 작성이 끝나면 신청서가 우리 서버를 부르고 서버가 결과와 다음 동작 스크립트를 담은 HTML을 돌려주게 했습니다. 그 페이지가 원래 주문 화면에 메시지로 결과를 넘기고 주문 화면은 보낸 곳의 출처를 확인한 뒤 완료 화면과 주문 목록을 바꿉니다.
- 남은 경우
- 신청서를 끝내지 않으면 주문은 '신청서 작성 전'으로 남고 주문 목록에서 신청서를 다시 열 수 있게 했습니다.
03
통신사 인증을 거친 로그인 창은 BroadcastChannel로 결과를 넘겼습니다
- 상황
- 통신사 통합 계정(T아이디) 로그인 창이 통신사 인증 페이지를 거쳐 돌아오면
window.opener가 비어 원래 창에 결과를 보내지 못했습니다. - 고른 것
BroadcastChannel로 창 사이에 결과를 주고받게 바꾸고 요청마다 무작위 키를 붙여 다른 창의 결과와 섞이지 않게 했습니다.