<!-- HIDDEN_TAB -->
<div class="product-detail-container">
  <div class="product-header">
    <span class="badge">Dynamic Route</span>
    <h1>상품 상세 페이지</h1>
  </div>
  <div class="product-info">
    <p>조회 요청된 상품 ID:</p>
    <div class="id-display">apple-watch-ultra</div>
  </div>
</div>

<!-- HIDDEN_TAB -->
<div class="post-container">
  <h1 class="post-title">Next.js 14 완벽 가이드</h1>
  <div class="post-content">
    <p>서버 컴포넌트는 서버에서 미리 렌더링되어 HTML로 전송되므로 초기 로딩이 매우 빠르고 SEO에 유리합니다.</p>
    <p>반면, 이벤트 리스너나 상태 관리가 필요한 부분은 클라이언트 컴포넌트로 만들어 트리에 주입합니다.</p>
  </div>
  <div class="interaction-area">
    <button class="like-button" onclick="handleLike(this)">
      ❤️ 좋아요 <span class="like-count">42</span>
    </button>
  </div>
</div>

<script>
function handleLike(btn) {
  const countSpan = btn.querySelector('.like-count');
  let count = parseInt(countSpan.textContent, 10);
  countSpan.textContent = count + 1;
  btn.style.transform = 'scale(1.1)';
  setTimeout(() => btn.style.transform = 'scale(1)', 150);
  console.log('[Client Component] State updated: Likes = ' + (count + 1));
}
</script>

<!-- HIDDEN_TAB -->
<div class="dashboard">
  <h1 class="dash-title">📈 실시간 금융 및 뉴스 대시보드</h1>
  <div class="actions">
    <button onclick="refreshDashboard()" class="refresh-btn">🔄 전체 새로고침 (페이지 새로고침 시뮬레이션)</button>
  </div>
  <div class="grid-container">
    <div class="card real-time">
      <h3>🚀 실시간 주가 (no-store)</h3>
      <div class="price" id="stock-price">78,500 원</div>
      <p class="caption">매 요청마다 서버에서 <strong>새로운 데이터</strong>를 가져옵니다.</p>
    </div>
    <div class="card isr-time">
      <h3>📰 10초 캐시 뉴스 (revalidate: 10)</h3>
      <ul class="news-list">
        <li>AI 기술의 혁신적 발전...</li>
        <li>글로벌 경제 지표 발표...</li>
      </ul>
      <div class="time-stamp" id="news-time">마지막 업데이트: 10:00:00</div>
      <p class="caption">10초 동안은 수만 명이 새로고침해도 <strong>캐시된 데이터(매우 빠름)</strong>를 보여줍니다.</p>
    </div>
  </div>
</div>

<script>
let lastFetchTime = Date.now();
let cachedTimeStr = new Date().toLocaleTimeString();
document.getElementById('news-time').textContent = '마지막 업데이트: ' + cachedTimeStr;

