c1c615fe1b
주요 변경사항: - 게시판 계층형 댓글/답글 시스템 구현 - DB: root_idx, depth, thread_path, is_comment, reply_count 컬럼 추가 - 트리거: 댓글 개수 자동 업데이트 - 답글(is_comment=false)은 목록에 표시, 댓글(is_comment=true)은 뷰어에만 표시 - ESC 키로 모달 닫기 기능 - 업무일지 개선 - 프로젝트 선택 시 최종 설정 자동 불러오기 - 복사 시 jobgrp, tag 포함 - 완료(보고) 상태 프로젝트도 검색 가능하도록 수정 - 대시보드 개선 - 할일 목록 페이징 추가 (6개씩) - 할일에 요청자 정보 표시 (제목 좌측에 괄호로)
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();