GithubHelp home page GithubHelp logo

nera's Introduction

NERA

oNlinE Realtime Assignment

서울시립대 컴퓨터과학부 실시간 과제 제출 및 관리 플랫폼

서비스 바로가기

WIKI

룰

  1. master를 제외한 나머지 branch에서는 자유롭게 커밋 (fork도 가능)
  2. master랑 merge하려면 pull request (이하 PR) 넣기
  3. 본인을 제외한 나머지 멤버가 변경내용 검토후 merge
    1. Squash&merge, Rebase가 아닌 일반 merge 사용할것

디렉토리

.github/workflows
  ㄴ Actions 기능을 사용한 CI 관련 파일 존재
.vscode
  ㄴ 디버깅 관련 vscode 설정파일 존재
page
  ㄴ 프론트엔드 관련 프로젝트. React로 진행중
server
  ㄴ 백엔드 관련 프로젝트. Koa로 진행중

DEV환경 구축

본 프로젝트는 yarn을 사용하는것을 전재로 진행하고 있습니다.

먼저 구글 드라이브의 보안 폴더에서 Vault 환경 변수들을 찾아 등록해 주신 다음

각 프로젝트 폴더에 들어가서 yarn입력으로 필요 모듈을 설치한 후 아래 명령어를 사용하시면 됩니다.

page

yarn start: React 개발서버 시작

yarn build: 정적파일 만들기

yarn test: 유닛테스트 실행

server

yarn start: prod서버 시작.

yarn dev: dev서버 시작. (파일변경 감지시 자동 재시작)

yarn test: 유닛테스트 실행

nera's People

Contributors

powergee avatar thereisnotruth avatar iwanhae avatar bucketressi avatar o514jy avatar park-joonyoung avatar gunhoflash avatar dependabot[bot] avatar

Stargazers

avatar avatar Hyeongjin Choi avatar avatar

Watchers

James Cloos avatar Hyeongjin Choi avatar avatar avatar avatar

Forkers

thereisnotruth iwanhae bucketressi powergee

nera's Issues

assignmentState가 시간에 따라 수정되지 않고 초기값으로 유지되는 현상

시간에 따라 assignmentState가 변하지 않는 버그를 발견하였습니다. 과제의 마감 기한을 지나거나, 과제의 마감 기한을 연장하여 assignmentState가 변하여야 하는 상황에도 백엔드에서 전달받은 assignmentState가 변하지 않고 초기에 설정한 값으로 유지됩니다. 아래는 이를 재현하는 과정입니다.

  1. 발행시간은 지났지만 이미 마감기한이 지난 과제를 생성합니다. (ex. 현재 시간이 10시라면 발행시간을 8시, 마감기한을 9시로 설정)
  2. 이렇게 되면 assignmentState가 2입니다. (정상)
  3. 다시 과제 설정 페이지로 돌아가서 과제의 마감기한을 현재 시간보다 미래로 설정합니다.
  4. 이 때 과제의 assignmentState가 변해야 하지만 초기값 그대로 2가 유지됩니다. (버그)

1 지난 과제 생성
2 처음에 마감된 상태 (정상)
3 마감 시간 수정
4 assignmentState가 수정되지 않았음 (버그)

Requirement suggestions for the next release [due: 15, Sept]

PPT 사용이 불편하여 글로 남깁니다. 이 문서에 Issue를 표시하고 완료 여부를 관리하게 된다면 다른 분들의 Google PPT 피드백도 통합하도록 하겠습니다.

공통

  1. ie 11 미지원 ▶️ 안내 페이지로 Redirect
    HOW TO CHECK? navigator.userAgent

  2. 익명 사용자의 접근 차단 필요
    /home 등을 바로 접근 가능

  3. Material-UI Theme 없음

로그인 페이지

[⭐⭐⭐]

  1. 로그인 후에도 새 탭 접속시 로그인 페이지 표시

  2. Input에서 엔터 미지원

[⭐⭐]

  1. 화면에 우선순위 없음
  • 우선순위 세부사항
    로그인 버튼 = Primary
    회원가입 버튼 = Secondary (만든다면)

[⭐]

  1. 회원가입 프로세스 생성

    1. 버튼 클릭 시 Modal로 이후의 과정을 설명

    2. 새탭으로 Rabums 이동 ( rabums에서 seamless하게 회원가입을 할 수 있는 register API를 제공하는 것이 맞다. )

  2. 로그인 이후 뒤로가기 history를 제거

학생 체험 페이지