function refreshDashboard() {
  const now = Date.now();
  
  // 1. no-store (항상 바뀜)
  const newPrice = 78000 + Math.floor(Math.random() * 2000);
  document.getElementById('stock-price').textContent = newPrice.toLocaleString() + ' 원';
  console.log('[SSR] 실시간 주가 API 재요청 됨! (' + newPrice + '원)');
  
  // 2. revalidate: 10 (10초 경과시에만 바뀜)
  if (now - lastFetchTime > 10000) {
    cachedTimeStr = new Date().toLocaleTimeString();
    lastFetchTime = now;
    console.warn('[ISR] 10초 경과! 백그라운드에서 뉴스 데이터를 새로 가져옵니다.');
  } else {
    const remain = Math.ceil((10000 - (now - lastFetchTime)) / 1000);
    console.log('[ISR] 캐시 히트! (빠른 응답) 갱신까지 ' + remain + '초 남음');
  }
  document.getElementById('news-time').textContent = '마지막 업데이트: ' + cachedTimeStr;
}
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <nav class="top-nav">
    <div class="nav-item">홈</div>
    <div class="nav-item active">대시보드</div>
    <div class="nav-item">설정</div>
  </nav>
  <main class="main-content">
    <div class="header-row">
      <h2>📊 대시보드 데이터</h2>
      <button onclick="simulateLoad()" class="action-btn">🔄 컴포넌트 다시 로드하기</button>
    </div>
    
    <div class="component-wrapper">
      <!-- 로딩 상태 (loading.tsx 역할) -->
      <div id="loading-ui" class="loading-skeleton">
        <div class="skeleton title"></div>
        <div class="skeleton-grid">
           <div class="skeleton block"></div>
           <div class="skeleton block"></div>
        </div>
      </div>

      <!-- 성공 상태 (page.tsx 역할) -->
      <div id="success-ui" class="success-ui hidden">
        <div class="success-header">
          <h3>방문자 통계</h3>
          <span class="badge">✅ 로드 성공</span>
        </div>
        <div class="stats-grid">
           <div class="stat-box">오늘 방문자<br/><strong>1,420명</strong></div>
           <div class="stat-box">어제 방문자<br/><strong>1,300명</strong></div>
        </div>
      </div>

      <!-- 에러 상태 (error.tsx 역할) -->
      <div id="error-ui" class="error-ui hidden">
        <div class="error-icon">⚠️</div>
        <h3 class="error-title">데이터를 불러오는 중 문제가 발생했습니다!</h3>
        <p class="error-desc">서버와 연결이 끊어졌거나 API 에러가 발생했습니다.</p>
        <button onclick="simulateLoad()" class="retry-btn">다시 시도하기 (reset)</button>
      </div>
    </div>
  </main>
</div>

<script>
function simulateLoad() {
  const loadingUI = document.getElementById('loading-ui');
  const successUI = document.getElementById('success-ui');
  const errorUI = document.getElementById('error-ui');
  
  // 1. Show Loading
  loadingUI.classList.remove('hidden');
  successUI.classList.add('hidden');
  errorUI.classList.add('hidden');
  
  console.log('[Streaming] React Suspense가 loading.tsx의 스켈레톤을 즉시 보여줍니다...');
  
  // 2. Mock 2초 뒤 결과 (50% 확률로 성공/실패)
  setTimeout(() => {
    loadingUI.classList.add('hidden');
    const isError = Math.random() < 0.5;
    
    if (isError) {
      errorUI.classList.remove('hidden');
      console.error('[Error Boundary] 에러 발생! error.tsx 컴포넌트로 화면을 교체합니다.');
    } else {
      successUI.classList.remove('hidden');
      console.log('[Loaded] 서버 데이터를 성공적으로 가져왔습니다! page.tsx 렌더링 완료.');
    }
  }, 2000);
}
// 초기 실행
simulateLoad();
</script>

<!-- HIDDEN_TAB -->
<div class="browser-mockup">
  <!-- Browser URL Bar -->
  <div class="browser-header">
    <div class="browser-dots">
      <span></span><span></span><span></span>
    </div>
    <div class="url-bar">
      https://minstudio.com/products/ <input type="text" id="productIdInput" value="77" class="url-input" />
      <button onclick="navigateRoute()" class="nav-btn">이동 (Enter)</button>
    </div>
  </div>
  
  <!-- SEO Head Viewer -->
  <div class="head-viewer">
    <div class="viewer-label">생성된 &lt;head&gt; 메타 태그 (SEO)</div>
    <pre id="head-output" class="head-code"></pre>
  </div>

  <!-- Rendered Page Content -->
  <div class="page-content">
    <div class="breadcrumb">홈 &gt; 상품 &gt; <span id="page-id">77</span></div>
    <div class="product-grid">
      <div id="product-img" class="product-img"></div>
      <div class="product-info">
        <h1 id="product-title">최고급 게이밍 마우스</h1>
        <p id="product-desc">반응 속도가 매우 빠른 무선 마우스입니다.</p>
        <h2 id="product-price" class="price">159,000원</h2>
        <button class="buy-btn">장바구니 담기</button>
      </div>
    </div>
  </div>
</div>

