1. Task 진행상황

2. 완료한 view

2-1) Main page

• 검색어에 따른 테스트 필터링 기능
  • 인풋을 입력하면 검색어, 내용 중 하나라도 일치하는 부분이 있는 테스트만을 리턴하여, 테스트 카드리스트에서 보일 수 있도록 함
• 카테고리
  • 서버에서 카테고리 데이터 받아옴
  • 브라우저 사이즈에 따라 카테고리 개수 8, 6, 4, 3으로 조절
  • 왼쪽, 오른쪽 버튼을 누르면 '전체' 카테고리를 제외하고 하나씩 왼쪽, 오른쪽으로 이동
  • 카테고리 버튼에 hover하면 버튼 커지게
  • 카테고리 버튼 클릭하면 버튼 크기 키우고, 색깔 민트로
  • 카테고리 클릭 시, 해당 카테고리에 맞는 테스트만 필터링될 수 있게 함
• 카드
  • 서버에서 카드 데이터 받아옴
  • 플러스 버튼을 누르면 test making 페이지로 연결
  • 테스트 카드를 누르면 해당 테스트 페이지로 연결
  • 테두리에 gradation 적용
  • 더보기 버튼 바로 위에 그림자 박스
  • 더보기 버튼을 누르면 같은 세트의 카드 등장
  • 줄 별로 카드가 고루게 배치될 수 있도록 조정
• 하단
  • 사운드피커 모토, 연락처, 기획, 디자인, 개발 파트원들 이름 넣음

2-2) Test Making & Test Edit page

• 커스텀 카테고리.
• 플러스 버튼을 누르면 동적으로 폼이 생성.
• 유튜브 링크를 넣으면 동적으로 임베딩이 되면서 밑의 컨트롤러가 나옴.
• 정규표현식을 통해 유튜브 아이디를 추출하기 때문에 한글자라도 지워지면 컨트롤러를 다시 숨김.
• 영상 재생한 만큼 음파의 색이 채워지며, 드래그를 통해 시간대를 이동할 수 있음.