generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
115 lines
4.9 KiB
Markdown
115 lines
4.9 KiB
Markdown
# SNP Connection Monitoring
|
|
|
|
API Gateway + 모니터링 통합 플랫폼. 모든 서비스 사용자가 모니터링 애플리케이션에 데이터를 요청할 때 API 인증키를 통해 인증하고, 모든 요청/응답 데이터를 추적/관리하는 서비스.
|
|
|
|
## 기술 스택
|
|
- Java 17, Spring Boot 3.2.1, Spring Data JPA
|
|
- PostgreSQL (DB: snp_connection, 스키마: common)
|
|
- Spring Security (JWT 기반 인증 예정)
|
|
- WebFlux WebClient (Heartbeat, Gateway Proxy)
|
|
- Springdoc OpenAPI 2.3.0 (Swagger)
|
|
- Lombok
|
|
- Frontend: React 19 + TypeScript + Vite + Tailwind CSS 4
|
|
|
|
## 빌드 및 실행
|
|
|
|
```bash
|
|
# 프론트엔드 빌드 (별도)
|
|
cd frontend && npm install && npm run build && cd ..
|
|
|
|
# 백엔드 빌드 (프론트엔드 자동 빌드 포함)
|
|
./mvnw clean package -DskipTests
|
|
|
|
# 로컬 실행
|
|
./mvnw spring-boot:run
|
|
|
|
# 테스트
|
|
./mvnw test
|
|
|
|
# 프론트엔드 개발 서버
|
|
cd frontend && npm run dev
|
|
```
|
|
|
|
**주의**: frontend-maven-plugin의 Node 호환성 문제로, 프론트엔드와 백엔드를 분리하여 빌드합니다.
|
|
|
|
## 서버 설정
|
|
- 포트: 8042
|
|
- Context Path: /snp-connection
|
|
- Swagger UI: http://localhost:8042/snp-connection/swagger-ui/index.html
|
|
- 프론트엔드 개발 서버: http://localhost:5173/snp-connection/
|
|
|
|
## 디렉토리 구조
|
|
|
|
```
|
|
snp-connection-monitoring/
|
|
├── pom.xml # Maven 설정 (frontend-maven-plugin 포함)
|
|
├── frontend/ # React + TypeScript 프론트엔드
|
|
│ ├── package.json
|
|
│ ├── vite.config.ts # Vite 빌드 설정 (output → ../src/main/resources/static)
|
|
│ ├── tsconfig.json
|
|
│ ├── index.html
|
|
│ └── src/
|
|
│ ├── main.tsx # React 엔트리 포인트
|
|
│ ├── App.tsx # 루트 컴포넌트 (라우팅)
|
|
│ ├── index.css # 글로벌 스타일 (Tailwind)
|
|
│ ├── pages/ # 페이지 컴포넌트
|
|
│ ├── components/ # 재사용 가능 컴포넌트
|
|
│ ├── hooks/ # 커스텀 훅
|
|
│ ├── services/ # API 호출 모듈
|
|
│ ├── store/ # 상태 관리
|
|
│ ├── types/ # TypeScript 타입 정의
|
|
│ └── utils/ # 유틸리티 함수
|
|
├── src/main/java/com/gcsc/connection/
|
|
│ ├── SnpConnectionApplication.java # 메인 애플리케이션
|
|
│ ├── config/ # 설정 클래스
|
|
│ ├── common/ # 공통 모듈 (ApiResponse, Exception)
|
|
│ └── global/ # 글로벌 컨트롤러 (WebViewController)
|
|
└── src/main/resources/
|
|
├── application.yml # 공통 설정
|
|
└── static/ # 프론트엔드 빌드 결과물 (자동 생성)
|
|
```
|
|
|
|
## 팀 규칙
|
|
|
|
- 코드 스타일: `.claude/rules/code-style.md` 참조
|
|
- 네이밍 규칙: `.claude/rules/naming.md` 참조
|
|
- 테스트 규칙: `.claude/rules/testing.md` 참조
|
|
- Git 워크플로우: `.claude/rules/git-workflow.md` 참조
|
|
- 팀 정책: `.claude/rules/team-policy.md` 참조
|
|
|
|
## 디자인 시스템
|
|
|
|
`docs/design/` 디렉토리에 프론트엔드 디자인 시스템 가이드가 있다.
|
|
|
|
| 문서 | 내용 |
|
|
|------|------|
|
|
| `docs/design/colors.md` | 브랜드 컬러 스케일, CSS 변수 토큰, 시멘틱 컬러, 차트 팔레트 |
|
|
| `docs/design/typography.md` | 폰트 패밀리, 타입 스케일(8단계), 한글 규칙 |
|
|
| `docs/design/spacing.md` | 4px 기반 스케일, 컴포넌트별 여백, 12컬럼 그리드 |
|
|
| `docs/design/components.md` | Button, Badge, Card, Input, Modal, Toast 스펙 |
|
|
| `docs/design/icons.md` | Lucide React, 사이즈/색상 규칙 |
|
|
| `docs/design/motion.md` | Duration, Easing, prefers-reduced-motion |
|
|
| `docs/design/code-conventions.md` | 파일명, Tailwind 클래스 순서, cn(), forwardRef |
|
|
| `docs/design/do-dont.md` | 올바른 사용법과 금지 패턴 |
|
|
|
|
### 프롬프트 템플릿
|
|
|
|
| 문서 | 용도 |
|
|
|------|------|
|
|
| `docs/design/prompts/new-component.md` | 새 컴포넌트 생성 요청 템플릿 |
|
|
| `docs/design/prompts/review-checklist.md` | 디자인 리뷰 체크리스트 (9개 카테고리) |
|
|
| `docs/design/prompts/refactor-style.md` | 스타일 리팩토링 요청 템플릿 |
|
|
|
|
### 핵심 규칙
|
|
|
|
- **CSS 변수 토큰** 사용 — HEX 하드코딩 금지 (`var(--color-*)`)
|
|
- **cn() 유틸리티** 사용 — `src/utils/cn.ts` (clsx + tailwind-merge)
|
|
- **Lucide React** 아이콘만 사용 — 다른 라이브러리 혼용 금지
|
|
- **4px 스페이싱 스케일** — 임의 px 값 금지
|
|
- **차트 팔레트** — `src/constants/chart.ts`의 `CHART_COLORS` 상수 사용
|
|
|
|
## 의존성 관리
|
|
|
|
- Maven: Nexus 프록시 레포지토리 (`.mvn/settings.xml`)
|
|
- npm: Nexus npm 프록시 레지스트리 (`frontend/.npmrc`)
|