DUGURU Work Planner v3.4

두구루 업무 플래너 사용법 v3.4

🔐 로그인

👤

로그인 방법

이름 + 사번(입사일 8자리, 예: 20230522) 입력

Enter 키 또는 로그인 버튼 클릭

브라우저를 닫았다 다시 열어도 세션 자동 유지

우측 상단 이름 ▾ 클릭 → 휴지통 / 활동 로그 / 로그아웃

🔑

권한 구분

관리자 (4명): 김종현 · 현준규 · 백혜진 · 신유리

→ 전 직원 일정 수정 가능

→ 전체 활동 로그 조회

→ 모든 팀 OKR 편집 · 요청사항 전송

일반 직원: 본인 일정만 수정, 본인 로그만 조회

💡 사번 분실 시 관리자(김종현 대표)에게 문의하세요.

🖥 화면 구성 — 4가지 보기 모드

①

상단 바 안내

보기 토글: 주간 · 월간 · 개인 전환

주간 토글: 팀별 · 일자별 레이아웃 전환 (주간 보기 시에만 표시)

◀ 이전 / 다음 ▶: 주차 또는 월 이동

오늘: 현재 날짜로 즉시 이동 (일자별 뷰)

🔔 요청: 나에게 온 요청 수 표시 (빨간 뱃지)

📊 엑셀: 현재 월 전체 데이터 다운로드

🟢 실시간 연결: Supabase 서버 연결 상태

팀

주간 — 팀별 뷰 (기본)

모든 팀이 순서대로 표시 (스크롤)

팀 탭 클릭 → 해당 팀 섹션으로 자동 스크롤

좌측 패널: OKR 팀목표 + 팀 업무 + 팀 요청사항

그리드: 팀원 × 7일(일~토) × 오전/오후

셀 클릭 → 우측 편집 패널 열림

🔴 빨간 칩 = 해당 셀에 요청사항 있음

日

주간 — 일자별 뷰

상단 요일 탭에서 날짜 선택

선택한 하루의 전 팀 · 전 직원 오전/오후 일정 한눈에 확인

셀 클릭 → 편집 패널 열림 (팀별 뷰와 동일)

「오늘」버튼으로 현재 날짜 즉시 이동

月

월간 뷰

선택한 팀의 한 달 전체 일정을 주차별 그리드로 표시

상단 팀 탭으로 팀 전환

◀ ▶ 로 이전/다음 월 이동

각 주차마다 좌측에 OKR·팀업무·요청사항 패널

「이번 주」뱃지로 현재 주차 식별

👤

개인 월간 뷰 NEW

특정 직원 1명의 한 달 스케줄을 캘린더 형태로 표시

상단 드롭다운에서 직원 선택 (팀별 그룹화)

통계 바: 총 업무 수, 오전/오후 분포, 유형별 카운트

캘린더 셀 내 AM/PM 구분하여 업무 칩 표시

셀 클릭 → 편집 패널 열림 (업무 추가/수정 가능)

◀ ▶ 로 이전/다음 월 이동

※ 관리자 로그인 시 첫 번째 직원이 기본 선택됩니다

✏️ 업무 추가 · 수정 · 삭제

➕

업무 추가

캘린더 또는 그리드 셀 클릭 → 우측 편집 패널 열림

업무 유형 버튼(일반/프로젝트/미팅 등) 선택

텍스트 입력 후 Enter 또는 추가 버튼 클릭

여러 줄 입력 시 각 줄이 별도 업무로 등록됩니다

Shift+Enter = 줄바꿈 (한 업무에 여러 줄)

추가 즉시 자동 저장 (Supabase + localStorage)

🔄

수정 · 삭제 · 완료처리

유형 변경: 패널에서 업무 유형 뱃지 클릭 → 변경할 유형 선택

텍스트 수정: 패널에서 텍스트 영역 클릭 → 인라인 수정

삭제: 업무 오른쪽 ✕ 버튼 클릭

완료 처리: 유형을 「✓ 완료」로 변경 → 취소선 + 초록 뱃지

완료 취소: 다른 유형으로 변경하면 복원

관리자는 모든 팀원 업무 수정 가능

🏷 업무 유형 — 7종 색상 구분

일반업무일반 업무 처리 · 서류 정리 등

프로젝트프로젝트성 업무 · 제안서 · 시공

미팅회의 · 미팅 · 클라이언트 협의

현장/외근현장 방문 · 외근 · 창고 작업

