문서 포맷 참고:
1. 디테일 페이지 이미지 + 컴포넌트 구조
이미지는 위 아래 추가 공간 없이 딱 맞춰 잘려야합니다.
•
[컴포넌트] 디테일 헤더와 상세를 나누는 섹션 디바이더
•
[컴포넌트] 다회차일 경우 표시되는 배너
◦
sessionInformation?.length > 1 일 경우에 생긴다
•
[배너 이미지] 얼리버드 혜택이 있는 경우 표시되는 이미지
◦
bannerImage, type: promotion-earlybird
•
[배너 이미지] 클래스 콜라보 광고 있는 경우 표시되는 이미지
◦
bannerImage, type: collaboration
•
[배너 이미지] 사진/영상 촬영물 제공 클래스 안내 이미지
◦
bannerImage, type: subtag-photo
•
[마진] 사진/영상 촬영물 제공 클래스 안내 이미지와 첫번째 디테일 이미지 사이에 24 마진 추가
•
[디테일 이미지 1] 클래스 소개 이미지
◦
디테일 페이지 첫번째 이미지
◦
“혹시 이런 경험 있으신가요?” 제목 ~ 섹션 디바이더 까지 포함
◦
detailImage[0]
•
[마진] 첫번째 디테일 이미지 사이와 섹션 디바이더 사이에 24 마진 추가
•
[컴포넌트] 첫번째 디테일 이미지와 코치 sns 컴포넌트를 나누는 섹션 디바이더
•
[마진] 섹션 디바이더와 코치 sns 사이에 24 마진 추가
•
[컴포넌트] 코치 sns 컴포넌트
◦
trainerImage, trainerName, trainerSns 사용
•
[마진] 코치 sns와 유튜브 컴포넌트 사이에 24 마진 추가
•
[유튜브 컴포넌트]
◦
유튜브 링크의 경우, url 끝에 비디오 아이디만 들어가야함 (하단 24 마진 자체 포함)
•
[디테일 이미지 2] 트레이너 소개 영상 아래 붙을 이미지
◦
디테일 페이지 두번째 이미지
◦
detailImage[1]
•
[마진] 두번째 디테일 이미지와 커리큘럼 이미지 사이에 24 마진 추가
•
[커리큘럼 이미지 1] 클래스 소개 이후 붙을 이미지
◦
sessionInformation[0]?.curriculumImage
▪
해당 이미지는 디테일 이미지가 아니라 sessionInformation 배열에 추가된다
•
[클래스 운동 컴포넌트 1] 클래스 운동이 있을 경우 생기는 컴포넌트
◦
sessionInformation[0]?.exercise 배열에 운동 정보가 들어간다
◦
운동 정보에 세트 수, 무게, 시간 등은 포함되지 않는다
•
[커리큘럼 이미지 2] 2회차일 경우, 1회차 클래스 운동 아래 붙을 이미지
◦
1회차 클래스 운동 없을 경우, 1회차 커리큘럼 이미지 아래 붙는다
◦
sessionInformation[1]?.curriculumImage
▪
해당 이미지는 디테일 이미지가 아니라 sessionInformation 배열에 추가된다
•
[클래스 운동 컴포넌트 2] 2회차 클래스 운동이 있을 경우 생기는 컴포넌트
◦
sessionInformation[1]?.exercise 배열에 운동 정보가 들어간다
◦
운동 정보에 세트 수, 무게, 시간 등은 포함되지 않는다
•
[디테일 이미지 3] 커리큘럼 이미지 아래 붙을 이미지
◦
디테일 페이지 세번째 이미지
◦
참석 전 미리 준비해주세요! ~ 공간 소개 이미지 까지 포함
◦
detailImage[2]
•
[마진] 세번째 디테일 이미지와 상세위치 컴포넌트 사이에 24 마진 추가
•
[컴포넌트] 공간 소개 이미지 아래 붙을 네이버 지도로 이동하는 컴포넌트
•
[마진] 상세위치 컴포넌트와 주의사항 사이에 24 마진 추가
•
[컴포넌트] 상세 위치 컴포넌트 아래 붙는 주의사항 및 환불 규정 안내 컴포넌트
◦
주의사항 및 환불 규정 안내 컴포넌트
•
[마진] 주의사항 컴포넌트와 카카오톡 이동 컴포넌트 사이에 48 마진 추가
•
[컴포넌트] 번핏 카카오톡 채널로 이동할 수 있는 컴포넌트.
•
[마진] 카카오톡 이동 컴포넌트 아래 54 마진 추가