# Java-Service-Tree-Framework-Frontend-Web

## 📋 프로젝트 개요

**A-RMS (Advanced Requirements Management System)** 의 프론트엔드 웹 애플리케이션으로, 요구사항 관리, ALM 통합, 데이터 분석 기능을 제공하는 엔터프라이즈급 시스템입니다.

## 🛠️ 기술 스택

### 코어 기술
- **프레임워크**: jQuery 기반 + Vue.js 3 + React (백오피스)
- **빌드 도구**:
  - Grunt (레거시 모듈용)
  - Vite (백오피스 모듈용)
  - Vue CLI
- **CSS 전처리기**: LESS, SASS
- **템플릿**: AdminLTE 2.x (Bootstrap 3 기반)
- **패키지 매니저**: NPM
- **Node.js**: .node-version 파일에 명시

### 주요 라이브러리

**데이터 시각화:**
- D3.js v5.16.0 & v6.7.0
- ECharts v5.4.3 & v5.5.0
- C3.js v0.7.20
- Three.js r165
- Jit 2.0.1

**UI 컴포넌트:**
- DataTables 1.10.16 (Responsive, Select, Buttons 확장 포함)
- FullCalendar 6.1.15
- Gantt 0.6.1
- jKanban 1.3.1
- jsTree v.pre1.0
- jsPreadsheet CE 4.13.1
- Select2 4.0.2
- CKEditor 4.22.1
- Swiper 11.1.4

**기타:**
- Vue 3.2.13 + Vue Router 4.0.3
- Bootstrap 5.3.8
- React 17.0.2 + Redux Toolkit
- SockJS + Stomp.js (WebSocket)

## 📁 프로젝트 구조

```
Java-Service-Tree-Framework-Frontend-Web/
│
├── arms/                          # 메인 A-RMS 애플리케이션 모듈
│   ├── css/                       # 스타일시트
│   ├── html/                      # HTML 모듈 템플릿
│   ├── img/                       # 이미지 및 아이콘
│   ├── js/                        # JavaScript 모듈 (~33개 기능 모듈)
│   ├── locales/                   # 다국어 파일 (ko, en, jp)
│   ├── test/                      # 테스트 리소스
│   ├── template.html              # 메인 애플리케이션 템플릿
│   ├── detail.html                # 상세 뷰 템플릿
│   └── index.html                 # 진입점
│
├── backoffice/                    # React 기반 관리자 백오피스
│   ├── src/                       # React 소스
│   ├── dist/                      # Vite 빌드 출력
│   ├── html/                      # 레거시 HTML 템플릿 (~15개)
│   ├── js/                        # 레거시 JavaScript (~15개)
│   ├── css/                       # 스타일시트
│   ├── mock/                      # 개발용 Mock 데이터
│   ├── package.json               # React + Vite 의존성
│   ├── vite.config.js             # Vite 설정
│   └── template.html              # 관리자 템플릿
│
├── cover/                         # 공개 웹사이트/랜딩 페이지
│   ├── css/                       # 커버 페이지 스타일
│   ├── fonts/                     # 웹 폰트
│   ├── html/                      # 공개 페이지 템플릿
│   ├── img/                       # 마케팅 이미지
│   ├── js/                        # 기능 스크립트 (~30개 모듈)
│   ├── template.html              # 커버 템플릿
│   ├── index.html                 # 랜딩 페이지 진입점
│   └── mail.html                  # 이메일 템플릿
│
├── reference/                     # 서드파티 라이브러리 및 플러그인
│   ├── bootstrap-3.4.1/           # Bootstrap 프레임워크
│   ├── light-blue/                # Light Blue 관리자 테마
│   ├── lightblue4/                # Light Blue 4 테마
│   ├── jquery-plugins/            # 50개 이상의 jQuery 플러그인
│   ├── drawio/                    # 다이어그램 에디터
│   ├── drawdb/                    # 데이터베이스 디자이너
│   ├── gojs/                      # 다이어그래밍 라이브러리
│   └── three.js-r165/             # 3D 그래픽
│
├── file/                          # 문서 저장소
├── node_modules/                  # NPM 의존성
├── .github/workflows/             # CI/CD 자동화
│
├── Gruntfile.js                   # Grunt 빌드 설정
├── package.json                   # 루트 패키지 설정
├── index.html                     # 애플리케이션 진입 라우터
├── manifest.json                  # PWA 매니페스트
├── robots.txt                     # SEO 설정
├── sitemap.xml                    # 사이트 구조
├── .prettierrc                    # 코드 포맷팅 규칙
└── 개발규칙.txt                    # 개발 컨벤션 (한국어)
```

## 🏗️ 아키텍처

### 설계 패턴