연차HR 앱에서 자동 동기화 — work planner에서 직접 등록 불가, 두구루 HR 앱에서 신청·승인

★ 중요마감 임박 · 핵심 사안 · 강조

✓ 완료완료 처리 (텍스트에 취소선)

📋 팀 업무 (좌측 패널)

팀

팀 업무란?

팀이 자체적으로 등록하는 공유 업무 · 공지사항

삭제하기 전까지 계속 표시 (주차 무관)

등록자 이름 + 등록 시간이 함께 표시됩니다

해당 팀 소속 직원 + 관리자가 추가 가능

로그인한 모든 사용자가 삭제 가능 (삭제 시 확인 모달)

팀 업무 vs 요청사항 차이

📋 팀 업무

팀 내부에서 자체 등록하는 공유 업무
예) "이번 주 청암자이 현장 방문 준비"

🔴 요청사항

외부(타인 · 관리자)가 팀/팀원에게 전달하는 업무
예) "김종현 → 기획팀 전체: 제안서 검토 요청"

🔴 요청사항 시스템

팀

팀 요청사항

각 팀 좌측 패널 하단에 위치

관리자가 + 요청 버튼으로 추가

팀 전체 또는 특정 팀원 지정 가능

형식: 김종현 → 기획팀 전체 또는 김종현 → 백혜진

해당 팀원은 🔔 알람 뱃지로 확인

셀

셀별 요청사항

업무 편집 패널 하단 빨간 영역에 표시

모든 직원이 타인에게 요청 전송 가능

자기 자신에게는 요청 불가

삭제 시 타인 요청인 경우 경고 메시지 표시

그리드 셀에 🔴 요청 N건 칩으로 표시됨

🔔

요청 알람 확인

상단 🔔 요청 옆 숫자 = 안 읽은 요청 수

클릭하면 나에게 온 요청 목록 모달 표시

요청 항목 클릭 → 해당 날짜 · 시간대 셀로 자동 이동

모달을 열면 자동으로 읽음 처리됩니다

🎯 OKR — 팀 목표 운영

OKR 설정 방법

팀 좌측 패널 OKR 영역 클릭 또는 ✏ 버튼

O (Objective): 팀 목표 — 도전적, 영감, 수치 제외

KR (Key Results): 핵심 결과 지표 — 반드시 수치화, 2~4개 권장

★ 이번 주 집중: 이번 주 KR 기여를 위한 핵심 행동

주차별 · 팀별 독립 저장

📋

OKR 편집 권한

관리자: 모든 팀 OKR 편집 가능

일반 직원: 소속 팀 OKR만 편집 가능

KR 진척도: 슬라이더로 0~100% 입력

월간 뷰에서는 주차별 OKR 개별 관리

💡 OKR은 평가 도구가 아닌 정렬 도구입니다. 도전적 목표면 달성률 60~70%도 성공입니다.

📋 활동 로그

기록 항목: 접속, 로그아웃, 업무 추가/수정/삭제, 유형 변경, OKR 저장, 요청 전송

관리자: 전체 직원 로그 조회 가능

일반 직원: 본인 로그만 조회 가능

열기: 우측 상단 이름 클릭 → 📋 활동 로그

🗑️ 휴지통 v3.0

위치: 우측 상단 이름 클릭 → 🗑️ 휴지통

보관 기간: 삭제 후 30일 (이후 자동 영구삭제)

조회 권한: 일반 직원은 본인 항목만, 관리자는 전체

복원: 원래 셀의 마지막에 추가됨 (덮어쓰지 않음)

영구삭제: 더블 확인 후 즉시 삭제 (복구 불가)

시스템 안전망: 셀이 통째로 비워지는 사고가 발생하면 자동으로 휴지통에 백업됨

💾 저장 방식 및 서버 연결

실시간 저장 (Supabase)

업무 추가/수정/삭제 → 즉시 Supabase에 저장

Realtime 구독: 다른 사람의 변경사항이 즉시 반영

5초 간격 자동 새로고침 (안전장치)

서버 연결 실패 시 localStorage에 자동 백업

재연결 시 10초 후 자동 재시도

📡

연결 상태 표시

실시간 연결 — Supabase 정상 연결

연결 중... — 서버 접속 시도 중

오프라인 — 로컬 저장 모드

📊 엑셀 다운로드 & ⌨ 단축키

엑셀 포함 시트 (7개)

전체 업무: 팀 · 이름 · 날짜 · 유형 · 내용 · 상태 통합 리스트