<script>
const mockDB = {
  '77': {
    name: '최고급 게이밍 마우스',
    desc: '반응 속도가 매우 빠른 무선 마우스입니다.',
    price: '159,000',
    color: '#3b82f6'
  },
  '99': {
    name: '인체공학 기계식 키보드',
    desc: '장시간 타이핑해도 손목이 편안한 키보드',
    price: '280,000',
    color: '#10b981'
  },
  '123': {
    name: '4K 울트라와이드 모니터',
    desc: '생생한 화질과 압도적인 몰입감',
    price: '890,000',
    color: '#8b5cf6'
  }
};

function navigateRoute() {
  const id = document.getElementById('productIdInput').value.trim();
  const product = mockDB[id] || {
    name: '알 수 없는 상품',
    desc: '요청하신 상품을 찾을 수 없습니다.',
    price: '0',
    color: '#94a3b8'
  };

  // 1. Render Head (generateMetadata)
  const headHtml = `&lt;title&gt;${product.name} 구매하기 | Minstudio Store&lt;/title&gt;
&lt;meta name="description" content="${product.desc}"&gt;
&lt;meta property="og:title" content="${product.name}"&gt;
&lt;meta property="og:image" content="https://minstudio.com/images/${id}.jpg"&gt;`;
  document.getElementById('head-output').innerHTML = headHtml;
  console.log(`[SEO] generateMetadata() 실행됨! (id: ${id})`);

  // 2. Render Page
  document.getElementById('page-id').textContent = id;
  document.getElementById('product-title').textContent = product.name;
  document.getElementById('product-desc').textContent = product.desc;
  document.getElementById('product-price').textContent = product.price + '원';
  document.getElementById('product-img').style.background = product.color;
  console.log(`[Render] ProductDetailPage 컴포넌트 렌더링 완료!`);
}

document.getElementById('productIdInput').addEventListener('keypress', function(e) {
  if(e.key === 'Enter') navigateRoute();
});

// Initial Load
navigateRoute();
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <!-- Header Nav with Link Prefetching -->
  <nav class="top-nav">
    <div class="logo">Minstudio</div>
    <div class="nav-links">
      <a href="#" class="nav-link" onmouseenter="simulatePrefetch('/about')">회사소개</a>
      <a href="#" class="nav-link" onmouseenter="simulatePrefetch('/products')">제품안내</a>
      <a href="#" class="nav-link" onmouseenter="simulatePrefetch('/blog')">기술블로그</a>
    </div>
  </nav>

  <main class="main-content">
    <div class="content-header">
      <h2>이미지 최적화 데모</h2>
      <button onclick="resetImages()" class="action-btn">🔄 스크롤 및 이미지 초기화</button>
    </div>
    <p class="desc-text">스크롤을 내려보세요! 이미지가 화면에 보일 때만 (Lazy Loading) 다운로드되며, 로딩 전에는 흐린 잔상(Blur)이 표시됩니다.</p>
    
    <!-- Scroll container -->
    <div class="scroll-area" id="scrollArea">
      <div class="spacer">↓ 아래로 스크롤하세요 ↓</div>
      
      <div class="image-card" id="img-card-1">
        <div class="next-image-wrapper">
           <div class="blur-placeholder" id="blur-1"></div>
           <img src="https://images.unsplash.com/photo-1506744626753-1fa28f6f53cb?w=600&h=400&fit=crop" class="real-image" id="real-1" alt="풍경 1" />
        </div>
        <div class="img-caption">최적화된 이미지 1 (WebP, Lazy Load)</div>
      </div>

      <div class="spacer">↓ 더 스크롤하세요 ↓</div>

      <div class="image-card" id="img-card-2">
        <div class="next-image-wrapper">
           <div class="blur-placeholder" id="blur-2" style="background-color: #d1d5db;"></div>
           <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop" class="real-image" id="real-2" alt="풍경 2" />
        </div>
        <div class="img-caption">최적화된 이미지 2 (WebP, Lazy Load)</div>
      </div>
    </div>
  </main>
</div>

