c9b5d756e1
- 월별근무표: 휴일/근무일 관리, 자동 초기화 - 메일양식: 템플릿 CRUD, To/CC/BCC 설정 - 그룹정보: 부서 관리, 비트 연산 기반 권한 설정 - 업무일지: 수정 성공 메시지 제거, 오늘 근무시간 필터링 수정 - 웹소켓 메시지 type 충돌 버그 수정 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
149 lines
3.6 KiB
Markdown
149 lines
3.6 KiB
Markdown
# 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();
|
|
```
|