기획팀 / 디자인팀 / 마케팅팀 / 지원팀 / 연출팀(EET): 날짜별 오전·오후 행렬

OKR: 팀별 주차별 목표 · KR · 진척도

⌨

단축키

Esc패널 · 모달 닫기

Enter업무 추가 · 로그인 확인

Shift+Enter업무 입력창 줄바꿈

📱 홈화면 추가 (앱처럼 사용)

🍎

iOS (iPhone · iPad)

Safari로 duguru-workplanner.netlify.app 접속

하단 공유 버튼 (□↑) 탭

홈 화면에 추가 선택 → 추가

홈화면 DP 아이콘 탭하면 풀스크린 앱으로 실행

🤖

Android (Chrome)

Chrome으로 duguru-workplanner.netlify.app 접속

우측 상단 ⋮ 메뉴 또는 자동 안내 배너

앱 설치 또는 홈 화면에 추가 선택

홈화면 DP 아이콘 탭하면 풀스크린 앱으로 실행

💡 팝업 종료 · 자동 갱신

⚠

팝업 실수 종료 방지

업무 입력 패널·OKR 모달은 바깥 클릭으로 닫히지 않음

닫기: × 버튼 · 취소 · Esc

변경 사항이 있으면 자동 저장 (저장 중 ⏳ 표시 → ✓ 자동저장됨)

🔄

새 버전 자동 갱신

새 빌드 배포 시 우측 상단 알림 토스트 자동 표시

3초 후 자동 새로고침 — 입력 중인 데이터는 자동 저장

즉시 새로고침: 토스트의 지금 새로고침 버튼

강제 갱신 (캐시 무시): Ctrl+Shift+R (Win) / Cmd+Shift+R (Mac)

버전별 신규·연동·안정화 이력 확인

🎨

두구루 플래너 디자인 시스템 & 개발 가이드

버전 히스토리

v3.0r5모바일 저장 사라짐 버그 수정 — 모바일에서 입력 후 새로고침/앱전환 시 저장된 것처럼 보이지만 실제로는 사라지던 버그 해소. 원인: persistToSupabase가 await 없이 호출되어 fetch가 페이지 종료와 함께 abort됨. 해소: ① 'UI ✓ 자동저장됨' 표시를 Supabase 응답 후로 이동(저장 중에는 ⏳ 표시), ② pagehide/visibilitychange='hidden' 시점에 navigator.sendBeacon으로 wp_tasks REST 직접 INSERT(브라우저가 페이지 종료 후에도 전송 보장), ③ 기존 항목 UPDATE는 fetch keepalive로 강제 전송. 디자인·콘텐츠 변경 0건. DB 변경 0건.

v3.0r4전사 열람 모델 — 모든 직원이 모든 직원의 일정을 볼 수 있게 변경. 쓰기(추가/수정/삭제)는 본인 + 관리자만 가능. 다른 직원 셀에는 [+ 추가] 버튼 숨김, 클릭 시 편집 패널이 열리되 read-only 모드(입력 영역 숨김 + 🔒 안내 배너 노출). 헤더 라벨도 "전사 열람 · 본인만 편집"으로 변경. DB 변경 0건 (이미 anon SELECT 권한 부여 상태).

v3.0r3복구함 노출 강화 — 상단 도구 바에 [🔄 복구함] 독립 버튼(빨간 카운트 배지), 첫 진입 시 자동 배너(2주 활성, 24h dismiss). 0건일 때 버튼·배너 자동 숨김. 등급 배지 (A 확실 / B 가능 / C 의도가능) + A등급 재해석 안내문 ("같은 본문 반복 = 저장 안 된 줄 알고 다시 입력한 흔적, 거의 확정 유실"). RPC fn_wp_v3_recovered_count 사용. hotfix1: loadFromSupabase await 처리 + setConnStatus(online)에서 카운트 자동 갱신(SB_ONLINE race 해소). hotfix2: .recover-box에 position:relative+z-index:1 추가 — .hm-bg(absolute, backdrop-filter:blur)가 모달 박스를 가려 컨텐츠가 흐려보이던 v3.0 base 결함 해소

v3.0전면 재설계 — 직원별 데이터 격리 + 자동 안전망 — 직원별 4월 사고 대비 12개 테이블 격리(wp_tasks_<slug>), DB 트리거 자동 history·휴지통, 빈 본문 INSERT 차단(CHECK), 173건 4월 유실 본문 검토 복구함 신설, 관리자(김종현·백혜진·현준규) 통합 뷰 wp_admin_all_*, STORE_KEY v40 갱신

