PKSelect
  • Document
  • 프로젝트 개요
  • 프로젝트 준비
    • 개발환경 및 팀구성
    • 워크플로우
    • 사전조사 & 의사결정
      • 사전조사
      • 의사결정
        • 기능적 의사결정
        • 비기능적 의사결정
  • 프로젝트 설계
    • FRONTEND 설계 개요
      • FRONTEND 화면 흐름 및 동작
      • 콘텐츠 구성
        • Mainpage
        • Secondpage
      • 디자인 설계 의사결정
        • 디자인 컨셉 및 기능 정의
        • 컴포넌트 디자인
          • PC version
          • Mobile version
        • 로고결정
    • 시스템 구조 설계 개요
      • 시스템 흐름도 및 구조도
    • API Document
  • issue
    • FrontEnd
      • FrontEnd/Device classification issue
      • FrontEnd/cross browsing issue
    • BackEnd
      • BackEnd/lms_login_pw_issue
      • BackEnd/Circular Imports
    • Memo
  • 프로젝트 개발
    • FrontEnd
      • 페이지 UI
        • Mainpage
        • Loading page
        • SPA
        • Secondpage
          • Calendar
          • Table
            • 데이터 정렬
            • table
            • Button
              • 마감기한 지난 항목 삭제 <-> 확인 button
              • 과목 <-> 강의, 과제, 시험 button
              • 종강 D-day button
          • 피드백 이후 추가된 기능
      • 향후 개발 계획
    • BackEnd
      • Flask
        • PKSelecter/
        • controller/
        • app/
        • tests/
      • Server
        • AWS
        • Nginx + wsgi + Flask
        • (Sercurity) HTTPS
    • Prototype
  • 프로젝트 결과
    • 결과 보고
      • 개요
      • FrontEnd
      • BackEnd
      • PKSelect, Beta Service
      • 베타 서비스 설문조사
        • 서비스 사용성 평가
        • 베타 서비스 피드백
      • Google analytics 적용
      • 중간 발표 질문 정리
      • 최종 결과 보고
        • 피드백 적용 기능
Powered by GitBook
On this page
  • Main_page
  • Second_page

Was this helpful?

  1. 프로젝트 설계
  2. FRONTEND 설계 개요

FRONTEND 화면 흐름 및 동작

PKSelect의 FRONTEND가 어떻게 동작하는지 설명합니다.

PreviousFRONTEND 설계 개요Next콘텐츠 구성

Last updated 3 years ago

Was this helpful?

Main_page

PKSelect로 처음 접속하면 보이게 되는 화면이다.

Login

: lms의 아이디와 비밀번호를 입력해 로그인 버튼을 누르면 서버에 request를 보내고 Login 성공 여부에 따라 Error_message를 띄우고 Second_page로 넘어간다.

Introduction

: status bar를 누르면 Introduction 화면을 볼 수 있도록 하였다.

  • 세부 사항 : PKSELECT 설명 / 개발자 name / github url

Second_page

Calendar

: 미제출 항목 확인하고 싶은 날짜 선택을 하면 달력 하단에서 확인할 수 있도록 하였다.

Table

: 미완료된 강의, 미제출된 과제, 시험을 순서대로 확인할 수 있도록 하였다.

FRONTEND 화면흐름도