<script>
// 1. Link Prefetching Mock
const prefetched = new Set();
function simulatePrefetch(route) {
  if (!prefetched.has(route)) {
    console.log(`[Next.js <Link>] 사용자가 마우스를 올렸습니다! '${route}' 페이지에 필요한 JS/데이터를 백그라운드에서 미리 다운로드합니다 (Prefetching)...`);
    prefetched.add(route);
  }
}

// 2. Image Lazy Loading Mock using IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const cardId = entry.target.id;
      const num = cardId.split('-')[2];
      const blurEl = document.getElementById('blur-' + num);
      const realImg = document.getElementById('real-' + num);
      
      if (!realImg.classList.contains('loaded')) {
        console.log(`[Next.js <Image>] 이미지 ${num}번이 시야에 들어왔습니다! Lazy Loading을 시작합니다...`);
        
        // Simulate network delay
        setTimeout(() => {
          blurEl.style.opacity = '0';
          realImg.classList.add('loaded');
          console.log(`[Next.js <Image>] 이미지 ${num}번 다운로드 완료! WebP 변환 및 사이즈 압축 적용됨.`);
        }, 1500);
      }
    }
  });
}, { threshold: 0.5 });

function setupImages() {
  observer.observe(document.getElementById('img-card-1'));
  observer.observe(document.getElementById('img-card-2'));
}

function resetImages() {
  document.getElementById('scrollArea').scrollTop = 0;
  [1, 2].forEach(num => {
    document.getElementById('blur-' + num).style.opacity = '1';
    document.getElementById('real-' + num).classList.remove('loaded');
  });
  prefetched.clear();
  console.log('--- 상태가 초기화되었습니다 ---');
}

// Initialize
setTimeout(setupImages, 500);
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="mock-browser">
    <div class="browser-header">
      <div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="url-bar">localhost:3000/posts/new</div>
    </div>
    <div class="browser-content">
      
      <!-- Server Action Form UI -->
      <div class="form-card">
        <h2 class="form-title">새 글 작성 (Server Action Demo)</h2>
        <p class="form-desc">기존 방식(fetch API) 없이, 제출 버튼을 누르면 서버(DB)로 데이터가 즉시 직행합니다!</p>
        
        <form id="serverActionForm">
          <div class="input-group">
            <label>제목</label>
            <input type="text" name="title" id="postTitle" placeholder="포스트 제목을 입력하세요" required />
          </div>
          <div class="input-group">
            <label>내용</label>
            <textarea name="content" id="postContent" placeholder="포스트 내용을 입력하세요" required></textarea>
          </div>
          <button type="submit" class="submit-btn" id="submitBtn">
            <span class="btn-text">서버로 데이터 저장하기</span>
            <span class="loader" id="btnLoader" style="display:none;"></span>
          </button>
        </form>
      </div>
      
    </div>
  </div>
</div>

<script>
document.getElementById('serverActionForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const title = document.getElementById('postTitle').value;
  const content = document.getElementById('postContent').value;
  const btnText = document.querySelector('.btn-text');
  const loader = document.getElementById('btnLoader');
  const btn = document.getElementById('submitBtn');
  
  // Loading UI
  btn.disabled = true;
  btn.style.opacity = '0.7';
  btnText.innerText = '서버 함수 실행 중...';
  loader.style.display = 'inline-block';
  
  console.log(`[Next.js Client] 폼이 제출되었습니다. 'createPost' 서버 액션을 직접 호출합니다.`);
  
  // Simulate Server Action delay (No explicit API fetch needed in real Next.js!)
  setTimeout(() => {
    console.log(`--- [Next.js SERVER 환경 진입] ---`);
    console.log(`["use server"] formData 파싱 중... 제목: "${title}"`);
    console.log(`[Database] db.post.create({ title: "${title}", content: "${content}" }) 실행 성공! ✅`);
    console.log(`[Next.js Cache] revalidatePath('/posts') 실행 -> '/posts' 라우트의 캐시를 무효화하고 최신화합니다.`);
    console.log(`--- [Next.js CLIENT 환경 복귀] ---`);
    
    // Reset UI
    btn.disabled = false;
    btn.style.opacity = '1';
    btnText.innerText = '저장 완료! (폼 리셋)';
    loader.style.display = 'none';
    btn.style.backgroundColor = '#10b981';
    document.getElementById('serverActionForm').reset();
    
    setTimeout(() => {
      btnText.innerText = '서버로 데이터 저장하기';
      btn.style.backgroundColor = '#2563eb';
    }, 2000);
    
  }, 1500);
});
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="api-client">
    <div class="client-header">
      <h2 class="title">REST API 테스트 클라이언트 (Mock)</h2>
    </div>
    
    <div class="request-panel">
      <!-- GET Request -->
      <div class="api-row">
        <div class="method get">GET</div>
        <div class="endpoint">/api/users</div>
        <button class="send-btn" onclick="mockGetRequest()">Send</button>
      </div>
      
      <!-- POST Request -->
      <div class="api-row">
        <div class="method post">POST</div>
        <div class="endpoint">/api/users</div>
        <button class="send-btn" onclick="mockPostRequest()">Send</button>
      </div>
      <div class="payload-box">
        <div class="payload-label">Request Body (JSON):</div>
        <pre>{ "name": "새로운 멤버", "role": "developer" }</pre>
      </div>
    </div>
  </div>
