Files

backuppc c9b5d756e1 feat: React 프론트엔드 기능 대폭 확장

- 월별근무표: 휴일/근무일 관리, 자동 초기화
- 메일양식: 템플릿 CRUD, To/CC/BCC 설정
- 그룹정보: 부서 관리, 비트 연산 기반 권한 설정
- 업무일지: 수정 성공 메시지 제거, 오늘 근무시간 필터링 수정
- 웹소켓 메시지 type 충돌 버그 수정

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-27 17:25:31 +09:00

3.6 KiB

Raw Blame History

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();

3.6 KiB Raw Blame History