[i-PORTAL] 보고서 탭 버튼 이동 및 표시 개선

page no.  124518546

1. 기능 설명
   1. 여러 보고서를 동시에 열어 작업할 때, 탭이 화면에 모두 표시되지 않는 경우 좌우 화살표 버튼을 사용하여 숨겨진 탭을 찾아볼 수 있습니다.
   2. 개선 내용 
      1. 보고서 탭 이동 버튼 움직임 수정 
         
         1. (기존) 스크롤 이동 적용 → (변경) 탭 이동 적용 
      2. 보고서 탭 동적 사이즈 적용 
         1. 보고서 탭 중 첫번째 보고서 탭에 대한 동적 사이즈 적용 
      3. 보고서 탭의 Tooltip 적용 
         1. 보고서 탭의 이름 표시를 위한 Tooltip 적용

   3. 보고서 탭 구성 요소 

      구성 요소	설명
      왼쪽 화살표 ( < )	이전 탭 보기
      오른쪽 화살표 ( > )	다음 탭 보기
      보고서 탭	현재 열려있는 보고서 목록

      --

   4. 보고서 탭 화면 및 설명 
      보고서 탭의 [왼쪽 영역]은 이동 버튼이 존재하며, 왼쪽 및 오른쪽 버튼을 누르면 숨겨진 보고서 탭을 표시합니다.
      보고서 탭의 [오른쪽 영역]은 보고서 탭이 존재하며, 현재 열려 있는 보고서 목록을 표시합니다. 
      
      --

   5. 이동 버튼의 색상에 대한 의미 

      상태	의미
      밝은 색 (활성화)	해당 방향으로 탭이 존재하며, 이동이 가능한 상태
      흐린 색 (비활성화)	해당 방향으로 더 이상 탭이 없으며, 이동이 불가능한 상태

      
      예시1)  이동 버튼 중 왼쪽 버튼이 흐린 색 (비활성화) 이면, 현재 보고서 탭 목록에서 첫 번째 탭이 보이고 있는 상태입니다. 
      예시2) 이동 버튼 중 오른쪽 버튼이 흐린 색 (비활성화) 이면, 현재 보고서 탭 목록에서 마지막 탭이 보이고 있는 상태입니다. 
      예시3) 이동 버튼 중 왼쫀, 오른쪽 버튼이 밝은 색이라면, 현재 보고서 탭 목록에서 양쪽 방향 모두 숨겨진 탭이 있는 상태 입니다., 

      ---

2. 사용 방법
   1. 보고서 탭 이동 버튼 움직임 개선 부분 
      1. 보고서 탭의 이동 버튼 중 [왼쪽 화살표( < )] 클릭 
         
         1. 현재 화면에 보이지 않는 이전 보고서 탭을 확인할 수 있습니다. 
         2. 한 번 클릭할 때마다 한 탭씩 왼쪽으로 이동합니다. 
         3. 맨 첫번째 항목에 도달할 경우, 이동 버튼이 흐린 색으로 표시되고 비활성화 처리 됩니다. 
            
            --
            
            
      2. 보고서 탭의 이동 버튼 중 [오른쪽 화살표 ( > )] 클릭
         1. 현재 화면에 보이지 않는 다음 보고서 탭을 확인할 수 있습니다. 
         2. 한번 클릭할 때마다 한 탭씩 오른쪽으로 이동합니다. 

         3. 맨 마지막 항목에 도달할 경우, 이동 버튼이 흐린 색으로 표시되고 비활성화 처리 됩니다. 
            
            --

   2. 보고서 탭 동적 사이즈 적용 부분 

      1. 브라우저 크기에 따라 첫번째 탭에 동적 사이즈를 적용하여 탭 닫기가 가능하도록 변경하였습니다. 

         1. 브라우저 크기에 따라 첫번째 보고서 탭의 사이즈가 조정되어 표시됩니다.
         2. 브라우저 크기를 축소할 경우, 표시 가능한 영역을 계산하여 첫번째 탭의 사이즈가 축소됩니다.
            참고로, 브라우저 크기를 늘릴 경우에는 축소된 첫번째 보고서 탭은 늘어나지 않습니다.
         3. 보고서 탭이 여러개 존재할 경우, 맨 왼쪽에 있는 첫번째 보고서 탭이 닫히면 다음 보고서 탭이 축소되어 표시됩니다.

         변경 전	변경 후

         
         --

   3. 보고서 탭의 Tooltip 적용 부분 
      
      1. 브라우저 크기에 따라 동적 사이즈로 변경된 탭의 이름이 보이지 않는 경우를 대비하여, 해당 탭에 마우스를 올려두면 Tooltip으로 보고서 이름을 확인할 수 있습니다.