UI Template Code Guide v2. 20241126~

데이터에듀PT 사용자 (일반) /_res/dataedupt/

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

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

본문 템플릿 (Contents)

1. CSS Component (Sample Demo)
   

20241125~ (( 화면설계서(미완).PPT.Figma

1. 런처스크린 🔷
   
2. 로그인 🔷
3. 비밀번호 변경 (비밀번호 찾기) 🔷
   | 메일전송 - 성공
   | 메일전송 - 실패
   
4. 비밀번호 변경 메일 )) webmail
5. 비밀번호 바꾸기 🔷
6. 메인 (홈) 🔷 (( v01
   | 최근 본 강의 (섬네일만 다름)
   | 로그인전
   + 배너 슬라이더
   + Hot 커뮤니티 슬라이더❓
   + 인기상품 슬라이더
   
7. 공통UI 🔷
   + 하단 내비게이션
   + 사이드바 (햄버거 메뉴 or 드로어 내비게이션)
   
8. 마이페이지
   + 레이어팝업. 로그아웃 확인
9. 계정관리
   
10. 개인정보 보호정책
    
11. 이용약관
    
12. 탈퇴
    
13. 결제내역
    
14. 주문상세
    
15. 주문상세 강의
    
16. 문의 빈화면
    
17. 문의 - 문의 내역
    
18. 문의 - 문의 내역 보기
    
19. 문의 - 문의하기
    
20. 문의 - 구매내역 - 문의
    
21. 공부하기 (문제풀기) 🔷
    | 로그인 전
    
22. 무료 예상문제 표시
    
23. 오답노트
    
24. 커닝페이퍼
    
25. 나의 성적
    
26. PT샵 (메인) 🔷🔷
    
    1. 상품 검색
       | 최근 검색어 있음 | 최근 검색어 없음 | 상품 검색 결과 있음 | 상품 검색 결과 없음
    2. 상품 상세 (PT이용권)
       + 상품 내용 더보기
       + 공유 버튼
       + 구매하기 옵션 선택
       
    3. 장바구니
       | 빈화면 | 적용가능쿠폰 없음 + 선택 삭제 + 쿠폰 할인 선택
    4. 장바구니 - 주문 수정
       + 옵션 여러개
    5. 주문/결제
       + 배송지 + 주문 상품 | 결제 수단 | 약관 동의 및 결제
       + 배송 요청사항 선택상자
       + 주문상품 접힘/펼침
       + 배송 요청사항 직접입력
       
    6. 결제 완료
       
    7. 배송지 목록
       | 빈화면
    8. 배송지 입력
       + 레이어팝업. 뒤로가기
       + 레이어팝업. 삭제
       
    9. 배송지 수정
       
27. 마이PT(학습관리)
    
28. 마이PT - PT 이용권
    
29. 마이PT - PT 이용권 없음
    
30. 마이PT - PT 이용권 없음 - PT 체험 목록
    
31. 마이PT - 강의
    
32. 마이PT - 책 QR 강의
    
33. 마이PT - 책 QR 강의 리스트 (목차)
    
34. 마이PT - 학습 목표별 강의
    
35. 커뮤니티
    

웹메일

1. 비밀번호 변경 요청 🔷

데이터에듀PT 관리자 /_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

Project Analysis and Architecture (Preparation in Progress)

/ Floder / File

/_res/dataedupt/
│
├── /_lib		# 퍼블리싱 링크 목록 가이드..
├── /data		# 자료 (웹페이지 이미지 제외)
├── /html		# 웹페이지별 코드
│   ├── /email		# 이메일
│   ├── /event		# 이벤트
│   ├── /intro		# 인트로 (로그인..)
│   ├── /main		# 메인
│   ├── /study		# 공부하기 - 문제풀기, 오답노트, 컨닝페이퍼, 나의 성적
│   ├── /shop		# PT샵
│   ├── /community		# 커뮤니티
│   ├── /my		# 마이PT, 마이페이지
│   ├── /sub		레이어팝업 inc_*.
│   └── /etc		기타 (미분류)
├── /img		# 이미지
├── /share		# 공유 ( /inc /css /js /ui /vendor ) 
├── /~past		# 백업 (*.~20241129.*)
├── favicon.png
├── index.php
└── 

ToDo

1. meta http-equiv, keywords 삭제, description 수정은 추후 한꺼번에 하자~

Question

1. 사용자, 관리자 구분?
2. + 위지윅 편집기 (오픈 소스 중에서 선택 필요) ))@개발자 ❓
   ※ 예) | summernote ✔️ | smarteditor2

Request

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

Glossary

1. | 코스 course | 과목 subject | 강의 lecture | 수업 class | 시험 Exam or Test | 시험지 Exam paper or Test paper | 문제quiz | 문제 질문 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