서초구가족센터

조직도 상단 HTML 수정

<style>/* 레이어드 이미지 + 페이드 */
.img-stack{position:relative;width:100%;height:auto}
.img-stack .base{display:block;width:100%;height:auto;position:relative;z-index:0}
.img-stack .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease;z-index:1}
.img-stack .layer.show{opacity:1}
/* 뷰어 공통 */
.orgmap-view-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:auto;preserveAspectRatio:none}
.orgmap-view-svg .hotspot{}
.orgmap-view-svg .hotspot:focus-visible{}
.orgmap-view-svg .hotspot:hover{}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.img-stack { position: relative; width: 100%; height: auto; }
.img-stack .base { display: block; width: 100%; height: auto; position: relative; z-index: 0; }
.img-stack .layer { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; z-index: 1; }
.img-stack .layer.show { opacity: 1; }
.orgmap-view-svg { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: auto; }
.orgmap-view-svg .hotspot { outline: none; --hot-fill: rgba(37,99,235,.08); --hot-stroke: rgba(37,99,235,.6); --hot-stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill 0.12s, stroke 0.12s, opacity 0.12s; fill: transparent !important; stroke: transparent !important; pointer-events: auto !important; cursor: pointer !important; }
.orgmap-view-svg .hotspot:hover { stroke: rgb(37, 99, 235); stroke-width: 0; fill: rgba(7, 55, 160, 0) !important; border-radius: 20px !important; }
.orgmap-view-svg .hotspot:focus-visible { stroke-dasharray: 4, 3; stroke: var(--hot-stroke) !important; stroke-width: var(--hot-stroke-width) !important; fill: transparent !important; }
.orgmap-view-svg .hotspot.is-active { stroke: none !important; stroke-width: 0px !important; fill: rgba(17, 17, 17, 0.06) !important; }
.orgmap-view-svg .hotspot.important { --hot-stroke: #ef4444; --hot-fill: rgba(239,68,68,.12); --hot-stroke-width: 3; }
.orgmap-view-svg .hotspot.dept { --hot-stroke: #059669; --hot-fill: rgba(5,150,105,.10); }
.orgmap-view-svg .hotspot.team { --hot-stroke: #f59e0b; --hot-fill: rgba(245,158,11,.10); }
.orgmap-view-svg .hotspot[data-style="info"] { --hot-stroke: #2563eb; --hot-fill: rgba(37,99,235,.10); }
.orgmap-view-svg .hotspot[data-style="success"] { --hot-stroke: #16a34a; --hot-fill: rgba(22,163,74,.12); }
.orgmap-view-svg .hotspot[data-style="warning"] { --hot-stroke: #f59e0b; --hot-fill: rgba(245,158,11,.14); --hot-stroke-width: 3; }
.orgmap-view-svg .hotspot[data-style="danger"] { --hot-stroke: #dc2626; --hot-fill: rgba(220,38,38,.14); --hot-stroke-width: 3; }
.orgmap-view-svg .hotspot.ceo { stroke: rgb(37, 99, 235); stroke-width: 2; fill: rgba(37, 99, 235, 0) !important; border-radius: 20px !important; }
.orgmap-view-svg .hotspot.ceo:hover { stroke: rgb(37, 99, 235); stroke-width: 2; fill: rgba(7, 55, 160, 0) !important; border-radius: 20px !important; }
.orgmap-view-svg .hotspot.director { fill: rgba(16, 185, 129, 0.25); stroke: rgb(16, 185, 129); stroke-width: 2; }
.orgmap-view-svg .hotspot.manager { fill: rgba(245, 158, 11, 0.25); stroke: rgb(245, 158, 11); stroke-width: 2; }
.orgmap-view-svg .hotspot.ceo, .orgmap-view-svg .hotspot.director, .orgmap-view-svg .hotspot.manager { cursor: pointer; transition: 0.2s ease-in-out; }
.orgmap-view-svg .hotspot.ceo { rx: 10; ry: 20; }
.orgmap-view-svg .hotspot.manager { rx: 8; ry: 8; }</style>

<div class="wg_wrap" data-map='{"imgs_pc":["/_img/svg/SCF/org_0.svg","/_img/svg/SCF/org_1.svg","/_img/svg/SCF/org_2.svg","/_img/svg/SCF/org_3.svg","/_img/svg/SCF/org_4.svg","/_img/svg/SCF/org_5.svg","/_img/svg/SCF/org_6.svg","/_img/svg/SCF/org_7.svg","/_img/svg/SCF/org_0.svg"],"imgs_mo":["/_img/svg/SCF/org_m_0.svg","/_img/svg/SCF/org_m_1.svg","/_img/svg/SCF/org_m_2.svg","/_img/svg/SCF/org_m_3.svg","/_img/svg/SCF/org_m_4.svg","/_img/svg/SCF/org_m_5.svg","/_img/svg/SCF/org_m_6.svg","/_img/svg/SCF/org_m_7.svg","/_img/svg/SCF/org_m_0.svg"],"shapes":[{"id":"S1756638062097","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"운영지원팀","board_name":"운영지원팀","hover_idx":1,"pc":{"points":[[0.1461125959976886,81.76979299403996],[13.484023242460848,95.54949769783252]]},"mo":{"points":[[6.478432464416535,38.71711023688132],[43.81965348945841,48.668250073309785]]}},{"id":"S1756638070765","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"가족사업1팀","board_name":"가족사업1팀","hover_idx":2,"pc":{"points":[[14.492717906930158,81.26820039041637],[27.909085599822042,95.85848614482497]]},"mo":{"points":[[54.2596866806005,39.255437506619025],[91.94528448944163,48.668250073309785]]}},{"id":"S1756642791340","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"사업총괄","board_name":"사업총괄","hover_idx":8,"pc":{"points":[[41.25917715408351,38.28756148751148],[59.25692920591631,53.96490400033179]]},"mo":{"points":[[25.301731085668024,20.400939665696775],[73.20161767892186,31.405580175511865]]}},{"id":"S1756687479224","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"가족사업2팀","board_name":"가족사업2팀","hover_idx":3,"pc":{"points":[[28.506138687221785,81.57678661916064],[41.874611374504056,95.79007696394494]]},"mo":{"points":[[6.469665545124201,52.04306221569915],[44.57953187366867,61.77124047766242]]}},{"id":"S1756687487122","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"가족사업3팀","board_name":"가족사업3팀","hover_idx":4,"pc":{"points":[[43.31015528804948,81.57678661916064],[56.76835324334031,96.40805385792987]]},"mo":{"points":[[54.70833105120338,52.25104619037141],[91.43869889996812,61.147288553645616]]}},{"id":"S1756687491523","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"서초아이돌봄팀","board_name":"서초아이돌봄팀","hover_idx":5,"pc":{"points":[[57.66556567369822,81.88577506615312],[71.03403548599994,96.71703240398517]]},"mo":{"points":[[54.55532410946015,65.03410990604262],[91.87455646204461,74.86926767035794]]}},{"id":"S1756687495948","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"여성가족부 아이돌봄팀","board_name":"여성가족부 아이돌봄팀","hover_idx":6,"pc":{"points":[[71.93125366631895,81.57678661916064],[85.47916826467669,96.71703240398517]]},"mo":{"points":[[7.088298213709969,79.28896289776571],[91.43869889996813,89.43310910907353]]}},{"id":"S1756687500366","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"가족사업4팀","board_name":"가족사업4팀","hover_idx":7,"pc":{"points":[[86.47237656318762,81.57678661916064],[99.66140733939442,96.71703240398517]]},"mo":{"points":[[6.499427959929136,65.14605262005178],[44.07294628419516,74.87423088201504]]}},{"id":"S1757256478270","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"운영총괄","board_name":"운영총괄","hover_idx":8,"pc":{"points":[[41.33738601823708,5.582511039633645],[58.86524822695035,24.423485798397206]]},"mo":{"points":[[25.63323274455835,4.750575140944588],[72.18844649997483,16.222750024436593]]}}]}'>
  <div class="img-stack"></div>
  <svg class="orgmap-view-svg" viewBox="0 0 1000 1000" preserveAspectRatio="none"></svg>
  <h2 class="visually-hidden" id="orgmapHeading">조직도 영역 링크 목록</h2>
</div>
<script>(function(){
  var root=document.currentScript.previousElementSibling;
  var cfg=JSON.parse(root.getAttribute('data-map'));
  var svg=root.querySelector('svg');
  var stack=root.querySelector('.img-stack');

function v(){return window.matchMedia('(max-width:768px)').matches?'mo':'pc';}
  function se(t,a){var e=document.createElementNS('http://www.w3.org/2000/svg',t); for(var k in a)e.setAttribute(k,a[k]); return e;}

// ★ 클릭 고정(토글)
  var stickyIdx = null;

function buildImages(){
    stack.innerHTML='';
    var imgs = (v()==='mo') ? (cfg.imgs_mo||[]) : (cfg.imgs_pc||[]);
    if(!imgs || !imgs.length) return;
    var base = document.createElement('img'); base.className='base'; base.alt='조직도'; base.src= imgs[0]||''; stack.appendChild(base);
    for(var i=1;i<imgs.length;i++){
      var im=document.createElement('img'); im.className='layer'; im.dataset.idx=String(i); im.alt='map_img_'+String(i).padStart(2,'0'); im.src=imgs[i]||''; stack.appendChild(im);
    }
    stickyIdx = null;
  }

function enhance(el,s){
    el.setAttribute('tabindex','0'); el.setAttribute('role','link'); el.style.cursor='pointer';
    el.classList.add('hotspot','hotspot--'+(s.id||'shape'));
    if(s.css_class) el.classList.add(s.css_class);
    if(s.css_style) el.setAttribute('data-style', s.css_style);

var hoverIdx = (typeof s.hover_idx==='number') ? s.hover_idx : null;
    function on(){ if(hoverIdx!=null) showLayer(hoverIdx); }
    function off(){ if(stickyIdx==null) showLayer(null); }

el.addEventListener('mouseenter', on);
    el.addEventListener('mouseleave', off);
    el.addEventListener('focus', on);
    el.addEventListener('blur', off);
    el.addEventListener('touchstart', function(){ on(); setTimeout(off, 800); }, {passive:true});

// ★ 클릭 고정(토글) + 원래 액션
    el.addEventListener('click', function(){
      if(hoverIdx!=null){
        stickyIdx = (stickyIdx===hoverIdx) ? null : hoverIdx;
        applyLayerVisibility(stickyIdx!=null ? stickyIdx : hoverIdx);
      }
      if(s.action==='link' && s.link_url){
        window.open(s.link_url, s.link_target||'_self');
      }else{
        this.dataset.key = s.board_key||''; this.dataset.name = s.board_name||s.title||s.board_key||'';
        try{
          if(typeof getAllPersons==='function' && typeof renderTable==='function'){
            var people=getAllPersons(this.dataset.key)||[]; renderTable(people, this.dataset.name||this.dataset.key);
          } else { alert('[board] '+(this.dataset.name||this.dataset.key||'선택됨')); }
        }catch(e){ console.error(e); }
      }
    });
  }

function render(){
    buildImages();
    svg.innerHTML='';
    var vv = (v()==='mo') ? 'mo' : 'pc';
    (cfg.shapes||[]).forEach(function(s){ add(svg,s,vv); });
  }

render(); window.addEventListener('resize', render);

// 배경 클릭/ESC로 고정 해제
  root.addEventListener('click', function(e){
    if(!e.target.closest('.hotspot')) clearSticky();
  });
  document.addEventListener('keydown', function(e){
    if(e.key==='Escape') clearSticky();
  });
})();</script>

조직도 영역 링크 목록

조직도에서 항목을 클릭하면 하단에 구성원이 표시됩니다.

ㅇㅇㅇㅇ

조직도

조직도 상단 HTML 수정

이메일 무단수집 거부

개인정보처리방침

POPUP ZONE