1
0
forked from baron/baron-sso
Files
baron-sso/docs/baron-orgchart-data-flow.md
chan acab84c358 refactor(adminfront): 조직도 UX 전면 개편 및 중복 렌더링 버그 수정
- 1안(좌우 분할 디렉토리 뷰) 적용으로 트리와 상세 패널 분리
- 조직도 중복 나열 버그 원인인 불필요한 groupNodes 강제 병합 로직 제거
- 멤버 탭과 하위 조직 탭을 통합한 세로 스크롤 뷰 구현
- 다국어 키 {count} 처리 문제 우회용으로 텍스트 직접 렌더링 수정
- 우측 설정 메뉴에 상세 프로필로 이동 링크 추가 및 쓸모없는 상세 페이지 라우팅 제거
- '기존 사용자 배정'만 남기고 사용자 '신규 생성' 제거
- DropdownMenu 컴포넌트 추가 및 관련 UI 업데이트
2026-04-17 16:32:22 +09:00

3.3 KiB

Baron-Orgchart 데이터 흐름 및 아키텍처

이 문서는 조직도 뷰어 프론트엔드(baron-orgchart, OrgFront)와 Baron SSO 통합 인증/백엔드 서버 간의 인증 및 데이터 통신 흐름을 설명합니다.

baron-orgchart는 자체적인 데이터베이스나 권한 관리 로직을 가지지 않으며, Baron SSO 백엔드에 전적으로 의존하는 순수 표현 계층(Presentation Layer)으로 동작합니다.

아키텍처 및 데이터 흐름도

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 HydraUserFront를 통해 먼저 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) 처리됩니다.