← 포트폴리오 ⚙️ 자동화 · 업무 통합
TEAM WORKSPACE · FULL-STACK

HR 워크스페이스 — 팀 공용 통합 업무 공간

조직도·인사변동·자리배치·내선표·일정을 흩어진 엑셀 대신 하나의 앱에서 관리하는 팀 워크스페이스. 로그인부터 모듈형 사이드바까지, PocketBase 단일 실행파일로 백엔드·프론트·DB를 한 번에 구동합니다.

🗄️ PocketBase ⚡ Vanilla JS 🧩 모듈형 아키텍처 🔐 공용 계정 인증 ⚠️ 서버형 앱 · 웹 URL 실행 불가 (사내 구동 전용)

어떻게 동작하나

로그인 → 모듈 사이드바 → 화면 로드, 팀이 함께 쓰는 단일 워크스페이스.

01
🔐

공용 계정 로그인

HR팀 공용 계정으로 인증. PocketBase가 인증·권한을 관리합니다.

02
🧩

모듈 사이드바

설정 파일의 모듈 배열에 한 줄만 추가하면 사이드바 메뉴와 라우팅에 자동 반영됩니다.

03
🖥️

화면 로드

선택한 모듈이 iframe으로 로드돼, 각 기능이 독립적으로 동작·확장됩니다.

모듈 구성

필요한 기능을 모듈로 붙여 점진적으로 확장하는 구조입니다.

동작🏢

본사

대시보드 · 인사변동(발령·근태특이자) · 조직도 탭

동작📋

그룹 보고양식

조직도 · 분기 인력운영현황 · 매월 인원현황보고

준비중🪑

자리배치도

좌석 배치 관리

준비중☎️

내선현황표

부서·내선 번호 관리

준비중🗒️

주간업무

팀 주간 업무 공유

준비중📅

일정공유

팀 일정 캘린더

LIVE DEMO · 실시간 동작

👆 지금 바로 만져보세요 — 클릭·드래그가 실제로 먹힙니다

아래 두 화면은 설명용 스크린샷이 아니라, 마우스로 직접 조작되는 진짜 데모예요. 이름을 끌어다 옮기고, 날짜를 눌러 일정을 등록해보세요.

01 조직도 — 드래그로 인사이동 🖱️ 드래그 해보기

이름 칩을 끌어다 다른 부서 카드에 놓으면 인사이동이 반영됩니다. (부서·이름은 가상 데이터)

02 일정공유 — 클릭해서 일정 등록 🖱️ 클릭 해보기

달력의 날짜를 클릭하면 오른쪽에 입력 패널이 열립니다. 저장하면 해당 날짜에 일정 칩이 표시됩니다. (더미 일정 미리 세팅)

일월화수목금토

일정 등록

제목과 작성자를 입력하고 저장하세요.

확장 방식 — 설정 한 줄

새 기능은 모듈 레지스트리에 한 줄만 추가하면 메뉴·라우팅에 자동 반영됩니다. (앱 코드 수정 불필요)

// config.js — 모듈 레지스트리 modules: [ { id: "main", label: "본사", url: "modules/main/", ready: true }, { id: "group", label: "그룹 보고양식", url: "modules/group/", ready: true }, { id: "seatmap", label: "자리배치도", url: "", ready: false }, // ← 준비중 배지 ]

핵심 기술

별도 서버·DB 설치 없이, 실행파일 하나로 팀 공용 앱을 구동합니다.

PocketBase · 백엔드+DB+인증 단일 실행파일
DB Migrations · 스키마 버전 관리
Vanilla JS · 프레임워크 無
iframe 모듈 라우팅 · 기능별 격리
same-origin 서빙 · 로컬·서버 어디서나 동작