기능 목록

공통 헤더

• [버튼] 로고 => Logo

  • 클릭 시 메인페이지로 이동

• [버튼] 이벤트 주최하기 => CreateEventBtn

  • 클릭시 이벤트 주최 페이지로 이동

• [버튼] 가입 혹은 로그인 / => AccountBtn

  • 클릭시 로그인 페이지로 이동
    • 만약 로그인이 된다면 로그인 된 사용자의 이름을 표기해야함
  • 클릭시 마이 페이지로 이동
  • Props를 설정하여 분기 (href, contents)

메인 페이지

• 페이지 최초 로딩시 API [API] 카드 정보 가져오기 + 카드 그리드의 무한 스크롤에 사용할 API (동일한 것)

[API] 카드 이미지별 LazyLoading에 사용할 API

• [컨테이너] 메인 배너 => MainBannerContainer

  • Container 전체를 감싸는 이미지가 있음
  • [버튼] 이벤트 주최하기 => CreateEventBtn
    • 클릭시 이벤트 주최 페이지로 이동

• [그리드] 이벤트 카드 그리드 => EventCardGrid

  • 카드들이 4열 횡대로 표시됨
  • 스크롤 끝에 임박시 무한 스크롤
  • Lazy Loading (gray -> low -> high)
  • [카드] 이벤트 표시 카드 => EventCard
    • 클릭시 해당 이벤트 상세 페이지로 이동
    • 이벤트 이미지
    • 이벤트 시작날짜
    • 제목
    • 주최자
    • 티켓 가격 (무료 || 000원)

로그인 페이지

• [API]

  • 로그인 버튼 클릭 시
    • 로그인 성공여부 (OAuth)

• [이미지] bookus 로고 => Logo

• [버튼] 로그인 버튼 => LoginBtn

  • 클릭 후, OAuth과정을 거친 후 해당 유저의 데이터가 데이터베이스에 있으면 메인 페이지로 이동 (로그인)
  • 클릭 후, OAuth과정을 거친 후 해당 유저의 데이터가 데이터베이스에 없으면 회원가입 페이지로 이동 (회원가입)

회원가입 페이지

• [API]
  • 회원가입 버튼 클릭 시
    • [POST] 사용자 정보

[Validation]

• 각각 입력 필드에 대한 Validation 필요

  • 이미지: 공백 검사 / 7MB 제한
  • 성, 이름 : 공백 검사 / 30자를 넘지 않음
  • 전화번호: 공백 검사 / 13자를 넘지 않음 / '-' 쓰지 않음
  • 모든 Validation의 경우 input 아래에 붉은 글씨로 에러를 표기한다.

• [컨테이너] 사용자 수정 폼 => ModifyFormContainer

  • [텍스트] 이메일 라벨 => EmailLabel
  • [Input] 이메일 입력 => EmailInput
    • Oauth에서 넘어온 이메일이 표시됨/ disabled 상태
  • [컨테이너] RowContainer
    • [컨테이너] ColContainer
      • [텍스트] 성 라벨 => LastNameLabel
      • [Input] 성 입력 => LastNameInput
        • [Validation - 성]
    • [컨테이너] ColContainer
      • [텍스트] 이름 라벨 => FirstNameLabel
      • [Input] 이름 입력 => FirsthInput
        • [Validation - 이름]
  • [텍스트] 전화번호 라벨 => PhoneLabel
  • [Input] 전화번호 입력 => PhoneInput
    • [Validation - 전화번호]

• [버튼] 회원가입 버튼 => JoinBtn

  • 클릭 시 회원가입을 시도하고 성공하면 메인페이지로 이동
    • 실패한다면 validation 표시 또는 alert로 회원가입 실패

이벤트 상세보기 - 666

• 페이지 최초 로딩시 API [API] 주최자 정보 가져오기 [API] 이벤트 정보 가져오기 - 이벤트 정보에는 이벤트 상세 md 내용 포함 [API] 티켓 정보 가져오기 [API] 지도 API 호출

[API] 티켓 구입 버튼 클릭시 티켓 구입 페이지로 이동하기 [API] 주최자 링크 공유 아이콘 클릭시 주최자 정보 페이지로 이동하기

