컨퍼런스-언컨퍼런스

team•프론트 : 100%

컨퍼런스 신청/결제 플랫폼 | 310명 실사용, Toss 결제 연동

링크

프로젝트 보기puddingcampblog

프로젝트 개요

1

기획자 + 디자이너 + 백 엔드 개발자와 협업

2

총 약 310명 신청 (오프라인 신청자 : 약 60명, 온라인 신청자 : 약 250명)

3

TossPayment 결제 연동

4

2024.08 - 2024.09(2개월)

기술 스택

  • React
  • react-router-dom

직면한 이슈

1. 결제 테스트, CORS

과제

로컬 환경에서 결제 테스트 시 브라우저 Same-Origin Policy에 의하여 막힘 발생

해결

ngrok 프록시를 통한 임시 우회 후, 서버 측 CORS 설정으로 안정적인 개발 환경 구축

2. 결제 시, 데이터 연결 시간차

과제

토스에서 전달하는 데이터 불완전성 (데이터 연결 시간 지연)

해결

결제 완료 후 웹 서버에서 프론트엔드로 데이터 전송 시 시간 지연 발생, 사용자 지루함 해소 및 안정적인 프로세스 경험을 위해 3 ball bounce 로딩 애니메이션 대기 화면 추가

3. 결제 페이지 UI 선정

과제

결제 UI 구현 방식 선택: 하단 고정 vs 팝업

해결

다양한 화면 크기 대응과 집중도 향상을 위해 position:fixed 기반 팝업 UI 방식 채택

4. 신청 페이지 직업 선택 Dropdown 리스트

과제

기본 <select> 요소의 스타일 제약으로 인한 디자인 일관성 저하

해결

커스텀 Dropdown을 div 기반으로 구현하되, tabIndex와 onKeyDown으로 접근성(키보드 탐색) 확보

5. Default 탭 이외 정보 값 공유

과제

기본 탭 외 다른 정보 값 출력 및 공유 기능 필요

해결

정보 공유 편의성 향상을 위해 기본 탭 외 다른 탭을 URL로 직접 접근 가능하도록 탭 별 URL 설정 기능 구현