[⭐⭐⭐]

  1. <내 과제>에서 과제 간 화면 전환 시 화면 깜박거림
    WHY? 로딩 컴포넌트 때문

  2. <내 과제>에서 현재 페이지 여부 확인할 수 없음

  3. <내 과제>에서 점에 표시된 색 (초록색, 파랑색) ▶️ (active, inactive) 를 나타내야

[⭐⭐]

  1. Alert ▶️ Modal

  2. 과제 아이템은 min-width가 있는 Grid 3 칸 정도로 지정해야 (반응형)

  3. 마감 시간은 하루 이내이면 12시간 남음등으로 표시

[⭐]

  1. <과제 List Item> 에서 제목이 길면 ... 으로 표시 하고, 툴팁을 제공

  2. <과제 List Item> a 태그 영역에서만 클릭 가능

  3. <내 과제> refresh 버튼의 피드백이 없다.

    • 뭘 refresh하고 뭐가 refresh 됐는지 표시되지 않음

  4. 마감된 과제중 제출여부를 표시

과제 작성 페이지

[⭐⭐⭐⭐] 버그

  1. 텍스트가 스크롤바에 가까워지면 텍스트 겹쳐서 입력

    • [환경 1: 15인치, 엣지]
    • [환경 2: 27인치, 크롬]

  2. []를 입력하면 ()가 없어도 링크로 표시

  3. 더블 스크롤바

    • [환경 1: 15인치, 엣지, 35<=#line]
    • [환경 2: 27인치, 크롬, 41<=#line]
      WHY? <div class="editor_input" />의 자체적인 overflow: auto 이외에 내부에 div.ace_scrollbar.ace_scrollbar_v가 존재하기 때문.

[⭐⭐]

  1. <과제 작성>시 Scroll을 내리면 Title, 제출 기한, 저장 상태를 알 수 없음

    • 방법 1 스크롤을 내리면 top navbar에 표시
    • 방법 2 에디터 하단에 status bar 만들고 표시

  2. <과제 작성>시 답안 저장 딜레이

    • 5초 ▶️ 1초
    • Ctrl + S 입력 시 내용은 자동저장 됩니다. Snack 표시

[⭐]

  1. 미리 보기 스크롤이 같이 내려가지 않음

희망사항

  1. Roboto ▶️ (가볍고 선호되는 폰트)

  2. 이미지 업로드 미지원 (Why?)

  3. 과제별 Template을 제공

교수 체점 페이지 (진행중)

기본적인 문제

  1. 제출한 계정이 하나라서 n >=2 일 때의 case는 테스트를 할 수 없음

  2. 신규 계정을 만들어도 등록하기 불가능해보임

  3. 배점할 때 피드백이 전혀 없음.

Setting 개선

  • 과제 삭제 시 confirm
  • url 이상 시 돌려보내기

모바일 UI

  • width는 %로 맞추기
  • 사이드바 모바일 맞춤으로 바꾸기
  • 사이드바 위의 로고부분 fix하기

모든 개발편의용 코드들 제거

모든 보안결함이 될수있는 개발코드들을 제거한다.

디버깅용 로그인 버튼은, 로그인 없이 NERA를 체험할 수 있는 데모 버튼으로 개조한다.

교수용 학번과 학생용 학번은 배정될일 없는 2999999999 와 1999999999 를 사용한다.

환경변수로 작동

DB주소, rabums 주소와 같은 공개되어도 상관은 없지만, 바뀔 가능성이 높은 정보는 Config.ts 파일에서 관리하게 할것.

Config.ts 는 기본값 설정 후 환경변수를 불러와서 해당 값을 대치하는식으로 작동하게 할 것.

MarkdownViewer의 스타일이 초기화되는 현상

MarkdownViewer에서 생성하는 태그 스타일이 reset.css에 의해 초기화되어 스타일이 초기화되고 마크다운 문서의 구조가 깨지는 현상이 있음.

이미 reset.css를 기준으로 개발이 상당부분 진행되었으므로, reset.css를 수정하는 것보단 MarkdownViewer의 렌더링 코드에서 스타일을 필수적으로 부여하여 해결해야 함.

과제 채점 페이지 개선

  1. 학생들의 평균 점수를 표의 캡션으로 표시
  2. 채점 완료 여부를 판단하는 기준을 설명하는 안내문 추가
  3. 채점할 답안을 표로 선택하는 방법을 설명하는 안내문 추가

Vault 랑 연동

모든 공개되서는 안되는 정보들은 Vault랑 연동해서 가져오게 할것.

과제 작성 페이지 UI/UX 개선

  1. 과제 저장 상태를 나타내는 컴포넌트를 상단에 고정 (#45 의 내용과 같음)
  2. []로 링크를 만들고 ()로 주소를 부여하지 않았다면 빈 링크를 만들 수 없다는 경고 삽입
  3. 저장 지연 시간을 5초에서 1초로 조정
  4. 채점이 완료되었을 때 점수를 확인하는 페이지에서 MarkdownEditor 대신 MarkdownViewer 사용
  5. Ctrl+S로 수동 저장 지원 및 Snackbar로 안내문 표시
  6. 홈 화면으로 다시 돌아가는 버튼 추가
  7. 마크다운에 대한 안내문 추가
  8. 과제 상태가 '진행 중'일 때만 답안을 저장하도록 수정 및 확인
  9. MarkdownEditor에서 HTML 태그 사용 차단

수강생 목록 모듈화

기존에 나왔던 이슈들을 종합하여 수강생 목록 팝업을 모듈화하기
=> SetAssignment와 SetStudentList에서 모두 사용됨

과제 수행 페이지에서 저장 현황 컴포넌트를 우측 상단 헤더 아래에 고정

현재 과제 페이지는 저장 현황을 나타내는 컴포넌트가 레이아웃에서 우측 상단에 있으므로, 과제가 길어져 스크롤을 내리면 그 컴포넌트가 보이지 않게 됨. 이렇게되면 저장을 하거나 저장 현황을 확인하기 위해 항상 스크롤을 위로 올려야 하므로 번거로움.

그러므로 SnackBar 등을 이용하여 저장 현황 컴포넌트를 우측 상단에 고정적으로 보이게끔 개선해야 함.

로그인 페이지 UI 개선

  1. 회원가입 버튼 추가 (회원가입 과정 안내 후 RABUMS로 리다이렉션)
  2. 로고 추가
  3. 교수/학생 계정 체험 기능에 대한 안내문 추가
  4. 아이디와 패스워드 텍스트 박스의 레이블을 수정
  5. 텍스트 박스에서 엔터 시 로그인
  6. 버튼 우선순위 추가
  7. 이미 로그인이 되어있다면 /home으로 리다이렉션
  8. 로그인 후 history 제거
  9. ID 저장 기능 추가
  10. 이미 로그인 된 상태에서 새 탭으로 '/'에 접속 시, '/home'으로 리다이렉션

답안 작성시 자동저장기능

답안을 작성할때 아래 그림과 같이 오른쪽 위에 버튼을 꼭 눌러줘야하는데
image
잘 보이지도 않고 까먹기가 쉽습니다.

  1. 페이지를 나가려고할때 페이지를 나갈껀지 물어보는 팝업창과
  2. 답안 작성시 주기적으로 자동으로 서버에 저장되는 기능 (수정내용 발생시 10초에 한번 자동저장기능이 있으면 좋지않을까요?) 이 있으면 좋을 것 같습니다.

SetAssignment 개선

  • helpertext 달기
  • 존재하는 수강생 목록 표시하게 하기
  • 수강생 목록의 '추가' 버튼 수정

과제 생성 페이지에서 questionId가 중복되는 문제들이 생성될 수 있는 버그

아래 코드는 SetAssignment.js의 addQuestion 함수입니다.

    async function addQuestion(){
        // 새로운 문제 추가
        const index = questions.length;
        const newQuestion = {
            questionId : index,
            questionContent : "기본",
            fullScore : undefined,
        };

        let tmp = questions;
        tmp.push(newQuestion);
        await setQuestions(tmp);
        await questionHandleOpen(index);
    }

위 코드에서 새로운 문제를 생성할 때 새 문제의 questionId를 questions.length로 설정하고 있습니다. 이렇게 되면 아래와 같은 상황에서 questionId가 중복되는 복수의 문제들이 생길 수 있습니다.

  1. 과제 페이지에서 임의로 3개의 문제를 만든다.
    • 이 상황에서 각각의 questionId는 0, 1, 2이다.
  2. 두번째 문제를 제거한다.
    • 이제 각각의 questionId는 0, 2이다.
  3. 새로운 문제를 만는다.
    • 새로 만드는 문제의 questionId는 이전에 문제들의 개수 즉, questions.length이므로 2가 된다.
    • 여기에서 questionId가 2인 문제가 여러개 발생한다.

이 문제를 해결하기 위해 (기존에 존재하던 문제들의 questionId 값의 최댓값) + 1을 새 questionId로 설정하는 방법을 사용할 수 있을 것 같습니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.