• [컨테이너] 이벤트 설명 배너 => EventBannerContainer

  • [이미지] 이벤트 대표 이미지 => BannerImg
    • 16:9 의 이미지 비율로 보여줌
  • [컨테이너] 이벤트 대표 설명 => DescContainer
    • [텍스트] 이벤트 제목 => Title
    • [텍스트] 이벤트 장소 => Location at '주최 장소'형태
    • [텍스트] 이벤트 일시 => Date
      • yyyy년 mm월 dd일 (월) 형태
      • 오후 1:00 - 오후 6:00 형태
    • [컨테이너] 이벤트 주최 => HostContainer '주최' 텍스트 상단에 존재 하단에 아래와 같은 형태
      • [이미지] 주최한 사용자 프로필 이미지 => Img
      • [텍스트] 주최한 사용자 프로필 이름 => Name

• [컨테이너] 티켓 구입 컨테이너 => TicketBuyContainer 이 컨테이너는, 화면에서 벗어날 경우 브라우저의 최상단에 붙어있는 Sticky Top element임

  • Sticky Element 형태일 경우:
    • [텍스트] 이벤트 제목 => Title
    • [텍스트] 가격 => Price
    • [텍스트] 티켓 구입한 사람 수 => ParticipantCnt
    • [버튼] 티켓 구입 버튼 => BuyBtn
  • Sticky Element 형태가 아닐 경우:
    • [텍스트] 가격 => Price 상 하단에 브라우저 양옆으로 꽉 차는 작대기가 있음
    • [텍스트] 티켓 구입한 사람 수 => ParticipantCnt
    • [버튼] 티켓 구입 버튼 => BuyBtn

• [텍스트] 이벤트 상세내용 문서 => EventDocTxt

• **[텍스트] 티켓 **

  • '티켓'이 고정값

• [컨테이너] 티켓 정보 => TicketContainer

• 상 하단에 점선 작대기가 있음

• [텍스트] 가격 => Price

• [텍스트] 티켓에 대한 이름 => Name

• [텍스트] 티켓에 대한 설명 => Desc

• [아이콘 + 텍스트] 남은 티켓 개수 => LeftCnt

• [아이콘 + 텍스트] 1인 최대 구입 개수 => LimitCntPerPerson

• [아이콘 + 텍스트] 판매 마감일 => EndDate

• [아이콘 + 텍스트] 현재 판매된 개수 => ParticipantCnt

• [컨테이너] 장소 정보들 => LocationContainer

  • 지도

    • 네이버 지도 API
    • 장소에 대한 위치를 지도로 표시

  • [텍스트] 장소 => Label

  • [텍스트] 장소 타이틀 => Place

    • 호스트가 직접 작성한 대로 표시

  • [텍스트] 장소에 대한 상세 주소 => Address

  • [텍스트] 장소에 대한 설명 => Desc

    • 호스트가 작성하면 표시 또는 미표시

이벤트 만들기 - 666

• 페이지 최초 로딩시 API [API] 지도 API 호출

[API] 이벤트 생성하기 버튼 클릭시(submit) 모든 정보를 Validation 을 한번 더 하고 서버에 이벤트 생성 정보 전송 (서버에서도 Validation을 한번 더 함) - Validation 이 안되어있을 경우 alert 이 뜨고 Validation 오류가 input tag 밑에 있음 - Validation이 되어있을 경우, 로딩바가 뜨면서 생성된 이벤트 상세페이지로 이동함.

• [Validation] 각각 입력 필드에 대한 Validation 필요 모든 Validation의 경우 input 아래에 붉은 글씨로 에러를 표기한다.

  • 이벤트 제목 : 제목이 공백일 경우에 대한 처리
  • 이벤트 장소 : 장소가 공백일 경우에 대한 처리
  • 이벤트 상세 주소 : 상세주소가 공백일 경우에 대한 처리
  • 대표 이미지 : 대표 이미지가 공백일 경우에 대한 처리
  • 티켓이 전부 삭제되었을 경우 (티켓이 1개도 존재하지 않을경우) : 티켓은 최소 한장 이상이어야 한다고 표시
  • 티켓 추가했는데 이름이 없을경우 : 티켓 이름을 입력하라는 표시
  • 그 외 나머지는 공백이어도 무방
  • 티켓 수량 체크의 경우, 티켓 수량에 대한 판단이 필요. 1인당 구매 가능 개수가 티켓 수량보다 많을 수 없습니다.'
  • 기본적으로 공개 체크박스 체크상태 / 티켓 수량 숨김 선택박스 체크해제

