• 실시간 스트리밍 기능: Vimeo 동영상 스트리밍 API를 활용한 실시간 스트리밍 서비스 제공
• 티켓 관리 시스템: 온라인 티켓 구매 기능 구현
• 안정적인 결제 시스템: PortOne을 활용한 다양한 결제 게이트웨이 연동
• 실시간 채팅 기능: 팬과 아티스트 간 소통을 위한 채팅 및 댓글 기능 제공
• 다국어 지원: 영어, 한국어 지원으로 글로벌 유저 접근성 강화

• RDS 전체 테이블 설계
• 프론트/백오피스 화면 전체 개발
• PortOne 결제 연동 및 주문 관리 시스템 구축
• 조회가 잦은 데이터 관리를 위한 Redis 활용
• 다국어 지원
• Amazon S3를 활용한 정적 콘텐츠 파일 관리(고해상도 이미지, GIF 등)
• 라이브 비디오 스트리밍 연계(Vimeo) (※ 비디오 스트리밍 기능을 직접 구현한 것은 아닙니다! 계약 전 개발 범위에 비디오 스트리밍 기능 개발까지 포함이였으나, 클라이언트의 사정으로 계약금이 1/3로 줄어들어 간단히 Vimeo를 활용하는 방향으로 변경됐습니다.)
• 유튜브 연계를 통한 동영상 제공
• 아티스트 응원 메시지 기능 구현
• 공지사항, QnA, FAQ 구현

• Back-end: Java 17, Spring Boot(Web)
• Front-end: TypeScript, React, Redux-Toolkit, Styled Components
• Database: MySQL
• Payment: PortOne, Eximbay
• Infra: AWS EC2, Amazon RDS, Amazon S3, Amazon ElastiCache(Redis), Docker Compose
• Live Streaming: Vimeo

적은 개발 기간과 적은 인원으로 프로덕션 배포 및 운영

스프링 부트를 활용한 체계적인 개발

PortOne을 활용한 주문/결제 프로세스 개발

1. [프론트] 결제 페이지에서 주문서 생성 요청
2. [백엔드] 주문서 생성 및 PG 결제창 생성에 필요한 데이터를 응답으로 전달

1/**
2 * 주문 요청에 대한 주문서 생성
3 *
4 * @param orderRequest        주문 요청 데이터
5 * @param firebaseTokenOrNull 파이어베이스 JWT 토큰
6 * @return OrderAggregate     PG 화면 생성에 필요한 데이터
7 * @throws FirebaseAuthException
8 */
9public OrderAggregate createOrder(PostOrderRequest orderRequest, String firebaseTokenOrNull) throws FirebaseAuthException {
10    /*
11        1. 회원 조회
12            -> 가입되지 않은 회원인 경우 "가입되지 않은 회원입니다." 예외 반환
13        2. 상품 조회
14            -> 상품이 없는 경우 "존재하지 않는 상품입니다." 예외 반환
15        3. 해당 상품과 연결된 티켓 조회
16            -> 해당 상품에 연결되지 않은 티켓인 경우 "존재하지 않는 티켓입니다." 예외 반환
17        4. 주문서 생성
18        5. 선택된 티켓 아이템과 quantity 를 기반으로 금액 계산
19        6. 주문서 저장
20        7. 주문번호, 금액, 사용자 이메일 등 프론트에서 PG 화면 호출에 필요한 데이터 반환
21     */
22
23    FirebaseToken ftoken = getFirebaseToken(firebaseTokenOrNull);
24    Member verifiedMember = memberCache.findById(Long.parseLong(ftoken.getUid()))
25            .orElseThrow(() -> new BizException("가입되지 않은 회원입니다."));
26
27    Product product = productRepository.findByIdAndJoinTicketItemAndShowFlag(orderRequest.productId(), StringBoolEnum.Y)
28            .orElseThrow(() -> new BizException("존재하지 않는 상품입니다."));
29    product.validateProductActivated();
30
31    TicketItem ticketItem = ticketItemRepository.findById(orderRequest.ticketItemId())
32            .orElseThrow(() -> new BizException("존재하지 않는 티켓입니다."));
33    ticketItem.validateTicketItemBuyable();
34
35    Order order = Order.of(
36
37        ... 주문서 생성에 필요한 데이터 ...
38
39    );
40
41    // 주문서 금액 계산
42    order.calculateOrderProductTicketItem();
43
44    Order savedOrder = orderRepository.save(order);
45
46    return OrderAggregate.of(savedOrder, userCode, product.getProductThumbnailUrl());
47}

