| 구분 | 기능 목록 | 예상 시간 | 진행순서 | 우선순위 | 작업자 | 상태 |
|---|---|---|---|---|---|---|
| 프로그레스 바 | - 스택뷰 |
uilabel/uiview로 내부 컴포넌트 | 3h | 2 | 상 | 상연 | ✅ | | 네비게이션 바 | - 백버튼, 타이틀버튼, 백카버튼, 자동차버튼 | 1.5h | 1 | 상 | 정민 | ✅ | | 옵션 버튼 | • init 시 type(self or guide) 받아서 다르게 생성
◦ 태그 리스트 뷰 : hidden ◦ 색상 ◦ 애니메이션 • 기본 : 체크 이미지, 서브타이틀 라벨, 타이틀 라벨, 금액 라벨, 자세히 보기 버튼(isHidden), isEnabled • 기본 버튼을 상속 받아서 2가지를 추가
◦ 내장 색상 버튼 : 이미지뷰 ◦ 외장 색상 버튼 : uiview/CALayer에 배경색이랑 corner radius | 3h | 3 | 상 | 정민 | ✅ | | 공통 버튼 | • 둥근 테두리와 글씨체 정도만 공통 요소 • 메인 컬러, 흰색, 연한 회색 3가지 타입 존재 • 버튼 init 시 파라미터로 title(String)과 type(CustomButtonType) 받아서 생성 | 1h | 1 | 상 | 상연 | ✅ | | CarMakingContentView | • collectionView
◦ 이유 : 프로그레스 바에서 3번 선택했을 때 화면전환 효과에 용이 + 인덱스로 바로 해당 셀로 찾아갈 수 있어서
프로그레스 바랑 연결 | 연결 예상 시간 3h | 7 | 상 | 페어? | | | CarMakingCollectionViewCell | • 커스텀 셀 : 이미지 + 라벨 + 옵션버튼리스트뷰
◦ 옵션버튼리스트뷰 두가지 타입 (투버튼, 리스트)
▪ 둘 다 만들어놓고 레이아웃 다 잡아둬
▪ prepareForReuse 때 둘 다 hidden
▪ cell dequeue 때 사용할 버튼 타입을 메소드로 전달해주면 `isHidden = false` | 1h | 6 | 상 | 정민 | |
| CarMakingContentViewCell 내의 옵션버튼리스트뷰 (더블버튼 타입) | - 버튼 두개 들어있는 uiview
| 구분 | 스토리 | 태스크 | 예상 시간 | 우선 순위 |
|---|---|---|---|---|
| 셀프모드 | - 메인 화면에서 트림을 선택한 후 [선택완료] 버튼을 클릭하여 셀프모드 진입 | - 셀프모드 진입 시 서버로부터 디폴트 옵션 값들을 받아와서 갖고있기 |
데이터 모델 구현 | 0.5h | 하 | | 모드 변경 | - 상단 [셀프모드]를 클릭하면 “내 차 만들기 방식 변경하기” 팝업이 나타난다. 팝업은 셀프모드와 가이드모드에 대한 설명을 보여준다.
팝업의 [가이드모드] 버튼을 클릭하면 “가이드 모드로 변경하시겠어요” 팝업이 나타난다.
[가이드 모드] 버튼을 클릭하면 ”[가이드 모드]로 변경하시겠어요?” 팝업을 표시
‘<’ 버튼 클릭 시 “내 차 만들기에서 나가시겠어요?” 팝업이 나타난다.
”안할래요” 클릭 시 팝업이 닫히고 이전 화면이 유지
“변경할래요!” 클릭 시 메인 화면으로 이동 | - 자동차 버튼 클릭 시 “모델을 변경하시겠어요?” 팝업 표시
총 견적 금액과, 트림, 색상, 옵션으로 구분해서 표시. 스크롤 가능
셀프모드 진입 시 서버로부터 받은 데이터를 화면에 표시한다
화면 구현X 이미지로 | 0.5h | 하 | | 하단 견적금액 | 선택한 옵션(디폴트로 선택된 옵션)에 따라 총 견적금액을 보여준다. | - (임시) 첫 진입 시 디폴트로 선택된 옵션 값들을 서버에 요청해서 받아온다 (스토리1의 요청이랑 동일)
선택된 옵션에 따라 총 견적금액을 계산하여 표시한다.
옵션마다 값 정보가 있다고 가정하면 선택된 옵션 바뀌었을 때 기존 옵션과의 가격 차이 계산해서 업데이트 해주는 식 | 0.5h | 하 |
| | [이전] 버튼을 클릭하면 이전 옵션 선택 화면으로 이동한다. | - [이전] 버튼 클릭 시 이전 화면을 보여줌. 이때 이전 항목에서 선택된 옵션을 보여준다. | 0.5h | 하 |
| 파워트레인 | 파워트레인을 선택하면 해당 파워트레인 이미지가 나타난다. | - 화면에 들어오면 서버한테 파워트레인 데이터를 요청한다.
- [디젤 2.2] 이미지 url에 대해 서버에 요청한다. 캐시 먼저 확인
- 가솔린 버튼을 누르면 가솔린 이미지 url에 대해 데이터를 요청 | 0.5h | 상 |
| | 원하는 파워트레인을 선택한 후 [선택완료] 클릭 시 구동방식 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [구동방식] 단계로 변경된다.
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [구동방식]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환
[2WD] 이미지 url에 대해 서버에 요청한다. 캐시 먼저 확인
[4WD] 버튼을 누르면 4WD 이미지 url에 대해 데이터를 요청 | 0h | 상 | | | 원하는 구동방식을 선택한 후 [선택완료] 클릭 시 바디타입 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [바디 타입] 단계로 변경된다. | - 원하는 구동방식 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [03 바디타입]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환
[7인승] 이미지를 서버에 요청한다. 캐시 먼저 확인
[8인승] 버튼을 누르면 8인승 이미지 url에 대해 데이터를 요청 | 0h | 상 | | | 원하는 바디 타입을 선택한 후 [선택완료] 클릭 시 외장 색상 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [외장 색상] 단계로 변경된다. | - 원하는 바디 타입 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [04 외장 색상]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환
[크리미 화이트 펄] 이미지를 서버에 요청한다. 캐시 먼저 확인하고 서버에 요청
서버로부터 받아온 이미지를 화면에 표시한다.
여기서부터 콜렉션뷰 셀 내부 버튼 타입 변경 | 0.5h | 상 | | | 원하는 외장 색상을 선택한 후 [선택완료] 클릭 시 내장 색상 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [내장 색상] 단계로 변경된다. | - 원하는 외장 색상 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [05 내장 색상]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환 (피드백 = 아이콘 + 텍스트 표시 + 색 변화)
스크롤해서 다른 옵션을 보는 경우, 해당 옵션은 선택된 상태X. 버튼 클릭 시 옵션이 선택됨
스크롤 시 dot indicator도 다음으로 넘어간다 | 0h | 상 | | 내장 색상 | 내장 색상 첫 진입 시 ‘퀄팅 천연(블랙)’이 선택된 상태로 화면이 나타난다. | - 화면에 들어오면 서버에 [내장 색상] 데이터를 요청한다.
‘퀄팅 천연(블랙)’ 이미지를 서버에 요청한다. 캐시 먼저 확인하고 서버에 요청
서버로부터 받아온 이미지를 화면에 표시한다.
앞에랑 다르게 이미지 요청 필요 | 1h | 상 | | | 원하는 내장 색상을 선택한 후 [선택완료] 클릭 시 휠 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [휠 선택] 단계로 변경된다. | - 원하는 내장 색상 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [06 휠 선택]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환 (피드백 = 아이콘 + 텍스트 표시 + 색 변화)
스크롤해서 다른 옵션을 보는 경우, 해당 옵션은 선택된 상태X. 버튼 클릭 시 옵션이 선택됨
스크롤 시 dot indicator도 다음으로 넘어간다 | 0h | 상 | | 휠 | 휠 선택 첫 진입 시 ‘20인치 알로이 휠 & 타이어’가 선택된 상태로 화면이 나타난다. | - 화면에 들어오면 서버에 [휠 선택] 데이터를 요청한다.
‘20인치 알로이 휠 & 타이어’ 이미지를 서버에 요청한다. 캐시 먼저 확인하고 서버에 요청
서버로부터 받아온 이미지를 화면에 표시한다. | 0h | 상 | | | 원하는 휠을 선택한 후 [선택완료] 클릭 시 옵션 선택 화면으로 이동한다. 이때 옵션 선택 프로세스도 [옵션 선택] 단계로 변경된다. | - 원하는 휠 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 다음 화면으로 이동하고 프로그레스바도 [07 옵션 선택]으로 변경
선택 완료 클릭 시 2초간 피드백 후 화면 전환 (피드백 = 아이콘 + 텍스트 표시 + 색 변화)
스크롤해서 다른 옵션을 보는 경우, 해당 옵션은 선택된 상태X. 버튼 클릭 시 옵션이 선택됨
스크롤 시 dot indicator도 다음으로 넘어간다 | 0h | 상 | | 옵션 선택 | 옵션 선택 첫 진입 시 ‘현대스마트센스1’이 선택되지 않은 상태로 화면이 나타난다. | - 화면에 들어오면 서버에 [옵션 선택] 데이터를 요청한다.
‘현대 스마트센스 1’ 이미지를 서버에 요청한다. 캐시 먼저 확인하고 서버에 요청
서버로부터 받아온 이미지를 화면에 표시한다. | 0h | 상 | | | 원하는 옵션을 선택한 후 [선택완료] 클릭 시 견적 완료 화면으로 이동한다. | - 원하는 옵션을 선택하면 버튼 선택 유무를 변경해서 화면도 업데이트한다
[선택완료]를 누르면 [견적 완료] 화면으로 이동
옵션은 피드백 액션 없음 | 0h | 상 | | | 상단 카테고리 선택 시 하위 옵션 목록이 해당 카테고리에 맞게 변경된다. | - 옵션 카테고리 목록을 표시한다. (횡 스크롤 가능)
특정 카테고리 선택 시 해당 카테고리의 옵션 목록을 아래에 표시
카테고리 목록 구현
버튼 눌렀을 때 목록 변화 (1h) | 상 | | | 옵션 버튼 위에서 스와이프 시 다른 옵션 표시 | - 버튼을 좌우로 스크롤하면 이전/다음 옵션을 표시한다.
스크롤해서 다른 옵션을 보는 경우, 해당 옵션은 선택된 상태X. 버튼 클릭 시 옵션이 선택됨
스크롤 시 dot indicator도 다음으로 넘어간다 | 0h | 상 | | | 사진 모드에서 리스트 버튼 클릭 시 리스트 모드로 전환 | - 사진 모드에서 리스트 버튼 클릭 시 리스트 모드로 전환
리스트 모드에서 사진 버튼 클릭 시 사진 모드로 전환
옵션 리스트 구현 (콜렉션뷰) → 커스텀 뷰
리스트 버튼 눌렀을 때 만든 뷰를 addSubview, 이때 카테고리 뷰의 아래에 subview 해야함
이전/다음으로 갈 때는 removeSubview | 3h | 중 | | | (리스트 모드) 옵션 리스트에서 아래로 스크롤 시 다른 옵션들이 보여진다. | - 리스트로 옵션 목록을 표시
종 스크롤 가능 | 위에 포함 0h | 중 | | | “옵션을 선택해주세요” 옆에 선택된 옵션 개수가 나타난다. | - 선택된 옵션의 개수를 “옵션을 선택해주세요” 옆에 표시 | 0.5h | 상 | | 자세히 보기 | 버튼의 ‘>’ 클릭 시 옵션에 대한 자세한 설명이 팝업으로 나타난다. | - ‘>’ 누르면 자세히보기 팝업 표시
팝업 ‘x’ 버튼 클릭 시 닫기
팝업 바깥 화면 터치 시 팝업 닫기
‘<이전’과 ‘다음>’ 버튼을 클릭하면 이전/다음 옵션에 대한 설명을 표시
dot indicator로 현재 옵션 순서를 표시 | 0.5h | 하 |