원하는 주제의 알고리즘 문제를 생성하고 웹에서 코드를 작성·실행한 뒤 테스트 케이스별 결과를 확인하는 흐름을 2~3일 동안 구현한 개인 프로젝트입니다.
실행 영상
문제 목록, 코드 작성·실행, AI 문제 생성 화면을 보여주는 약 55초 분량의 실행 영상입니다.
화면 설계 시안
초기 화면설계 자료입니다. 시안의 Judge0·서버 DB 등록과 달리 실제 구현은 JDoodle과 React의 메모리 상태를 사용합니다.
문제 목록 · 검색과 필터AI 문제 생성 · 프롬프트와 응답 미리보기코드 작성 · 문제 설명과 실행 콘솔채점 결과 · 테스트 케이스별 결과
주요 기능
AI 알고리즘 문제 생성
사용자 입력을 Gemini API에 전달하고, 생성된 문제 설명·입출력 예시·참고 코드를 JSON으로 파싱해 화면에 표시합니다.
생성 문제 목록과 코드 작성
생성한 문제를 React Context의 메모리 상태에 추가하고 문제별 코드 작성 화면으로 이동합니다. 서버 DB에 영구 저장하는 기능은 포함되어 있지 않습니다.
외부 코드 실행과 테스트 결과 표시
JDoodle로 코드를 실행하고 테스트 입력별 출력을 기대 출력과 비교합니다. 결과·실행 시간·메모리 정보를 화면에 표시합니다. 자체 코드 실행 엔진을 구현한 프로젝트는 아닙니다.
인증·마이페이지 화면 프로토타입
로그인·회원가입 화면과 입력 검사, 예시 사용자 통계 화면을 구성했습니다. 실제 회원 인증과 사용자 통계 수집은 구현 범위에 포함되지 않습니다.
시스템 아키텍처
React Router로 문제 생성·목록·편집기·결과 화면을 연결합니다. Gemini API는 브라우저에서 직접 호출하고, JDoodle 실행 요청은 Vite 개발 서버의 프록시가 전달합니다. 생성 문제는 React Context에서 관리하며, 별도 백엔드나 영구 저장 DB는 없습니다.
Create Problem AI 프로토타입의 화면 상태와 외부 API 호출 구조
브라우저에서 문제 주제를 Gemini API에 보내고, 응답에서 문제 설명·테스트 케이스·참고 코드를 JSON으로 파싱합니다.
사용자가 등록한 문제는 React Context의 메모리 상태에 추가됩니다. 페이지를 새로고침하면 생성 문제는 유지되지 않습니다.
편집기에서 코드를 작성합니다. 실행 시 선택한 언어와 첫 번째 테스트 입력을 Vite 개발 프록시를 거쳐 JDoodle에 전달하고 콘솔에 결과를 표시합니다.
제출 시 작성한 코드와 선택 언어, 문제 정보를 React Router의 이동 상태로 결과 화면에 전달합니다.
결과 화면은 테스트 케이스마다 JDoodle 실행을 병렬 요청합니다. 실행 출력과 기대 출력의 앞뒤 공백을 제거해 비교하고, 통과 여부·실행 시간·메모리를 표시합니다.