3. [프론트] 전달받은 데이터로 PG 결제창 생성 후 결제 완료 시 결제가 정상적으로 처리됐는지 검증하기 위해 사후 검증 API 호출

1/**
2 * PortOne을 활용한 PG 결제 Custom Hooks
3 *
4 * @returns OrderCreatedResponse
5 */
6const usePortOnePayment = (): Payment => {
7  const dispatch = useDispatch()
8
9  ... PG 객체 초기화 로직 ...
10
11  // PG 결제창 생성
12  const processPayment = (orderRequest: Order, /* [A] */ onResponse) => {
13    const req = {
14      ...orderRequest,
15      currency: DEFAULT_CURRENCY,
16      language: DEFAULT_LANGUAGE,
17      pg: PG_MID,
18      bypass: {
19        ... 각종 변수 ...
20      },
21    }
22
23    const { IMP } = window
24    IMP.request_pay(req, (response: PaymentResponse) => {
25      onResponse(response)
26    })
27  }
28
29  return { initializePayment, processPayment }
30}
31
32/*** [B] 호출자 콜백 함수 ***/
33/**
34 * PG 결제 처리 직후 결제 사후 검증 요청 콜백 함수
35 * 
36 * @param response 결제 처리 결과
37 */
38const onPGResponseHandler = (response: PaymentResponse) => {
39
40  ... 검증 로직 ...
41
42  validatePaymentSuccessful(requestData)
43  .unwrap()
44  .then((result) => {
45
46    ... 검증 로직 ...
47
48    dispatch(
49      setState({
50        message: '구매 완료했습니다. 내 인벤토리 페이지로 이동합니다.',
51        redirectTo: routerPath.MY_TICKETS,
52      }),
53    )
54  })
55  .catch((error) => {
56    return dispatch(setMessage('결제에 실패했습니다.'))
57  })
58}

4. [백엔드] 회원이 결제를 마치고 결제 결과가 정상적인지 파악하기 위해 결제 사후 검증 수행

1/**
2 * 결제 사후 검증
3 * 
4 * @param request 
5 */
6public PostPaymentValidationResponse validatePostPayment(PostPaymentValidationRequest request) {
7    log.info("PostPortoneWebHookRequest request impUid({}), merchantUid({})", request.impUid(), request.merchantUid());
8
9    // [A-1]
10    PortonePostPaymentValidationResponse portonePostPaymentValidationResponse = portoneApiCaller.getCompletedPayment(request);
11
12    Order savedOrder = orderRepository.findById(portonePostPaymentValidationResponse.response().merchant_uid())
13            .orElseThrow(() -> new BizException("주문서가 존재하지 않습니다."));
14
15    // [B]
16    velidateIsEqualSavedOrderAmountAndPortoneAmount(
17            savedOrder.getTotalPaymentAmount(), portonePostPaymentValidationResponse.response().amount());
18
19    ... 주문서 및 티켓 유효성 검증 ...
20    
21    return PostPaymentValidationResponse.of(... 응답 데이터 ...);
22}
23
24/**
25 * [A-2]
26 * 결제 사후검증을 위한 PortOne 측으로부터 결제 정보 조회
27 */
28public PostPrepareBeforePaymentResponse getCompletedPayment(PostPaymentValidationRequest request) {
29    String accessToken = portoneTokenApiCaller.getToken();
30
31    HttpHeaders headers = new HttpHeaders();
32    headers.setBearerAuth(accessToken);
33    HttpEntity requestEntity = new HttpEntity<>(headers);
34
35    String urlTemplate = UriComponentsBuilder
36            .fromUriString(portoneUtil.getPostPrepareBeforePaymentRequestUrl(impUid))
37            .buildAndExpand(request.impUid())
38            .toUriString();
39
40    var responseEntity = restTemplate.exchange(
41            urlTemplate,
42            HttpMethod.GET,
43            requestEntity,
44            PortonePostPaymentValidationResponse.class
45    );
46
47    return responseEntity.getBody();
48}

라이브 공연 시청 중인 회원들의 주기적인 권한 체크 및 중복 세션 충돌 처리

1const { data: liveVideoDetail, error: liveVideoDetailError } =
2  useValidateHasLiveVideoAuthorizationQuery(
3    {
4      ticketItemInventoryId: location.state?.ticketItemInventoryId,
5      liveUrl: location.state?.liveUrl,
6    },
7    {
8      // [A]
9      refetchOnMountOrArgChange: true,
10      // [B]
11      pollingInterval: 30000,
12    },
13  )
14
15export const liveVideoDetailApi = createApi({
16
17  ... 생략 ...
18
19  endpoints: (build) => ({
20    // [C]
21    validateHasLiveVideoAuthorization: build.query<
22      Response<LiveVideoDetail>,
23      Partial<LiveVideoDetail>
24    >({
25      query: (params: LiveVideoDetail) => ({
26        url: `ticket-inventory/live/${params.ticketItemInventoryId}/auth/${params.liveUrl}`,
27      }),
28    }),
29  }),
30})
31
32export const { useValidateHasLiveVideoAuthorizationQuery } = liveVideoDetailApi

