React, Spring Boot, DOMjudge 기반으로 개발한 웹 프로그래밍 실습 서비스이다. 학생은 별도 설치 없이 브라우저에서 코드를 작성하고 즉시 채점 결과를 확인할 수 있으며, 교수자는 과제 관리와 자동채점 기반 수업 운영이 가능하다. 실제 C 프로그래밍 수업에 적용하여 학습 효율과 문제 해결 집중도 향상을 확인하였다.
- 학생: 수업·과제·문제 풀이, 코딩 테스트 응시, 공지 확인, 커뮤니티 Q&A
- 교수: 수업·문제·과제·코딩 테스트 관리, 학생 진행 현황·채점·성적 관리
- 자동 채점: DOMjudge 연동으로 코드 제출 후 즉시 채점 결과 확인
- 코드 에디터: CodeMirror 기반 브라우저 IDE (C, C++, Java, Python 등)
- 인증: 이메일/비밀번호 및 소셜 로그인 (Google, GitHub)
- 2025.09 ~ 진행 중
- 서비스 주소:
https://hcl.walab.info
우병희 Frontend, Backend |
곽서원 Frontend, Backend |
윤동혁 Infra, Backend |
- Frontend: Node.js 18+, npm
- Backend (API 연동 시): Java 11, MariaDB, Redis, DOMjudge
git clone https://github.com/walab-Capstone1/Handongjudge_FE.git
cd Handongjudge_FE
npm install
npm start개발 서버는 기본적으로 http://localhost:3000 에서 실행됩니다.
프로젝트 루트에 .env 파일을 생성합니다.
REACT_APP_API_URL=http://localhost:8080/api환경 변수를 설정하지 않으면 기본값 https://hcl.walab.info/api 로 요청합니다.
로컬에서 API·인증·채점 기능을 사용하려면 Backend를 함께 실행해야 합니다.
git clone https://github.com/walab-Capstone1/Handongjudge_BE.git
cd Handongjudge_BE
# .env 파일 설정 (DB, Redis, DOMjudge, OAuth 등)
./gradlew bootRun- Backend 기본 포트:
8080 - Frontend 기본 포트:
3000 local프로파일에서는http://localhost:3000CORS가 허용됩니다.
npm run build빌드 결과물은 build/ 디렉토리에 생성됩니다.
서비스 소개와 시스템 공지/가이드를 한눈에 확인하고 강의실로 바로 이동할 수 있는 시작 페이지입니다.
이메일/비밀번호 또는 소셜 로그인으로 인증을 진행하는 사용자 로그인 화면입니다.
신규 사용자가 기본 정보를 입력해 계정을 생성하는 회원가입 화면입니다.
내가 수강 중인 강의 목록과 강의별 진입 경로를 확인하는 페이지입니다.
선택한 수업의 과제 목록, 마감 기한, 진행 상태를 확인하는 페이지입니다.
과제의 문제 구성과 제출 현황, 세부 안내를 확인하는 상세 페이지입니다.
에디터에서 코드를 작성하고 제출/채점 결과를 확인하는 실습 화면입니다.
수업 공지사항과 중요 안내를 확인하는 공지 페이지입니다.
과제·문제별 질의응답 게시글을 검색하고 조회하는 커뮤니티 목록 화면입니다.
관련 과제/문제를 선택하고 질문을 작성하는 게시글 등록 화면입니다.
질문 본문, 댓글, 추천 및 해결 상태를 확인하는 게시글 상세 화면입니다.
코딩 테스트 목록과 응시 상태를 확인하고 테스트를 시작하는 화면입니다.
담당 수업 목록을 조회하고 수업별 운영 설정으로 이동하는 관리 화면입니다.
학기/분반/기본 정보를 입력해 새로운 수업을 개설하는 페이지입니다.
등록된 문제를 조회·검색·수정·삭제하는 문제 관리 페이지입니다.
외부 또는 기존 문제 데이터를 가져와 수업 문제로 등록하는 화면입니다.
문제 설명, 입출력, 테스트케이스를 작성해 새 문제를 생성하는 페이지입니다.
선택한 문제를 과제로 묶어 수업에 배포하고 마감/옵션을 설정하는 화면입니다.
기존 과제에 문제를 추가하거나 구성 순서를 조정하는 과제 편집 페이지입니다.
학생 과제 제출 현황을 반영하고 관리하는 화면입니다.
수강생 목록, 등록 상태, 참여 정보를 확인·관리하는 페이지입니다.
코딩 테스트 생성, 배포, 문제 구성, 진행 상태를 관리하는 화면입니다.
코딩 테스트 기본 정보, 시작·종료 시간, 공개 상태를 확인하고 시험을 제어하는 메인 화면입니다.
코딩 테스트에 포함된 문제 목록과 제출·정답률 통계를 관리하는 화면입니다.
학생별 제출 기록과 채점 결과, 제출 코드를 조회하는 화면입니다.
학생별 진행 상태, 완료율, 문제별 풀이 현황을 한눈에 확인하는 화면입니다.
과제/코딩테스트 성적 조회, 점수 입력, 배점 설정, 통계를 관리하는 성적 페이지입니다.
📁 Handongjudge_FE
├── 📁 public
├── 📁 src
│ ├── 📄 App.tsx
│ ├── 📁 pages
│ │ ├── 📁 Auth
│ │ ├── 📁 Course
│ │ ├── 📁 AssignmentPage
│ │ ├── 📁 TutorPage
│ │ └── 📁 SuperAdminPage
│ ├── 📁 components
│ ├── 📁 layouts
│ ├── 📁 hooks
│ ├── ⚛️ recoil
│ ├── 🌐 services
│ ├── 🎨 styles
│ ├── 🏷️ types
│ └── 🛠️ utils
├── 🐳 Dockerfile-frontend
├── ⚙️ .github/workflows/deploy-frontend.yml
└── 📦 package.json