Project#2 | muse 회고 | 뮤지컬 예매 플랫폼

 
위코드의 1차 프로젝트 끝나고 남은 1주 동안 자바스크립트 공부해야겠다 하고 고민했는데,
1차 프로젝트 정리하고 이력서 쓰고 하다보니 어느새 순삭으로 2차 프로젝트가 시작됐다.
 
이번엔 1차 프로젝트와 다르게 7명씩 각각 팀이 이루어졌다.
 

Period

2023.04.24(월) ~ 05.04(목) 총 11일

 

Chill&Play Member

FrontEnd

• 신효민(Project Manager)
• 박지연
• 김정환

BackEnd

• 김원종
• 임성근(Product Manager)
• 왕광현
• 최상현

 

Frontend Stacks

2차와 다르게 Styled-Components 를 적용하여 따로 Css 파일 을 만들지 않고, JavaScript 파일 한 곳에서 스타일링을 줄 수 있었다.
Styled-Components 를 사용하면, 클래스명을 따로 주지 않아서 클래스명을 고민하는 시간을 줄일 수 있고, 파일 관리하기 더 편했다.
그리고 자바스크립트 내에서 쓰이는 변수와 함수를 Styled-Components라이브러리를 통해 스타일에도 적용해줄 수 있다.
 
1차 때는 트렐로 카드 옮기기를 하면서 카드에 해당하는 작업에 대한 기간도 추가하여 관리하게 되었다.
대략 며칠이 걸릴지 카드를 통해 다른 사람들과 작업 기간을 공유하여 작업 속도가 더 빨라지기도 한 거 같다.
 
 
 
 
이번 프로젝트에서 특별하게 좋았던 점은 Product를 우리가 벤치한 플랫폼과 다른 걸로 선택했다는 거다.
그대로 현존해있는 서비스를 따르지 않고 진짜 우리만의 상품을 만들자로 시작하고 나니,
이런 유저가 있지 않을까하며, 사용자 입장에서의 경우의 수를 더 고려하고 작업할 수 있었다.
 
 

About 'muse'

인기 있는 뮤지컬 작품을 추천받고, 빠르고 간편한 절차를 통해 뮤지컬을 예매할 수 있는 웹서비스

 

 
뮤지컬은 대중적으로 많은 사람들이 관심을 가지고 있는 예술의 한 분야로 
관람객의 오감을 자극하고 힐링과 영감을 준다는 의미에서 '뮤즈'라고 네이밍했다.
로고는 김정환 님의 작품 ✨
 
우리 팀은 영화 예매 플랫폼을 모델링하게 되었는데, 그 이유는 1차 때 이미 모두가 e-commerce 플랫폼을 작업해봤기 때문에
이번엔 색다르게 예매 웹서비스 플로우를 경험하면 좋겠다고 생각해서였다.
 
 
 

Pages

'muse' Ticketing Flow

카카오로 로그인하기 -> 메인 둘러보기 -> 챗봇을 통해 뮤지컬 추천받기 -> 뮤지컬 리스트에서 원하는 순서대로 뮤지컬 보기 -> 보고 싶은 뮤지컬 상세정보 확인하기 -> 뮤지컬 예매하기 -> 결제하기 -> 마이페이지에서 예매 내역 확인하기 -> 관람한 뮤지컬 포토리뷰 작성하기

위와 같은 플로우를 가지고 페이지를 작업
내가 맡은 페이지는 로그인, 메인, 포토 리뷰로 1차 프로젝트 때 해보지 못한 걸로 선택해서 각자 맡게 되었다.
 
 

로그인

https://pajiyeee.tistory.com/11

React | REST API를 이용한 Kakao 소셜 로그인 기능 구현

신속하게 원하는 뮤지컬 티켓 예매가 가능한 소셜 로그인 API 활용

• 대중적으로 많이 사용하는 카카오로 로그인할 수 있도록 카카오 API를 연동
• REST API를 활용하여 카카오로부터 인가코드를 받아 백엔드에 넘겨주면, 도용과 해킹을 방지하기 위해 백엔드에서 다시 '뮤즈'플랫폼 전용 토큰을 발급 받아 로그인
• 로그인이 승인되는 시간이 길어질 경우 사용자의 이탈률을 줄일 수 있도록 로딩 마이크로 모션 기능 구현

 

 
 

