# GroupWare React Frontend

GroupWare 시스템의 React 기반 프론트엔드입니다.

## 기술 스택

- **React 18** - UI 라이브러리
- **TypeScript** - 타입 안정성
- **Vite** - 빌드 도구 및 개발 서버
- **Tailwind CSS** - 스타일링
- **React Router v7** - 라우팅
- **Lucide React** - 아이콘

## 프로젝트 구조

```
frontend/
├── src/
│   ├── components/
│   │   └── layout/          # 레이아웃 컴포넌트
│   │       ├── Header.tsx
│   │       ├── Layout.tsx
│   │       └── Navigation.tsx
│   ├── pages/               # 페이지 컴포넌트
│   │   ├── Dashboard.tsx
│   │   ├── Todo.tsx
│   │   └── Placeholder.tsx
│   ├── communication.ts     # 통신 레이어 (WebView2 + WebSocket)
│   ├── types.ts            # TypeScript 타입 정의
│   ├── App.tsx             # 메인 앱 컴포넌트
│   ├── main.tsx            # 엔트리 포인트
│   └── index.css           # 글로벌 스타일
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json
├── build.bat               # 프로덕션 빌드 스크립트
└── run-dev.bat            # 개발 서버 실행 스크립트
```

## 개발 환경 설정

### 1. 의존성 설치

```bash
cd Project/frontend
npm install
```

### 2. 개발 서버 실행

```bash
npm run dev
# 또는
run-dev.bat
```

개발 서버는 `http://localhost:5173`에서 실행됩니다.

### 3. 핫 리로드 개발

개발 모드에서는 WebSocket(포트 8082)을 통해 C# 백엔드와 통신합니다.
GroupWare 애플리케이션에서 WebSocket 서버가 실행 중이어야 합니다.

## 프로덕션 빌드

### 빌드 실행

```bash
npm run build
# 또는
build.bat
```

빌드 결과물은 `dist/` 폴더에 생성되고,
`build.bat`을 사용하면 자동으로 `wwwroot/react-app/`으로 복사됩니다.

### 접근 URL

- **개발**: `http://localhost:5173`
- **프로덕션**: `http://localhost:7979/react-app/`

## 통신 방식

### 듀얼 모드 통신

이 프로젝트는 두 가지 통신 방식을 지원합니다:

| 환경 | 통신 방식 | 포트 |
|------|-----------|------|
| WebView2 (프로덕션) | HostObject 직접 호출 | - |
| Browser (개발) | WebSocket | 8082 |

### 자동 감지

`communication.ts`에서 실행 환경을 자동으로 감지하여 적절한 통신 방식을 사용합니다:

```typescript
const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;

if (isWebView) {
  // WebView2 HostObject 사용
  const result = await machine.Todo_GetTodos();
} else {
  // WebSocket 사용
  ws.send(JSON.stringify({ type: 'GET_TODOS' }));
}
```

## 페이지 목록

| 경로 | 페이지 | 상태 |
|------|--------|------|
| `/` | 대시보드 | 완료 |
| `/todo` | 할일 관리 | 완료 |
| `/kuntae` | 근태 관리 | 개발 예정 |
| `/jobreport` | 업무 일지 | 개발 예정 |
| `/project` | 프로젝트 | 개발 예정 |
| `/common` | 공용 코드 | 개발 예정 |

## 스타일 가이드

### 색상 팔레트

- **Primary**: Blue (`#3b82f6`)
- **Success**: Green (`#22c55e`)
- **Warning**: Amber (`#f59e0b`)
- **Danger**: Red (`#ef4444`)

### Glass Effect

```css
.glass-effect {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
```

## C# WebSocket 서버 설정

`MachineBridge/WebSocketServer.cs`를 참고하여 WebSocket 서버를 시작하세요:

```csharp
// 예시 코드
var wsServer = new GroupWareWebSocketServer("http://localhost:8082/", bridge);
wsServer.Start();
```