React, TypeScript, Vite 기반의 실시간 웹 IDE입니다.
실시간 코드 동시 편집, 채팅, 파일 업로드 및 다운로드, GitHub 로그인 기능을 제공합니다.
프로젝트 기간: 2025.07 ~ 2025.08 (기획 및 개발)
시연영상 YouTube
Link: https://www.deepdirect.site/
Code: FE, BE
| 분류 |
기술명 |
| 프레임워크/런타임 |
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