• 컴포넌트 정의 [시간선택]

  • [Airbnb Calendar] 날짜선택, 단일 캘린더만 보여줌
  • [시간] 리스트 형태의 (오전/오후 | 시간)을 보여줌

  [Input/Number] 모든 숫자가 세자리 단위로 ,가 생김 ex) 22,222 | 222,222 | 22,222,222

• [컨테이너] 현재 페이지 소개 컨테이너 이벤트 주최하기/ 내용과 이미지가 존재

• [컨테이너] 이벤트 내용 입력 컨테이너 => CreateEventContainer '제목+설명 | inputBoxContainer'의 형태이며 컨테이너 내에는 각각 다른 것이 들어갈 수 있음. 하단의 설명은 Container 내에 들어가는 Element에 대한 설명

  • [Input/Chkbox] 공개여부 => IsPublicChkedInput

  • [Input/String] 이벤트 제목 => TitleInput

  • [Container]이벤트 날짜 및 시간 => PeriodInput

    • [시간선택] 시작
    • [시간선택] 종료

  • [Input/String] 장소 => PlaceInput

  • [Input/String] 상세주소 => AddressInput

    • [지도] 주소를 입력하면 네이버 지도로 검색이 됨

  • [Input/String] 장소설명 => PlaceDescInput

  • [Input/file] 대표이미지 => MainImgInput

    • 이미지는 제출 이전까지 Client에서 보관함
    • 이미지 표시 완료까지 로딩 동그라미가 돌아감
    • 다 로딩 되면 이미지 업로드 컨테이너 내부에 16:9 비율로 업로드한 이미지가 표시됨

  • [TUI Editor] 내용 => EditDesc

  • [리스트] 티켓 폼 리스트 => TicketFormList

    • [컨테이너] 티켓 폼 컨테이너 => TicketFormContainer
      • 티켓 제목과 설명을 가지고 있으며, 하나의 컴포넌트로 이뤄져 있음. 만약에 티켓 추가를 누르면 동일한 모양의 컨테이너가 하나 더 생김.
      • '제목+설명 | inputBoxContainer'의 형태이며 컨테이너 내에는 각각 다른 것이 들어갈 수 있음. 하단의 설명은 Container 내에 들어가는 Element에 대한 설명
      • [Input/String] 티켓 이름 => TitleInput
      • [Input/String] 티켓 설명 => DescInput
      • [Input/Number] 가격 => PriceInput
        • input 창의 앞단에 ￦ 가 붙음
      • [Input/Number] 티켓 수량 => CntInput
      • [Input/Chkbox] 티켓 수량 숨김 체크 => IsShowCnt
      • [Input/Number] 1인당 구매 가능 개수 => LimitCntPerPersonInput
      • [컨테이너] 판매 기간 => OpenDateRangeContainer
        • [시간선택] 시작
        • [시간선택] 종료
      • [컨테이너] 환불 마감 날짜 => RefundDateRangeContainer
        • [시간선택] 환불 마감일
      • [버튼] 티켓 삭제 => DeleteBtn 클릭 시 버튼이 소속된 TicketFormContainer 삭제
    • [버튼] 티켓 추가 버튼 => AddTicketFormBtn
      • TicketFormContainer 가 하나 추가

• [버튼] 이벤트 생성 버튼 => SubmitBtn

관리자 : 헤더 - ㅈㅎ

• 관리자 페이지 최초 로딩시 API [API] 이벤트 정보 (이벤트 이름)

• [텍스트 버튼] => LogoBtn

  • 클릭 시 어드민 메인으로 이동
  • BookUs! x 이벤트 이름 (공개여부)
    • 공개 여부는 '비공개' 또는 '공개' 표시
    • 공개 여부를 초록색으로 표시

• [Admin GNB] => AdminGNB

  • 구조 (NB에 포함된 탭)
    • 참가자 목록 => ParticipantListTabBtn
    • 통계 => StatisticsTabBtn
    • 이벤트 수정 => EditEventTabBtn
    • 티켓 수정 => EditTicketsTabBtn
  • 각 항목 클릭 시 해당 페이지로 이동
  • 각 항목 hover 시 Background 색상 회색으로 변경
  • 현재 페이지에 하단바 표시