</div>

<script>
function mockGetRequest() {
  console.log(`[Frontend] GET /api/users 요청을 보냅니다...`);
  setTimeout(() => {
    console.log(`[Route Handler] GET 함수 실행됨. 데이터베이스 조회 중...`);
    const response = [
      { id: 1, name: '김민수', role: 'admin' },
      { id: 2, name: '이영희', role: 'user' }
    ];
    console.log(`[Frontend] 응답 수신 (Status: 200 OK) 👇\n` + JSON.stringify(response, null, 2));
  }, 800);
}

function mockPostRequest() {
  const payload = { name: "새로운 멤버", role: "developer" };
  console.log(`[Frontend] POST /api/users 요청을 보냅니다. Body:`, payload);
  setTimeout(() => {
    console.log(`[Route Handler] POST 함수 실행됨. Request Body 파싱 중...`);
    const newUser = { id: 3, ...payload };
    console.log(`[Database] Insert 완료! 새 유저:`, newUser);
    
    const response = { message: '유저가 성공적으로 생성되었습니다.', user: newUser };
    console.log(`[Frontend] 응답 수신 (Status: 201 Created) 👇\n` + JSON.stringify(response, null, 2));
  }, 1200);
}
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="mock-browser">
    <div class="browser-header">
      <div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="url-bar" id="mockUrl">localhost:3000/</div>
    </div>
    <div class="browser-content">
      
      <div class="auth-control">
        <div class="control-label">가상 쿠키(토큰) 상태:</div>
        <label class="switch">
          <input type="checkbox" id="authToggle" onchange="toggleAuth()">
          <span class="slider round"></span>
        </label>
        <span id="authStatus" class="status-text out">로그아웃 상태 (토큰 없음)</span>
      </div>

      <div class="nav-buttons">
        <button class="nav-btn safe" onclick="simulateNav('/about')">
          <span class="icon">🌍</span>
          <div class="text-group">
            <strong>/about (소개)</strong>
            <small>누구나 접근 가능</small>
          </div>
        </button>

        <button class="nav-btn protected" onclick="simulateNav('/dashboard')">
          <span class="icon">🔒</span>
          <div class="text-group">
            <strong>/dashboard (대시보드)</strong>
            <small>로그인 필수 경로</small>
          </div>
        </button>
      </div>
      
    </div>
  </div>
</div>

<script>
let isLoggedIn = false;

function toggleAuth() {
  isLoggedIn = document.getElementById('authToggle').checked;
  const statusEl = document.getElementById('authStatus');
  if (isLoggedIn) {
    statusEl.innerText = '로그인 상태 (토큰 보유 ✅)';
    statusEl.className = 'status-text in';
    console.log(`[Browser] 'auth_session_token' 쿠키가 구워졌습니다! 🍪`);
  } else {
    statusEl.innerText = '로그아웃 상태 (토큰 없음 ❌)';
    statusEl.className = 'status-text out';
    console.log(`[Browser] 쿠키가 삭제되었습니다.`);
  }
}

