이순명

🎁 IFA 2023 - 삼성 경품 이벤트

← 메인으로 돌아가기

디벨로퍼그룹 경력기술서

📋 프로젝트 개요

프로젝트 설명	독일 현지에서 진행한 삼성 경품 추첨 이벤트 프로그램
기술 스택	Next.js, TypeScript, Koa
참여도	프론트엔드 100%, 백엔드 30%
기간	2023.07 ~ 2023.09

🏆 성과

📊 총 방문자 약 16만명 달성

⭐ 주요 기능

📱 관리자 대시보드

• ApexChart.js 활용한 참여 및 방문자 추이 시각화
• 5초 간격 데이터 조회 → 테이블 데이터 리렌더링
• 실시간 모니터링 시스템

📷 QR 코드 시스템

• html5-qrcode 활용 QR 리더 개발
• 카메라 촬영 시 QR코드 params를 담고 페이지 이동 후 검증

📊 데이터 관리

• tanstack-table 활용 테이블 컴포넌트
• PageChange, ExcelDownload(react-csv) 기능 개발

🔄 중복 참여 방지

• React-cookie, zustand 활용
• zustand persist를 이용한 localStorage 저장 후 체크

🛠 기술적 구현

이벤트 당첨 로직

• 서버 사이드 당첨 확률 계산
• 일별/시간별 경품 수량 관리
• 실시간 재고 동기화

모바일 QR 당첨 페이지

Congratulations!
You've won Tombola Ticket!

• QR 코드 제시로 경품 수령
• 당일 교환 가능
• 교환 장소 안내 (지도 포함)

🔧 트러블슈팅

삼성 브라우저 다크모드 이슈

• 문제: 삼성 브라우저에서 다크모드가 적용되어 버튼이 보이지 않는 사이드 이펙트 발생
• 시도:
  1. metadata에 themeColor, colorScheme “only light” 추가
  2. window.matchMedia를 활용 dark모드 감지
• 해결: 삼성 브라우저 자체에서 수년간 대응하지 않는 것으로 확인되어 고객사와 협의 후 디자인 변경

프론트-백엔드 시간대 이슈

• 문제: 현지 시간으로 인한 당첨 로직 오류
• 해결: dayjs plugin utc, timezone을 활용하여 독일 시간으로 통일

💡 성과 및 배운점

• 대규모 트래픽 대응: 16만명 방문자 무장애 서비스
• 글로벌 서비스 경험: 시간대 처리, 다국어 대응
• 실시간 모니터링: 대시보드를 통한 즉각적인 현황 파악
• 크로스 브라우저 대응: 다양한 브라우저 환경에서의 문제 해결 경험

---

← 메인으로 돌아가기