1. **모듈 패턴**: 각 기능이 독립적인 JavaScript 파일로 캡슐화
2. **동적 로딩 패턴**: URL 쿼리 파라미터 기반 페이지 로딩
3. **템플릿-콘텐츠 분리**: HTML 템플릿과 비즈니스 로직 분리
4. **플러그인 기반 아키텍처**: 재사용 가능한 컴포넌트를 위한 jQuery 플러그인 활용
5. **프록시 패턴**: Grunt/Vite 개발 서버가 API 호출을 백엔드 서비스로 프록시

### 진입점 흐름

```
index.html (라우터)
  ↓
  [도메인/환경 감지]
  ↓
  ├── localhost/127.0.0.1 → /arms/template.html?page=dashboard
  ├── 313.co.kr → /cover/template.html?page=landing
  └── arms/고객 도메인 → /cover/template.html?page=landing
```

### 인증 및 권한

- **역할 기반 접근 제어**: ROLE_USER, ROLE_MANAGER, ROLE_ADMIN
- **OAuth2/SSO 통합**: 미들웨어 프록시를 통한 연동
- **권한 기반 메뉴 표시**: 사용자 권한에 따른 메뉴 제어
- **토큰 기반 인증**: JWT

### API 통신

- jQuery AJAX (레거시 모듈용)
- RESTful API 엔드포인트 프록시:
  - **포트 13131**: 인증 엔드포인트 (/auth-user, /auth-admin, /auth-check 등)
  - **포트 31113**: WebSocket 및 API 엔드포인트 (/ws, /api)
- **DWR (Direct Web Remoting)**: 실시간 통신

## 🎯 주요 기능 모듈

### ARMS 모듈 (메인 애플리케이션) - 33개 이상 기능 모듈

#### 제품 관리
- `pdService.js` - 제품/서비스 관리
- `pdServiceVersion.js` - 버전 관리

#### ALM (Application Lifecycle Management)
- `jiraServer.js` - Jira 서버 통합
- `jiraConnection.js` - Jira 연결
- `mailServer.js` - 이메일 서버 설정

#### 요구사항 관리
- `reqAdd.js` - 요구사항 추가
- `reqStatus.js` - 상태 추적 (목록 뷰)
- `reqStatusCalendar.js` - 달력 뷰
- `reqGantt.js` - 간트 차트 뷰
- `reqKanban.js` - 칸반 보드 뷰
- `mapping.js` - 요구사항 매핑

#### 분석 도구 (4차원)
- `analysisTime.js` - 시간 분석
- `analysisScope.js` - 범위 분석
- `analysisResource.js` - 자원 분석
- `analysisCost.js` - 비용 분석

#### 리포팅
- `reportFullData.js` - 종합 리포트
- `reportSWOT.js` - SWOT 분석
- `reportReqStatus.js` - 요구사항 상태 리포트
- `reportAlmProject.js` - ALM 프로젝트 리포트

#### 특수 기능
- `dashboard.js` - 차트가 포함된 메인 대시보드
- `searchEngine.js` - 검색 기능
- `aiChat.js` - AI 챗 통합
- `devtools.js` - 개발자 도구
- `swotSheet.js` - SWOT 시트 편집기

### Backoffice 모듈 (관리자 기능) - 15개 이상 모듈

- 접근 제어 관리
- 보안 (사용자, 그룹, 역할)
- 시스템 정보 및 모니터링
- 감사 로그
- 백업 및 복원
- 언어 설정 (i18n)
- 스케줄 설정 (Cron 작업)
- 이메일/SMTP 설정
- 메일 리포트 설정
- Elasticsearch 인덱스 설정
- 동적 설정
- 인보이스 및 청구
- 외관 설정
- 휴가 관리

### Cover 모듈 (공개 웹사이트) - 30개 이상 페이지

- Three.js 3D 글로브가 있는 랜딩 페이지
- 에디터가 포함된 블로그 시스템
- 에디터가 포함된 경험/사례 연구
- 뉴스레터 관리
- 패치 노트/릴리스 노트
- FAQ 및 Q&A
- 제품 문의 양식
- 정책 및 개인정보 보호 페이지
- 기여자 및 라이선스
- POC (Proof of Concept) 요청 시스템

## ⚙️ 설정 파일

### 빌드 및 개발
- **Gruntfile.js** - 메인 빌드 오케스트레이션 (LESS 컴파일, JS 번들링, 프록시가 포함된 개발 서버, watch 태스크)
- **package.json** - 루트 의존성, 스크립트 (dev: grunt server, arms: Vue serve, devops: Vue serve)
- **backoffice/vite.config.js** - Vite 개발 서버 (포트 3000), 프록시 설정, SCSS 전처리, 경로 별칭

### 코드 품질
- **.prettierrc** - 코드 포맷팅 (탭, 너비 120, snake_case 선호)
- **.eslintrc.cjs** - JavaScript 린팅 규칙 (백오피스)
- **개발규칙.txt** - 팀 컨벤션 (snake_case, 색상 코딩, 속성 포맷팅)

