[고스락 티켓 2.0] 두번째 프로젝트는 어떻게 달라졌을까요?

23년에도 할까..

우선 고스락 티켓 예매 프로젝트의 목적은

기존 종이티켓으로 표를 팔러다니던 OB시절에서 정산의 어려움이나 공연 홍보의 어려움

또한 비대면 시대로 돌입하면서 학교에 모이는 인원이 적다보니

그런 문제를 타파하고자 QRcode 온라인 티켓과, 예매프로세스를 제공해서

공연 예약과 홍보 두마리 토끼를 잡는 프로젝트이다.

22년 초 21번째 고스락공연에서 의미있는 성과를 거두고,

22번째 기술적인 스택을 업그레이드 하면서 프로젝트를 진행중이다

---

교내 컴퓨터 동아리에 주력 밴드부가 고스락 , 깔루아 이 두가지가있는데 

매번 신입생 모집기간에 은근히 경쟁을 한다.

 

예매 프로젝트 기획하고, 만들면서 예매 편의나 공연에대한 홍보효과는 어느정도 생각했지만

이렇게 뚜렷하게 홈페이지랑 예매시스템 까지 제공하고나니 신입생 모집 효과도 엄청났었다.

 

나도 21학번들과 회의하면서 22학번들 모집을 좀더 쉽게할 수 있을까해서 예매에 소모임 기능 까지 넣어서

소모임 신청을하면 선배들과 밥을 먹을 수있는 자리를 마련하는 그런 기능까지 넣었었다.

 

그결과 54명이 동아리면접에 지원했고 ( 12명 모집하는데 ) 역대급 지원률을 자랑했다.

(하.. 18학번때 들어와서 다행이다... )  

웹엑스 신입생 면접때 들어가서 구경했는데 지원동기에 홈페이지까지 있는 굵직한 동아리인것 같아서 지원했다는게 반이넘었다 뿌듯 ㅎ

하나 아쉬웠던점은 코로나 상태라서 

1인 1매 원칙으로 최대인원 꽉꽉채워서 공연했다.. ㅠ

카카오톡 플러스친구로 표 남았냐고 연락 엄청왔는데 진짜 아쉬웠다

---

요번 22th 프로젝트는

코로나 인원제한이 풀렸기 때문에

기존 1인 1매 원칙에서

공연이 이틀동안 열리므로

여러 주문을 넣을 수 있게 끔 변경했다.

그리고 9월달이므로 소모임 기능이빠지고, 재미요소를 위해서 응원 댓글이 추가가 되었다.

기술적으로는 ,

백엔드는 타입스크립트 기반 nest js 로,

프론트는 타입스크립트 리액트로 기술적인 스택을 업그레이드 시켰고.

백엔드는 자바스크립트 리액트를 유지하면서 볼륨을 키워 처음 프로젝트를 진행하는 인원들도

쉽게 적응 할 수 있게끔 구성했다.

 

기획, 피그마 와이어프레임은 규진이와 내가 맡아서 하고,

나는 문구나 배치,설계같은 전체적인 그림 봐주고

규진이가 디자인 진짜 열심히 해줬다 진짜 고생했다요번엔...

피그마 보실분들은 함보시라!

 

Figma

7월 중순부터 프로젝트를 시작했다.

글쓰는 이시점도 아직 진행중이지만..!

8월중순에 마무리지어서 늦어도 20일전에는 예매 배포를 하려고 한다.

 

팀장을 맡으면 질문도 많이들어오고 ... 조율해야할것도 많고 

신경쓸 부분도 많지만

항상 뭔가 뿌듯한것 같다 사실

3월달에 할때만 생각대로 잘 될까 불안했었지 지금은 ㅋㅋ

자신감이 넘쳐흘러서.. 걱정보다는 어떻게 하면 더 멋져질까 그 생각만한다

재밌다!

 

공연날짜는

9월 1일 YB

9월 2일 OB

공연한다.! 나는 드럼으로 두곡 OB때 공연을 한다 ㅋㅋㅋ

(나 삼학년인데 벌써 OB라니...ㅠ) 

 

주요기능

---

백엔드

 스프링과 비슷한형식으로 di를 할수있는 장점을 충분히 활용하여 문자발송 , 슬랙알림등 개발 , 실서버 에서 다르게 동작하도록 구성했고.

각 모듈별로 인원분담해서 작업을 했다.

 작업환경은 docker-compose 를 통해서 redis , postgres, pg-admin4 컨테이너를 제공해서 손쉽게 구성할 수 있도록 하였다.