function simulateNav(path) {
  console.log(`[User] '${path}' 경로로 이동을 시도합니다...`);
  document.getElementById('mockUrl').innerText = `localhost:3000${path} (로딩중...)`;
  
  setTimeout(() => {
    console.log(`[Middleware] 요청 가로챔! 목적지: ${path}`);
    
    if (path.startsWith('/dashboard')) {
      if (!isLoggedIn) {
        console.log(`[Middleware] 🚨 토큰이 없습니다! 무단 접근 차단 -> '/login'으로 리다이렉트 (Redirecting...)`);
        document.getElementById('mockUrl').innerText = `localhost:3000/login`;
        document.getElementById('mockUrl').style.color = '#ef4444';
        setTimeout(() => { document.getElementById('mockUrl').style.color = '#64748b'; }, 1000);
      } else {
        console.log(`[Middleware] ✅ 유효한 토큰 확인 완료. 통과 (NextResponse.next())`);
        document.getElementById('mockUrl').innerText = `localhost:3000${path}`;
      }
    } else {
      console.log(`[Middleware] 🟢 보호된 경로가 아닙니다. 통과 (NextResponse.next())`);
      document.getElementById('mockUrl').innerText = `localhost:3000${path}`;
    }
  }, 600);
}
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="mock-browser">
    <div class="browser-header">
      <div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="url-bar">localhost:3000/dashboard</div>
      <button class="reload-btn" onclick="simulateParallelLoading()">새로고침 🔄</button>
    </div>
    <div class="browser-content">
      
      <header class="dashboard-header">
        <h2 style="margin:0; font-size: 1.2rem; color: #1e293b;">Admin Dashboard (children)</h2>
        <p style="margin:0; font-size: 0.8rem; color: #64748b;">메인 레이아웃 렌더링 완료</p>
      </header>

      <div class="grid">
        <!-- Analytics Slot -->
        <section class="slot purple">
          <div class="slot-title">@analytics 슬롯</div>
          <div class="slot-content" id="analyticsContent">
             <div class="loader-wrap">
               <div class="loader p"></div>
               <div class="loading-text">차트 데이터 Fetching 중...<br>(1초 소요 예상)</div>
             </div>
          </div>
        </section>

        <!-- Team Slot -->
        <section class="slot emerald">
          <div class="slot-title">@team 슬롯</div>
          <div class="slot-content" id="teamContent">
             <div class="loader-wrap">
               <div class="loader e"></div>
               <div class="loading-text">팀원 DB 조회 중...<br>(3초 소요 예상)</div>
             </div>
          </div>
        </section>
      </div>
      
    </div>
  </div>
</div>

<script>
function setLoader(id, colorClass, text) {
  document.getElementById(id).innerHTML = `
    <div class="loader-wrap">
      <div class="loader ${colorClass}"></div>
      <div class="loading-text">${text}</div>
    </div>
  `;
}

function setDone(id, emoji, text, value) {
  document.getElementById(id).innerHTML = `
    <div class="done-wrap">
      <div class="emoji">${emoji}</div>
      <div class="done-title">${text}</div>
      <div class="done-value">${value}</div>
    </div>
  `;
}

function simulateParallelLoading() {
  console.log(`[DashboardLayout] 페이지 진입! 레이아웃 렌더링 완료.`);
  console.log(`[Parallel Routes] @analytics 와 @team 의 독립적인 데이터 Fetching이 동시에 시작됩니다...`);
  
  // Reset UI to loading state
  setLoader('analyticsContent', 'p', '차트 데이터 Fetching 중...<br>(1초 소요 예상)');
  setLoader('teamContent', 'e', '팀원 DB 조회 중...<br>(3초 소요 예상)');

  // Analytics resolves fast (1s)
  setTimeout(() => {
    console.log(`[Slot @analytics] ✅ 통계 데이터 Fetch 완료! 화면에 즉시 표시됩니다. (나머지 슬롯은 블로킹하지 않음)`);
    setDone('analyticsContent', '📈', '주간 접속량', '14,250 뷰');
  }, 1000);

  // Team resolves slow (3s)
  setTimeout(() => {
    console.log(`[Slot @team] ✅ 팀원 DB 조회 완료! 이제 @team 슬롯이 화면에 표시됩니다.`);
    setDone('teamContent', '👨‍💻', '활성 멤버 수', '42명 대기중');
  }, 3000);
}

