1 files changed, 59 insertions, 24 deletions
diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html
index 62d8b24..9ba34f8 100644
--- a/layouts/recordings/recordings-plain.html
+++ b/layouts/recordings/recordings-plain.html
@@ -90,7 +90,40 @@
       .folder-content li:last-child {
         border-bottom: none;
       }
+      /* 제한된 폴더는 기본적으로 숨김 (si 사용자만 표시) */
+      li.folder-section[data-restricted="true"] {
+        display: none;
+      }
+      li.folder-section[data-restricted="true"].allowed {
+        display: block;
+      }
     </style>
+    <script>
+      // 즉시 실행: 제한된 폴더 숨기기 (FOUC 방지)
+      (function() {
+        // 쿠키에서 사용자 확인
+        const cookies = document.cookie.split(';').reduce((acc, cookie) => {
+          const [key, value] = cookie.trim().split('=');
+          acc[key] = value;
+          return acc;
+        }, {});
+        const isSiUser = cookies.user === 'si' || cookies.authUser === 'si';
+        
+        // DOM이 준비되면 즉시 처리
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', applyRestrictions);
+        } else {
+          applyRestrictions();
+        }
+        
+        function applyRestrictions() {
+          const restrictedFolders = document.querySelectorAll('li.folder-section[data-restricted="true"]');
+          if (isSiUser) {
+            restrictedFolders.forEach(folder => folder.classList.add('allowed'));
+          }
+        }
+      })();
+    </script>
   </head>
   <body>
     <h1>{{ .Title }}</h1>
@@ -306,40 +339,42 @@
 
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        // 사용자별 제한된 폴더 필터링 (si 사용자만 leak, hidden 볼 수 있음)
+        // 사용자별 제한된 폴더 필터링 (API로 최종 확인)
         const checkUserAccess = async () => {
           const restrictedFolders = document.querySelectorAll('li.folder-section[data-restricted="true"]');
           
-          // 방법 1: 쿠키에서 확인
-          const cookies = document.cookie.split(';').reduce((acc, cookie) => {
-            const [key, value] = cookie.trim().split('=');
-            acc[key] = value;
-            return acc;
-          }, {});
-          
-          // 방법 2: API로 사용자 정보 확인 (nginx에서 헤더 읽기)
-          let isSiUser = cookies.user === 'si' || cookies.authUser === 'si';
+          // 이미 allowed 클래스가 있으면 스킵 (head의 스크립트에서 처리됨)
+          if (restrictedFolders.length > 0 && restrictedFolders[0].classList.contains('allowed')) {
+            return;
+          }
           
-          if (!isSiUser) {
-            try {
-              // nginx에서 사용자 정보를 반환하는 엔드포인트 호출
-              const response = await fetch('/api/whoami', {
-                credentials: 'include'
-              });
-              if (response.ok) {
-                const data = await response.json();
-                isSiUser = data.user === 'si';
-              }
-            } catch (e) {
-              // API 실패 시 쿠키만 확인
+          // API로 사용자 정보 확인 (nginx에서 헤더 읽기)
+          let isSiUser = false;
+          try {
+            const response = await fetch('/api/whoami', {
+              credentials: 'include'
+            });
+            if (response.ok) {
+              const data = await response.json();
+              isSiUser = data.user === 'si';
             }
+          } catch (e) {
+            // API 실패 시 쿠키 확인
+            const cookies = document.cookie.split(';').reduce((acc, cookie) => {
+              const [key, value] = cookie.trim().split('=');
+              acc[key] = value;
+              return acc;
+            }, {});
+            isSiUser = cookies.user === 'si' || cookies.authUser === 'si';
           }
           
-          if (!isSiUser) {
+          if (isSiUser) {
+            // si 사용자는 allowed 클래스 추가하여 표시
             restrictedFolders.forEach(folder => {
-              folder.style.display = 'none';
+              folder.classList.add('allowed');
             });
           }
+          // si 사용자가 아니면 CSS에서 이미 숨김 처리됨
         };
         checkUserAccess();