React, TypeScript, Vite 기반의 실시간 웹 IDE입니다.
실시간 코드 동시 편집, 채팅, 파일 업로드 및 다운로드, GitHub 로그인 기능을 제공합니다.
프로젝트 기간: 2025.07 ~ 2025.08 (기획 및 개발)
시연영상 YouTube
Link: https://www.deepdirect.site/
Code: FE, BE
| 이름 | 역할 | GitHub 링크 |
|---|---|---|
| 정원용 | 팀장, Full Stack, Infra | @projectmiluju |
| 권혜진 | Backend | @sunsetkk |
| 박건 | Frontend | @Jammanb0 |
| 박소현 | Frontend | @ssoogit |
| 박재경 | Full Stack | @Shin-Yu-1 |
| 이은지 | Frontend | @ebbll |
| 최범근 | Backend | @vayaconChoi |
- 실시간 협업 코드 편집
- 실시간 채팅
| 분류 | 기술명 |
|---|---|
| 프레임워크/런타임 | React + TypeScript |
| 빌드 도구 | Vite, TypeScript (tsc) |
| 상태 관리 | Zustand (클라이언트 상태), TanStack Query (서버 상태) |
| 라우팅 | TanStack Router (@tanstack/react-router) |
| 폼 관리/검증 | React Hook Form, Zod, @hookform/resolvers |
| 실시간 | Yjs, y-monaco, y-websocket, STOMP, SockJS |
| 코드 에디터 | Monaco Editor (@monaco-editor/react) |
| UI 라이브러리 | Radix UI (Toast, Tooltip, Switch, VisuallyHidden) |
| Drag & Drop | React DnD, react-dnd-html5-backend, @minoru/react-dnd-treeview |
| 날짜 처리 | dayjs |
| 아이콘 | pixelarticons, clsx |
| 네트워크 요청 | Axios |
| 스타일링 | SCSS |
| 코드 품질 도구 | ESLint, Prettier, Stylelint, Husky, lint-staged |
| 분류 | 사용 기술 / 라이브러리 | 설명 |
|---|---|---|
| 언어 및 프레임워크 | Java 17, Spring Boot 3.4.7 | 백엔드 애플리케이션 기반 |
| 빌드 도구 | Gradle | 의존성 및 빌드 관리 |
| 웹 서버 | Spring Web (spring-boot-starter-web) |
REST API 및 MVC 구성 |
| 보안 | Spring Security, JWT (jjwt), OAuth2 Client |
로그인, 인증, 인가 처리 |
| 데이터베이스 | MySQL, Spring Data JPA (hibernate) |
사용자 및 저장소 관리용 RDB |
| 실시간 통신 | WebSocket (spring-websocket), STOMP, SockJS |
채팅, 동시 편집용 실시간 통신 |
| Redis | Lettuce (lettuce-core), Spring Data Redis |
토큰 저장, Pub/Sub 등 |
| 파일 업로드 | AWS S3 SDK (v1, v2 혼용) | 코드 파일 업로드/다운로드 |
| 이메일 발송 | Spring Mail (spring-boot-starter-mail) |
이메일 인증, 알림 전송 |
| 문자 인증 | Coolsms SDK (net.nurigo:sdk) |
전화번호 인증 (SMS) |
| API 문서화 | SpringDoc OpenAPI (springdoc-openapi) |
Swagger 기반 자동 API 문서 |
| 모니터링 | Spring Boot Actuator | Health Check 등 메트릭 제공 |
| 에러 추적 | Sentry (sentry-spring-boot-starter, logback 연동) |
런타임 에러 실시간 추적 |
| 로깅 유틸리티 | Logback, Commons IO | 로깅, 파일 유틸리티 |
src/
├── api/ # API 요청 함수 정의 (axios 등과 연동)
├── assets/ # 이미지 등 정적 리소스
├── components/ # 재사용 가능한 UI 컴포넌트
├── constants/ # 공통 상수 정의
├── features/ # 도메인 단위의 기능 모듈
├── hooks/ # 커스텀 React Hook 모음
├── layouts/ # 페이지 공통 레이아웃 컴포넌트
├── mocks/ # Mock 데이터 (개발/테스트 용)
├── pages/ # 라우팅되는 페이지 컴포넌트
├── router/ # TanStack Router 관련 라우터 설정
├── schemas/ # Zod 기반 스키마 (요청/응답 타입 정의 포함)
├── stores/ # Zustand 상태 저장소
├── styles/ # 전역 스타일 정의 (reset, theme 등)
├── types/ # 전역 타입 정의 (TypeScript interface/type 모음)
└── utils/ # 공통 유틸리티 함수com.deepdirect.deepwebide_be/
├── chat/ # 실시간 채팅 도메인
│ ├── controller/
│ ├── domain/
│ ├── dto/
│ ├── repository/
│ ├── service/
│ ├── util/
│ └── websocket/ # WebSocket 핸들러 및 메시지 처리
│
├── file/ # 파일 업로드 및 다운로드 (S3)
│ ├── controller/
│ ├── domain/
│ ├── dto/
│ ├── repository/
│ └── service/
│
├── global/ # 전역 설정 및 공통 모듈
│ ├── config/ # Spring 설정 (CORS, Swagger, Redis 등)
│ ├── dto/ # 공통 응답 DTO
│ ├── exception/ # 글로벌 예외 및 핸들러
│ ├── security/ # JWT, OAuth 관련 보안 설정
│ └── util/ # 전역 유틸 클래스
│
├── history/ # 코드 실행 이력 관리
│ ├── controller/
│ ├── domain/
│ ├── dto/
│ ├── repository/
│ └── service/
│
├── member/ # 사용자 및 인증 도메인
│ ├── controller/
│ ├── domain/
│ ├── dto/
│ ├── repository/
│ ├── service/
│ └── util/ # 닉네임 자동 생성 유틸
│
├── repository/ # 코드 저장소 도메인
│ ├── controller/
│ ├── domain/
│ ├── dto/
│ ├── repository/
│ ├── service/
│ └── util/
│
└── sandbox/ # 샌드박스(코드 실행 환경) 관리
├── config/
├── controller/
├── dto/
├── exception/
└── service/# 패키지 설치
pnpm install
# 개발 서버 실행
pnpm dev
# 빌드
pnpm build