• [버튼] => AccountBtn

  • 유저의 이름 표시
  • 클릭 시 마이페이지로 이동

관리자 : 참가자 목록 - ㅈㅎ

[API] 참가자 전체 목록 또는 검색 (무한스크롤) [API] 참가자 출석체크

• 참가자 검색 => SearchParticipants
  • [텍스트] 출석 현황 => CheckInStatus
    • 출석 (현재 출첵 수)/(총 등록자 수) 형태
  • [Input/String] => SearchParticipantsInput
    • placeholder: 이름, 이메일, 전화번호, Ticket ID 중 하나 입력
    • 검색어 입력시 이름, 이메일, 전화번호, Tikcet ID 의 값과 바교하여 일치하는 항목이 있는 경우 ParticipantList 에 표시
• 참가자 목록 => ParticipantList
  • 모든 참가자를 표시
  • 스크롤 하단 끝에 임박시 로딩 스피너가 표시되고 무한 스크롤
  • SearchParticipantsInput 에 검색어 입력 시 검색 결과 표시
  • SearchParticipantsInput 에 입력되었던 검색어가 모두 지워질 경우, 다시 모든 참가자를 표시
  • 참가자 정보 카드 => ParticipantCard
    • 참가자 정보를 표시
      • 유저 프로필 사진
      • 이메일
      • 전화번호
      • 주문 정보 => OrderList
        • [Table] 티켓 정보 => TicketTable
          • [텍스트] 티켓 ID => Id
          • [텍스트] 티켓 종류 => Type
          • [텍스트] 티켓 가격 => Price
          • [Input/Chkbox] 출석 체크 여부
            • 출석 완료 시 On 표시
            • 출석 미완료 시 Off 표시
            • 클릭 시 출석 여부 Toggle
          • 여러 번 주문하면 여러개의 티켓 정보가 나온다
        • [텍스트] 티켓 금액 => TotalPrice
          • 티켓의 총 금액 표시
        • [버튼] 환불 => RefundBtn
          • 클릭 시 환불 페이지로 이동

관리자 : 이벤트 수정 - ㅈㅎ

[API] 이벤트 상세보기 [API] 이벤트 수정하기

• 이벤트 등록과 동일
• 기 등록된 정보 표시
• [버튼] 수정사항 반영 => SubmitBtn
  • 클릭 시 수정사항 반영

관리자 : 티켓 수정 - ㅈㅎ

[API] 이벤트 정보 가져오기 [API] 티켓 수정: 서버에서 수정된 내역을 보고 변경된 사항을 적용

• 티켓 수정
  • 이벤트 등록의 티켓 수정과 동일
  • 티켓 이름
    • 수정 불가 (disabled)
  • 티켓 설명
  • 가격
    • 수정 불가 (disabled)
  • 티켓 수량
  • 티켓 수량 숨김
  • 1인당 구매 가능 개수
    • [validation] 최소값 : 이미 팔린 개수
  • 판매 기간
    • [validation] 행사 종료 이전
  • 환불 마감 날짜
    • [validation] 판매 기간 종료 이전
• 티켓 추가 => TicketForm
  • 추가 클릭 시 티켓 추가 창 표시
  • 이벤트 만들기 페이지의 티켓 추가와 동일

관리자 : 이벤트 통계 - ㅈㅎ

[API] 이벤트 통계 가져오기 (Advanced 기능으로써 API 설계 논의 더 필요)

• 텍스트 통계 => TxtStatistics

  • Socket.io 를 이용한 실시간 변화
  • 통계
    • 남아있는 티켓 수 (실시간) => LeftTicketsCnt
      • (남아있는 티켓 수)개 / (총 티켓 수)개 표시
    • 매출 (실시간) => TotalEearning
      • (매출) 원 표시
    • 알림 신청자 수 (실시간) => AlarmParticipantCnt
      • (알림 신청자 수) 명 표시

• 그래프 통계 => GraphStatistics

  • 사용자가 이벤트를 조회한 시간의 분포 => HitsPerTimeGraph
    • x축: 시간, y축: 조회수
  • 시간당 이벤트 티켓 판매 현황 (실시간) => TicketSalesPerTimeGraph
    • x축: 시간, y축: 티켓 수 또는 매출??
  • 체크인에 대한 시간 분포 => CheckinPerTimeGraph
    • x축: 시간, y축: 체크인 수