• nest js, typeorm, postgres 적용
• bull js redis 큐로 비동기 작업처리 ( 문자발송, 슬랙발송등 )
• 소켓 서버로 실시간 입장 확인 이벤트 처리
• 주문, 티켓 , 유저(응원댓글포함 ) , 인증 등 모듈별로 나눠시 구성
• di활용하여 개발환경에서는 fake문자발송서비스 , 실제환경에서는 진짜문자발송 처리
• 슬랙 500 번대 오류알림 ( di되어있음 )
• redis async 모듈
• 스웨거로 문서 제공
• 슬랙으로 어드민 로그인
• 문자인증
• 티켓 문자발송

배포

• 각 프로젝트에서 docker 빌드 , 태깅
• 배포 관련 레포에서 gitops 형태로 github action을 통한 compose 배포

어드민

• 주문, 대금 관련 통계기능
• 유저 조회 검색 기능 ( 페이지 네이션 )
• 주문 조회 검색 기능 ( 페이지 네이션 )
• 티켓 조회 검색 기능 ( 페이지 네이션 )
• 실시간 티켓 입장 확인
• 어드민 로그인 된 페이지내에서도 실시간 티켓 입장 확인 알람 받을 수있음
• 카메라로 QRCODE 확인 ( 전방, 후방 카메라 지원 )
• 댓글 추첨기능 제공

프론트

• 리액트 쿼리 사용
• 오류 정의해서 공통으로 처리
• storybook을 통해 디자인 작업
• 모달창 공통으로 관리
• 티켓페이지에서 실시간 입장확인
• 응원 댓글기능

   

 

 

---

백엔드

뭔가 밑에서 사진다 집어넣으니깐 넣을게... 없네요 백엔드가..

 

 기능은 명확하다. 한 주문마다 최대 3매의 티켓을 살수있고, 

공연이 이틀동안하기 때문에 주문에는 양일권, YB , OB 상태로 냅뒀고

티켓은 YB , OB 두가지 상태로 두었다.

 

 입금 처리같은 대금 관련한것들은 주문에 의존성을 두고,

QRcode를 랜더링해줘야하는 부분이나 입장처리등 은 티켓한테 의존성을 두었다.

 

 

 요번엔 스웨거 사용해서 문서를 만들었다. api는 저번보다 두배? 정도 늘었고 밑에 티켓이랑 주문 관련 스웨거도 더 있다 ㅋㅋ

하면서 응답 예시를 같은 상태코드 (400번이면 400번에 두개 )에 여러 예시를 보여주고 싶었으나. 네스트에서는 잘 지원을 안해줘서 

스웨거 @ApiProperty 메타데이터 활용해서 객체를 실제로 만들어서 예시 객체를 만들어서 value 형태로 넘겨주었다.

 

이부분은 나중에 자세히 포스팅을 할예정 이다

 

 redis 모듈을 forRootAsync ( 다른 nestjs 모듈처럼 ) configSerivce를 팩토리로 넘겨줘서 모듈을 임포트하는 소스도 구성해보았다.

그냥 redis모듈을 간단하게 고티켓 소스안에 포함시켜도 되지만 다른 프로젝트에서도 재사용 할수 있을것 같아서

 이런형식으로 구성을 해봤다.

redis configservice factory로 받아서 설정할 수 있는 소스

 

 슬랙 모듈이나 sms 모듈도 di의 장점을 적극 활용해서

s lackService를 반환하는데 환경변수에 따라서 실제로 알림을 보내줄지말지에대한 FakeSerivce도 만들어서 export 해주었다

따라서 slackService를 전혀몰라도 알림을 개발환경이면 안보내는 그런식으로 구성을 할 수 있었다.

 

 

 요번에는 운영진들의 편의나 디버깅을 위해서 , 티켓상태의 변경이 일어났을 때나 새로운 주문이 생겼을 때 슬랙으로 알림이 오게 끔 했다.

 

 22학번 총무 ( 고생해라.. ) 가 슬랙에서 새로운 주문이 생긴걸 알림으로 받아볼 수 있게했고

실 운영서버에서 500번대 오류가 터지면 대응할 수 있게끔 공통오류 인터셉터에서 잡아서  메소드랑 url 이랑 요청 바디랑 에러 스택도 함께 보내줄수 있도록 구성해봤다.

 

 

 그외에 위와같은 비동기적 처리가 필요한 부분들은 bull js 를 이용해서 redis 를 큐형태로 써서 api응답 흐름을 막지않고 작업을 처리할 수 있도록 구성하였다!.

 

 소켓 실시간 입장 처리부분은 21번째 프로젝트와 동일하게 구성되어있다. 다만 스택이 nestjs로 바뀌었을뿐 소켓부분이 궁금하면