// Run on load
setTimeout(simulateParallelLoading, 500);
</script>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="mock-browser">
    <div class="browser-header">
      <div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="url-bar" id="mockUrl">localhost:3000/feed</div>
      <button class="reload-btn" onclick="simulateHardRefresh()" title="URL 주소 복사해서 새 탭 열기 (새로고침)">새 창 열기 🔗</button>
    </div>
    <div class="browser-content" id="browserContent">
      
      <!-- Feed View -->
      <div class="feed-view" id="feedView">
        <h2 style="margin:0 0 1rem 0; color: #1e293b;">📸 포토 피드</h2>
        <div class="photo-grid">
          <div class="photo-card" onclick="simulateSoftNavigate('/photo/123')">
            <div class="img-placeholder">🌅</div>
            <div class="desc">일몰 사진 (클릭)</div>
          </div>
          <div class="photo-card">
            <div class="img-placeholder">🐱</div>
            <div class="desc">귀여운 고양이</div>
          </div>
        </div>
      </div>

      <!-- Modal Overlay (Intercepted) -->
      <div class="modal-overlay" id="modalOverlay" style="display: none;">
        <div class="modal-content">
          <button class="close-btn" onclick="closeModal()">✖</button>
          <div class="img-large">🌅</div>
          <h3>일몰 사진 (가로채기 모달)</h3>
          <p>배경의 피드 화면이 그대로 유지된 상태로 모달이 열렸습니다! URL은 변경되었습니다.</p>
        </div>
      </div>

      <!-- Full Page View (Hard Refresh) -->
      <div class="full-page-view" id="fullPageView" style="display: none;">
        <h3 style="color: #2563eb;">/photo/123 단독 페이지</h3>
        <div class="img-large full">🌅</div>
        <p>새 창으로 접속(Hard Refresh)했기 때문에 가로채기(Intercept)가 발생하지 않고, 원본 페이지가 전체화면으로 렌더링되었습니다.</p>
        <button onclick="resetToFeed()" style="padding: 8px 16px; margin-top: 10px;">피드로 돌아가기</button>
      </div>

    </div>
  </div>
</div>

<script>
function simulateSoftNavigate(path) {
  console.log(`[Next.js Router] 클라이언트 내비게이션 발생! (Soft Link Click)`);
  console.log(`[Intercepting Routes] 🚀 '(..)photo' 라우트가 내비게이션을 가로챘습니다!`);
  console.log(`[UI Update] 원본 피드를 유지한 채 모달 슬롯(@modal)에 사진을 렌더링합니다.`);
  
  // Update URL visually
  document.getElementById('mockUrl').innerText = `localhost:3000${path}`;
  
  // Show Modal
  document.getElementById('modalOverlay').style.display = 'flex';
  document.getElementById('feedView').classList.add('blurred');
}

function closeModal() {
  console.log(`[Next.js Router] 뒤로가기(Back) 실행 -> '/feed' 복귀`);
  document.getElementById('mockUrl').innerText = `localhost:3000/feed`;
  document.getElementById('modalOverlay').style.display = 'none';
  document.getElementById('feedView').classList.remove('blurred');
}

function simulateHardRefresh() {
  const currentUrl = document.getElementById('mockUrl').innerText;
  if (!currentUrl.includes('/photo/')) {
    alert("먼저 사진을 클릭하여 모달을 연 뒤, 새 창 열기를 테스트해보세요!");
    return;
  }
  
  console.log(`[Browser] URL을 직접 입력하여 접속했습니다. (Hard Refresh)`);
  console.log(`[Next.js Router] 클라이언트 내비게이션이 아니므로 가로채기(Intercepting)가 무시됩니다.`);
  console.log(`[UI Update] 모달이 아닌 진짜 '/photo/[id]/page.tsx' 단독 화면을 렌더링합니다.`);
  
  // Hide Feed & Modal, Show Full Page
  document.getElementById('feedView').style.display = 'none';
  document.getElementById('modalOverlay').style.display = 'none';
  document.getElementById('feedView').classList.remove('blurred');
  document.getElementById('fullPageView').style.display = 'block';
}