마이페이지: 공통 탭 바 - ㅇㅎ

• [로컬 네비게이션 바] => MyPageLNB
  • [버튼] 내 티켓 => TicketsTabBtn
• my/tickets/event/555 - 구매완료한 티켓들 보여주는 페이지로 이동
  • [버튼] 주최한 이벤트 => MyEventsTabBtn
    • 주최한 이벤트들을 보여주는 페이지로 이동
  • [버튼] 프로필 => ProfileTabBtn
    • 내 정보를 수정할 수 있는 페이지로 이동
  • [버튼] 로그아웃 => LogoutTabBtn
    • 바로 로그아웃과 동시에 메인페이지로 이동

마이페이지: 내 티켓 - ㅇㅎ

[API] 유저가 구매 완료한 이벤트들 불러오기

• [카드 그리드] 구매 완료한 이벤트들 => EventCardGrid
  • 보여줄 이벤트들을 그리드 형태로 표시
  • 스크롤 하단 끝에 임박 시 무한 스크롤 (필요성 제고해봐야함)
  • [카드] => EventCard
    • 클릭 시 해당 이벤트 정보 페이지로 이동 (내가 구매한 이벤트를 눌렀을 때 보여줄 이벤트 페이지)
    • 메인 페이지에서 사용한 카드를 재사용할 수 있을 듯
    • [이미지] 이벤트 이미지 => Img
    • [텍스트] 이벤트 일시 => Date
    • [텍스트] 이벤트 제목 => Title
    • [텍스트] 주최자 => HostName

마이페이지: 내 티켓 눌렀을 때 (티켓 상세)

[API] 해당 이벤트에 대한 상세 정보 불러오기 [API] 해당 이벤트에 대한 내가 구매 완료한 티켓들을 불러오기

• [컨테이너] 이벤트 정보 설명 => EventInfoContainer

  • [이미지] 이벤트 이미지 => Img
  • [링크 텍스트] 이벤트 제목 => Title
    • 클릭 시 해당 이벤트 정보 페이지로 이동
  • [텍스트] 이벤트 장소 => Address
  • [텍스트] 이벤트 일시 => Date
  • [텍스트] 주최자 => HostName

• [카드 그리드] 구매 완료한 티켓들 => TicketCardGrid

  • 보여줄 티켓들을 그리드 형태로 표시
  • 티켓 유형의 수가 적기 때문에 무한 스크롤은 필요 없음
  • [카드] 구매완료한 티켓 카드 => TicketCard
    • 클릭 시 티켓(들)의 모달창 띄움
    • hover 시 플로팅 효과 (그림자 진해짐)
    • [텍스트] 티켓 이름 => Name
    • [텍스트] 티켓 가격 => Price
    • [텍스트] 티켓 설명 => Desc
    • [아이콘] 티켓 아이콘 => Icon
    • [텍스트] 티켓 수량 => Cnt

티켓 모달 - (666)

• [모달(리스트)] 티켓들을 나열하는 모달 리스트 => TicketModalList
  • 좌우로 스크롤이 가능하고 액티브 티켓은 크게 표현
  • 액티브 되지 않은 티켓은 살짝 어둡게 표시
  • 블랙 영역 클릭 시 모달 끄기
  • [카드] 티켓카드 => TicketCard
    • [텍스트] 티켓 이름 => Name
    • [컨테이너] 열 컨테이너 => ColContainer
      • [텍스트] 티켓 id => Id
      • [텍스트] 티켓 구매자 이름 => Buyer
    • [컨테이너] 열 컨테이너 => ColContainer
      • [텍스트] 티켓 가격 => Price
      • [텍스트] 티켓 결제일 => BoughtDate
    • [텍스트] 이벤트 날짜 => EventDate
    • [텍스트] 티켓 안내 라벨 => DescLabel
    • [텍스트] 티켓 안내 => Desc
    • [텍스트 버튼] 환불하기 => RefundBtn
      • 환불 가능 기간이 지난 경우 disabled
      • 클릭 시 티켓 환불 페이지로 이동

티켓 환불하기 - 666

[API] 환불 버튼 누를시 선택한 주문번호에 대한 환불이 가능

