wonho1401 / 2023-1-OSSProj-M.C.theMax-7

동국대학교 행정 시스템 통합 웹 서비스

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

2023-1-OSSProj-M.C.theMax-7

2023년 1학기, 오픈소스프로젝트, M.C.theMax, 7조


💭 About

1. 프로젝트명

동국대학교 통합형 관리 웹서비스 (DonggukClick)

2. 프로젝트 목표

동국대학교 메인 페이지, 유드림스, 이클래스 등 학교의 여러 행정 시스템들을 통합한 웹 페이지를 개발하여 학교 구성원들의 편의성을 높이고자 합니다.

3. 요구분석

동국대학교 행정 시스템은 자주 이용하는 웹사이트들이 모두 분리되어 사이트마다 별도의 로그인 과정을 거치기에 번거롭습니다.

이클래스 상에서 과제를 제출하기까지의 과정이 [강의실] 에 들어가 [과제] 페이지로 접속해야 하는 등의 번거로움이 있습니다.

과제의 양이 많은 경우, 이클래스 과제의 가시성이 떨어지고 그 중요도를 파악할 수 없어 과제 관리 효율이 떨어집니다.

분리된 웹사이트들에서 공지사항들이 모두 달라 중요 정보들을 한번에 찾아내기가 어렵습니다.

교내 제출용 성적 증명서 발급 시 위변조 위험에 노출되어 행정 사항에 혼란을 줄 수 있습니다.


🔑 Guides

License: Apache v2.0

Install: 설치방법_한글ver

Execute: 실행방법_한글ver

Announcement: 코드설명_한글ver


YouTube Video

시연영상 보러가기👀


⚙️ System Architecture

  • Project Architecture


  • AWS Infra Architecture


  • Database Architecture

학교 행정 시스템과 같은 대용량의 데이터를 빠르게 처리하고 데이터 간 관계를 명확히 하기 위해 RDBMS MySQL을 사용합니다.


  • Entity

데이터베이스의 테이블에 존재하는 column들을 필드로 가지는 객체(entity)를 JPA로 구현하였습니다.

데이터베이스에 접근할 때 객체단위로 접근하는데 이 데이터베이스의 일관성을 유지하기 위해 데이터베이스를 Entity로 매핑하였습니다.


📚 Tech Stack

Common

Frontend

Backend

Infra


📺 Project Result

👉 메인화면

  • 로그인 이전 메인화면

학생/ 교수/ 교직원 여부에 따라 로그인 컴포넌트가 달라집니다.

  • 로그인 후 메인화면

DonggukClick에서 올바른 로그인을 진행하면 자신의 학사정보에 따른 다음과 같은 화면이 나타납니다.
분리된 사이트들 중에서 원하는 공지사항들을 따로 알림으로 받기위해 '즐겨찾기'기능을 활용할 수 있습니다.
이클래스에서만 확인가능한 과제의 제출여부와 과제사항들을 DonggukClick 메인페이지에서 확인할 수 있습니다.

왼쪽 상단에서 즐겨찾기기능을 활용하면 관심분야의 공지들만을 따로 확인할 수 있습니다.

👉 메인화면에서 이클래스페이지

  • 메인

DonggukClick에서 로그인된 상태로 이클래스페이지에 들어오게 되면 '강의실을 선택하세요' 부분의 <selectbox>를 클릭하여 각 강의실별 주요사항들(과제,공지사항, 출석부.성적)을 확인할 수 있습니다.

  • 과제

  • 공지사항

  • 출석부

  • 성적

👉 메인화면에서 유드림스페이지

현 uDrims의 전체 UI를 참고하였습니다.

  • 원스탑 메인페이지

  • 학사정보 페이지
    • 학적부 열람

  • 개인 강의 시간표 조회

  • 금학기 성적관리

👉 메인화면에서 성적조회

  • 성적조회 페이지

미리보기로 성적증명서를 먼저 확인하고 PDF로 저장할 수 있습니다.
추가로 QR코드를 삽입하여 위변조되지 않은 원본 성적표 제공을 보장합니다.


✨ Expected Outcomes

  • 분산되어 있는 학교 시스템을 통합적으로 구현하였습니다.