• [A]: 라이브 공연 관람 페이지에 접근하거나 useValidateHasLiveVideoAuthorizationQuery의 첫 번째 파라미터에 변동사항이 발생하면 API를 자동으로 호출합니다. 이를 통해 지속해서 티켓 권한 체크가 가능하게 됩니다.
• [B]: 30초마다 주기적으로 API를 호출해 공연 티켓 권한을 체크합니다.
• [C]: build.query 메서드를 사용하여 데이터를 가져오는 API 호출을 구성하며, URL은 동적으로 생성됩니다. URL은 티켓의 고유 ID와 라이브 URL을 포함하여 해당 리소스에 대한 권한을 확인합니다.

1/**
2 * 회원이 라이브 공연 티켓에 권한이 있는지 검증합니다.
3 */
4public LiveVideoValidationAggregate validateHasLiveVideoAuthorization(Long ticketItemInventoryId,
5                                                                      String liveUrl,
6                                                                      String firebaseTokenOrNull) {
7    ... 검증 로직 ...
8
9    // [A-1] 중복 세션 검사
10    Auth authResult = memberService.validateTokenDuplicated(firebaseTokenOrNull);
11
12    TicketItemInventory myItem = ticketItemInventoryRepository.findByMemberIdAndLiveUrl(
13                    ticketItemInventoryId, verifiedMember.getId(), liveUrl)
14            .orElseThrow(() -> new BizException("해당 티켓에 권한이 없습니다. 먼저 구매해주세요."));
15
16    // [B] 구매한 티켓에 라이브 접근 권한이 있는지 검증
17    myItem.getTicketItem().validateHasLiveAuthorization();
18
19    // 공연이 아직 진행 중인지 검증
20    myItem.getTicketItem().validateLiveVideoExpiredNotYet();
21
22    return LiveVideoVerification.of(myItem, authResult.getToken());
23}
24
25/**
26 * 전달받은 토큰과 Redis에 저장된 데이터를 비교하여 중복 세션 여부를 검사합니다.
27 *
28 * @param newToken 새로 전달받은 JWT 토큰
29 * @return Auth 객체 (사용자 정보와 세션 상태 포함)
30 */
31public Auth validateTokenDuplicated(String newToken) {
32    try {
33        // Firebase 토큰 검증 및 UID 추출
34        FirebaseToken firebaseToken = validateFirebaseToken(newToken);
35
36        long memberId = Long.parseLong(firebaseToken.getUid());
37        String existingToken = memberCache.findTokenByMemberId(memberId);
38        // [A-2] 기존 토큰이 존재하고, 새 토큰과 값이 서로 다른 경우 중복된 세션으로 간주
39        if ((!existingToken != null || !existingToken.isBlank()) && !newToken.equals(existingToken)) {
40            throw new BizException("다른기기에서 로그인되어 로그아웃 합니다.");
41        }
42
43        // Auth 객체 반환
44        return Auth.of(...)
45    } catch (FirebaseAuthException e) {
46        if (AuthErrorCode.EXPIRED_ID_TOKEN.equals(ex.getErrorCode())) {
47            throw new BizException("비디오 권한 체크 중 만료된 세션이 확인됐습니다. 토큰 재발급이 필요합니다.");
48        }
49        ... 나머지 예외 처리 ...
50    } catch (Exception e) {
51        ... 나머지 예외 처리 ...
52    }
53}

• [A-1]: 기존에 로그인 된 회원 세션이 존재하는지 확인합니다.
• [A-2]: Redis에 저장된 회원의 세션이 이미 존재하고, 새 토큰과 값이 서로 다른 경우 다른 기기에서 로그인 된 것으로 간주해 로그아웃 진행을 알립니다.
• [B]: 티켓에는 세 가지 타입이 있습니다. VIDEO(촬영본 접근 권한), LIVE(라이브 공연 접근 권한), COMPLEX(촬영본, 라이브 공연 둘 다에 대한 접근 권한)​가 있으며, VIDEO → LIVE → COMPLEX 순으로 가격이 비싸집니다. 이 검증 로직에서 구매한 티켓에 LIVE 혹은 COMPLEX 권한이 있는지 검증합니다.