AIP
/
AipApp


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066
							<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/static/styles/custom.css?v=06" />
    <!-- <script
      src="https://res.cdn.office.net/teams-js/2.17.0/js/MicrosoftTeams.min.js"
      integrity="sha384-xp55t/129OsN192JZYLP0rGhzjCF9aYtjY0LVtXvolkDrBe4Jchylp56NrUYJ4S2"
      crossorigin="anonymous"
    ></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.2.1/js/msal.js"></script>
    <script src="/static/scripts/teamsapp.js"></script> -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <title>Microsoft Teams Tab</title>
    <style>
    </style>
  </head>

  <body>
      <div class="wrap">
        <div class="content">
            <nav>
                <div class="tree">
                    <li class="">
                        <input type="checkbox" id="file">
                        <label for="file">내 OFFICE 365 파일</label>
                    </li>
                </div>
                <div class="total">모두</div>
                <div class="tree group"></div>
            </nav>
            <section>
                <div class="menu">
                    <div class="sub-menu">
                        <img src="/static/images/menu-icon.png" width="30" height="30" alt="메뉴 아이콘">
                    </div>
                    <div onclick="menuOpen(event, 'mk-items')">
                      <div>새로만들기</div>
                      <div class="mk-items click-menu">
                        <div onclick="mkdir()"><img src="/static/images/folder.png" width="20" height="20" alt="문서 이미지">&nbsp;폴더</div>
                        <div onclick="mkWord()"><img src="/static/images/docx.svg" width="20" height="20" alt="문서 이미지">&nbsp;Word 문서</div>
                        <div onclick="mkExcel()"><img src="/static/images/xlsx.svg" width="20" height="20" alt="문서 이미지">&nbsp;Excel 통합 문서</div>
                        <div onclick="mkPpt()"><img src="/static/images/pptx.svg" width="20" height="20" alt="문서 이미지">&nbsp;PowerPoint 프레젠테이션</div>
                      </div> 
                    </div>
                    <div onclick="menuOpen(event, 'upload-items')">
                      <div>업로드</div>
                      <div class="upload-items click-menu">
                        <div style="width: 160px;" onclick="openFolder(event)">폴더</div>
                        <div style="width: 160px;" onclick="openFile(event)">파일</div>
                      </div> 
                    </div>
                    <div onclick="refreshDrive()">새로고침</div>
                    <div class="one-drive-button">OneDrive에서 열기</div>
                    <input type="file" style="display: none;" id="folder-upload" name="folder" onchange="uploadFolders(event)" webkitdirectory multiple >
                    <input type="file" style="display: none;" id="file-upload" name="file" onchange="uploadFiles(event)" multiple >
                    <div id="hubState" style="display: none;"></div>
                </div>
                <div class="panel"></div>
                <div class="file-title">
                    <div><input type="checkbox" id="all-check" onchange="allSelect(event)"><img src="/static/images/file.png" width="20" alt="파일"></div>
                    <div class="head-name" onclick="sorting('name')">이름</div>
                    <div class="head-size" onclick="sorting('size')">용량</div>
                    <div class="head-lastModifiedDateTime" onclick="sorting('lastModifiedDateTime')">수정된 날짜</div>
                    <div class="head-lastModifiedBy.user.displayName" onclick="sorting('lastModifiedBy.user.displayName')">수정한 사람</div>
                    <div class="head-label" onclick="sorting('label')">민감도</div>
                </div>
                <div class="file-content"></div>
            </section>
        </div>
    </div>
  </body>