v2.7휴지통 UI 신설 — 삭제된 task를 30일간 휴지통에 보관, 사용자 메뉴에서 복원·영구삭제 가능. 본인 항목만 표시(관리자는 전체). 영구삭제는 더블 확인. STORE_KEY v36 갱신

v2.6업무 유형 "연차" 제거 (HR SSOT 일원화) — 직접 등록 불가, HR앱에서만 신청. 기존 연차 task 53건 자동 정리(공휴일·HR중복), 개인메모 4건 일반 type으로 변환 보존

v2.5HR 연차 자동 표시 + 월간 뷰 버그픽스 — 두구루 HR 앱의 승인된 연차/반차/병가를 셀에 자동 표시(파란 좌측보더), 노동절 명칭 정정, 개인↔팀 월간 전환 시 렌더 깨짐 수정

v2.4토/일/공휴일 색상 구분 — 토(파랑)/일(빨강)/공휴일(빨강+휴일명 표시), 2026 대한민국 공휴일 + 대체공휴일 보강

v2.3주간 7일 표시 (Google Calendar 방식) — 일~토 7일 무조건 표시, 월 경계 무시. 다른 달 날짜는 흐리게 표시. STORE_KEY v32 갱신

v2.2캐시 무효화 강제 적용 — no-cache 헤더, STORE_KEY v31 갱신(localStorage 강제 초기화), Realtime 채널 v31

v2.1데이터 유실 핫픽스 — 빈 배열 덮어쓰기 차단, 변경 셀만 저장(dirty tracking), 다중 세션 안전

v2.0개인 뷰 일간·주간·월간 연동 (보기×구분 6가지 조합), VIEW_MODE/SCOPE 독립 상태 관리

v5.2상단 토글 재설계: 보기[일간·주간·월간] + 구분[개인·팀별] — 레이아웃 고정

v5.1스타일 버튼 삭제, 사용법 전면 개편(개인 뷰 포함), 보기/주간 토글 시인성 개선

v5.0개인 월간 스케줄 뷰 신설 (직원별 캘린더·업무 통계·유형별 카운트·관리자 fallback)

v4.0요청사항 삭제 권한 확장(모든 로그인 사용자), 삭제 확인 모달 추가(타인 요청 경고 표시)

v1.1좌측 패널 3섹션(OKR·팀업무·요청사항), 팀 업무 시스템, 사용법·스타일 가이드 전면 개편

v1.0로그인/로그아웃, 권한관리, 요청사항, 활동로그, 실시간협업, 완료유형, 엑셀다운로드

v9Supabase 연동, OKR 팀목표, 자동 새로고침

v8기업 블루 디자인, OKR 패널, 주간/월간/일자별 뷰, 업무 유형 7종

배포 & 서버 정보

NET

Netlify

팀: DDUGURU

계정: [email protected]

URL: duguru-workplanner.netlify.app

파일명: index.html (PWA — sw.js, manifest.json, icon 동반)

업데이트: Deploys → 파일 드래그 앤 드롭

Supabase

Project ID: jdmzgsyqsozjzakxppls

리전: Northeast Asia

테이블:
wp_tasks_<slug> × 12 (직원별),
wp_admin_all_tasks/trash (관리자 뷰),
wp_okr, wp_requests, wp_log,
wp_holidays, wp_trash_<slug>

플랜: Free tier

파일 수정 원칙

CONTENT ZONE (▼▼▼ ~ ▲▲▲) 안의 데이터만 수정하세요

MEMBERS 배열: 팀원 추가/변경 (name, empId, rank, team, c, init)

TASK_TYPES: 업무 유형 추가 시 CSS 변수도 함께 추가

STORE_KEY: 버전 변경 시 키 업데이트 (기존 localStorage 초기화)

ADMINS 배열: 관리자 이름 목록

색상 팔레트 — CSS 변수

업무 유형 색상

--c-gen 일반

--c-proj 프로젝트

--c-meet 미팅

--c-field 현장

--c-leave 연차

--c-key 중요

#065F46 완료

시스템 색상

--blue 주요 액션

#EF4444 요청사항

#6D28D9 OKR

#3ECF8E Supabase

팀 컬러 (MEMBERS.c 값)

기획팀#2e7d20

디자인팀#0060b0

마케팅팀#b86000

지원팀#6a2eaa

연출팀(EET)#b02020