### 다국어화
- **arms/locales/ko.json** - 한국어 번역
- **arms/locales/en.json** - 영어 번역
- **arms/locales/jp.json** - 일본어 번역

### CI/CD
- **.travis.yml** - Travis CI 설정
- **.github/workflows/release-drafter.yml** - 자동 릴리스 노트

### 웹 설정
- **manifest.json** - PWA 설정
- **robots.txt** - 검색 엔진 지시사항
- **sitemap.xml** - SEO를 위한 사이트 구조

## 🎨 개발 컨벤션

### 네이밍 규칙
- **snake_case** 사용 (프론트엔드)
- **첫 글자 대문자, 이후 대문자는 "_"로 구분**
- **HTML 속성**: 한 줄에 하나씩 수직 포맷팅

### 색상 코딩
- **파란색 버튼**: 생성/추가 작업
- **초록색 버튼**: 수정/저장 작업
- **빨간색 버튼**: 삭제 작업
- **주황색 버튼**: 선택/구분
- **데이터 텍스트 색상**: #a4c6ff (데이터 표시용 연한 파란색)

### 모듈 구조 패턴

```javascript
// 공통 모듈 구조
var moduleVariables;

function execDocReady() {
    // 그룹별 플러그인 로딩
    var pluginGroups = [[/*css*/], [/*js*/], [/*more*/]];

    // 플러그인 순차 로드
    // UI 컴포넌트 초기화
    // 이벤트 핸들러 바인딩
    // 초기 데이터 로드
}
```

### API 통신 패턴

```javascript
// 중앙화된 AJAX 설정
ajax_setup();

// 일관된 에러 핸들링
$.ajax({
    url: "/auth-user/api/...",
    type: "GET",
    success: function(data) {},
    error: function(error) {}
});
```

## 🚀 빌드 및 실행

### 개발 서버 실행

```bash
# Grunt 개발 서버 (포트 9000)
npm run dev
# 또는
grunt server

# Vue Arms 서비스
npm run arms

# DevOps Vue 서비스
npm run devops

# Backoffice Vite 서버 (포트 3000)
cd backoffice
npm run dev
```

### 빌드

```bash
# Grunt 빌드
grunt build

# Backoffice 빌드
cd backoffice
npm run build
```

## 📊 프로젝트 통계

- **227개** HTML 파일 (node_modules 및 reference 제외)
- **148개** JavaScript 파일 (node_modules 및 reference 제외)
- **33개 이상** ARMS 기능 모듈
- **50개 이상** jQuery 플러그인
- **3개** 주요 애플리케이션 섹션 (arms, backoffice, cover)

## 💡 주요 특징

1. **하이브리드 아키텍처**: 레거시 jQuery와 최신 Vue.js/React를 혼합하여 점진적 현대화
2. **모노리틱 프론트엔드**: 쉬운 배포를 위해 모든 모듈이 단일 저장소에 포함
3. **광범위한 참조 라이브러리**: 자체 포함된 서드파티 의존성 (모두 NPM을 통하지 않음)
4. **멀티테넌트 지원**: 다양한 고객 배포를 위한 도메인 기반 라우팅
5. **역할 기반 UI**: 사용자 권한에 따른 동적 메뉴 생성
6. **종합 시각화**: 엔터프라이즈급 차트 및 다이어그래밍 기능
7. **다국어 지원**: 다국어 지원 준비 (한국어, 영어, 일본어)
8. **개발자 친화적**: 듀얼 빌드 시스템 (레거시용 Grunt, 최신용 Vite)

## 🔐 인증 흐름

```javascript
authUserCheck()
  → 사용자 세션 검증
  → 권한 배열 설정
  → 역할에 따른 menu_setting()
  → 적절한 모듈 로드
```

## 🌍 다국어화 패턴

```javascript
// 동적으로 로드되는 언어 팩
currentLanguagePack = {
    language: 'ko',
    languagePack: {...}
};
// 선택된 로케일에 따라 UI 요소 업데이트
```

## 📝 개발 환경 감지

```javascript
// 도메인에 따른 다른 동작
if (localhost || 127.0.0.1) {
    // 개발 모드
    → ARMS 대시보드
} else if (313.co.kr) {
    // 회사 웹사이트
    → Cover 랜딩 페이지
} else {
    // 고객 도메인
    → Cover 랜딩 페이지
}
```

## 📄 라이선스

프로젝트 라이선스 정보는 프로젝트의 LICENSE 파일을 참조하세요.

## 👥 기여

기여 가이드라인은 프로젝트의 CONTRIBUTING 문서를 참조하세요.

---

**생성일**: 2025-11-20
**프로젝트**: A-RMS (Advanced Requirements Management System)
**저장소**: Java-Service-Tree-Framework-Frontend-Web