Groupware/Project/frontend

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. 의존성 설치

cd Project/frontend
npm install

2. 개발 서버 실행

npm run dev
# 또는
run-dev.bat

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

3. 핫 리로드 개발

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

프로덕션 빌드

빌드 실행

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에서 실행 환경을 자동으로 감지하여 적절한 통신 방식을 사용합니다:

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

.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 서버를 시작하세요:

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