메인

영상과 이미지로 생동감을 더하여 뮤지컬을 홍보하는 메인 화면

• 사용자가 처음 사이트 진입 시, 뮤지컬에 대한 관심도를 높일 수 있도록 상단 배너에 다양한 뮤지컬 홍보영상과 이미지로 swiper 라이브러리 사용하여 캐러셀 UI 구현
• 사용자의 스크롤에 따라 반응하여 컨텐츠가 나타나는 스크롤 이벤트 구현
• 상단 배너와 함께 인기 많은 뮤지컬 차트를 보여줄 수 있도록 백엔드와 fetch API 활용하여 데이터 출력
• 차트에 마우스를 올리면, 해당 뮤지컬을 예매하거나 상세페이지로 이동할 수 있는 동적 라우팅을 적용

 

 
 
 

포토 리뷰

뮤지컬 예매를 고민하는 유저를 위한 포토 리뷰를 남길 수 있는 컨텐츠

• 신뢰도를 높이기 위해 해당하는 뮤지컬을 관람한 이력이 있는 사용자만 리뷰 남길 수 있도록 fetch API 활용하여 통신하여 구현
• 이미지 파일을 업로드하여 원하는 이미지를 선택했는지에 대한 미리보기 기능 제공
• 관람한 뮤지컬에 대한 평가를 수치화할 수 있는 리뷰 별점
• 페이징 쿼리(offset, limit)를 활용하여 더보기 버튼 클식 시, 리뷰 리스트 누적되어 출력
• 사용자가 쓴 리뷰에 한해 DELETE 메서드를 활용하여 삭제 기능 구현

 

 
 
 
 

프로젝트 회고

좋았던 점

-팀이 다같이 1차 스프린트 회고하면서, 프론트와 서버의 API 문서화가 필요함을 느끼고 포스트맨으로 key 와 value를 맞춰 편했던 점.
-각자 맡은 역할들이 분명하고 한 페이지 당 작업 기간을 설정해두고 해서 작업 속도가 빨랐음.
-프로덕트를 뮤지컬로 설정한 게 신의 한 수! 어떻게 하면 더 상품이 드러나게 할 수 있을까 고민하며, 각자의 인생 뮤지컬을 보는 시간도 가짐.
-이번엔 로그인에서 카카오 API를 연동해서 구현해볼 수 있었음
-리뷰도 꼭 해보고 싶었는데, 리뷰가 생각보다 통신할 부분이 많았는데, 백엔드인 김원종 님이 열심히 API를 만들어 주신 덕분에 통신이 수월하게 됨.
-프론트엔드가 디자인에도 신경쓰며 여러 예매 플랫폼을 벤치하며 작업한 점
-각자 1차 프로젝트의 경험을 가지고 2차 프로젝트 때 해보고 싶었던 걸 하고, 보완했던 점
-데일리 스탠드업 미팅을 하면서 각자 한 것과 막힌 문제, 오늘 할 일에 대해 노션에 기록하고 회의해서 더 편했던 점
 

아쉬웠던 점

- 프로젝트를 진행하면서 마주한 에러들을 하루하루 기록해보려고 했는데 그러지 못한 것. 내 기억력을 너무 믿지 말기
- 백엔드랑 소통함에 있어서 내가 잘 모르는 부분들이 많아 확실히 답을 주기 어려울 때가 많았던 점.

 

다음에 시도해보고 싶은 점

-정환님이 예매페이지 맡아서 하시는 걸 봤는데 너무 어려워보였지만, 개인적으로 커스터마이징 서비스에 관심 있어서 꼭 경험해보고 싶음


2차 프로젝트에서도 소통이 정말정말 중요함을 많이 느꼈고,통신이 되는 게 신기하고 재밌었던 프로젝트였다. 같이 한 팀원분들과도 기능을 고민해나가고 도움 받으면서 배울 점이 많았다. Chill&Play팀원분들과 리뷰해주신 멘토분들께 감사합니다~