[2018.10] 코인원 BTC 마켓 이벤트 페이지

코인원 BTC 마켓 오픈에 맞춰 진행된 5주간의 긴 이벤트를 다루는 페이지였다. 다른 개발 이슈는 크게 없었고 중간에 카드 형식으로 나열되어 있는 5장의 카드가 모바일에서는 가로로 스크롤이 되어야 하고, 초기 진입에 현재 진행중인 카드에 포커스가 맞춰져 있어야 하는 요건이 있었다. 이 때, 발목 골절로 집에서 재택근무 하던 때였는데 진짜 몸 상태 안 좋았었는데도 이거 개발한다고 밤새 붙잡고 있었던 기억이 난다.

카드는 완료(done) / 진행중(ing) / 대기 세가지 상태로 구성되어 있고, 위에 시간이 지날 수록 타임라인의 range가 차오는 형태를 가지고 있다. 카드 상태값은 done, ing 클래스 추가로 변환시키고 위에 타임라인은 data-step="n" (1<=n<=5) 로 n값이 바뀌면 스타일이 맞춰 적용되도록 작업했다.

페이스북 오픈그래프 메타 정보를 넣어서 공유하기에 적절한 섬네일과 설명이 뜨도록 하는 건 여러번 해와서 익숙하다. 하지만 카카오톡 공유하기 기능을 넣은 페이지는 난생 처음이었고 공유 섬네일이 제대로 나오지 않아서 당황했었다. https://developers.kakao.com/docs/cache 여기서 섬네일 캐시 삭제를 하면 된다. 글로벌 서비스만 주로 하다가 국내 서비스를 하면서 겪은 첫 시행착오로 기억된다.