참가자가 의도적으로 취약한 프로그램이나 웹사이트에 비밀리에 숨겨져 있는 플래그라고 불리는 텍스트 문자열을 찾는 CTF(Capture The Flag)에서 착안한, Kite를 찾고 정답을 제출할 수 있는 온라인 사이트
React.js (Django, SQL과 협업)
1. MAIN
- 상단 가장 좌측에 프로젝트 이름 표시
- CHALLENGE, RANK 메뉴 표시
- LOGIN 메뉴 표시
2. LOGIN
- 이메일과 비밀번호로 로그인
- 정확한 이메일 형식을 입력해야만 로그인 버튼 활성화
- 비밀번호 재설정 페이지와 연결 텍스트
- 회원가입 페이지와 연결 텍스트
- 로그인 성공 시 팝업 등장 후 메인 페이지로 자동 이동
- 로그인 성공 시 상단 헤더에 MY PAGE와 LOGOUT 버튼 표시
3. JOIN
- 이메일, 이름, 닉네임, 비밀번호, 비밀번호 확인의 다섯가지 항목
- 이메일, 이름, 닉네임은 중복 불가
- 중복 이메일, 이름, 닉네임으로 회원가입 시도 시 팝업 등장하며 입력 내용 초기화
- 정확한 이메일 형식을 입력해야만 회원가입 버튼 활성화
- 회원가입 성공 시 팝업 등장 후 로그인 페이지로 자동 이동
4. LOGOUT
- 현재 로그인된 계정에서 로그아웃
- 로그아웃 성공 시 상단 헤더에 다시 LOGIN 버튼 표시
5. Password Reset
- 비밀번호 재설정 페이지
- 회원가입한 이메일을 입력하면 해당 이메일로 비밀번호 재설정 링크 전송
- 링크 클릭 시 새로 변경할 비밀번호와 비밀번호 확인 입력하는 페이지 등장
- 비밀번호 변경 이후 새 비밀번호로 로그인 가능
6. CHALLENGE
- 문제 표시 페이지
- 기본 값은 전체 문제 표시
- 시스템, 리눅스, 웹, 암호학으로 필터링 가능
- 현재 표시하고 있는 카테고리만 다른 색 글씨
- 각 문제의 번호, 제목, 배점, 분야 어떤 것을 눌러도 해당 문제로 이동 가능
7. Submit
- 문제 제출 페이지
- 문제 제목, 배점, 분야, 문제 정보, ssh_path 표시
- 웹 문제의 경우 접속 정보와 접속 정보 불러오기 버튼 표시, 버튼 누르면 할당된 주소 팝업 등장
- 제출한 답안이 정답인 경우 정답 팝업과 함께 실시간으로 점수 증가
- 오답인 경우 오답 팝업 표시
- 이미 정답을 맞힌 문제 재제출 방지, 점수 미증가
8. RANK
- 랭킹 페이지
- 사이트 내 모든 유저의 닉네임과 점수를 순위로 표시
- 1~3위는 랭킹 페이지 상단에 따로 표시
- 누군가의 점수가 증가한 경우, 랭킹 실시간 업데이트
9. MY PAGE
- 개인 정보 확인 페이지
- 로그인이 된 상태에서만 접근 가능
- 회원가입 시 등록한 이메일과 닉네임 표시
- 획득한 점수 표시
- 시스템, 웹, 리눅스, 암호학 각 분야별 점수 확인 가능
Medal icons created by Freepik - Flaticon
Kite icons created by Freepik - Flaticon
Unlock icons created by surang - Flaticon
Victory icons created by Freepik - Flaticon