유드림스, 이클래스, 학교홈페이지 각각이 모두 분리되어있는 사항에 대해 통합된 포털사이트를 제공합니다. 한 사이트에서 보기좋은 UI로 학교의 모든 웹시스템을 방문하는데 수고로움을 덜었습니다.

  • 각 학과 전공자들의 관심을 갖는 학교 공지사항들을 한 눈에 확인할 수 있습니다.

즐겨 찾는 분야의 공지들의 크롤링을 진행해 따로 알림을 통해 제공받을 수 있습니다.

  • 과제 관리의 효율성을 높였습니다.

과제를 확인하기 위해 이클래스로 들어가지 않고도 DonggukClick 메인화면에서도 확인할 수 있도록 하였습니다. 완료한 과제와 해야할 과제를 칸반형태로 확인할 수 있습니다.

  • 성적표 위변조를 방지할 수 있습니다.

교내 증빙용 성적표의 위변조를 방지하여 부정 수급 등 행정 혼란을 방지합니다. 교내 성적표를 pdf로 다운로드 받을 수 있으며, QR 코드를 삽입하여 원본 성적표를 제공하여 위변조를 방지할 수 있습니다.


📍 Commit Convention

Type 설명
Feat 새로운 기능 추가 작업
Style UI 관련 작업(UI 컴포넌트, Xib 파일, 컬러·폰트 작업 등)
Fix 에러 및 버그 수정, 기능에 대한 수정 작업
Test 테스트 관련 작업

🐾 Branch Strategy

브랜치 종류 소개

develop - default

  • protected → 승인 받아야만 merge 가능

feature

  • feature/#이슈번호
  • feature/#1
시나리오

1️⃣ Issue

  1. 이슈생성

2️⃣ Branch

  • ex. feature/#16

3️⃣ Pull request

  1. reviewer → 4명
  2. 4명 중 2명이 승인(approve)을 해야 merge 가능

4️⃣ Code Review

  1. 수정 요청
  2. 대상자(작업자)가 수정을 하고 다시 커밋을 날림
  3. 수정 반영하고 답글로 커밋로그 남기기
    • 수정사항은 커밋번호로 남기기

5️⃣ merge

  1. 팀원 호출
  2. 간단한 리뷰, 피드백, 회의 마친 후
  3. 다 같이 보는 자리에서 합칠 수 있도록 하기

🗂 Folder Architecture

- FE

|-- coponents => 공통 컴포넌트 관리
|-- store => 리덕스 관련 모듈들
|-- hooks => 공통 hooks 관리
|-- pages => router 페이지 관리
|-- utils => util 파일 관리
|-- db => mocking data 파일 관리
|-- api => api 목록들
|-- constants => 상수(매직넘버)
|-- assets => 프로젝트에 쓸 font, image 등

- BE

|-- config => JWT, Cors 처리 관리
|-- controller => API 호출 관리
|-- domain => Entity 관리
|-- repository => DB 트랜잭션 쿼리 처리
|-- service => DTO에 데이터 매핑
|-- resources => MySQL 및 AWS 환경 변수 관리

✍️ Reference

과제 관리
React-beautiful-dnd

성적증명 PDF
jsPDF html2canvas

성적증명서 QR코드
QRcode react

리액트 테이블
React table

🤝 Team Member

-- -- -- --
박광렬 이지민 정관희 정원호
BE FE Infra FE
컴퓨터공학과 수학과 컴퓨터공학과 컴퓨터공학과
2018112010 2020110408 2018111997 2018112039

👷‍♀️ Jobs

박광렬 : Rest API 개발 및 데이터베이스 관리
이지민 : 이클래스, 칸반 보드 구현
정관희 : 인프라 구축 및 데이터베이스 설계
정원호 : 유드림스, 성적 증명서 구현

📄 Docs

최종 발표 자료 최종 발표 자료

보다 더 자세한 사항 최종보고서

About

동국대학교 행정 시스템 통합 웹 서비스

License:Apache License 2.0


Languages

Language:JavaScript 64.1%Language:Java 32.4%Language:CSS 1.2%Language:HTML 1.0%Language:Shell 0.7%Language:Dockerfile 0.6%