function resetToFeed() {
  document.getElementById('mockUrl').innerText = `localhost:3000/feed`;
  document.getElementById('feedView').style.display = 'block';
  document.getElementById('fullPageView').style.display = 'none';
  console.clear();
  console.log(`피드로 초기화 되었습니다.`);
}
</script>

<div class="app-container">
  <h3>스타일링 전략 시뮬레이션</h3>
  
  <div class="cards-wrapper">
    <!-- 1. CSS Modules 컨셉 컨테이너 -->
    <div id="module-card">
      <h4 class="cardTitle_3x8Yq">CSS Modules 스타일</h4>
      <p class="cardDesc_a9F2p">고유한 해시값이 붙은 클래스로 충돌을 방지합니다.</p>
      <button class="btnPrimary_7zV1a">모듈 버튼</button>
    </div>

    <!-- 2. Tailwind CSS 컨셉 컨테이너 (실제 Tailwind는 아니지만 유틸리티 클래스 조합 흉내) -->
    <div class="tw-bg-slate tw-rounded-lg tw-p-6 tw-shadow-md">
      <h4 class="tw-text-blue tw-font-bold tw-text-xl tw-mb-2">Tailwind CSS 스타일</h4>
      <p class="tw-text-gray tw-mb-4">유틸리티 클래스를 조합하여 빠르고 직관적으로 꾸밉니다.</p>
      <button class="tw-bg-blue tw-text-white tw-px-4 tw-py-2 tw-rounded tw-hover">테일윈드 버튼</button>
    </div>
  </div>
</div>

<!-- HIDDEN_TAB -->
<div class="app-container">
  <div class="env-board">
    <div class="board-header">
      <h2 style="margin:0; color:#1e293b; font-size:1.2rem;">🔍 브라우저 소스코드 유출 테스트</h2>
    </div>
    
    <div class="code-files">
      <div class="file-header">
        <span style="color:#cbd5e1;">📄 .env.local</span>
      </div>
      <pre><code>DATABASE_PASSWORD="secret1234!"
NEXT_PUBLIC_API_KEY="pk_public_9999"</code></pre>
    </div>

    <div class="board-content">
      
      <!-- Server Output -->
      <div class="env-section server">
        <div class="env-title">
          <span class="icon">🖥️</span> 서버 사이드 렌더링 (Node.js)
        </div>
        <div class="var-row">
          <span class="var-name">process.env.DATABASE_PASSWORD</span>
          <span class="var-value">"secret1234!"</span>
        </div>
        <div class="var-row">
          <span class="var-name">process.env.NEXT_PUBLIC_API_KEY</span>
          <span class="var-value public">"pk_public_9999"</span>
        </div>
        <p class="desc">안전한 서버 환경이므로 <strong>모든 변수</strong>에 접근할 수 있습니다.</p>
      </div>

      <div class="arrow-down">▼ Next.js 빌드 및 브라우저 전송 ▼</div>

      <!-- Client Output -->
      <div class="env-section client">
        <div class="env-title">
          <span class="icon">🌐</span> 클라이언트 브라우저 (JavaScript 번들)
        </div>
        <div class="var-row">
          <span class="var-name">process.env.DATABASE_PASSWORD</span>
          <span class="var-value undefined">undefined</span>
        </div>
        <div class="var-row">
          <span class="var-name">process.env.NEXT_PUBLIC_API_KEY</span>
          <span class="var-value public">"pk_public_9999"</span>
        </div>
        <p class="desc" style="color:#ef4444;">🚨 NEXT_PUBLIC_ 이 없는 변수는 브라우저 번들에서 완전히 <strong>삭제(undefined)</strong>되어 소스코드 분석을 통한 탈취가 불가능합니다!</p>
      </div>

    </div>
  </div>
</div>