[Deploy]

README.md

@@ -1,69 +1,176 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# 🌐 Web IDE
+
+React, TypeScript, Vite 기반의 실시간 웹 IDE입니다.  
+실시간 코드 동시 편집, 채팅, 파일 업로드 및 다운로드, GitHub 로그인 기능을 제공합니다.
+
+프로젝트 기간: 2025.07 ~ 2025.08 (기획 및 개발)  
+Link: https://www.deepdirect.site/  
+Code: [FE](https://github.com/DeepDirect/deepwebide-fe), [BE](https://github.com/DeepDirect/deepwebide-be)
+
+<br />
+
+---
+
+## 🫶 팀원
+| 이름      | 역할                 | GitHub 링크                                     |
+|----------|--------------------|------------------------------------------------|
+| 정원용     | 팀장, Full Stack    | [@projectmiluju](https://github.com/jihun-dev) |
+| 권혜진     | Backend            | [@sunsetkk](https://github.com/sunsetkk)       |
+| 박건      | Frontend            | [@Jammanb0](https://github.com/Jammanb0)       |
+| 박소현     | Frontend           | [@ssoogit](https://github.com/ssoogit)         |
+| 박재경     | Full Stack, Infra  | [@Shin-Yu-1](https://github.com/Shin-Yu-1) |
+| 이은지     | Frontend           | [@ebbll](https://github.com/ebbll)             |
+| 최범근     | Backend            | [@vayaconChoi](https://github.com/vayaconChoi) |
+
+<br />
+
+---
+
+## 🚀 주요 기능
+- 실시간 협업 코드 편집
+- 실시간 채팅
+
+<br />
+
+---
+
+## 🛠️ 기술 스택
+
+### FE
+| 분류            | 기술명                                                           |
+|----------------|----------------------------------------------------------------|
+| 프레임워크/런타임  | 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                  |
+
+<br />
+
+### BE
+| 분류             | 사용 기술 / 라이브러리                              | 설명 |
+|-----------------|------------------------------------------------------|------|
+| 언어 및 프레임워크   | 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                                  | 로깅, 파일 유틸리티 |
+
+<br />
+
+---
+
+## 📁 디렉토리 구조
+
+### FE
+```bash
+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/ # 공통 유틸리티 함수
+```
+
+<br />
+
+### BE
+```bash
+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/
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+<br />
+
+---
+
+## 🏃‍➡️ 설치 및 실행
+```bash
+# 패키지 설치
+pnpm install
+
+# 개발 서버 실행
+pnpm dev
+
+# 빌드
+pnpm build
 ```

cspell.json

@@ -24,6 +24,7 @@
   ],
   "words": [
     "Avenir",
+    "coderunner",
     "eslint",
     "filetree",
     "partialize",

src/components/organisms/InvitationLinkForm/InvitationLinkForm.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PasswordInput from '@/components/atoms/Input/PasswordInput';
 import InvitationFormActions from '@/components/molecules/InvitationFormActions/InvitationFormActions';
+import lockIcon from '../../../assets/icons/lock.svg';
 
 import './InvitationLinkForm.scss';
 
@@ -35,7 +36,7 @@ const InvitationLinkForm: React.FC<InvitationLinkFormProps> = ({
         <div className="invitation-form__header">
           {/* 자물쇠 아이콘 */}
           <div className="invitation-form__icon">
-            <img src="/src/assets/icons/lock.svg" alt="잠금 아이콘" />
+            <img src={lockIcon} alt="잠금 아이콘" />
           </div>
 
           <h1 className="invitation-form__title">입장 코드 입력</h1>

src/components/organisms/Settings/DeleteSection/DeleteSection.module.scss

@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 0 2rem;
-    width: 883px;
+    width: 700px;
     height: 92px;
     font-family: $font-family-inter;
     transition-duration: 0.5s;

src/components/organisms/Settings/InfoSection/InfoSection.module.scss

@@ -74,6 +74,12 @@
         .icon {
           width: 20px;
           height: 20px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 1;
+            transform: scale(1.1);
+          }
         }
       }
     }

src/components/organisms/Settings/ShareSection/ShareSection.module.scss

@@ -64,7 +64,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    width: 883px;
+    width: 700px;
     height: 92px;
 
     @include mobile {
@@ -89,7 +89,9 @@
   }
 
   .linkWrapper {
-    width: 424px;
+    display: flex;
+    flex-direction: row;
+    padding-right: 37px;
 
     @include mobile {
       width: 100%;
@@ -110,7 +112,7 @@
   .input {
     box-sizing: border-box;
     width: 100%;
-    max-width: 424px;
+    max-width: 350px;
     padding: 0.75rem 1rem;
     border: 1px solid $gray-8;
     border-radius: 6px;
@@ -177,10 +179,15 @@
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  cursor: pointer;
 
   .icon {
     width: 20px;
     height: 20px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+      transform: scale(1.1);
+    }
   }
 }

src/components/organisms/Settings/ShareSection/ShareSection.tsx

@@ -113,6 +113,7 @@ const ShareSection = ({ onShareLinkCopy }: shareSectionProps) => {
         <ShareIcon className={styles.nameIcon} />
         <h2 className={styles.sectionTitle}>SHARE</h2>
       </div>
+
       {/* 링크 공유 */}
       {settingsData.isShared && (
         <div className={`${styles.itemWrapper} ${styles.shareWrapper}`}>
@@ -127,14 +128,14 @@ const ShareSection = ({ onShareLinkCopy }: shareSectionProps) => {
                 <CopyIcon className={styles.icon} />
               </div>
             </div>
-
-            {/* 공유 링크 인풋 */}
-            {settingsData.shareLink && (
-              <input type="text" value={settingsData.shareLink} readOnly className={styles.input} />
-            )}
           </div>
+          {/* 공유 링크 인풋 */}
+          {settingsData.shareLink && (
+            <input type="text" value={settingsData.shareLink} readOnly className={styles.input} />
+          )}
         </div>
       )}
+
       {/* 입장 코드 */}
       {settingsData.isShared && isCurrentUserOwner(settingsData.members) && (
         <div className={`${styles.itemWrapper} ${styles.entryCodeWrapper}`}>