AIMED 일일업무 UI — 잡무집사(haiku)

작업 완료: 2026-06-13

개요

AIMED(에임드 지향성 4상균형3진 업무솔루션) 멤버 포털에 일일업무 UI 2개 페이지 추가:

1. 출근·퇴근 페이지 (/attendance) — 출근/퇴종 체크 버튼 + 이번주 근태표 + 팀 근태 현황
2. 업무지시함 페이지 (/tasks) — 받은 지시/내린 지시 탭 + 지시 생성 폼(팀장) + 상태칩

17명 매일 쓰는 간결·따뜻한 톤, crowny-ui.css 표준 적용.

파일

HTML 페이지

/Users/ef/crowny-aimed/public/출근.html (16KB) → .p1, .p2 분할

출근/퇴근 체크 버튼 (POST /api/work/checkin, /api/work/checkout)

이번주 근태표 (요일·출근시각·퇴근시각·상태)

팀 근태 현황 (팀장만 보임) — 팀원 카드 그리드

실시간 시계, 다크모드 토글

/Users/ef/crowny-aimed/public/업무지시함.html (23KB) → .p1, .p2 분할

탭 3개: 받은 지시 / 내린 지시(팀장) / 지시 생성(팀장)

받은 지시: JOB 카드 → 상태 드롭다운(대기/진행/완료)

내린 지시: 팀장 뷰

지시 생성 폼: 담당자/팀/우선순위/내용/기한 (POST /api/work/assign)

상태칩: 대기(파랑), 진행(골드), 완료(녹색)

라우팅

/Users/ef/crowny-aimed/포털서버.한선 업데이트:

GET /attendance  → 출근.html 파일서빙 (_파일서빙 함수로 파트 스트리밍)
GET /tasks       → 업무지시함.html 파일서빙

데모 페이지 (로컬 확인용)

• public/demo-attendance.html (9.6KB) — 스크린샷용
• public/demo-tasks.html (9KB) — 스크린샷용

데이터 소스

근태 데이터

data/근무/근태.psv (기존, PSV 포맷)

사번|이름|날짜|출근시각|퇴근시각|상태
E01|이선우|2026-06-12|09:00:00|18:30:00|정상
...

업무지시 데이터

data/근무/업무지시.psv (기존, PSV 포맷)

지시ID|지시자|담당|팀|내용|우선순위|상태|기한|생성일
JOB001|이선우|노형준|기술팀|LED 메인시스템...|높음|진행|2026-06-20|2026-06-12
...

디자인

컬러 토큰 (crowny-ui.css 준수)

배경: #f5f1ed (라이트), #1c1813 (다크)

카드: #fffdf8 (라이트), #262017 (다크)

골드: #C9A961 (브랜드, TOAU T색)

상태칩:

정상: #5a9e6f (옴/녹색)

지각: #d4882e (황색)

결근: #c0504a (적색)

휴가: #C9A961 (골드)

진행: #C9A961 (골드)

완료: #5a9e6f (녹색)

대기: #4a7fb5 (타/청색)

폰트

• Pretendard (시스템 폰트 폴백)
• 제목: 700 weight
• 본문: 400 weight
• 보조텍스트: 600 weight (라벨)

레이아웃

• 최대너비: 960px (일반 서비스)
• 패딩: 40px 상하, 24px 좌우 (24px 모바일)
• 간격: 12px(정보) ~ 32px(섹션)
• 반경: 8~12px (카드)

API 엔드포인트 (구현 필요)

관리서버(:9905)에서 구현 예정:

POST /api/work/checkin
  Input: { userId }
  → 근태.psv 출근시각 기록

POST /api/work/checkout
  Input: { userId }
  → 근태.psv 퇴근시각 기록

GET /api/work/attendance?week=current
  → { records: [{ date, checkin_time, checkout_time, status }] }

GET /api/work/team-attendance
  → { members: [{ name, status, checkin_time }] } (팀장용)

GET /api/work/tasks/received
  → { tasks: [{ job_id, sender, team, content, priority, status, deadline }] }

GET /api/work/tasks/assigned
  → { tasks: [...] } (팀장 발행 지시)

POST /api/work/assign
  Input: { assignee, team, priority, content, deadline }
  → 업무지시.psv 추가

PUT /api/work/tasks/{jobId}/status
  Input: { status: '대기'|'진행'|'완료' }
  → 상태 갱신

GET /api/members
  → { members: [{ id, name }] }

기술 스택

• HTML5 + JavaScript (바닐라)
• CSS3 (커스텀 프로퍼티 + 다크모드)
• HTTP API (fetch, Bearer 토큰)
• localStorage (theme, userId, token, userRole)

라이선스

크라우니 내부 전용

빌드 & 배포

bash# 포털서버 재컴파일
cd /Users/ef/crowny-aimed
./hanseonc_high 포털서버.한선 > 포털서버.toau 2>/dev/null
./bin/crownyc-pinned run 포털서버.toau &

# 또는 자동
./시작.sh

상태

• ✅ HTML 페이지 2개 작성 (출근, 업무지시함)
• ✅ STR_MAX_LEN(16KB) 우회 분할 (.p1, .p2)
• ✅ 포털서버 라우팅 추가 (/attendance, /tasks)
• ✅ 컴파일 검증 완료
• ⏳ API 백엔드 구현 (관리서버에서 진행)
• ⏳ 실제 데이터 연동 테스트
• ⏳ 팀원 피드백 & UX 개선

다음 단계

1. 관리서버 API 구현 (위 엔드포인트 참조)
2. 근태 데이터 DB 또는 파일 스토리지로 영속화
3. 권한 검증 (팀장 vs 팀원 역할 확인)
4. 시간대별 UI (출근 전/근무중/퇴근 후 상태 변화)
5. 알림 (지시 받음, 지시 기한 임박 등)

참조

• 설계 동결: /Users/ef/crowny-aimed/설계.md
• 인터페이스: /Users/ef/crowny-aimed/인터페이스.md
• crowny-ui.css: /Users/ef/crowny-aimed/public/crowny-ui.css
• 이전 UI: public/index.html, public/admin.html (레이아웃 참고)