독립된 SSO 인증 (Ory Hydra): Baron SSO(Ory 기반)를 통한 안전한 OAuth2/OIDC 로그인 지원
딥링크(Deep Link) 지원: 특정 부서의 조직도로 바로 접근 가능한 공유 링크 (/chart/:tenantId 또는 /chart/:slug) 지원
고급 트리뷰 디자인: 밝은 테마 기반의 직관적인 계층형 트리뷰 제공
Keto ReBAC 권한 연동 (예정): 사용자의 소속 부서 및 권한 레벨에 따라 열람 가능한 조직도가 동적으로 제어됩니다.

🛠️ 기술 스택

프레임워크: React 19 + Vite + TypeScript
스타일링: Tailwind CSS
인증 연동: react-oidc-context, oidc-client-ts
상태 관리: React Query (@tanstack/react-query)
아이콘: Lucide React

🧩 조직도 데이터 연동 구조

조직도 화면은 Baron Admin에서 관리한 **테넌트(Tenant)**와 사용자(User) 정보를 Backend API로 받아와 프론트에서 트리 구조로 조립합니다. Adminfront 화면에 직접 의존하지 않고, 동일한 Admin API 데이터를 사용하는 독립 RP로 동작합니다.

인증 및 API 호출

모든 인증 화면은 react-oidc-context를 통해 OIDC Access Token을 얻고, API 요청 시 Authorization: Bearer <access_token> 헤더를 붙입니다.
사용자가 작업 테넌트를 선택한 경우 localStorage.dev_tenant_id 값을 X-Tenant-ID 헤더로 함께 전달합니다.
API Base URL은 VITE_DEV_API_BASE, VITE_ADMIN_API_BASE, /api 순서로 결정됩니다.

일반 조직도 화면

/chart와 /chart/:tenantId는 로그인된 사용자를 대상으로 다음 API를 호출합니다.

용도	API	주요 사용 필드
테넌트 목록	`GET /v1/admin/tenants?limit=10000&offset=0`	`id`, `type`, `name`, `slug`, `parentId`, `memberCount`, `status`
사용자 목록	`GET /v1/admin/users?limit=5000&offset=0`	`id`, `email`, `name`, `status`, `tenantSlug`, `companyCode`, `joinedTenants`, `grade`, `position`, `jobTitle`

테넌트는 Baron Admin에서 입력한 parentId 관계를 기준으로 트리로 변환합니다. 현재 루트 후보는 type === "COMPANY_GROUP"인 테넌트를 우선 사용하고, 없으면 최상위 테넌트를 사용합니다. 회사 필터는 루트 하위의 type === "COMPANY" 테넌트로 구성됩니다.

사용자는 다음 순서로 조직도 노드에 매핑됩니다.

status === "active"인 사용자만 사용합니다.
@hanmac.kr 이메일은 현재 조직도 표시 대상에서 제외합니다.
사용자의 companyCode가 있으면 해당 값을 테넌트 slug와 매칭합니다.
companyCode가 없으면 tenantSlug를 사용합니다.
joinedTenants가 있으면 각 joined tenant의 slug에도 같은 사용자를 추가합니다.
같은 테넌트 노드 안에서 동일 사용자 id는 중복 추가하지 않습니다.

각 조직도 노드는 테넌트명(name)을 헤더로 사용하고, 해당 테넌트 slug에 매핑된 사용자를 구성원 목록으로 표시합니다. 구성원은 직책(position) 조직장 여부와 직급(grade) 기준으로 정렬되며, 사용자 표시는 이름 직급(직책) 형식을 우선 사용하고 직책이 없으면 직무(jobTitle)를 보조 표시로 사용합니다.

공유 조직도 화면

/chart?token=<share-token> 형태의 공유 링크는 인증 체크를 건너뛰고 다음 공개 API만 호출합니다.

용도	API	주요 사용 필드
공유 조직도	`GET /v1/public/orgchart?token=<share-token>`	`tenants`, `users`, `sharedWith`

공개 API 응답의 tenants와 users는 일반 조직도와 같은 방식으로 트리 및 구성원 목록에 매핑됩니다. 단, 공개 응답은 서버가 공유 범위에 맞게 이미 필터링한 데이터로 간주합니다.

조직 선택기

/picker와 /embed/picker도 Baron Admin의 테넌트/사용자 데이터를 사용합니다.

GET /v1/admin/tenants
GET /v1/admin/users

선택기는 테넌트 노드와 사용자 노드를 함께 보여주며, 사용자는 companyCode || tenantSlug와 테넌트 slug를 기준으로 배치합니다. 임베딩 모드에서는 선택 결과를 postMessage로 부모 화면에 전달합니다.

🚀 로컬 환경 실행 가이드

1. 저장소 복제 및 의존성 설치

git clone https://gitea.hmac.kr/baron/baron-orgchart.git
cd baron-orgchart
npm install

2. 환경 변수 설정

프로젝트 루트에 .env.local 파일을 생성하고 아래 환경 변수를 설정합니다. (개발 환경 기준)

# Baron SSO(Gateway)의 OIDC 엔드포인트
VITE_OIDC_AUTHORITY=http://localhost:5000/oidc

# Hydra에 등록된 Client ID
VITE_OIDC_CLIENT_ID=orgfront

# Backend API 주소
VITE_ADMIN_API_BASE=http://localhost:5000/api

3. 개발 서버 실행

npm run dev

기본적으로 http://localhost:5175 에서 실행됩니다.

README.md

Baron OrgChart (바론 조직도 서비스)

🌟 주요 기능