UI Template Code Guide v1. 20240306~

CBT 사용자 (일반) /_res/cbt/

공통·서브+메인 템플릿 (Layout)

1. _템플릿.공통·서브 :
   | tp.sub.php (로그인후) (부품스타일)
   
2. _템플릿.메인 :
   
3. _템플릿.기타 :
   | tp.sub_layer1pop1.php (레이어팝업)
   

본문 템플릿 (Contents)

1. CSS Component (Sample Demo)
   

20240326~ (( 화면설계서.PPT.Figma

1. 홈 (메인) 🔶 (운영 코딩 전 여기서 작업)
   | 로그인전
   + 배너 슬라이더
2. 로그인 (메인) (작성) (( v01
   + 설치법 및 배너
3. 회원가입 (작성) (( v01
4. 공지사항 (목록) 🔶
   
5. 공지사항 - 상세
   | a01 | a02 | a07 (이미지)
   
6. 서비스 이용약관 (뒤로가기)
   | 서비스 이용약관 (닫기)
7. 개인정보 보호정책
8. 마케팅 활용 및 광고 수신 동의
9. 쿠폰 리스트 (( v01
   + 탭콘텐츠 + 주의사항 여닫기 + 만료 디데이 + 더보기
10. 결제 페이지
    + 선택상자 커스텀
    + 선택 추가, 삭제
    + 라디오박스 체크 팁
    + alert창. 중복 구매 불가, 옵션 미선택
    
    1. 결제 (ADP 이용권) (( v01
    2. 결제 (BIS 이용권) (경영정보시각화) (( v01
       + 선택메뉴 옵션 클릭 상품 추가, 선택 취소
       + 결제하기 버튼 클릭 alert
       
    3. 결제 완료
11. 이벤트 - 결제 (ADP 이벤트)
12. 이벤트 페이지 | QR 링크 페이지
    1. ADP 이벤트
    2. ADP QR (( v02 (( v01
    3. 경정시 이벤트 (경영정보시각화) 🟢🟢 (( v01
       | "오픈 특가로 시작" 버튼이 화면 아래쪽에 보이도록.. (해시 위치로 스크롤 고도화)
       | 운영 페이지
13. 문제풀기 (메인페이지) (기본) (( v03 (( v02 | m01 (( v01
    | 팝업 1개 | 팝업 여러개 (운영 코딩 전 여기서 작업)
    | 무료 문제 (PT체험문제)
    | 빅데이터분석기사 필기 2024
    + (햄버거)주메뉴
    　- 레이어팝업. 프로필 편집 (작성)
    　- 레이어팝업. 로그아웃 확인
    　- 레이어팝업. 쿠폰 리스트
    + 레이어메뉴. 과목 이동 및 도서 추가
    + 레이어팝업. 슬라이더
    + 레이어팝업. 교재 인증번호 등록 - 탭(종이책 | 전자책), 랜덤번호
    
14. 예상문제 (문제풀기) (시험목록)
    | 문제를 푼 이력이 있을 경우 (레이어팝업. 초기화 안내)
    | (레이어팝업. 무단 복제 금지 안내) ❓
    | 잠금 + 무료 예상문제 표시 ADsP
    | 잠금 + 무료 예상문제 표시 ADP (과목 단위 공개)
    | 잠금 + 무료 예상문제 표시 ADP (장 단위 공개)
    | 잠금 + 로그인전 (레이어팝업. 로그인 유도) 🟢
    
15. 예상문제 - 문제 바로 풀기
    (( m04 (( v10 (( v09 (( v08 (( v07 (( v06 (( v05 (( v04 (( v03 (( m02 (( v02 (( m01 (( v01
    )) m05 (동영상 유튜브 )) video H264 MP4) ⚫
    | 이미지 뷰어 (새 창) (핀치줌.드래그.더블클릭 확대축소)
    | 문제와 선택지 둘다 짧은 경우
    | 문제와 선택지 둘다 긴 경우 | a02 | a01 | m01
    | 문제만 긴 경우
    | 선택지만 긴 경우
    | 선택지가 길어서 화면 벗어날 경우
    + 정답 오답 표시
    + 토스트 (정답 오답 안내)
    + 해설 보기
    + 레이어팝업. 중단
    + 바텀시트 핸들바로 영역 확장/축소
    + 이전 다음 문제 이동 터치스와이프
    + 이미지 클릭 전체보기(확대/축소)
    + 비기봇에게 문의중…(로딩중) 2초 후 비기봇 해설 보여줌
    + 핵심쇼츠강의 ---
    + 해시태그 나만 활성
    + 자막에서 해시태그 찾아서 마킹
    + 마킹 있는 자막만 보여줌
    + 첫번째 마킹 있는 자막 위치에서 동영상 재생
    
16. 예상문제 - 문제 바로 풀기 - 코치마크
17. 예상문제 - 문제 바로 풀기 - 화면 이동 (번호목록)
    
18. 예상문제 - 문제 바로 풀기 - 테스트 결과 (( v02 (( v01
    
19. 예상문제 - 해설 보며 공부하기 (( v01
    
20. 예상문제 - 해설 보며 공부하기 - 문제 이동 (번호목록) (( v01
    
~~~

21. 모의고사 (문제풀기) (시험목록)
    | 문제를 푼 이력이 있을 경우 (레이어팝업. 초기화 안내)
    | 잠금 ADsP
    | 잠금 ADP
    
22. 모의고사 - 문제 바로 풀기 (( v01
    | 나가기를 하지 않고 시험을 종료할 시 (레이어팝업. 확인) ❓
    + 타이머
    
23. 모의고사 - 문제 바로 풀기 - 코치마크
24. 모의고사 - 문제 바로 풀기 - 화면 이동 (번호목록)
    
25. 모의고사 - 문제 바로 풀기 - 테스트 결과 ))어디서링크?
    
26. 모의고사 - 해설 보며 공부하기
    
27. 모의고사 - 해설 보며 공부하기 - 문제 이동 (번호목록)
    
~~~

28. 기출문제 (문제풀기) (시험목록)
    | 문제를 푼 이력이 있을 경우 (레이어팝업. 초기화 안내)
29. 기출문제 - 문제 바로 풀기
30. 기출문제 - 문제 바로 풀기 - 코치마크
31. 기출문제 - 문제 바로 풀기 - 화면 이동 (번호목록)
    
32. 기출문제 - 문제 바로 풀기 - 테스트 결과 ))어디서링크?
    
33. 기출문제 - 해설 보며 공부하기
    
34. 기출문제 - 해설 보며 공부하기 - 문제 이동 (번호목록)
    
~~~

35. 오답노트 (시험목록)
    | 문제를 푼 이력이 있을 경우 (레이어팝업. 초기화 안내)
36. 오답노트 - 문제 바로 풀기
    ++ 예상문제와 동일
    + n3번 틀린 문제에요!
    + 오답 노트에서 제외하기
    ++ 뒤로가기 링크 변경, 결과보기 삭제 필요!
37. 오답노트 - 문제 바로 풀기 - 화면 이동 (번호목록)
38. 오답노트 - 해설 보며 공부하기
39. 오답노트 - 해설 보며 공부하기 - 문제 이동 (번호목록)
40. 컨닝페이퍼 (시험목록)
    | 문제를 푼 이력이 있을 경우 (레이어팝업. 초기화 안내)
41. 컨닝페이퍼 - 문제 바로 풀기
    ++ 예상문제와 동일
    + n3번 틀린 문제에요!
    
42. 컨닝페이퍼 - 문제 바로 풀기 - 화면 이동 (번호목록)
43. 컨닝페이퍼 - 해설 보며 공부하기
44. 컨닝페이퍼 - 해설 보며 공부하기 - 문제 이동 (번호목록)
~~ 20240405
45. 나의 성적
46. 나의 성적 - 준비중!
    
47. 나의 성적 - 빈 화면 (제출전) | no1.v01 | no2.v01
    | 전체 시험 | 5과목
    | 모의고사
    | 기출문제
    | 로그인전 (로그인 유도 버튼) 🟢
    
48. 나의 성적 - 전체 시험 (3회 이상 제출)
    | 5과목
    + 탭 (총 점수 | 1과목 | 2과목 | 3과목 | 총 점수)
    + 차트::막대1+라인3
    + 엄지척 (별점)
    + 선택상자
    
49. 나의 성적 - 모의고사 (3회 이상 제출) (( v01
    | 1회 제출 | 5과목 (( v01
    | 2회 제출 | 5과목
    
50. 나의 성적 - 기출문제 (3회 이상 제출)
    기출문제 탭 활성, 기출문제 차트만 보임, 제출한 기출문제 목록 이외의 기능 동일
    
51. 나의 성적 - 테스트 결과 (전체) (( v02 (평균) (( v01 (총점)
    | 5과목 | 4과목
    | 테스트 오답 결과 | 5과목
    
52. 나의 성적 - 모의고사 리포트 (( v01
    | 5과목
    + 차트::막대1+라인3
    + 탭 (1과목 | 2과목 | 3과목)
    
53. 나의 성적 - 모의고사 리포트 - 세부 리포트 (과목별 오답)
~~ 20240619
54. 기타
55. 개발중
56. 경영정보시각화~20241021
    1. 경정시 (메인)
    2. 경정시 - 기본 모의고사
    3. 경정시 - 실전 모의고사
       | 전체 모의고사 결제 |
       | 미결제 (잠금)
       | 모의고사 1개 결제 (일부 잠금)
       + 레이어팝업. 구매 유도
       
    4. 경정시 - 모의고사 - 문제 바로 풀기
       + 핵심쇼츠강의
       | 강의 미결제 (문제 풀이 강의 클릭하면 구매 유도)
       + 레이어팝업. 구매 유도
       

본문 템플릿 (Contents) - 개발 페이지 바로

1. 쿠폰 발행
   

CBT 관리자 /_res/cbt.A/

공통·서브+메인 템플릿 (Layout)

1. _템플릿.인트로 :
   
2. _템플릿.공통·서브 :
   | tp.sub.php (관리자.로그인후) (부품스타일)
   
   

본문 템플릿 (Contents)

1. CSS Component (Sample Demo)
   

최고 관리자 ~/html/sub/

20240603~ (( 화면설계서.Figma

1. 로그인 (작성)
2. 홈(대시보드) 🔷 ))기획?
3. 사용자 관리 (( v03 (( v02 (( v01
   + 레이어팝업. 사용자 추가/수정 (+ 교재 선택 추가)
   + 레이어팝업. 달력날짜선택
   + 전체,1,3,6,12개월 버튼
   
4. 자격증 관리 (( v01
   + 레이어팝업. 자격증 추가/수정 (+ 중복확인)
   + 성공(yes), 오류(no) 안내 글
   
5. 자격증 관리 - 태그 관리 - 학습목표 관리 (( v01
   + 레이어팝업. 태그 추가 (+ 과목/장/절/학습목표 선택 + 과목,장,절,학습목표 입력 추가)
   + 레이어팝업. 학습목표 수정
   
6. 자격증 관리 - 태그 관리 - 과목 관리 (( v01
   + 레이어팝업. 과목 수정
   + 레이어팝업. 태그 삭제 확인 (confirm)
   
7. 자격증 관리 - 태그 관리 - 장 관리 (( v01
   + 레이어팝업. 장 수정
   + 레이어팝업. 태그 삭제 확인 (confirm)
   
8. 자격증 관리 - 태그 관리 - 세부 절 관리 (( v01
   + 레이어팝업. 세부 절 수정
   + 레이어팝업. 태그 삭제 확인 (confirm)
   
9. 교재 관리 (( v01
   + 레이어팝업. 교재 추가/수정 (+ 중복확인)
   + 표지 사진 업로드. 미리보기
   
10. 교재 관리 - 교재 수정 (폼+목록)
    + 표지 사진 업로드. 미리보기
    + 레이어팝업. 등록 시험지 수정
    
11. 시험 관리 (( v04 (( v03 (( v02 (( v01
    + 레이어팝업. 시험지 추가/수정 (+ 시험 유형 선택 + 교재 코드 선택 추가)
    + 레이어팝업. 시험문제 추가/수정 (+ 드래그 순서 정렬 + 추가)
    + 레이어팝업. 문제보기 (문제의 보기가 있는(없는) 경우)
    
12. 시험 관리 - 시험문제
    + 드래그 순서 정렬 + 추가
    + 레이어팝업. 문제보기 (문제의 보기가 있는(없는) 경우)
    + 표 thead 고정, tbody 스크롤
    
13. 문제 관리 🟢 (( v01
    | 레이어팝업. 문제보기 (문제의 보기, 비기봇 해설, 핵심쇼츠강의 없는 경우)
    + 레이어팝업. 문제 추가/수정 (+ 문제 유형 선택 + 선택지 추가 + 정답 추가)
    + 레이어팝업. 문제보기 (문제의 보기가 있는(없는) 경우)
    + 레이어팝업. 문제 삭제 확인 (시험지에 배치된 경우) (시험지에 배치 안된 경우) 🟢
14. 공지사항
    + 레이어팝업. 임시저장 글
    
15. 공지사항 작성 (( m01 (( v01
    
16. 쿠폰 관리 ))기획?
    

강사용 관리자 ~/html/teacher/ 🟢

20241010~ (( 화면설계서.Figma

1. 강사 로그인 (작성)
   + 레이어팝업. 회원가입 완료 알림
   
2. 강사 회원가입 (작성)
   + 비밀번호. pattern, 확인, 자동생성
   + 약관 동의 확인 버튼 클릭 시 체크박스 선택
   + 레이어팝업. 이용약관
   + 레이어팝업. 개인정보 처리방침
   + 가입 진행 확인창, 뒤로가기 확인창
   + 레이어팝업. 인증 메일 발송 알림
   
3. 강사 회원가입 - 메일 인증 완료 안내
4. 홈(대시보드) - 수익 통계 (( m02 (( m01
   | 일간 : 시점 선택 안한 경우 (오늘 시점) (18일 이상)
   | 일간 : 시점 선택한 경우 (과거 시점) (18일 이상)
   | 일간 : 시점 선택 안한 경우 (오늘 시점) (18일 미만)
   | 일간 : 시점 선택한 경우 (과거 시점) (18일 미만)
   | 일간 : 초기 빈화면
   | 주간
   | 월간
   + 차트::막대+라인
   + 레이어팝업. 프로필 편집 (강사 프로필)
   
5. 홈(대시보드) - 수강생 분석 (( m01
   | 일간 | 주간 | 월간
   + 차트::막대+라인
   
6. 정산 관리 (목록)
   + 레이어팝업. 달력날짜선택
   + 전체,1,3,6,12개월 버튼 (디폴트값 1개월). input change 이벤트
   
7. 상품 관리 (목록)
   + 레이어팝업. 상품 추가 신청
   + 레이어팝업. 상품 추가 신청 접수 완료
   + 레이어팝업. 상품 삭제 요청 확인
   + 필수 입력 사항 누락 시 초점 (브라우저 제공 툴팁)
   
8. 수강생 관리 (목록)
   + 레이어팝업. 관리자 추가/수정 (상세)
   + 레이어팝업. 수강생 수정 (상세)
   
9. 수강생 관리 - 수강생 성적 리포트 (대시보드) (( m01
   + 프로그레스바:: 도넛, 막대
   + 차트:: 막대+라인(+슬라이더), 도넛(파이), 막대
   + 스크롤 표 헤더 스티키
   + 레이어팝업. 최근 3회 시험 상세 리포트
   
10. 수강생 관리 - 테스트 결과
11. 자격증 관리
    + 태그 관리 링크 페이지 (최고 관리자와 동일)
    
12. 자격증 관리 - 태그 관리 - 학습목표 관리 (최고 관리자와 동일)
13. 자격증 관리 - 태그 관리 - 과목 관리 (최고 관리자와 동일)
14. 자격증 관리 - 태그 관리 - 장 관리 (최고 관리자와 동일)
15. 자격증 관리 - 태그 관리 - 세부 절 관리 (최고 관리자와 동일)
16. 교재 관리
17. 교재 관리 - 교재 수정 (폼+목록)
18. 시험 관리 (최고 관리자와 동일)
19. 시험 관리 - 시험문제 (최고 관리자와 동일)
20. 문제 관리 (최고 관리자와 동일)
21. 공지사항 (최고 관리자와 동일)
22. 공지사항 작성 (등록) (최고 관리자와 동일)
~~ 20241024 ~~

23. 쿠폰 관리 ))기획?
    

비기봇 문제 및 해설 생성 관리자 /_res/bigibot.cr.A/

공통·서브+메인 템플릿 (Layout)

1. _템플릿.공통·서브 :
   | tp.sub.php (관리자.로그인후) (부품스타일)
   

본문 템플릿 (Contents)

1. CSS Component (Sample Demo)
   

20240903~ (( 화면설계서.Figma

1. 문제 생성 - 외부 자료 활용 (( m02 (( m01
   + 레이어팝업. 유의사항
   
2. 문제 생성 - 문제은행 자료 활용
   | 문제은행 자료 활용 예시
   + 레이어팝업. 유의사항
   + 레이어팝업. 문제 불러오기 (데이터 에듀 문제)
   
3. 문제 생성 - 문제 복원
   | 미완성 문제들을 완성 및 복원하는 페이지 예시
   
4. 생성 문제 점검 (비기봇 문제 생성 현황)
   | 레이어팝업. 입력 데이터 원본 문제 예시
   + 레이어팝업. 입력 데이터 원본 (이미지 or 문제)
   
5. 생성 문제 점검 - 1차 문제 검수
   | 레이어팝업. 수정 가능 범위 확인 예시
   + 문제 수정 토글 스위치
   + 검수 처리 버튼 기능
   + 레이어팝업. 수정 가능 범위 확인 (alert)
   
6. 문제 최종 검수 (비기봇 생성 문제 관리)
   + 레이어팝업. 문제 삭제 확인 (confirm)
   
7. 문제 최종 검수 - 문제 최종 검수
   | 레이어팝업. 수정 가능 범위 확인 예시
   + 문제 수정 토글
   + 레이어팝업. 수정 가능 범위 확인 (alert)
   
8. 삭제 문제 관리함 (휴지통)
   + 레이어팝업. 문제 보기
   + 레이어팝업. 문제 삭제 확인 (confirm)
   

Note

Question

1. 사용자, 관리자 구분?

Request

1. 기획 화면 정의서 내용은 실제 자료를 바탕으로 만들어주세요.
2. 웹접근성을 위해 배경과 글꼴색 명암 대비는 3:1 이상이어야 합니다.

Glossary

1. | 시험: Exam or Test | 시험지: Exam paper or Test paper | 문제 질문: Question or Exam question | 문제 보기: Answer options or Question choices | 주관식: Subjective questions or Short answer questions | 객관식: Multiple choice questions | 선택지: Choices or Options | 답변: Answer | 답지: Answer sheet | 정답: Correct answer or Right answer | 해설: Explanation or Solution explanation
2. 예상문제 exam1 (expect) | 모의고사 exam2 (mock) | 기출문제 exam3 (past)
3. 과목 subject | 장 chapter | 세부 절 section
4. 자격증 certificate |교재 book

Analysis Lab

Layout

#f7f7f7
max-width:640px;

*** 사용자 화면 헤더
	== 메인
		사용자명, 환영문구, 설정 아이콘 (O)
	== 예상문제
		뒤로가기, 제목(좌정렬) (O)
	== 문제 바로 풀기, 화면 이동 (문제 번호)
		뒤로가기, 문제이동 드롭다운 목록, 결과보기 링크 (O)
	== 테스트 결과,
		제목(중정렬), 닫기 링크 (O)
	== 해설 보며 공부하기, 화면 이동 (문제 번호)
		뒤로가기, 문제이동 드롭다운 목록 (O)
	== 오답노트, 컨닝페이퍼, 나의 성적
		제목(좌정렬)
	== 나의 성적 - 모의 고사 리포트, 기출문제 리포트
		뒤로가기, 제목(좌정렬) 3종

*** 사용자 화면 푸터
	== 메인, 예상문제, 오답노트, 컨닝페이퍼, 나의 성적, 모의 고사 리포트, 기출문제 리포트
		주메뉴 (문제풀기, 오답노트, 컨닝페이퍼, 나의 성적)
	== 예상문제 - 문제 바로 풀기, 화면 이동 (문제 번호), 테스트 결과
		없음

Chart. 20240611~

1. lab.chart1.html
   + 막대1+라인3
   + 더미 그래프로 우측 Y축 보여주기
   + 옵션들
   
2. lab.chart2.html
   + 슬라이더 바
   
3. lab.chart3.html
   + 차트 내부 줌/팬 기능
   
4. lab.chart4.html
   + ~ 차트 내부 줌/팬 기능
   
5. lab.chart5.html
   + ~ 막대 그래프 3개씩 보이기
6. lab.chart6.html
   + ~ 막대 + 라인 그래프 3개 추가
7. lab.chart7.html
   + ~ 이전 다음 그래프 있을 때 라인 일부 보임 실패
   + 슬라이더 고도화로 대체
   
8. lab.chart8.html
   + ~ 탭 클릭하면 특정 그래프 보이고 y축 분할선과 눈금값 색상 변경
   
9. lab.chart9.html (( v07 (( v06 (( v05 (( v04 (( v03 (( v02 (( v01
   == 차트 그래프의 일부를 보여주는 기능 재도전 )) 성공
   + x축 이전 다음 그래프 있을 때 라인 일부 보임
   + 터치 또는 마우스 무브로 이전 다음 차트로 스냅 이동
   + 이벤트 핸들러 통합
   + …
   

View Image. 20240814~

1. exam1view1img1.v01.php
   | 이미지 파일 바로 새 창 링크하는 방법과 UX 유사
   | 터치 핀치 확대 및 드래그 이동
   
2. exam1view1img1.v02.php
   | transform (X)
   | initial-scale=2.0 (X)
   | PC 는 잘 작동하나, 모바일 브라우저에는 스크롤 이동이 안된다. 뭐가 문제인가?
   
3. exam1view1img1.v03.php
   | display:flex;
4. exam1view1img1.v04.php
   | display:table;
5. exam1view1img1.v05.php
   | pinch-zoom.umd.js (벤더 데모)
6. exam1view1img1.v06.php
   | pinch-zoom.umd.js (실무 적용)

Echarts WordCloud. 20240826~

1. Echarts1WordCloud1.html
   + 반응형 + 워드 링크 주소 연결
   

BlackOut. 20241029~

1. blackout1.html
   + 운영페이지 - 문제 바로 풀기. 소스 보기 복사
   

Video. 20241104~

1. video1
   
2. vimeo1