forked from baron/baron-sso
chan
acab84c358
- 1안(좌우 분할 디렉토리 뷰) 적용으로 트리와 상세 패널 분리
- 조직도 중복 나열 버그 원인인 불필요한 groupNodes 강제 병합 로직 제거
- 멤버 탭과 하위 조직 탭을 통합한 세로 스크롤 뷰 구현
- 다국어 키 {count} 처리 문제 우회용으로 텍스트 직접 렌더링 수정
- 우측 설정 메뉴에 상세 프로필로 이동 링크 추가 및 쓸모없는 상세 페이지 라우팅 제거
- '기존 사용자 배정'만 남기고 사용자 '신규 생성' 제거
- DropdownMenu 컴포넌트 추가 및 관련 UI 업데이트
58 lines
3.3 KiB
Markdown
58 lines
3.3 KiB
Markdown
# Baron-Orgchart 데이터 흐름 및 아키텍처
|
|
|
|
이 문서는 조직도 뷰어 프론트엔드(`baron-orgchart`, OrgFront)와 Baron SSO 통합 인증/백엔드 서버 간의 인증 및 데이터 통신 흐름을 설명합니다.
|
|
|
|
`baron-orgchart`는 자체적인 데이터베이스나 권한 관리 로직을 가지지 않으며, Baron SSO 백엔드에 전적으로 의존하는 순수 표현 계층(Presentation Layer)으로 동작합니다.
|
|
|
|
## 아키텍처 및 데이터 흐름도
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User as 사용자 (Browser)
|
|
box rgba(173, 216, 230, 0.2) 외부 클라이언트 (표현 계층)
|
|
participant OrgFront as OrgFront<br>(baron-orgchart)
|
|
end
|
|
box rgba(255, 228, 196, 0.2) Baron SSO (통합 인증 및 권한 중앙 서버)
|
|
participant UI as UserFront<br>(SSO 로그인 화면)
|
|
participant Hydra as Ory Hydra<br>(OAuth2/OIDC)
|
|
participant Kratos as Ory Kratos<br>(Identity/Session)
|
|
participant BE as Backend API<br>(baron_backend:3000)
|
|
participant Keto as Ory Keto<br>(권한/조직 관계)
|
|
participant DB as PostgreSQL<br>(메타데이터)
|
|
end
|
|
|
|
%% 1. 인증 흐름
|
|
User->>OrgFront: 1. 조직도 웹사이트 접속
|
|
OrgFront->>Hydra: 2. 로그인되지 않음. Authorization Code 요청 (OIDC)
|
|
Hydra-->>User: 3. UserFront(로그인 화면)로 리다이렉트
|
|
User->>UI: 4. ID/비밀번호 입력
|
|
UI->>Kratos: 5. 로그인 검증 및 세션 생성
|
|
UI-->>User: 6. 로그인 성공, OrgFront Callback으로 리다이렉트
|
|
User->>OrgFront: 7. Authorization Code 전달
|
|
OrgFront->>Hydra: 8. Code를 Access Token으로 교환
|
|
Hydra-->>OrgFront: 9. Access Token 발급 완료
|
|
|
|
%% 2. 조직도 데이터 요청 흐름
|
|
User->>OrgFront: 10. 조직도 페이지 접근
|
|
OrgFront->>BE: 11. API 호출: GET /user-groups<br>(헤더: Authorization Bearer [Token])
|
|
|
|
%% 백엔드 내부 데이터 조합
|
|
Note over BE,DB: 백엔드가 조직도 데이터를 취합하는 과정
|
|
BE->>Keto: 12. Token(사용자 ID) 기반 접근 권한 검증
|
|
BE->>DB: 13. 테넌트/부서 트리 메타데이터 조회
|
|
BE->>Keto: 14. 각 부서별 멤버십(Member) ID 조회
|
|
BE->>Kratos: 15. 멤버 ID로 프로필(이름/직급 등) 정보 조회
|
|
|
|
BE-->>OrgFront: 16. 조합된 최종 조직도 JSON 반환
|
|
Note over OrgFront: 17. 데이터를 바탕으로<br>트리/차트 UI 렌더링 (순수 표현)
|
|
OrgFront-->>User: 18. 조직도 화면 표시
|
|
```
|
|
|
|
## 주요 설명
|
|
|
|
1. **표현 계층 (파란색 영역):** `baron-orgchart` (OrgFront)는 자체 DB를 조회하지 않고, 브라우저의 요청을 받아 화면을 그리는 역할만 담당하는 React/Vite(또는 유사 프레임워크) 애플리케이션입니다.
|
|
2. **통합 관리 (주황색 영역):**
|
|
* 조직도 웹사이트(OrgFront)에 접근하려면 `Ory Hydra`와 `UserFront`를 통해 먼저 SSO 로그인을 완료해야 합니다.
|
|
* 인증 토큰을 받아 API를 호출하면, **`baron-sso` 백엔드**가 DB, Keto(조직 관계망), Kratos(사용자 프로필) 등 흩어진 데이터를 하나로 뭉쳐(Aggregation) JSON 형태로 내려줍니다.
|
|
3. **API Proxy 통신:** `docker-compose.yaml` 설정의 `API_PROXY_TARGET=http://baron_backend:3000` 환경 변수를 통해, OrgFront로 들어온 데이터 API 요청은 모두 안전하게 SSO 백엔드로 프록시(Proxy) 처리됩니다.
|