EENE 인재성장팀 대시보드

사전 설치 필요

• Node.js 20+
• Docker Desktop

---

최초 실행 순서

1. 환경 변수 설정

# 루트에 .env 파일이 없을 경우 복사
copy .env.example .env

# 백엔드 .env 확인
# backend\.env 파일은 이미 기본값으로 생성되어 있음

2. PostgreSQL 실행 (Docker)

# 프로젝트 루트에서 실행
docker compose up -d

# 실행 확인
docker compose ps

3. 백엔드 설치 및 실행

cd backend

# 패키지 설치
npm install

# DB 마이그레이션 (테이블 생성)
npm run db:migrate

# 샘플 데이터 입력
npm run db:seed

# 개발 서버 실행
npm run dev

백엔드가 http://localhost:4000 에서 실행됩니다.

4. 프론트엔드 설치 및 실행

새 터미널을 열고:

cd frontend

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

프론트엔드가 http://localhost:3000 에서 실행됩니다.

---

서버(이 PC) IP 주소 확인

# CMD 또는 PowerShell 에서 실행
ipconfig
# → "이더넷" 또는 "Wi-Fi" 항목의 IPv4 주소 확인
# 예: 192.168.1.100

팀원들이 접속할 주소:

• 대시보드: http://172.16.8.248:3000
• 업무 상세: http://172.16.8.248:3000/detail

Windows 방화벽 포트 열기 (관리자 권한 CMD)

netsh advfirewall firewall add rule name="EEE Dashboard Frontend" dir=in action=allow protocol=TCP localport=3000
netsh advfirewall firewall add rule name="EEE Dashboard Backend"  dir=in action=allow protocol=TCP localport=4000

---

듀얼 모니터 사용 방법

1. 브라우저 창을 두 개 엽니다.
2. 왼쪽 모니터: http://localhost:3000 (업무 목록 대시보드)
3. 오른쪽 모니터: http://localhost:3000/detail (업무 상세 패널)
4. 왼쪽에서 업무를 클릭하면 오른쪽 창이 자동으로 해당 상세 내용을 표시합니다.

---

기본 계정 (seed 데이터)

이메일	비밀번호	역할
admin@eee.com	admin1234!	관리자
member@eee.com	member1234!	팀원

운영 시 반드시 비밀번호를 변경하세요.

---

프로젝트 구조

D:\EENE_Dashboard\
├── backend\               # Express + TypeScript API 서버
│   ├── prisma\
│   │   ├── schema.prisma  # DB 스키마 (테이블 정의)
│   │   └── seed.ts        # 초기 데이터
│   └── src\
│       ├── index.ts       # 서버 진입점
│       ├── app.ts         # Express 앱 설정
│       ├── socket.ts      # Socket.io 핸들러
│       ├── lib\           # Prisma 클라이언트
│       ├── middleware\    # 파일 업로드, 에러 처리
│       └── routes\        # API 라우터
│           ├── tasks.ts   # 업무 CRUD
│           ├── users.ts   # 사용자 관리
│           ├── files.ts   # 파일 업로드
│           └── kpi.ts     # KPI 관리
│
├── frontend\              # React + TypeScript 앱
│   └── src\
│       ├── contexts\      # Socket 컨텍스트
│       ├── lib\           # API 클라이언트, 듀얼모니터 유틸
│       ├── pages\         # 각 페이지 컴포넌트
│       ├── types\         # TypeScript 타입 정의
│       └── router.tsx     # 라우팅 설정
│
├── uploads\               # 업로드 파일 저장소
├── 서버시작.bat            # 서버 실행
└── 서버종료.bat            # 서버 종료

---

API 엔드포인트

메서드	경로	설명
POST	/api/auth/login	로그인
GET	/api/auth/me	내 정보 조회
GET	/api/tasks	업무 목록
POST	/api/tasks	업무 등록
PATCH	/api/tasks/:id	업무 수정
DELETE	/api/tasks/:id	업무 삭제
GET	/api/users	사용자 목록 (관리자)
POST	/api/users	사용자 생성 (관리자)
POST	/api/files/upload/:taskId	파일 업로드
DELETE	/api/files/:id	파일 삭제
GET	/api/kpi	KPI 조회
POST	/api/kpi	KPI 등록