Web IDE - 온라인 코드 에디터
실제 IDE 환경에 가까운 웹 기반 코드 에디터입니다. 초기 설계, 구조 설계, 와이어프레임 작성을 모두 참여했으며, 핵심 기능을 맡아 품질을 높여가는 협업을 경험했습니다.
Next.jsTypeScriptTailwindCSSZustandMonaco Editor
Web IDE 프로젝트
웹 기반 코드 에디터 플랫폼으로, 사용자들이 온라인에서 코드 작성, 실행, 실시간 협업, 채팅 기능을 제공받을 수 있는 서비스입니다.
진행 프로세스
주요 기능
- 프로젝트 및 파일 탐색기
- Monaco Editor 기반 코드 편집
- Xterm 기반 실행 터미널
- 실시간 채팅 (STOMP + WebSocket)
- 실시간 코드 협업(WebSocket)
- AI 챗봇 통합 (IndexedDB 히스토리 저장)
- 로그인 / 회원가입 / 비밀번호 초기화
- 프로젝트 공유 (QR코드 생성)
- 사이드 패널 기반 확장 UI 구조
기술 스택
- Next.js 15
- TypeScript
- Tailwind CSS
- Zustand (전역 상태 관리)
- Monaco Editor (코드 에디터)
- Xterm.js (터미널 UI)
- STOMP + SockJS (실시간 채팅 및 )
- IndexedDB (AI 채팅 히스토리 저장)
- Vercel (배포)
결과물
| 로그인 | 회원가입 |
|---|---|
| 비밀번호재발급 | 비밀번호 재설정 |
| 랜딩페이지 | 에디터조회 |
| 프로젝트 및 파일 생성 | 코드 실행 |
| 채팅 | AI 기능 |