당근 · 2026.05 - 2026.08
신규 상품 상태 모델링
Frontend Engineer Intern · React / TypeScript / GraphQL / Relay
화면·CTA·이벤트가 같은 상태를 읽도록
문제
기존 상품과 결제·이용 상태가 달라 UI와 로직을 그대로 재사용할 수 없었습니다. 상태가 섞이면 잘못된 CTA, 결제 승인 상태 오판과 이벤트 누락이 함께 발생할 수 있었습니다.
선택한 방법
- 서버 값을 렌더링 조건문에 직접 연결하기보다 도메인 상태에서 화면 상태·행동 가능 여부로 이어지는 계약을 먼저 정리했습니다.
- 이용권·결제·진행률·공개·환불·마감 조건을 분리하고, 결제를 준비·결제창·승인·활성화 단계로 나눴습니다.
구현과 확인
- GraphQL/Relay 기반 구현 참여 범위에서 React·TypeScript로 화면 상태와 CTA 규칙을 반영했습니다.
- 약 10단계 퍼널의 실패 위치·오류 유형을 나눠 이벤트 요구사항과 검증 포인트를 남겼습니다. 성공·실패·취소 지표의 누락 위험도 함께 확인했습니다.
확인한 결과
- 퍼널
- 약 10단계
- 결과
- 예외 화면 기준 정립
상태는 렌더링 분기에서 끝나지 않습니다. CTA와 실패 대응, 분석 이벤트가 같은 도메인 계약을 읽어야 운영에서 원인을 추적할 수 있습니다.