</html>
<script>
  let _formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
  const groupId = '3df73dac-a8bc-4dd0-9159-fdb2c696c067';
  const groupMap = new Map();
  let _selectedData = [];
  let _listData = [];
  $(document).ajaxStart(()=>{
      $('body').append(`<div id="load">
        <img src="/static/images/Settings.gif" alt="loading">
      </div>`);
    }).ajaxStop(()=>{
      $('#load').remove();
  });

  $(()=>{
    // microsoftTeams.appInitialization.notifySuccess();
    getGroupList();
    window.oncontextmenu = function () {
        return false;
    };
    window.addEventListener('click', function() {
      $('.click-menu').css('display', 'none');
    })
    
    $('.file-content').on('click', function(event){
      if (event.originalEvent.target === $('.file-content')[0]) {
        $('.file-content input[type="checkbox"]').prop('checked', false);
        $('.file-content > div.on').removeClass('on');
      }
    });

  });


  function openFolder(event) {
    $('.upload-items').css('display', 'none');
    if (!$('.panel-item.on')[0]) return alertMessage('폴더 업로드', '업로드할 그룹을 선택해 주세요.', null, 'red');
    $('#folder-upload').click();
  }

  function openFile(event) {
    $('.upload-items').css('display', 'none');
    if (!$('.panel-item.on')[0]) return alertMessage('파일 업로드', '업로드할 그룹을 선택해 주세요.', null, 'red');
    $('#file-upload').click();
  }
  function allSelect(event) {
    const isChecked = $(event.target).is(':checked');
    $('.file-content input[type="checkbox"]').prop('checked', isChecked);
    let method = 'addClass';
    if (!isChecked) {
      method = 'removeClass';
    }
    $('.file-content > div')[method]('on');
  }

  function uploadFiles(event) {
    const files = event.target.files;
    if (files.length === 0) return;
    const alertTitle = '파일 업로드';
    const formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
    const driveFileNames = getDriveFileNames();
    for (let file of files) {
      let fileName = file.name;
      if (driveFileNames.length > 0 && driveFileNames.includes(fileName)) {
        $(event.target).val("");
        return alertMessage(alertTitle, '업로드 경로에 이미 같은 이름의 파일이 있습니다.<br>파일을 업로드 하려면 기존 파일의 명칭을 변경해주세요.<br>파일명 : '+ fileName, null, 'red');
      }
      formData.append('file', file);
    }

    upload(formData);
  }

  function getDriveFileNames() {
    const driveFiles = $('section .file-content div .sp-name');
    const result = [];
    if (driveFiles.length) {
      for (let ii = 0; ii < driveFiles.length; ii++) {
          const name = driveFiles.eq(ii).text();
          if (name && name.trim()) {
            result.push(name);
          }
      }
    }
    return result;
  }

  function uploadFolders(event) {
    const srcEl = event.srcElement;
    const alertTitle = '폴더 업로드';
    if (srcEl && srcEl.files) {
      const files = srcEl.files;
      if (files.length > 100) {
        return alertMessage(alertTitle, '업로드 파일 수 : '+ files.length + '<br>업로드 파일은 최대 100개 까지 가능합니다.', null, 'red');
      }
      let folders = {};
      const siteId = getSitesId();
      let formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
      const driveFileNames = getDriveFileNames();
      if (files.length) {
        const filePath = files[0].webkitRelativePath;
        const rootFolder = filePath.substring(0, filePath.indexOf('/'));
        console.log(rootFolder);
        if (driveFileNames.includes(rootFolder)) {
          $(srcEl).val("");
          return alertMessage(alertTitle, '폴더명 : '+ rootFolder + '<br>업로드 경로에 이미 같은 이름의 폴더가 있습니다.<br>폴더를 업로드 하려면 기존 폴더의 명칭을 변경해주세요.', null, 'red');
        }
      }
      for (let file of files) {
        let path = file.webkitRelativePath;
        path =  '/'+ path.substring(0, path.lastIndexOf('/'));
        formData.append('file', file);
        let filePath = path;

        formData.append(file.name + '_path', filePath);

        if (!folders[path] && path.indexOf('/') >= 0) {
          let folderPath = "";
          if (path.lastIndexOf('/') > 0) {
            folderPath = path.substring(0, path.lastIndexOf('/'));
          }

          let name = path.substring(path.lastIndexOf('/') + 1, path.length);
          formData.append('folder', JSON.stringify({name : name, path : folderPath}));
          folders[path] = true;
        }
      }

      upload(formData);

      $(srcEl).val("");
    }
  }

  function menuOpen(event, className) {
    event.preventDefault();
    event.stopPropagation();
    if ($('.panel-item').length === 0) {
      return;
    }
    const toggleBox = document.getElementsByClassName('toggle-box');
    if (document.getElementsByClassName('toggle-box')){
      $(toggleBox).remove();
    }
    $('.click-menu:not(.'+className+')').css('display', 'none');
    $('.' + className).toggle();
  } 

  function drawDriveFiles(jsonData, parentData, name) {
      _selectedData = [];
      const panel = $('section .panel');
      let panelStr = `<span class="panel-item on">${name}</span>`;
      const $fileContent = $('.file-content');
      const $oneDriveBtn  = $('.one-drive-button');
      let text = name;
      if (name !== 'One Drive') {
        text = 'SharePoint'
      }
      $oneDriveBtn.text(text+'에서 열기');
      $oneDriveBtn.off('click');
      
      if (parentData && parentData.webUrl) {
        $oneDriveBtn.on('click', ()=>{
          window.open(parentData.webUrl);
        });
      };
      if (jsonData && jsonData.value && jsonData.value.length > 0) {
        _selectedData = jsonData;
        const selectedPref = _selectedData.value[0].parentReference;
        if (selectedPref && selectedPref.path) {
          let path = selectedPref.path;
          panelStr = drawPath(path, selectedPref.siteId, name);
        }
        let str = "";
          jsonData.value.forEach((obj, idx)=>{
            dragAndDrop();

            let modifyName = "";
            if (obj.lastModifiedBy && obj.lastModifiedBy.user) {
              modifyName = obj.lastModifiedBy.user.displayName;
            }
            const imageData = getFileImage(obj);
            const images = imageData[0];
            const imageName = imageData[1];
            let amount = '0 Bytes';
            if (obj.size) {
              amount = getVolume(obj.size);
            }
            let modifyDate = obj.lastModifiedDateTime;
            if (modifyDate) {
              modifyDate = modifyDate.replace('T', ' ');
              modifyDate = modifyDate.substring(5, 7)+ '월 '+ modifyDate.substring(8, 10)+ '일';
            }

            // let method = `findOneDriveChildrenItems('${obj.id}')`;(siteId, path, name, value)
            let method = `siteDriveChildrenItems('${obj.parentReference.siteId}','${obj.parentReference.path + '/' + obj.name}','${name}', null, event)`;
            if (obj.file) {
              // method = `downloadItems('${obj['@microsoft.graph.downloadUrl']}', '${obj.name}', event)`;
              method = `openWebUrl('${obj.webUrl}', '${obj.name}', event)`;
            }
            str += `
              <div id="row_${idx}">
                <div>
                  <input type="checkbox" name="row_${idx}" value="${obj.id}" onchange="checkState(event)" onclick="event.stopPropagation()">
                  <img src="${images}" width="32" height="32" alt="${imageName}">
                </div>
                <div class="file_name"><span class="sp-name" onclick="${method}">${obj.name}</span></div>
                <div>${amount}</div>
                <div>${modifyDate}</div>
                <div>${modifyName}</div>
                <div></div>
              </div>`
          });
          $fileContent.html(str);
          $('.file-content > div').on('click', function(e){
            e.preventDefault();
            const checkbox = $('input[name="'+$(this).attr('id') + '"]');
            if (checkbox[0]) {
              const isChecked = checkbox.prop("checked");
              checkbox.prop('checked', !isChecked);
              const method = !isChecked ? 'addClass' : 'removeClass';
              $(this)[method]('on');
            }
          });

          window.addEventListener('click', ()=>{
              if ($('.toggle-box')[0]){
                $('.toggle-box').remove();
              }
          })

          $('.file-content > div').on('mousedown', function(e){
            if ((e.button == 2) || (e.which == 3)) {
              const checkbox = $('input[name="'+$(this).attr('id') + '"]');
              if (!$(this).hasClass('on')) {
                checkbox.prop('checked', true);
                $(this).addClass('on');
              }

              if ($('.toggle-box')[0]) {
                $('.toggle-box').remove();
              }

              const {clientX, clientY} = e;
              const array = $('.file-content input[type="checkbox"]');
              let checkCnt = 0;
              let isChannel = false;
              if (array && array.length > 0) {
                for (let ii = 0; ii < array.length; ii++) {
                  if (array.eq(ii).is(':checked')) {
                      checkCnt++;
                      const chanel = document.getElementById(array.eq(ii).val());
                      if (chanel) {
                        isChannel = true;
                      }
                  }
                }
              }

              const teamId = $('section .panel .panel-item').eq(0).attr('id');
              const teamList = document.querySelector('#my-team').nextElementSibling.nextElementSibling;
              let isTeam = false;
              if (teamList && $(teamList).find('#'+teamId+'_li').length > 0) {
                isTeam = true;
              } 
              let str = `<div>편집</div>`;
              const selectImage = $('section .file-content div.on').find('img');
              if (checkCnt === 1 && 
                  selectImage.length && 
                  isTeam === true &&
                  selectImage.attr('src') !== '/static/images/folder.png') {
                str += `<div onclick="addTabs()">탭으로 설정</div>`;
              }
              str += `<div onclick="download()">다운로드</div>
                      <div onclick="deleteItem()">삭제</div>`;

              if (!isChannel) {
                str +=`<div onclick="moveItem('이동')">이동</div>`;
              }

              str += `<div onclick="moveItem('복사')">복사</div>`;
              
              if (checkCnt === 1) {
                str += `<div onclick="nameChange()">이름 바꾸기</div>`;
              }
              const toggleBox = $(`<div class="toggle-box" style="position:absolute; top:${clientY}; left: ${clientX}">
                  ${str}
                </div>`);
                $('body').append(toggleBox);
            }
          });
        }
        else {
            if (parentData && parentData.folder && parentData.folder.childCount === 0) {
                const refData = parentData.parentReference;
                let path = '';
                if (refData.path) {
                  path = refData.path +'/' + parentData.name;
                }
                panelStr = drawPath(path, refData.siteId, name);
                $oneDriveBtn.off('click');
                
                if (parentData.webUrl){
                  $oneDriveBtn.on('click', ()=>{
                    window.open(parentData.webUrl);
                  });
                }

                $fileContent.html(`<div class="empty-box">
                                    <img src="/static/images/empty_folder_v2.svg" alt="이미지">
                                    <div>이 폴더는 비어 있습니다.</div>
                                  </div>`)
            }
        }
        
        panel.html(panelStr);
    }

    function openWebUrl(url, name, event) {
      window.open(url);
    }

    function addTabs() {
      const fileName = $('section .file-content div.on .file_name').text();
      const siteId = $('section .panel .panel-item').eq(0).attr('id');
      const path = getDrivePath() + '/' + fileName;
      let teamId = null;
      const teamData = _listData.joinedTeams.teams;
      const teamName = $('section .panel .panel-item').eq(0).text().trim();
      const channelName = $('section .panel .panel-item').eq(1).text().trim();
      if (teamData && teamData.length > 0) {
        let idx = teamData.findIndex(obj=> obj.displayName === teamName);
        if (idx >= 0) {
          teamId = teamData[idx].id;
        }
      }
      console.log(fileName , siteId , teamId , path, teamName, channelName);
      if (fileName && siteId && teamId && path && teamName && channelName) {
        //teams/a677e58b-0812-4abb-887f-4c49f5adfa3d/channels
        $.ajax({
          method : 'post',
          url : '/api/add-tab',
          data : {
            siteId : siteId,
            path : path,
            name : fileName,
            teamId : teamId,
            teamName : teamName,
            channelName : channelName,
          },
          success : (res) => {
            console.log(res);
          },
          error : (error) => {
            console.log(error);
          }
        })
        // callApi('get', '/sites/' + siteId + path + '/'+ fileName, (jsonData)=>{
        //   console.log(jsonData);
        // });
        // const param = {
        //   displayName: fileName,
        //   webUrl : "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/06805b9e-77e3-4b93-ac81-525eb87513b8",
        //   "configuration": {
        //     "entityId": "2DCA2E6C7A10415CAF6B8AB6661B3154",
        //     "contentUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/tabView",
        //     "websiteUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154",
        //     "removeUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/uninstallTab"
        //   }
        // }
      }
      else {
        alertMessage('탭으로 설정', '탭으로 설정 할 파일 정보를 확인 해주세요.');
      }
      // const param = {
      //   "displayName": "My Contoso Tab",
      //   "teamsApp@odata.bind" : "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/06805b9e-77e3-4b93-ac81-525eb87513b8",
      //   "configuration": {
      //     "entityId": "2DCA2E6C7A10415CAF6B8AB6661B3154",
      //     "contentUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/tabView",
      //     "websiteUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154",
      //     "removeUrl": "https://www.contoso.com/Orders/2DCA2E6C7A10415CAF6B8AB6661B3154/uninstallTab"
      //   }
      // }
      // $.ajax({
      //   url : '/api/add-tabs'

      // })
    }

    //파일별 이미지 세팅
    function getFileImage(obj) {
      let images = "/static/images/";
      let imageName = "";

      if (obj.folder || obj.driveType) {
        images += "folder.png";
        imageName = "폴더 이미지";
      }
      else if (obj.file && obj.name) {
        imageName = "파일 이미지";
        let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
        let imageExt = ".svg";
        //photo 
        // if (obj.file.mimeType && obj.file.mimeType.includes('image')){
        if (['psd', 'bmp', 'rle', 'dib', 'jpeg', 'jpg', 'gif', 'png', 'tiff', 'raw', 'ico'].includes(ext)){
          ext = 'photo';
        }
        else if (['ai', 'eps', 'svg'].includes(ext)) {
          ext = 'vector';
        }
        else if (['txt', 'properties'].includes(ext)) {
          ext = 'txt';
        }
        else if (['pptx', 'ppt', 'pptm'].includes(ext)) {
          ext = 'pptx';
        }
        else if (['xlsx', 'xlsm', 'xlsb', 'xltx'].includes(ext)) {
          ext = 'xlsx';
        }
        else if (['pdf'].includes(ext)) {
          ext = 'pdf';
        }
        else if (['doc', 'docx'].includes(ext)) {
          ext = 'docx';
        }
        else if (['one', 'onetoc'].includes(ext)) {
          ext = 'onetoc';
        }
        else if (['vsd', 'vdx', 'vdw', 'vstx', 'vstm', 'vst', 'vtx', 'vsdx'].includes(ext)) {
          ext = 'vsdx';
        }
        else if (['zip', 'apk', 'rar', '7z', 'tar'].includes(ext)) {
          ext = 'zip';
        }
        else if (['jsp', 'js', 'css', 'php', 'ini', 'yml', 'json', 'java', 'c', 'cpp', 'h', 'm', 'mm', 
                  'pl', 'o', 'class', 'as', 'asp', 'cs', 'md', 'ps1', 'ps2'].includes(ext)) {
          ext = 'code';
        }
        else if (['html'].includes(ext)) {
          ext = 'html';
        }
        else if (['exe', 'msi'].includes(ext)) {
          ext = 'exe';
        }
        else if (['jar', 'war', 'cab', 'dll', ].includes(ext)) {
          ext = 'sysfile';
        }
        else if (['mp4', 'mov', 'Webm', 'mp3','wav', 'Ogg'].includes(ext)) {
          ext = 'clipchamp';
        }
        else if (['bdf', 'chr', 'dfont', 'eot','etx', 'fnt', 'gdr', 'gf', 'mcf', 'xft', 'ttf', 'woff2',
        'mf', 'otf', 'pfa', 'pfb', 'pfr', 'sfd', 'suit', 'tfm', 'ttc', 'vlw', 'woff', 'xfn'].includes(ext)) {
          ext = 'font';
        }
        else if (['xml'].includes(ext)) {
          ext = 'xml';
        }
        else {
          ext = 'genericfile';
        }
        images += ext + imageExt;
      }
      else {
        imageName = "파일 이미지";
        images += 'genericfile.svg';
      }

      return [images, imageName];
    }

    function moveItem(text) {
      const alertTxt = '파일 '+ text;
      const moveArr = $('.file-content div.on input[type="checkbox"]');
      if (moveArr.length === 0) {
        return alertMessage(alertTxt, '선택 된 파일 정보가 없습니다.');
      }

      $.ajax({
          method: 'post',
          url : "/getGroupList",
          success: (res)=> {
            // drawList(res);
            let oneDriveId = "";
            if (res.oneDrive) {
              oneDriveId = res.oneDrive.teams.sharePoint.siteId;
            }
            let str = `<div class="modal move" style="display: flex;">
                          <div class="modal-move-box">
                              <div class="left-box">
                                  <h3 style="padding: 10px;">${moveArr.length}개 항목 ${text}</h3>
                                  <div id="move_${oneDriveId}" class="my-file" onclick="setContent('${oneDriveId}', event)"><img src="/static/images/folder-icon.png" alt="폴더 이미지">&nbsp;&nbsp;내 파일</div>
                                  <div class="">
                                      <div></div>
                                  </div>
                                  <div class="access-box">
                                      <div class="access">빠른 엑세스</div>`;
                                      if (res) {
                                        const {joinedTeams, oneDrive, sites} = res;
                                        const groupImageUrl = "/_api/siteiconmanager/getsitelogo?type='1'";
                                        if (joinedTeams.teams.length > 0) {
                                          const jTeam = joinedTeams.teams;
                                          jTeam.forEach((obj, idx)=>{
                                            const share = obj.sharePoint;
                                            str += `<div id="move_${share.siteId}" onclick="setContent('${share.siteId}', event)">
                                                      <div>
                                                        <img width="25" height="25" src="${share.siteUrl}${groupImageUrl}" alt="아이콘">
                                                        <div>${obj.displayName}</div>
                                                      </div>
                                                    </div>` 
                                          });
                                        }
                                        
                                        if (sites.teams) {
                                            const sTeam = sites.teams;
                                            const share = sTeam.sharePoint;
                                            str += `<div id="move_${share.siteId}" onclick="setContent('${share.siteId}', event)">
                                                      <div>
                                                        <img width="25" height="25" src="${share.siteUrl + groupImageUrl}" alt="아이콘">
                                                        <div>${sTeam.displayName}</div>
                                                      </div>
                                                    </div>` 
                                        }
                                      }
                                      str +=`<div>
                                          <div style="color: rgb(91, 95, 199); margin-left: 15px;">더 많은 장소...</div>
                                      </div>
                                  </div>
                              </div>
                              <div class="right-box">
                                  <div class="panel"></div>
                                  <div class="content">
                                    <div class="header">
                                      <div><img src="/static/images/file.png" width="20" alt="파일"></div>
                                      <div>이름</div>
                                      <div>수정된 날짜</div>
                                      <div>수정한 사람</div>
                                    </div>
                                    <div class="list">
                                    </div>
                                  </div>
                                  <div class="button-box">
                                      <div id="move-btn" onclick="moveUpdate('${text}')">여기로 ${text}</div>
                                      <div onclick="modalClose('move')">취소</div>
                                  </div>
                              </div>
                          </div>
                      </div>`;
            $('body').append($(str));
            if (res.joinedTeams && res.joinedTeams.teams.length > 0) {
              const firstId = "move_" + res.joinedTeams.teams[0].sharePoint.siteId;
              $('#'+firstId).click();
            }
          },
          error: (error)=> {
            console.log(error);
          }
      })
    }

    function moveUpdate(text) {
      const alertTitle = '파일 '+ text;
      const selectedDrive = $('.modal-move-box .left-box div.on');
      const siteId = selectedDrive.attr('id');
      const pathArr = $('.modal-move-box .right-box .panel .panel-item');
      const fileArr = $('.modal-move-box .list .file-name');
      const moveArr = $('section .file-content div.on .sp-name');
      if (moveArr && moveArr.length && fileArr && fileArr.length) {
        for (let ii = 0; ii < moveArr.length; ii++) {
          for (let jj = 0; jj < fileArr.length; jj++) {
              if (moveArr.eq(ii).text() === fileArr.eq(jj).text()) {
                return alertMessage(alertTitle, '파일명 : ' + moveArr.eq(ii).text() +'<br>대상 경로에 이미 같은 이름의 파일이 있습니다.<br>파일을 '+text+' 하려면 해당 파일의 명칭을 변경해주세요.');
              }
          }
        }
      }

      if (selectedDrive[0] && siteId) {
        let path = getDrivePath(true);
        const currentId = $('section .panel-item').eq(0).attr('id');
        const selectId = siteId.replace('move_', '');

        if (selectId === currentId && path === getDrivePath()) {
          return alertMessage(alertTitle, '대상 경로는 원본 개체와 같을 수 없습니다.');
        }
        callApi('get', '/sites/'+ currentId + getDrivePath(), (itemData)=>{
          if (itemData && itemData.id){
            const itemId = itemData.id;
            callApi('get', '/sites/'+ selectId + path, async (jsonData)=>{
              const $selectedItems = $('.file-content div.on');
              const name = [];
              let str = `<div class="loading-box"><div>파일 생성중입니다...</div>`;
              for (let ii = 0; ii < $selectedItems.length; ii++) {
                const selectCheck =  $selectedItems.eq(ii).find('input[type="checkbox"]');
                const selectName = $selectedItems.eq(ii).find('.sp-name');
                const isFolder = ($selectedItems.eq(ii).find('img').attr('src') === '/static/images/folder.png');
                const idArr = [];
                if ($selectedItems.eq(ii) && selectCheck.length && selectName.length) {
                    name.push({
                      id : selectCheck.val(),
                      name : selectName.text(),
                      isFolder : isFolder,
                    });
                    str += `<div>
                              <div>
                                <div>${selectName.text()}</div>
                                <div class="loading_image_${ii}_box">
                                  <img class="loading_image_${ii}" src="/static/images/refresh.png" alt="로딩 이미지" width="25" height="25">
                                </div>
                              </div>
                              <div class="loading-gauge-box">
                                <div>
                                  <div class="loading-background"></div>  
                                  <div class="loading-gauge gauge_${ii}"></div>  
                                </div>
                                <div><span class="gauge_${ii}_value">0</span> %</div>
                              </div>
                            </div>`
                }
              }

              if (jsonData && jsonData.id) {
                let uri = '/api/copy-item';
                if (selectId === currentId) {
                  uri = '/api/move-item';
                }
                else {
                  $('.modal-move-box .content').append(str);
                }
                let param = {
                  siteId : currentId,
                  itemId : itemId,
                  id : jsonData.id,
                  name : JSON.stringify(name),
                  driveId : jsonData.parentReference.driveId,
                  text : text,
                }
              
                $.ajax({
                  method : 'post',
                  url : uri,
                  data : param,
                  global: false,
                  success : (res) => {
                    if (res){
                      let message = res.message;
                      let failIndexes = [];
                      if (res.failItems && res.failItems.length) {
                        res.failItems.forEach((failItem)=>{
                          let idx = name.findIndex(obj=> obj.name === failItem.name);
                          failIndexes.push(idx);
                          $('.loading_image_' + idx).remove();
                          $('.loading_image_' + idx +'_box').html('실패');
                        });
                      }

                      if (res.locations && res.locations.length > 0) {
                        // function getLoadingState(arr, totalCount){
                        //   Promise.all(res.locations.map((val, idx) => {
                        //     if (failIndexes.includes(idx)) {
                        //       return null;
                        //     }
                        //     if (name[idx].isFolder) {
                        //       return $.ajax({ url: '/api/folder-count', global : false, method: 'post', 
                        //                       data: { id: jsonData.id, siteId: selectId, name: name[idx].name, 
                        //                             originSiteId: currentId, originId: name[idx].id, totalCount: totalCount }
                        //                     });
                        //     }
                        //     return $.ajax({url: '/api/loading', global: false, method:'post', data: {url: val}});
                        //   }))
                        //   .then((values)=>{
                        //     console.log(values);
                        //     if (values) {
                        //       const array = [];
                        //       for (let idx in values) {
                        //         const value = values[idx];
                        //         if (value && value.percentageComplete) {
                        //           if (value.percentageComplete !== 100) {
                        //             array.push(res.locations[idx]);
                        //           }
                        //           else {
                        //             $('.loading_image_' + idx).remove();
                        //             $('.loading_image_' + idx +'_box').html('완료됨');
                        //           }
                        //           const percent = value.percentageComplete;
                        //           $('.gauge_'+ idx).css('width', percent+'%');
                        //           $('.gauge_'+ idx + '_value').html(percent);
                        //         }
                        //         else if(value && value.totalCount){
                        //           console.log(value);
                        //         }
                        //       }
                        //       if (array.length) {
                        //         setTimeout(()=>{
                        //           getLoadingState(array);
                        //         }, 2000)
                        //       }
                        //       else {
                        //         if (text === '이동') {
                        //           const checkedArr = [];
                        //           name.forEach((obj)=>{
                        //             checkedArr.push(obj.id);
                        //           });
                        //           $.ajax({
                        //             url: '/api/delete', 
                        //             global: false, 
                        //             method:'post', 
                        //             data: {
                        //               siteId : currentId,
                        //               itemIds : JSON.stringify(checkedArr),
                        //             },
                        //             success: (res)=>{
                        //               console.log();
                        //               if (res && res.success === 'S') {
                        //                 alertMessage(alertTitle, message);
                        //                 const selected = $('section .panel-item.on');
                        //                 selected.removeClass('on');
                        //                 selected.click();
                        //                 modalClose('move');
                        //               }
                        //             },
                        //             error : (error)=>{
                        //               console.log(error);
                        //             }
                        //           });
                        //         }
                        //         else {
                        //           alertMessage(alertTitle, message);
                        //           const selected = $('section .panel-item.on');
                        //           selected.removeClass('on');
                        //           selected.click();
                        //           modalClose('move');
                        //         }
                        //       }
                        //     }
                        //   })
                        //   .catch((error)=>{
                        //     console.log(error);
                        //   })
                        // }
                        // getLoadingState(res.locations);
                        // jsonData.id, siteId: selectId, name: name[idx].name, 
                        //                             originSiteId: currentId, originId: name[idx].id, totalCount: totalCount 
                        for (let idx in res.locations) {
                          if (!failIndexes.includes(idx)) {
                              getFileState(jsonData.id, selectId, name[idx].name, currentId, name[idx].id, 0, 
                              res.locations[idx], name[idx].isFolder, idx, alertTitle, message);
                          }
                        }
                      }
                      else {
                        alertMessage(alertTitle, message);
                        const selected = $('section .panel-item.on');
                        selected.removeClass('on');
                        selected.click();
                        modalClose('move');
                      }
                    }
                  },
                  error : (error) => {
                    console.log(error);
                  }
                })
              }
              else {
                alertMessage(alertTitle, '선택된 그룹 정보를 찾을 수 없습니다.');
              }
            });
          }
          else {
            alertMessage(alertTitle, '선택된 그룹 정보를 찾을 수 없습니다.');
          }
        });
      }
      else {
        alertMessage(alertTitle, '선택된 그룹 정보를 찾을 수 없습니다.');
      }
    }

    function getFileState(id, siteId, name, originSiteId, originId, totalCount, value, isFolder, idx, alertTitle, message) {
      const wss = new WebSocket('wss://localhost:53000/');
      wss.onopen = (event)=>{
        console.log('WebSocket Connection');
        wss.send(JSON.stringify({id: id, siteId : siteId, name: name, originSiteId : originSiteId, 
                                originId : originId, totalCount: totalCount, value : value, isFolder : isFolder}));
      };
      
      wss.onclose = (event)=>{
        console.log('WebSocket Close')
      };
      
      wss.onmessage = async (event)=>{
        if (event.data) {
          const percent = event.data;
          $('.gauge_'+ idx).css('width', percent+'%');
          $('.gauge_'+ idx + '_value').html(percent);
          if (percent === '100') {
            $('.loading_image_' + idx).remove();
            $('.loading_image_' + idx +'_box').html('완료됨');
            try {
              const deleteData = await $.ajax({
                url: '/api/delete', 
                global: false, 
                method:'post', 
                data: {
                  siteId : originSiteId,
                  itemIds : JSON.stringify([originId]),
                },});
                console.log(deleteData);
            }
            catch(error) {
              console.log(error);
            }

            if ($('.modal.move').length && $('img[src="/static/images/refresh.png"]').length === 0) {
              alertMessage(alertTitle, message);
              const selected = $('section .panel-item.on');
              selected.removeClass('on');
              selected.click();
              modalClose('move');
            }
            wss.close();
          }
        }
      };
      
      wss.onerror = (event)=>{
        console.log('에러 :',event.data)
      };
    }

    function setContent(siteId, event) {
      const $selectEl = $('#move_' + siteId);
      const $selectedEl = $('.modal-move-box .left-box div.on');
      const selectTitle = $('.modal-move-box .panel-item.on').text().trim();
      if ($selectEl.text().trim() === selectTitle) {
        return;
      }

      $selectedEl.removeClass('on');
      $selectEl.addClass('on');
      drawMoveItems(siteId, '/drive/root');
    }

    function drawMoveItems(siteId, path) {
        const $panel = $('.modal .modal-move-box .right-box .panel');
        const imgSrc = $('#move_' + siteId+ ' img').attr('src');
        const text = $('#move_' + siteId).text().trim();
        let onOff = 'on';
        if (path && path.includes('/drive/root:')) {
          onOff = '';
        }
      
        let str = "";
        if (path && path.includes('/drive/root:')) {
          str = `<div class="panel-item" onclick="drawMoveItems('${siteId}', '/drive/root')">`
          if (text !== '내 파일') {
            str +=`<img width="24" height="24" src="${imgSrc}" alt="아이콘">&nbsp;&nbsp;`
          }
          str +=`${text}</div>`;
          let itemPath = path.replace('/drive/root:/', '');
          let pathArr = itemPath.split('/');
          if (pathArr && pathArr.length > 0) {
            let directoryRoot = '';
            let id = "";
            pathArr.forEach((directory, idx)=>{
              if (directory) {
                onOff = '';
                directoryRoot += `/${directory}`;
                let method = `drawMoveItems('${siteId}', '/drive/root:${directoryRoot}')`;
                if (idx === pathArr.length - 1) {
                  onOff = 'on'
                  method = '';
                }
                
                str += `<div> > </div><div class="panel-item ${onOff}" onclick="${method}">${directory}</div>`
              }
            })
          }
        }
        else {
          str = `<div class="panel-item on">`
          if (text !== '내 파일') {
            str +=`<img width="24" height="24" src="${imgSrc}" alt="아이콘">&nbsp;&nbsp;`
          }
          str +=`${text}</div>`;
        }
        
        $panel.html(str);
        const menuWidth =  $('.modal .modal-move-box .right-box').width() - 40;
        const menuArr = $panel.children();
        
        let totalWidth = 0;
        for (let ii = 0; ii < menuArr.length; ii++) {
          const menu = menuArr.eq(ii);
          let gap = 10;
          if ( menuArr.length-1 === ii) {
            gap = 0;
          }
          totalWidth += menu.width() + gap;
        }
        if (menuWidth < totalWidth) {
          let div = '<div class="toggle-button">';
          for (let ii = 0; ii < menuArr.length; ii++) {
            const menu = menuArr.eq(ii);
            
            totalWidth -= menu.width() + 10;
            if (menu.attr('class') && menu.attr('class').trim() === 'panel-item') {
                div += `<div onclick="${menu.attr('onclick')}">${menu.text().trim()}</div>`;
            }
            menu.css('display', 'none');

            if (menuWidth - 30 >= totalWidth && !menu.attr('class')) {
              div += '</div>';
              break;
            }
          }
          console.log(div);
          $panel.prepend($(`<div class="menu-button"><img src="/static/images/dote.png" width="20" height="20"></div>
            ${div}
          `));
          $('.menu-button').off('click');
          $('.menu-button').on('click', ()=>{
            $('.toggle-button').toggle();
          })
        }
        callApi('get', '/sites/' + siteId + path, (parentData)=>{
          const $list = $('.modal-move-box .right-box .content .list');
          if (parentData && parentData.folder && parentData.folder.childCount) {
            callApi('get', '/sites/' +siteId +'/drive/items/' + parentData.id + '/children', (childrenData)=>{
              const items = childrenData.value;
              if (items && items.length > 0) {
                let listStr = "";
                for (let idx in items) {
                  const item = items[idx];
                  let itemPath = '/drive/root';
                  if (item.parentReference && item.parentReference.path) {
                    itemPath = item.parentReference.path + '/' + item.name;
                  }
                  listStr += getListStr(item, idx, siteId, itemPath);
                }
                $list.html(listStr);
              }
              else {
                listStr = getListStr(null, null, siteId);
                $list.html(listStr);
              }
            })
          }
          else {
            $list.html(getEmptyBox());
          }
          
        })
    }

    function getListStr(obj, idx, siteId, itemPath) {
      if (obj && !isNaN(Number(idx)) && siteId){
        let isFolder = obj.folder;
        let className = '';
        let date = '-';
        let name = '-';
        let modifyName = '-';
        let path = '/drive/root';
        let method = `drawMoveItems('${siteId}', '${itemPath}')`;
        if (!isFolder) {
          className = 'off';
          method = '';
        }

        if (obj.name) {
          name = obj.name;
        }

        if (obj.lastModifiedBy && obj.lastModifiedBy.user && obj.lastModifiedBy.user.displayName) {
          modifyName = obj.lastModifiedBy.user.displayName;
        }

        if (obj.lastModifiedDateTime) {
          date = obj.lastModifiedDateTime.substring(0, obj.lastModifiedDateTime.indexOf('T'));
        }

        const imgData = getFileImage(obj);
        return  `<div class="move_row row_${idx} ${className}">
                      <div><img src="${imgData[0]}" alt="${imgData[1]}" width="25" height="25"></div>
                      <div><span onclick="${method}" class="file-name">${name}</span></div>
                      <div>${date}</div>
                      <div>${modifyName}</div>
                    </div>`;
        
      }
      else {
        return getEmptyBox();
      }
    }

    function getEmptyBox() {
      return `<div class="empty-box">
                <img src="/static/images/empty_folder_v2.svg" alt="이미지">
                <div>이 폴더는 비어 있습니다.</div>
              </div>`
    }

    //새로고침 이벤트
    function refreshDrive() {
        const selectedDrive = $('.panel-item.on');
        if (selectedDrive[0]) {
          selectedDrive.removeClass('on');
          selectedDrive.click();
        }
    }

    //체크에 따른 css 적용
    function checkState(event){
      const $target = $(event.target);
      const $row = $('#'+$target.attr('name'));
      let method = 'removeClass';
      if ($target.is(':checked')) {
        method = 'addClass';
      }
      $row[method]('on');
    }

    //삭제 이벤트
    function deleteItem() {
      const checkArr = $('.file-content input[type="checkbox"]');
      const checkedArr = [];
      let siteId = getSitesId();

      if (!siteId) {
        return alertMessage('파일 삭제','그룹 정보를 확인 할 수 없습니다.');
      }
      if (checkArr.length > 0) {
        for (let ii = 0; ii < checkArr.length; ii++) {
          if (checkArr.eq(ii).is(':checked')) {
            const title = checkArr.eq(ii).parent().next().text();
            const team = _listData.joinedTeams;
            const idx = team.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
            if (idx >= 0) {
              const sameIndex = team.items[team.teams[idx].id].findIndex(obj => obj.id === checkArr.eq(ii).val());
              if (sameIndex >= 0) {
                return alertMessage('파일 삭제', '채널 정보는 삭제하실수 없습니다.');
              };
            }

            checkedArr.push(checkArr.eq(ii).val());
          }
        }
        if (checkedArr.length === 0) {
          alertMessage('파일 삭제', '선택된 정보가 없습니다. 삭제하실 파일을 먼저 선택해주세요.');
        }
        else {
          confirmMessage('파일 삭제', '선택된 파일을 삭제하시겠습니까?', ()=>{
            $.ajax({
                method:'post',
                url : "/api/delete",
                data: {
                  siteId: siteId,
                  itemIds : JSON.stringify(checkedArr),
                },
                success: (res)=> {
                  if (res.success === 'S') {
                    refreshDrives();
                  }
                  $('.modal').remove();
                  alertMessage('파일 삭제', res.message);
                },
                error: (error)=> {
                  console.log(error);
                }
              })
          })
        }
      }
    }


    //폴더 경로 가져오기
    function getDrivePath(isMove) {
      let path = '/drive/root';
      let $pathArr = $('section .panel-item');
      if (isMove) {
        $pathArr = $('.modal-move-box .panel-item');
      }
      if ($pathArr.length > 1) {
        path += ':';
        for (let ii = 1; ii <  $pathArr.length; ii++) {
            path += '/' + $pathArr.eq(ii).text();
        }
      }
      return path;
    }

    //다운로드 이벤트
    function download(){
      const fileArr = $('.file-content input[type="checkbox"]');
      if (fileArr || fileArr.length) {
        const fileIdArr = [];
        for (let ii = 0; ii < fileArr.length; ii++) {
            const isChecked = fileArr.eq(ii).is(':checked');
            if (isChecked) {
              fileIdArr.push(fileArr.eq(ii).val());
            }
        }
        if (fileIdArr.length === 0) return alertMessage('다운로드', '다운로드 할 파일을 선택해주세요.');

        $.ajax({
          method: 'post',
          url : '/api/download',
          data : {
            siteId : getSitesId(),
            path : getDrivePath(),
            fileIds : JSON.stringify(fileIdArr),
            zipName : $('.panel-item.on').text().trim(),
          },
          success: (res)=>{
            if (res.success === 'S') {
              const dataUrl = window.URL.createObjectURL(new Blob([new Uint8Array(res.data.data).buffer]));
              const link = document.createElement('a');
              link.href = dataUrl;
              link.download = res.name;
              link.style.display = 'none';
              $('body').append(link);
              link.click();
              link.remove();
            }
            else {
              let message = res.message;
              if (res.error) {
                message += '<br>' + res.error;
              }
              alertMessage('다운로드', message);
            }
          },
          error : (error) => {
            console.log(error);
          }

          
        })
      }
    }

    function drawPath(path, siteId, name) {
      let imgSrc = '';
      let panelStr = '';
      if ($('#'+siteId + '_li').find('img')[0]) {
        imgSrc = $('#'+siteId + '_li').find('img').attr('src');
      }

      if (path) {
        let formatPath = path.substring(path.lastIndexOf('root:') + 5);
        
        if (formatPath) {
          formatPath = formatPath.substring(1);
          formatPath = formatPath.split('/');
          panelStr = `<span class="panel-item" id="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}', event)">`;
          if (imgSrc) {
            panelStr += `<img style="margin-right:5px;" width="24" height="24" src="${imgSrc}" alt="이미지">`
          }
          panelStr += ` ${name}</span>`;
          let itemPath = "/drive/root:";
          if (Array.isArray(formatPath)) {
            for(let ii = 0; ii < formatPath.length; ii++) {
              let pathName = formatPath[ii];
              let className = 'panel-item';
              itemPath += "/" + pathName;
              let method = `siteDriveChildrenItems('${siteId}','${itemPath}', '${name}', null, event)`;
              if (formatPath.length - 1 === ii) {
                className += ' on';
                // method = '';
              }
              
              panelStr += `<span> > </span><span class="${className}" onclick="${method}">${pathName}</span>`;
            }
          }
          return panelStr;
        }
      }
      
      panelStr = `<span class="panel-item on" id="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}', event)">`;
      if (imgSrc) {
        panelStr += `<img style="margin-right:5px;" width="24" height="24" src="${imgSrc}" alt="이미지">`
      }

      panelStr += ` ${name}</span>`;

      return panelStr;
    }

    function dragAndDrop() {
      const $fileContent = $('.file-content');
      $fileContent.off('dragover');
      $fileContent.off('dragleave');
      $fileContent.off('drop');

      $fileContent.on('dragover', function(e){
          e.preventDefault();
          $(this).css('background-color', '#eee');
      });
      $fileContent.on('dragleave', function(e){
          $(this).css('background-color', '#f5f5f5');
        
      })

      $fileContent.on("drop", async function(e){
        const transfer = e.originalEvent.dataTransfer;
          e.preventDefault();
          
          $(this).css('background-color', '#f5f5f5');
          const items = transfer.items;
          _formData = new FormData($('<form enctype="multipart/form-data"></form>')[0]);
          const result = await getFilesDataTransferItems(items);
          upload(_formData);
      });
    }

  async function upload(formData) {
        const folders = formData.getAll('folder');
        const files = formData.getAll('file');
        const alertTitle = '파일 업로드';
        if (folders.length === 0 && files.length === 0) return;
        
        if (folders && folders.length > 100) {
          return alertMessage(alertTitle, '업로드 폴더는 최대 100개 까지 가능합니다.<br>업로드 폴더 수 : '+ folders.length, null, 'red');
        }

        if (files && files.length > 100) {
          return alertMessage(alertTitle, '업로드 파일은 최대 100개 까지 가능합니다.\n업로드 파일 수 : '+ files.length, null, 'red');
        }
        let siteId = getSitesId();
        if (siteId === null) {
          return alertMessage(alertTitle, '선택된 그룹 정보를 찾을 수 없습니다. 생성할 그룹을 선택해주세요.', null, 'red');
        }
        
        const groupIndex = _listData.joinedTeams.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
        const pathArr = $('.panel').children();

        if (groupIndex >= 0 && $('.panel').children().length === 1) {
          return alertMessage(alertTitle,'채널에는 업로드 할 수 없습니다. 채널 리스트를 먼저 선택해 주세요.', null, 'red');
        }

        let sitePath = getDrivePath();

        formData.append('siteId', siteId);
        formData.append('path', sitePath);

        $.ajax({
          method: 'post',
          processData : false,
          contentType : false,
          data : formData,
          url : '/api/upload',
          success: (res) => {
            let str = res.message;
            let color = null;
            if (res.success === 'F') {
              // str += '<br>오류 : ' + res.error.message;
              color = 'red';
            }
            alertMessage(alertTitle, str, null, color);
            refreshDrives();
            
          },
          error: (error) => {
            console.log(error);
            alertMessage(alertTitle, error, null, 'red');
          },
          
        });
    }

    function alertMessage(title, message, id, color) {
      let method = "modalClose('alert')";
      if (id) {
        method = `modalClose('alert', '${id}')`;
      }
      
      $('body').append($(`<div class="modal alert" style="display:flex;">
          <div class="modal-box">
            <div class="header">
                  <div class="title">${title}</div>
                  <div class="x-button">
                    <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('alert')"></span>
                  </div>
                </div>
                <div class="modal-content">
                  ${message}
                </div>
                <div class="button-box">
                    <div class="name-btn" onclick="${method}">확인</div>
                </div>
            </div>
          </div>
        </div>`));
        if (color) {
          $('.modal.alert').addClass(color);
        }
    }

    function confirmMessage(title, message, method) {
      $('body').append($(`<div class="modal confirm" style="display:flex;">
          <div class="modal-box">
            <div class="header">
                  <div class="title">${title}</div>
                  <div class="x-button">
                    <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('confirm')"></span>
                  </div>
                </div>
                <div class="modal-content">
                  ${message}
                </div>
                <div class="button-box">
                    <div class="success-button" >확인</div>
                    <div class="name-btn" onclick="modalClose('confirm')">취소</div>
                </div>
            </div>
          </div>
        </div>`));
        $('.success-button').on('click', ()=>{
          method();
        })
    }

    function confirmMethod(method) {
        method();
    }

    function getUploadItems(dataTransferItems) {
        for (let item of dataTransferItems) {
          if (item.isFile) {
            item.file(file => {
              _formData.append('file', file);
              _formData.append(file.name + '_path', item.fullPath);
            })
          }
          else if (item.isDirectory) {
            _formData.append('folder', JSON.stringify({name : item.name, path : item.fullPath}));
            // _formData.append('path', item.fullPath);
            let dirReader = item.createReader();
            dirReader.readEntries(entries => {
              for (let entry of entries) {
                getUploadItems(entry);
              }
            })
          }
        }
    }
    
  //   function getFilesDataTransferItems(dataTransferItems) {
  //     function traverseFileTreePromise(item, folder) {
  //       return new Promise(resolve => {
  //         let subfolder = [];
  //         let files = [];
  //         let fileObj = {};

  //         if (item.isFile) {
  //           item.file(file => {
  //             let fileName = file.name;
  //             // if (file.name.indexOf('.') > 0) {
  //             //   fileName = file.name.substring(0, file.name.lastIndexOf('.'));
  //             // }
  //             let path = item.fullPath.substring(0, item.fullPath.lastIndexOf('/'));
  //             if (!path) {
  //               path = '';
  //             }
  //             _formData.append('file', file);
  //             _formData.append(fileName + '_path', path);
  //             resolve(fileObj);
  //           });
  //         } else if (item.isDirectory) {
  //           let dirReader = item.createReader();
  //           const path = item.fullPath.substring(0, item.fullPath.lastIndexOf('/'));
  //           _formData.append('folder', JSON.stringify({name : item.name, path : path}));
  //           dirReader.readEntries(entries => {
  //             let entriesPromises = [];
  //             fileObj = {
  //               path : item.fullPath,
  //               param : {
  //                 name: item.name,
  //                 folder: {},
  //                 '@microsoft.graph.conflictBehavior': 'rename'
  //               },
  //               subfolder : subfolder,
  //             };
  //             folder.push(fileObj);
                
  //             for (let entr of entries) {
                
  //               entriesPromises.push(
  //                 traverseFileTreePromise(entr, subfolder)
  //               );
  //             }
  //             resolve(Promise.all(entriesPromises));
  //           });
  //         }
  //       });
  //     }

  //     let files = [];
  //     return new Promise((resolve, reject) => {
  //       let entriesPromises = [];
  //       for (let it of dataTransferItems)
  //         entriesPromises.push(
  //           traverseFileTreePromise(it.webkitGetAsEntry(), files)
  //         );
  //       Promise.all(entriesPromises).then(entries => {
  //         resolve(files);
  //       });
  //     });
  // }

  function getFilesDataTransferItems(dataTransferItems) {
      function traverseFileTreePromise(item, folder) {
        return new Promise(resolve => {
          let subfolder = [];
          let files = [];
          let fileObj = {};

          if (item.isFile) {
            item.file(file => {
              let fileName = file.name;
              // if (file.name.indexOf('.') > 0) {
              //   fileName = file.name.substring(0, file.name.lastIndexOf('.'));
              // }
              let path = item.fullPath.substring(0, item.fullPath.lastIndexOf('/'));
              if (!path) {
                path = '';
              }
              _formData.append('file', file);
              _formData.append(fileName + '_path', path);
              console.log(path);
              resolve(fileObj);
            });
          } else if (item.isDirectory) {
            let dirReader = item.createReader();
            const path = item.fullPath.substring(0, item.fullPath.lastIndexOf('/'));
            _formData.append('folder', JSON.stringify({name : item.name, path : path}));
            console.log(path);
            dirReader.readEntries(entries => {
              let entriesPromises = [];
              fileObj = {
                path : item.fullPath,
                param : {
                  name: item.name,
                  folder: {},
                  '@microsoft.graph.conflictBehavior': 'rename'
                },
                subfolder : subfolder,
              };
              folder.push(fileObj);
                
              for (let entr of entries) {
                
                entriesPromises.push(
                  traverseFileTreePromise(entr, subfolder)
                );
              }
              resolve(Promise.all(entriesPromises));
            });
          }
        });
      }

      let files = [];
      return new Promise((resolve, reject) => {
        let entriesPromises = [];
        for (let it of dataTransferItems)
          entriesPromises.push(
            traverseFileTreePromise(it.webkitGetAsEntry(), files)
          );
        Promise.all(entriesPromises).then(entries => {
          resolve(files);
        });
      });
  }

    function encryptFile(file, driveId) {
      const extArr = [ 
        'lnk', 'exe', 'com', 'cmd', 'bat', 'dll', 'ini', 
        'pst', 'sca', 'drm', 'sys', 'cpl', 'inf', 'drv', 
        'dat', 'tmp', 'msp', 'msi', 'pdb', 'jar'
      ]
      if (file && file.name) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1);
        if (extArr.includes(ext)) {
          const modal = `<div class="modal error" style="display: flex;">
                            <div style="display:flex; border:1px solid red; flex-direction: column; padding:20px;justify-content:center;width:400px;height:120px; background-color:white;">
                                <div style='width:100%;margin-bottom:10px; height:40px;display:flex;justify-content:space-between; align-items:center; font-weight: bold; font-size: 18px;'>
                                  <div style="">파일 형식 오류</div>
                                  <div onclick="modalClose('error')" style="cursor:pointer; user-select:none;">x</div>
                                </div>
                                <div>
                                  암호화 할수 없는 형식의 파일입니다.<br>
                                  파일명 : ${file.name}
                                </div>
                            </div>
                        </div>`;
          $('body').append($(modal));
          return;
        }

      }
    }


    function callApi(type, uri, callBackMethod, args, params) {
        $.ajax({
            method: 'post',
            url : "/api-"+type,
            data: {
              api_uri: uri,
              param : JSON.stringify(params),
            },
            success: (res)=> {
              callBackMethod(res, args);
            },
            error: (error)=> {
              console.log(error);
            }
        });
    }

    function siteDriveChildrenItems(siteId, path, name, value, event) {
      event.preventDefault();
      event.stopPropagation();
      const toggleBox = document.getElementsByClassName('toggle-box');
      if (document.getElementsByClassName('toggle-box')){
        $(toggleBox).remove();
      }
      if ($('#all-check').is(':checked')) {
        $('#all-check').prop('checked', false);
      }
      if ($(event.target).hasClass('on')) {
        return;
      }
      if (value) {
        // $('.tree.group input').prop('checked', true);
        $('input[value="'+value+'"]').prop('checked', false);
        if ($('section .panel').children().text() === name) {
          return;
        }
      }

      callApi('get', '/sites/' +siteId + path, (jsonData)=>{
        if (jsonData && jsonData.id) {
          if (jsonData.folder && jsonData.folder.childCount === 0) {
              if (path.indexOf('root:') < 0) {
                path = '';
              }
              const panelStr = drawPath(path, siteId, name);
              const $oneDriveBtn = $('.one-drive-button');
              const $fileContent = $('.file-content');
              const $panel = $('section .panel');
              $oneDriveBtn.off('click');
              let text = name;
              if (name !== 'One Drive') {
                text = 'SharePoint'
              }
              $oneDriveBtn.text(text+'에서 열기');
              if (jsonData.webUrl){
                $oneDriveBtn.on('click', ()=>{
                  window.open(jsonData.webUrl);
                });
              }

              $fileContent.html(`<div class="empty-box">
                                  <img src="/static/images/empty_folder_v2.svg" alt="이미지">
                                  <div>이 폴더는 비어 있습니다.</div>
                                </div>`);
              $panel.html(panelStr);
              dragAndDrop();
              return;
          }
          callApi('get', '/sites/' +siteId +'/drive/items/'+jsonData.id+'/children', (childrenData)=>{
            drawDriveFiles(childrenData, jsonData, name);
          },null); 
        }
      })
    }

    function getVolume(amount) {
      const tb = 1099511627776;
      const gb = 1073741824;
      const mb = 1048576;
      const kb = 1024;
      if (!isNaN(Number(amount)) && amount > 0) {
        if (amount >= tb) {
          amount = (amount/tb).toFixed(2) + 'TB';
        }
        else if (amount >= gb){
          amount = (amount/gb).toFixed(2) + 'GB';
        }
        else if (amount >= mb){
          amount = (amount/mb).toFixed(2) + 'MB';
        }
        else if (amount >= kb){
          amount = (amount/kb).toFixed(2) + 'KB';
        }
        else {
          amount += "Byte";
        }
      }

      return amount;
    }


    function getGroupList() {
      $.ajax({
          method: 'post',
          url : "/getGroupList",
          success: (res)=> {
            drawList(res);
          },
          error: (error)=> {
            console.log(error);
          }
      })
    }

    function drawList(jsonData) {
      const group = $('.group');
      group.empty();
      if (jsonData) {
          _listData = jsonData;
          const groupImageUrl = "/_api/siteiconmanager/getsitelogo?type='1'";
          const {oneDrive, joinedTeams, sites} = jsonData;
          let parentId = '';
          let siteId = '';
          let str = "";
        
          if (joinedTeams && joinedTeams.teams.length > 0) {
            str += `<li>
                      <input id="my-team" type="checkbox">
                      <label for="my-team">내 Teams 그룹</label>
                      <ul class="group-section">
                    `
            joinedTeams.teams.forEach((team)=>{
              const items = joinedTeams.items[team.id];
              let siteId = team.sharePoint.siteId;
              str += `<li id="${siteId}_li">
                        <input type="checkbox" checked="false" id="${siteId}_check" value="${siteId}">
                        <label for="${siteId}_check"><img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="이미지">&nbsp;${team.displayName}</label>
                        <ul>`;
                        
                        if (items && items.length > 0) {
                          items.forEach((item)=>{
                            str +=`<li id="${item.id}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root:/${item.name}', '${team.displayName}', null, event)">${item.name}</li>`
                          })
                        }
              str +=`</ul></li>`;
            })
            str += '</ul></li>';
          }
          if (oneDrive) {
            const {teams, items} = oneDrive;
            const sharePoint = teams.sharePoint;
            siteId = sharePoint.siteId;
              str += `<div id="${siteId}_li" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', 'One Drive', '${siteId}', event)">
                        <img width="24" height="24" src="${sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;One Drive
                      </div>`;
          }

          if (sites) {
              let {teams, items} = sites;
              if (!Array.isArray(teams)) {
                teams = [teams];
              }
              for (let team of teams) {
                let siteId = team.sharePoint.siteId;
                let path;
                let imageUrl;
                  str += `
                        <div id="${siteId}_li" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}', event)">
                          <img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;${team.displayName}
                        </div>`;
              }

          }
          group.append($(str));
      }
    }


    function sorting(type) {
      const $sortingColumn = $('.head-'+type);
      const isSelected = $sortingColumn.hasClass('on');
      if ($('.file-title > div.on')[0]) {
        $('.file-title > div.on').removeClass('on');
      } 

      if (_selectedData.value.length > 0) {
        let first = 1;
        let end = -1;
        if (!isSelected) {
          $sortingColumn.addClass('on');
        }
        else {
          first = -1;
          end = 1; 
        }
        

        _selectedData.value.sort(function (a, b){
          return a[type] > b[type] ? first : a[type] === b[type] ? 0 : end;
        });
      }
  }
  $('.tree.group input[type="checkbox"]').on('change', function(event){
    console.log($(this));
  })

  function downloadItems(downloadUrl, name, event) {
    event.preventDefault();
    event.stopPropagation();
    const link = document.createElement('a');
    link.download = name;
    link.href = downloadUrl;
    $('body').append(link);
    link.click();
    $(link).remove();
    window.URL.revokeObjectURL(downloadUrl);
  }

  //새로만들기 이벤트
  function makeItems(id, name, url, ext) {
    const $name = $('#'+id);
    let nameVal = $name.val();
    if (!nameVal || !nameVal.trim()) {
      return alertMessage(name, name + "명을 입력해주세요.", id, 'red');
    }
    const pattern = /[<>\:\*\"\/\\\?\|]/gi;
    if (pattern.test(nameVal)) {
      $name.focus();
      return alertMessage(name, name + `명에 해당 특수 문자를 포함 할 수 없습니다.( \\ / : * ? " < > | )`, id, 'red');
    }
    if (ext) {
      nameVal += ext;
    }

    const siteId = getSitesId();
    if (siteId === null) {
      return alertMessage(name, '선택된 그룹 정보를 찾을 수 없습니다. 생성할 그룹을 선택해주세요.', null, 'red');
    }
    const groupIndex = _listData.joinedTeams.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
    const pathArr = $('.panel').children();

    if (groupIndex >= 0 && $('.panel').children().length === 1) {
      return alertMessage(name, '채널 리스트를 먼저 선택해 주세요.', null, 'red');
    }

    const fileArr = $('section .file-content .sp-name');
    for (let ii = 0; ii < fileArr.length; ii++) {
      if (fileArr.eq(ii).text() === nameVal) {
        $name.focus();
        return alertMessage(name, '파일명 : ' + nameVal +'<br>이미 같은 이름의 파일이 있습니다.<br>생성할 파일 명칭을 변경해주세요.', id, 'red');
      }
    }

    const path = getDrivePath();

    $.ajax({
      method: 'post',
      url : url,
      data : {
        siteId : siteId,
        path : path,
        name : nameVal,
      },
      success: (res) => {
        alertMessage(name, res.message);
        if (res.success === 'S') {
          modalClose('make');
          refreshDrives();
        }
      },
      error: (error) => {
        console.log('==============error=============\n');
        console.log(error);
      }
      
    })

  }

  //새폴더 생성
  function mkdir() {
    const modalContainer = $(
      `<div class="modal make" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">폴더 생성</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('make')"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>폴더명</div>
                <input type="text" name="file_name" autocomplete='off' onkeyup="enterKey(()=>makeItems('folder_name', '폴더', '/api/makeFolder', null), event)" id="folder_name" value="">
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="makeItems('folder_name', '폴더', '/api/makeFolder', null)">만들기</div>
                  <div class="name-btn" onclick="modalClose('make')">취소</div>
              </div>
          </div>
      </div>`);
    $('body').append(modalContainer);
    $('#folder_name').focus();
  }

  //새 엑셀 파일 생성
  function mkExcel() {
    const modalContainer = $(
      `<div class="modal make" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">Excel 통합 문서</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('make')"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>이름</div>
                <div style="display:flex; align-items:flex-end; user-select:none;">
                  <input type="text" placeholder="새 이름을 입력하세요." style="width:'calc(100% - 35px)';" autocomplete='off' onkeyup="enterKey(()=>makeItems('excel_input', 'Excel 통합 문서', '/api/makeExcel', '.xlsx'), event)" name="change_name" id="excel_input" value="">&nbsp;.xlsx
                </div>
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="makeItems('excel_input', 'Excel 통합 문서', '/api/makeExcel', '.xlsx')">만들기</div>
                  <div class="cancel-btn" onclick="modalClose('make')">취소</div>
              </div>
          </div>
      </div>`);
      $('body').append(modalContainer);
      $('#excel_input').focus();
  }

  function mkWord() {
    const modalContainer = $(
      `<div class="modal make" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">Word 문서</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('make')"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>이름</div>
                <div style="display:flex; align-items:flex-end; user-select:none;">
                  <input type="text" placeholder="새 이름을 입력하세요." style="width:'calc(100% - 35px)';" autocomplete='off' onkeyup="enterKey(()=>makeItems('word_input', 'Word 문서', '/api/makeWord', '.docx'), event)" name="change_name" id="word_input" value="">&nbsp;.docx
                </div>
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="makeItems('word_input', 'Word 문서', '/api/makeWord', '.docx')">만들기</div>
                  <div class="cancel-btn" onclick="modalClose('make')">취소</div>
              </div>
          </div>
      </div>`);
      $('body').append(modalContainer);
      $('#word_input').focus();
  }

  function mkPpt() {
    const modalContainer = $(
      `<div class="modal make" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">PowerPoint 프레젠테이션</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('make')"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>이름</div>
                <div style="display:flex; align-items:flex-end; user-select:none;">
                  <input type="text" placeholder="새 이름을 입력하세요." style="width:'calc(100% - 35px)';" autocomplete='off' onkeyup="enterKey(()=>makeItems('ppt_input', 'PowerPoint 프레젠테이션', '/api/makePptx', '.pptx'), event)" name="change_name" id="ppt_input" value="">&nbsp;.docx
                </div>
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="makeItems('ppt_input', 'PowerPoint 프레젠테이션', '/api/makePptx', '.pptx')">만들기</div>
                  <div class="cancel-btn" onclick="modalClose('make')">취소</div>
              </div>
          </div>
      </div>`);
      $('body').append(modalContainer);
      $('#ppt_input').focus();
  }

  function enterKey(method, event) {
    if (event.key === 'Enter' && $('.modal.alert').length === 0) {
      method();
    } 
  }
  
  function modalClose(className, id){
      $('.modal.' + className).remove();
      if(id) {
        $('#' + id).focus();
      }
  }

  function getSitesId() {
    let siteId = null;
    if ($('.panel').children().first()[0]) {
        siteId = $('.panel').children().first().attr('id');
    }
    return siteId;
  }

  function nameChange() {
    const $checkbox = $('.file-content > div.on input[type="checkbox"]');
    if ($checkbox.length > 1) return;
    if (!$('.file-content > div.on .file_name')[0]) return;
    const siteId = getSitesId();
    const itemId = $checkbox.val();
    const name = $('.file-content > div.on .file_name').text();
    let ext = "";
    let inputVal = name;
    let width = '100%';
    if(name.includes(".")) {
      inputVal = name.substring(0, name.lastIndexOf("."));
      ext = name.substring(name.lastIndexOf("."));
      width = 'calc(100% - 35px)';
    }
    // callApi('get', "/sites/"+ siteId + "/drive/items/" + itemId, (jsonData)=>{
    //   console.log(jsonData);
    // })
  
    const modalContainer = $(
      `<div class="modal name" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">이름 바꾸기</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose('name')"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>이름</div>
                <div style="display:flex; align-items:flex-end;">
                  <input type="text" style="width:${width};" name="change_name" id="${itemId}_input" value="${inputVal}">&nbsp;${ext}
                </div>
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="updateDriveItems('${siteId}','${itemId}')">이름 바꾸기</div>
                  <div class="cancel-btn" onclick="modalClose('name')">취소</div>
              </div>
          </div>
      </div>`);
      $('body').append(modalContainer);
  }

  function updateDriveItems(siteId, itemId) {
    const input = $('#' + itemId + '_input');
    console.log($('#' + itemId + '_input').val() , $('#' + itemId + '_input').parent().text().trim());
    let name = input.val();
    const ext = input.parent().text().trim();
    if (ext) {
      name += ext; 
    }
    
    $.ajax({
      method: 'post',
      url : '/api/update-name',
      data : {
        siteId : siteId,
        itemId : itemId,
        name   : name,
      },
      success : (res)=> {
          if (res.success === 'S') {
            refreshDrives();
          }
          alertMessage('이름 변경',res.message);
      },
      error : (error) => {
          alertMessage('이름 변경','오류가 발생하였습니다.<br>'+ error);
      }
    })
  }


  function refreshDrives() {
    const selectDrive = $('.panel-item.on');
    selectDrive.removeClass('on');
    selectDrive.click();
  }

</script>