연도
월
연간 현황
월간 현황
결제 현황
담당자별 워크로드
연도
미결제 프로젝트
| 프로젝트 | 거래처 | PO | 합계금 | 입금액 | 미결제 | 결제율 | 시작일 |
|---|
2026년 5월
기준
진행/대기 상태는 항상 표시
연도
기간
~
| 프로젝트 | 거래처 | 단계 | 상태 | PO/PM | 합계금 | 미결제 | 마감 |
|---|
* 대시보드 기간 필터 공유
담당자별 워크로드 v4.5.7
* SSOT: ops_projects (is_deleted=false) · 클릭으로 펼침/접힘 · 선택 역할만 격리 표시
새 요청사항 등록
받은 요청사항
보낸 요청사항
자료 업로드
휴가
●공휴일
· 칸 클릭 시 그날 전 직원 일정 상세 표시
DUGURU Work Flow 사용법
v4.5.3 | 5단계 정합 + 월경계 해소 + 빠른등록 · 대외비 내부 운영 시스템
1. 대시보드
연도 필터 — 상단 연도 버튼을 클릭하면 해당 연도 프로젝트만 표시됩니다. 기본값은 올해(2026)입니다.
KPI 카드 — 전체/진행/대기/완료 건수와 총 계약금·미결제이 실시간으로 집계됩니다.
오늘 진행 프로젝트 — 오늘 날짜가 시작일~마감일 사이인 프로젝트가 자동 표시됩니다.
담당자별 현황 (CD/PO/PM/DE) — 역할별 담당자 카드입니다. 이름 클릭 시 담당 프로젝트 목록이 펼쳐집니다. 프로젝트 클릭 시 상세 화면으로 이동합니다.
월별 그리드 — 올해 선택 시 1~12월 현황이 그리드로 표시됩니다. 완료/진행/계약금을 월별로 확인할 수 있습니다.
진행 중 프로젝트 — 최신순/마감순/금액순으로 정렬할 수 있습니다. 마감이 임박하면 주황, 지연되면 빨간색으로 강조됩니다.
2. 프로젝트 관리
새 프로젝트 등록 — 좌측 하단 "+ 새 프로젝트" 버튼 또는 우측 상단 버튼을 클릭합니다. 프로젝트명, 거래처, CD/PO/PM/DE, 시작일, 마감일, 금액을 입력합니다.
프로젝트 상세 — 목록에서 프로젝트를 클릭하면 전체 화면으로 전환됩니다. 상단에 타임라인/결제/할일 진행률이 바로 표시됩니다.
상태 변경 — 상세 화면 우측 상단 버튼으로 진행/완료/보류를 변경합니다.
결제 탭 — 착결제·중도금·잔금 입금 내역을 기록합니다. 입력하면 결제율이 자동 계산됩니다.
대화 탭 — 프로젝트별 메시지를 기록합니다. 유형: 일반/공지/이슈/요청으로 분류됩니다.
할일 탭 — 프로젝트 내 세부 할일을 등록하고 담당자를 지정합니다. 체크하면 완료 처리됩니다.
하위 프로젝트 — 메인 프로젝트 아래 세부 현장/단계를 하위로 등록할 수 있습니다.
검색·정렬·필터 — 전체 프로젝트 탭에서 검색창, 상태 필터, 최근순/마감순/금액순 정렬이 가능합니다.
3. 결제 현황
연도 필터 — 연도별로 결제 현황을 분리해서 확인합니다. 2026년 선택 시 월별 그리드가 추가로 표시됩니다.
정렬 — 미결제순(기본)/금액순/최신순으로 전환할 수 있습니다.
결제율 — 전체 계약금 대비 입금액 비율이 상단 KPI와 각 행의 바 차트로 표시됩니다.
미결제 관리 — 미결제순 정렬 시 금액이 큰 미결제 프로젝트부터 표시됩니다. 행 클릭 시 해당 프로젝트 결제 탭으로 바로 이동합니다.
4. 팀별 현황
팀 클릭 — 팀 헤더를 클릭하면 팀원 목록이 펼쳐집니다.
팀원 클릭 — 각 팀원 행을 클릭하면 담당 프로젝트 목록이 펼쳐집니다. 오늘 진행 중인 프로젝트는 강조 표시됩니다.
상태 필터 — 상단 드롭다운으로 진행/대기 상태만 필터링할 수 있습니다.
역할 표시 — 각 프로젝트에서의 역할(PO/PM/DE/연출)이 함께 표시됩니다.
5. 캘린더
Google 연동 — 두구루 구글 캘린더 9개와 실시간 동기화됩니다. 탭 진입 시 자동 로그인을 시도합니다.
일정 조회 — 월 선택 후 월간 그리드와 목록을 함께 확인합니다. 날짜 클릭 시 해당 날짜 일정만 필터링됩니다.
일정 추가 — "+ 일정 추가" 버튼 → 제목/시간/장소/설명 입력 → 저장 확인 후 구글 캘린더에 즉시 반영됩니다.
프로젝트 자동 생성 — 일정 추가 후 프로젝트 등록 폼이 자동으로 열립니다. 제목에 "프로젝트명 - 백혜진PO, 최정현PM" 형식으로 입력하면 PO/PM이 자동 추출됩니다. 내용 확인 후 저장하세요.
일정 수정 — 목록에서 일정 클릭 → 편집 화면에서 수정 → 변경 내역 확인 후 저장합니다.
일정 삭제 — 삭제 버튼 클릭 시 일정 정보 확인 모달이 표시됩니다. 영구 삭제이므로 주의하세요.
6. 할일 · 요청사항
내 할일 — 전체 프로젝트의 할일을 담당자별로 필터링해서 확인합니다. 완료 버튼으로 즉시 처리 가능합니다.
요청사항 — 팀원 간 요청 사항을 등록합니다. 수신자, 프로젝트, 마감일을 지정할 수 있습니다. 받은/보낸 요청사항을 분리해서 확인합니다.
7. 공지 시스템
공지 배너 — 활성 공지가 있으면 상단 바에 자동 표시됩니다. 유형: 공지 / 주의 / 긴급 / 완료
공지 등록 — 대표(김종현)만 접근 가능합니다. 배너 우측 "관리" 버튼을 클릭합니다.
공지 닫기 — "닫기" 버튼을 클릭하면 해당 브라우저에서 숨겨집니다. 재접속 시 다시 표시됩니다.
8. 접속자 현황
접속자 버튼 — 상단 topbar의 초록 점 버튼을 클릭하면 현재 접속자 목록이 표시됩니다.
접속 기준 — 최근 10분 이내 활동한 사용자를 온라인으로 표시합니다.
자동 업데이트 — 3분마다 자동으로 접속자 현황이 갱신됩니다.
9. 전체 로그 (대표 전용)
접근 권한 — 대표(김종현)만 사이드바에서 " 전체 로그" 탭이 표시됩니다.
기록 항목 — 로그인, 프로젝트 생성/수정/삭제, 상태 변경, 결제 기록, 요청사항 등록 등 모든 주요 행동이 자동으로 기록됩니다.
필터 — 날짜 범위, 사용자, 행동 유형으로 필터링할 수 있습니다.
다운로드 — 엑셀(.xlsx) 또는 CSV 형식으로 다운로드할 수 있습니다. 대외비 자료이므로 외부 유출에 주의하세요.
단축키 · 팁
프로젝트 상세에서 돌아가기 클릭 → 이전 화면 복귀
사이드바 탭 클릭 → 상세 화면 자동 닫힘
다크모드 토글 → 상단 버튼
캘린더 새로고침 → "새로고침" 버튼
프로젝트 검색 → 전체 프로젝트 탭 검색창
연도 전환 → 대시보드/결제현황 연도 버튼
기술 문서 · 개발 참조
v2.1 기준 · 이 섹션은 앱 유지보수 시 참조용입니다
데이터 클린업 시스템
문제 배경
구글 캘린더·Flow에서 가져온 데이터에 HTML 엔터티(
>, <), 이모지(), 과잉 텍스트가 포함됩니다. esc() 함수가 이중 이스케이프하여 화면에 >가 그대로 노출되는 문제가 발생했습니다.범용 클린업 함수 (6개)
_decodeEntities(s)
> → >, < → <, & → & 복원. 이중 인코딩도 처리합니다.적용: 모든 텍스트 필드, 메모, 결제메모
_stripEmoji(s)
등 장식용 이모지를 제거합니다. 일반 텍스트 이모지( 등)는 보존합니다.
적용: 파싱 결과 필드 (현장명, 주소, 담당자 등)
_cleanRaw(s)
엔터티 디코딩 + 이모지 제거 +
->→→ 변환 + 공백 정리를 한 번에 수행하는 통합 함수입니다.적용: _parseProjectNotes() 소스 텍스트, _formatMemo() 입력
_cleanField(s, maxLen)
_cleanRaw() + 과잉 캡처 방지 (품목/시공지시 등에서 잘라내기) + 최대 길이 제한. 파싱 시 필드에 메모 전체가 들어가는 문제를 방지합니다.
필드별 제한: 현장명 80자, 현장주소 120자, 거래처 60자, 디자이너 30자
_cleanName(s)
이름 필드 전용. 한글 이름(2~5자)만 추출합니다. "홍길동 PO" → "홍길동"
적용: PO, PM, CD 필드
_cleanCrew(s)
연출팀 전용. 담당자+전화번호까지만 남기고 이후 시공 지시사항을 잘라냅니다. 최대 200자.
적용: crew 필드
적용 포인트 (3곳)
① _parseProjectNotes() — 소스 텍스트를 _cleanRaw()로 사전 정리 후 파싱, 결과값에 필드별 클린업
② _formatMemo() — 메모 표시 전 _cleanRaw()로 엔터티 이중 이스케이프 방지
③ loadAll() 데이터 매핑 — DB에서 로드된 모든 프로젝트 필드에 클린업 패스 일괄 적용
비프로젝트 분류 시스템
is_project 컬럼 — DB
ops_projects 테이블에 is_project boolean DEFAULT true 컬럼 필요. 없으면 코드에서 true로 기본 처리.NP_KEYWORDS 배열 — 비프로젝트 자동 추천 키워드 목록. 코드 내에서 수정 가능:
사무실 이전, 시험, 검사, 점검, 자동차, 회의, 미팅, 교육, 출장, 휴가, 연차, 개인, 점심, 저녁, 식사, 청소, 이사, 인사, 면접, 채용SHOW_NON_PROJECTS — 전역 토글 변수. 전체 프로젝트 탭 "비프로젝트 포함" 버튼으로 전환.
toggleIsProject(pid) — 프로젝트 상세에서 개별 전환. DB 즉시 반영.
분류 설정 모달 — 전체 프로젝트 탭 → "분류 설정" 버튼. 키워드 기반 일괄 마킹 + 체크박스 선택 후 적용.
[프로젝트] 태그 — Google Calendar 제목에
[프로젝트] 붙이면 자동 분류. 태그 없으면 비프로젝트. 워크플로우 단계 (WF_STAGES)
기본 6단계 — 견적문의(inquiry) → 수주·계약(contract) → 기획·설계(design) → 착공 준비(prep) → 시공(construct) → 완료(complete)
커스텀 단계 — 프로젝트별 "단계 추가" 버튼으로 생성. DB
custom_stages JSON 컬럼에 저장.단계별 할일 템플릿 —
TASK_TEMPLATES 객체에 단계별 기본 할일 목록 정의. 단계 전환 시 자동 추가 제안.완료 제외 로직 —
workflow_stage==='complete'인 프로젝트는 대시보드·담당자별 현황에서 제외. "오늘 진행" 판단 로직
조건 —
start_date와 due_date 둘 다 있어야만 "오늘 진행"으로 분류됩니다. 날짜 하나라도 없으면 제외.수식 —
start_date <= 오늘 && due_date >= 오늘적용 위치 (5개소) — 대시보드 todayP, getWeekGroup(), todayCount/weekCount/nextWeekCount, 팀별 s.오늘, 팀별 isToday
주의 — 기존에는 날짜 없는 프로젝트가 전부 "오늘 진행"에 포함되던 버그가 있었으며, 현재 수정 완료.
내 할일 필터 로직
완료 프로젝트 제외 —
status==='완료' 또는 workflow_stage==='complete'인 프로젝트의 할일은 표시하지 않음.보류 프로젝트 제외 —
status==='보류'인 프로젝트도 제외.퇴사자 제외 — 피드백 미작성 체크 시
STAFF.includes(name)으로 현재 재직자만 검사.섹션 구분 — 기한 초과 / 피드백 미작성 / 오늘 마감 / 이번 주 / 다음 주 이후 / 기한 없음
메모 파싱 시스템 (_resolveProjectFields)
3단계 우선순위 — ① Supabase 구조화 컬럼 → ② notes/memo 텍스트 파싱 → ③ 프로젝트명 파싱
_parseProjectNotes(memo) — 정규식으로 PO/PM/CD/DE/연출/현장명/현장주소/담당자/연락처/거래처 추출.
_parseProjectName(name) — 프로젝트명에서 "홍길동PO", "PO 홍길동" 패턴 추출.
주의: 파싱 과잉 캡처 방지 —
_cleanField()로 품목·시공지시·도착안내 등에서 자동 잘라내기. 추가 키워드가 필요하면 _cleanField() 내부 cutPatterns 배열에 추가._formatMemo(text) — 파이프(
|) 구분 + 번호(1.) 구분으로 key:value 행을 렌더링. 소스를 _cleanRaw()로 사전 정리 후 esc()로 안전하게 출력. 관리자 · 권한 시스템
ADMINS 배열 —
['김종현','백혜진','현준규']. 관리자 추가/제거 시 이 배열 수정.isAdmin() — 현재 사용자가 ADMINS에 포함되는지 검사.
canEditNote(authorName) — 관리자이거나 본인이 작성한 노트만 수정/삭제 가능.
관리자 전용 기능 — 전체 로그 탭, 공지 관리, 타인 피드백 수정/삭제 (수정 로그 자동 기록)
버그 수정 이력 (v2.1)
ES5 호환성 수정 (모바일 크래시 방지)
Optional chaining(?.) 제거 — saveFeedbackEdit()에서
?.sender_name → 변수 분리 처리. iOS 13/구형 Android 크래시 방지.ES6 shorthand property 제거 — createNotice()에서
{title,content,type} → {title:title,content:content,type:type}구조분해 할당 제거 — 월 파싱 로직에서
var[y,m]= → var _ym=...;var y=_ym[0]; 패턴으로 통일.데이터 표시 수정
히스토리 파일 중복 — _buildHistoryTimeline()에서 file_upload 이벤트가 HISTORY_NOTES 순회 + 별도 필터 순회로 2중 표시 → 중복 블록 삭제.
> 이중 이스케이프 — DB 원본 → _cleanRaw() → esc() 순서로 정리하여 화면에
> 그대로 노출 방지.이모지 잔류 — 등 구글 캘린더 체크마크가 필드값에 혼입 → _stripEmoji()로 자동 제거.
파싱 과잉 캡처 — 현장주소·연출 필드에 메모 전체가 들어가던 문제 → _cleanField()로 길이 제한 + cutPatterns 적용.
외부 확인 필요 항목
is_project 컬럼 SQL —
ALTER TABLE ops_projects ADD COLUMN IF NOT EXISTS is_project boolean DEFAULT true; Supabase에서 실행 여부 확인.Supabase RLS — SB_KEY가 HTML에 노출. Row Level Security 정책 반드시 적용 필요.
Supabase 테이블 참조
ops_projects — 프로젝트 마스터. name, status, workflow_stage, is_project, contract_amount, start_date, end_date, pm_id, designer_id, po_name, pm_name, cd_name, crew, memo, notes, parent_id, custom_stages 등
employees — 직원. name, team, position, auth_role, status(재직/퇴사)
clients — 거래처. name, contact_name, contact_phone, contact_email
ops_tasks — 할일(Task). project_id, title, assigned_to, status, due_date, employee_name
acc_receivables — 미수금. project_id, contract_amt, paid_amt
acc_payments_in — 입금 내역. project_id, amount, date, category, note
ops_project_docs — 파일. project_id, title, file_url, file_type, file_size, uploaded_by
chat_messages — 대화/히스토리/피드백. project_id, session_id, sender_type(note/feedback/alert), sender_name, content, note_type, is_active
presence — 접속 현황. employee_id, employee_name, last_active
ops_audit_logs — 활동 로그. user_name, module, action, detail
notices — 공지. title, content, type(info/warning/urgent/success), is_active, created_by
주요 전역 변수
PROJECTS[] — 전체 프로젝트 배열. loadAll()에서 DB 로드 + 필드 매핑 + 클린업.
TASKS[] — 할일(ops_tasks) 배열. status는 pending→대기, done→완료로 정규화.
PAYMENTS[] — 입금 내역 배열.
CHATS{pid:[]} — 프로젝트별 대화 메시지 맵.
HISTORY_NOTES{pid:[]} — 프로젝트별 히스토리 노트 맵.
STAFF[] — 재직 직원 이름 배열. loadEmployees()에서 로드.
STAFF_MAP{name:obj, id:obj} — 이름/ID로 직원 검색용 맵.
CLIENTS_MAP{id:obj} — 거래처 ID → 거래처 객체 맵.
ONLINE_USERS{name:{status,mins}} — 접속 현황 맵.
DASH_YEAR, DASH_MONTH, DASH_MONTH_END — 대시보드 기간 필터 상태.
PAY_YEAR, PROJ_YEAR — 결제/프로젝트 탭 연도 필터.
SHOW_NON_PROJECTS — 비프로젝트 표시 토글 (기본 false).
isLocal — 항상 false 유지. true로 변경 금지 (DB 연결 끊김).
currentUser — 현재 선택된 사용자. 기본 '김종현'.
currentPid — 현재 열린 프로젝트 ID. null이면 목록 화면.
캘린더 (work planner 일정)
데이터 SSOT — Master DB의 wp_admin_all_tasks · wp_leaves_view · wp_holidays · wp_members 4개 테이블 (읽기 전용).
월별 그리드 — 7열×6주, 각 칸 = 하루. 칸 안에 휴가자, 근무 인원수, 할일 건수 표시.
그날 상세 — 칸 클릭 → 모달에 그날 전 직원 일정(팀별 그룹, 오전/오후, 휴가)을 풍부하게 표시.
쓰기 위치 — 직원별 할일 입력·수정은 work planner 본 앱(바로가기)에서 수행. work flow는 시야 통합 용도.
새 창에서 이어갈 때 체크리스트
1. 이 파일(
duguru-work-flow-v2.1.html)을 업로드해서 이어가기2.
isLocal 변수는 건드리지 말 것 — 항상 false 유지3.
is_project 컬럼 SQL 실행 여부 확인4. ES5 호환 유지 —
const/let, 화살표 함수, optional chaining(?.), 구조분해 할당 사용 금지5. 새 클린업 키워드 추가 시 →
_cleanField()의 cutPatterns 배열에 추가6. 새 이모지 제거 필요 시 →
_stripEmoji()의 유니코드 범위에 추가7. 비프로젝트 키워드 추가 시 →
NP_KEYWORDS 배열에 추가 전체 활동 로그
관리자 전용
~
| 일시 | 사용자 | 유형 | 행동 | 상세 |
|---|
Flow 엑셀 데이터 가져오기
Flow에서 내보낸 Tasklist 엑셀 파일을 업로드하면 프로젝트 데이터를 자동으로 파싱하여 Supabase에 저장합니다.
Supabase 연결 상태