• [텍스트] 환불 | 다음 티켓들을 환불하시겠습니까? => RefundConfirm
  • [Number] 주문 번호 => OrderId
  • [Date] 결제일 => OrderDate yyyy년 mm월 dd일 오후 1:03 형태
  • [Date] 환불 가능 기간 => RefundDueDate yyyy년 mm월 dd일 오후 1:03 '까지' 형태
  • [Number] 환불 금액 => RefundPrice
  • [container] 티켓 정보 표시 컴포넌트 => TicketInfoContainer
    • [Text] 가격 => Price 무료일 경우에는 '무료'/ 다른 경우 숫자 + 원표시
    • 이름 => Name
    • 설명 => Desc
    • 티켓 ID => ID
  • [버튼] 환불 버튼 => SubmitBtn

마이페이지: 주최한 이벤트

• [API] 주최한 이벤트 정보

• [카드 그리드] 주최한 이벤트 카드 그리드 => EventCardGrid

  • 보여줄 이벤트들을 그리드 형태로 표시
  • 스크롤 하단 끝에 임박 시 무한 스크롤
  • [카드] 주최한 이벤트 카드 => EventCard
    • 클릭 시 해당 이벤트 관리 페이지로 이동
    • 메인 페이지에서 사용한 카드를 재사용할 수 있을 듯
    • [텍스트] 이벤트 이미지 => Img
    • [텍스트] 이벤트 일시 => Date
    • [텍스트] 이벤트 제목 => Name
    • [텍스트] 주최자 => HostName

마이페이지: 프로필 - ㅇㅎ => ㅅㄷ

• [API]
  • 페이지 로드 시
    • [GET] 사용자 정보
    • [GET] 이벤트의 티켓 정보
    • [GET] 이벤트의 위치 정보 (네이버 지도 API)
  • 수정하기 버튼 클릭 시
    • [PUT] 사용자 정보

[Validation]

• 각각 입력 필드에 대한 Validation 필요

  • 이미지: 공백 검사 / 7MB 제한
  • 성, 이름 : 공백 검사 / 30자를 넘지 않음
  • 전화번호: 공백 검사 / 13자를 넘지 않음
  • 모든 Validation의 경우 input 아래에 붉은 글씨로 에러를 표기한다.

• [컨테이너] 이미지 업로드 컨테이너 => ImgUploadContainer

  • [텍스트] 이미지 업로드 라벨 => Label
  • [텍스트] 이미지 업로드 설명 => Desc
  • [Input/file] 대표이미지 => MainImgInput
    • 업로드 시 업로드가 완료될 때 까지 로딩 동그라미가 돌아감
    • 다 로딩 되면 이미지 업로드 컨테이너 내부에 16:9 비율로 업로드한 이미지가 표시
    • 이미지가 업로드 되었다면 삭제 버튼이 생기며 이미지 부분은 클릭 안됨.

• [컨테이너] 사용자 수정 폼 => ModifyFormContainer

  • [텍스트] 이메일 라벨 => EmailLabel
  • [텍스트] 이메일 텍스트 => Email
  • [컨테이너] RowContainer
    • [컨테이너] ColContainer
      • [텍스트] 성 라벨 => LastNameLabel
      • [Input] 성 입력 => LastNameInput
        • [Validation - 성]
    • [컨테이너] ColContainer
      • [텍스트] 이름 라벨 => FirstNameLabel
      • [Input] 이름 입력 => FirstNameInput
        • [Validation - 이름]
  • [텍스트] 전화번호 라벨 => PhoneLabel
  • [Input] 전화번호 입력 => PhoneInput
    • [Validation - 전화번호]

마이페이지: 로그아웃 - ㅇㅎ => ㅅㄷ

• [스피너] 로딩 => LoadingSpinner
  • 로그아웃 클릭 시 로그아웃이 완료될 때까지 표시
  • 이후 메인 페이지로 이동

404 - Can't load - ㅅㄷ

• [텍스트] 페이지 상태 문구 => PageStatus
• [버튼] 페이지 리로드 버튼 => PageReloadBtn
• [이미지] Can't Load 이미지 => PageCantLoadImg
  • 클릭 시 새로고침

404 - Not found - ㅅㄷ

• [텍스트] 페이지 상태 코드 => PageStatCode
• [텍스트] 페이지 상태 코드 설명 => PageStatDesc
• [이미지] Not Found 이미지 => PageNotFoundImg

이벤트 참여 : 헤더