경민형네로 넘어가시면된다 ㅎㅎ 

[Gosrock] Nestjs +  Socket.io 사용하여 실시간 공연 입장 시스템 구현하기

[Gosrock] Nestjs + Socket.io 사용하여 실시간 공연 입장 시스템 구현하기

 

 딱히 뭐... 특별한거 없이 무난무난 하게 넘어갔다. 보일러 플레이트 짜면서 스프링이랑 최대한 비슷하게 구성할려고 노력했다.

그부분에 대해선 포스팅을 더할예정이고 여기 추가하겠다!

 

 

---

어드민

 고스락 티켓 예매 프로젝트에서 어드민은 단순 데이터 조회나 변경 뿐만아니라 실시간 입장확인 기능까지 중요한 포인트들을 맡는다.

자바스크립트 기반 , react , redux를 사용하고 , socket.io 를 활용해서 실시간 이벤트를 서버로 부터 받는다.

유저 주문 티켓 조회, 수정 페이지

 

 유저, 주문 , 티켓 조회,수정 관련 테이블들은 antd 의 table 을 활용해서 제작했고, 단순 페이지네이션 조회뿐만아니라 데이터 수정시

수정된 부분만 리스트에서 변경해서 새로운 리스트로 반환하는 로직까지 적용되어있다.

 특히 updatedAt을 admin 정보와 함께 받아서 누가 마지막으로 수정했는지에 대한 정보도 보여주고, 정보가 수정될 시에 백엔드에서는 슬랙으로 누가 어떤정보를 수정했는지 로그겸 해서 알림을 보내준다.

 

 왼쪽 메뉴 바 메인 레이아웃 이하에 여러 페이지 route 들이 모여있는 구조이고 , hoc를 통해서 로그인 안한 사용자는 접근하지 못하게 막아놨다.

 

실시간 입장화면 페이지

 티켓을 검수하면서 QRcode로 찍게되면 실시간으로 이벤트를 받을수 있는 화면이다. 티켓이 유효한지, 티켓의 사용자는 누구인지 , 입장가능여부를 실시간으로 받아볼수 있다.

 context api의 provider를 사용해서 카메라 QRcode를 찍는 부분을 제외한 다른 페이지에서는 소켓이 항상커넥션 되어있어 아래처럼

 

 다른 정보를 조회중에도 실시간으로 알림을 받아볼수 있고, 해당 정보도 리덕스에 저장되므로 실시간 티켓 입장확인 페이지에가면 저장된 형태로 볼 수 있다.

 

 가장 핵심인 QRcode 찍는 카메라 부분이다. 기존엔 앱으로 구현을 했었는데 , 인원도 빠지고 , 관리자에 집중도 할겸 해서 웹으로 제작하게 되었다.

 전면 카메라 , 후면 카메라 두가지 모드를 지원하고 , 웹이므로 관리자 여럿이서 찍으러 다닐 수있고 , 전면 카메라를 통해서 거치형으로 휴대폰을 놓은뒤에 검사를 할 수있게도 제작하였다.! 세환이가 귀엽게 소리도 넣어줬다.ㅎㅎ

 

 

---

프론트

 

프론트는 원채 규진이가 너무나 잘적어둬서  규진이한테 맡기겠다!

 

[고스락 티켓 2.0] 기획, 디자인 개편 

[고스락 티켓 2.0] 기획, 디자인 개편

 

 

---

 

저번에 비해서 같은 팀원들 실력이 다들 엄청나게 업그레이드 되어서 수월하게 진행된것 같다.

열심히 따라와주는 팀원들 보면 참 뿌듯하다

21번째 공연 프로젝트에서 막상 변한건 거의 없는것 같은데

내부까보면 엄청나게 변한거다.. ㅋㅋ

조금 힘든 스택, 요구사항인데도 잘 따라와준 팀원들 고맙구..

 

 

그리고... 고스락 브랜딩도 넘나 잘되어있어서 걍 멋지다. 규진아 진짜 고생이 많다...

기획적으로 좀더 추가할기능도 많고 개선점도 몇몇 보이긴하지만 한번에 다하면 재미없으니 ㅎㅎ

23th 로 돌아오겠다!

 

고스락