DreamIT Coding

C, Java, Python으로 코딩 문제를 풀어보는 종합 코딩 학습 플랫폼

https://coding.dreamitbiz.com

주요 기능

• 문제 풀이 - 4단계 난이도, 40문제 (초급/중급/고급/실전)
• 코드 실행 - 브라우저에서 C/Java/Python 코드 직접 실행
• 언어 학습 - C/Java/Python 각 12챕터, 총 36챕터
• 코딩 Tips - 시간복잡도, 자료구조 가이드
• 진도 추적 - 도장깨기 + 클라우드 동기화
• 배지 & 수료증 - 9개 배지, PDF/PNG 수료증 발급
• 다국어 - 한국어/영어 전환
• 테마 - Light/Dark/Auto x 5가지 색상

기술 스택

카테고리	기술
Frontend	React 19 + Vite 8 + React Router 7
Auth/DB	Supabase (OAuth: Google, Kakao + Email)
Code Execution	Pyodide WASM (Python) + Piston API (C/Java)
Editor	react-simple-code-editor + Prism.js
Certificate	jsPDF + html2canvas
Deploy	GitHub Pages + GitHub Actions

실행 방법

npm install
npm run dev

환경변수 (선택)

cp .env.example .env
# VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY 설정

Supabase 미설정 시 로그인 기능 없이 로컬 모드로 동작합니다.

프로젝트 구조

src/
├── components/   # 재사용 컴포넌트 (11개)
├── contexts/     # Context Provider (Auth, Language, Progress, Theme)
├── pages/        # 페이지 컴포넌트 (12개, Lazy Loading)
├── data/         # 문제 40개 + 학습 챕터 36개
├── hooks/        # Custom Hooks (AOS, CodeCopy, CodeRunner)
├── config/       # 사이트 설정, 배지 정의
├── styles/       # CSS 파일 (15개)
├── utils/        # 번역 데이터 (200+ 키)
├── workers/      # Pyodide Web Worker
└── lib/          # Supabase 클라이언트

문서

• 개발일지 (DEVLOG.md)
• 변경 이력 (CHANGELOG.md)
• 프로젝트 분석 (PROJECT_ANALYSIS.md)