• [텍스트 리스트] 참여 단계 => JoinStepList
  • 각 단계가 '>' 로 구분되어 표시된다.
  • [텍스트] 각각의 단계 => JoinStep
    • 현재 단계와 지나간 단계는 Bold 처리된다.
• [텍스트] 제목이 되는 단계 이름 => JoinStepName

이벤트 참여 : 이벤트 정보

• [API]

  • 페이지 로드 시
    • [GET] 이벤트의 상세 정보
    • [GET] 이벤트의 위치 정보 (네이버 지도 API)

• [이미지] 이벤트 대표 이미지 => EventMainImg

• [컨테이너] 이벤트 상세 정보 => EventDetailContainer

  • [텍스트] 이벤트 제목 => Title

  • [컨테이너] ColContainer

    • [컨테이너] RowContainer

      • [텍스트] 일시 라벨 => DateLabel
      • [텍스트] 일시 => Date

    • [컨테이너] RowContainer

      • [텍스트] 주최 라벨 => HostLabel
      • [텍스트] 주최 => Host

  • [컨테이너/이벤트 상세보기 페이지와 동일] 장소 정보들 => LocationContainer

    • 지도
      • 네이버 지도 API
      • 장소에 대한 위치를 지도로 표시
    • [텍스트] 장소 => Label
    • [텍스트] 장소 타이틀 => Place
      • 호스트가 직접 작성한 대로 표시
    • [텍스트] 장소에 대한 상세 주소 => Address
    • [텍스트] 장소에 대한 설명 => Desc
      • 호스트가 작성하면 표시 또는 미표시

이벤트 참여 (티켓 구입 눌렀을 때) - ㅅㄷ

• [API]

  • 페이지 로드 시
    • [GET] 이벤트의 티켓 정보

• 선택완료 버튼 클릭 시 - 등록하기 페이지로 이동

• [Container] 티켓 정보 표시 컨테이너 => TicketInfoContainer

  • 체크박스에 체크가 되면 색상이 바뀐다.
  • [텍스트] 티켓 이름 => Name
  • [텍스트] 티켓 가격 => Price
  • [체크박스] 선택 체크박스 => ChkBox
  • [컨테이너] 티켓 남은 수량 컨테이너 => LeftTicketCntContainer
    • [아이콘] 티켓 아이콘 => Icon
    • [텍스트] 티켓 남은 수량 => LeftTicketCnt

• [컨테이너] 티켓 약관 동의 컨테이너 => TicketTermContainer

  • [체크박스] 동의 체크박스 => TermChkBox
  • [텍스트] 약관 동의 문구 => TermContent
    • 링크는 없음

• [버튼] 선택완료 버튼 => SubmitBtn

  • 클릭 시 "이벤트 참여 - 등록하기" 페이지로 이동

이벤트 참여 - 2. 등록하기 - ㅅㄷ

• [API]

  • 완료 버튼 클릭시
    • [GET] 이벤트의 티켓 정보
    • [POST] 티켓 구매 정보
    • [PUT] (구매 가능 시)사용자의 티켓 정보

• [컨테이너] 발급될 티켓들을 표시하는 컨테이너 => TicketContainer

  • 발급될 하나 이상의 티켓들이 위에서 아래로 표시되며 스크롤
  • [컨테이너] 발급될 티켓 표시 컨테이너 => RecipeContainer
    • [텍스트] 티켓 이름 => Name
    • [구분선] 제목 구분선 => DottedDivider
    • [텍스트] 가격 => Price
    • [컨테이너] 티켓 상세정보 => Detail
      • [그리드] 상세정보 그리드 => DetailGrid
        • [아이콘] 내용에 따른 아이콘 => Icon
        • [텍스트] 내용 => Content
    • [컨테이너] 결제 내용 => PriceResultContainer
      • [텍스트] 금액 안내 문구 => Guide
      • [텍스트] 숫자로 표시된 금액 => Price
    • [텍스트] 무료 티켓 안내 문구 => Desc
      • 무료 티켓일 경우에만 표시
    • [구분선] 결제 수단과의 구분 => SolidDivder

• [버튼] 완료 버튼 => SubmitBtn

  • 무료 티켓인 경우에는 '등록 완료', 유료 티켓인 경우에는 '티켓 구입'으로 표시된다.
  • 클릭 시 "마이페이지 - 내 티켓" 페이지로 이동