v2.0 에서 만든 게스트 모드가 어느 화면에도 안 붙어 있던 사고 — POP-SPOT v2.5 게스트 재배선

// v2.5 — intro/page.tsx 의 우상단 D-N 알약 표시
const { active, daysLeft } = useGuestMode();
// 위: v2.0 의 커스텀 훅 — active(남은 일수 있음) 와 daysLeft(남은 일 수) 구조분해
//      이제서야 쓰이기 시작 — v2.0에서 만들어 놓고 아무 화면에서도 호출 안 되고 있던 그 훅

{active && (
  // 위: 논리·AND 명제 — active=true 일 때만 표시. 로그인 사용자·게스트 만료 때는 숨김
  <span className="px-3 py-1 text-xs rounded-full
                   bg-lime-400/20 text-lime-200 flex items-center gap-1">
    {/* 위: Tailwind 클래스 조합 — pill 형 알약 배지 */}
    {/*  px-3 py-1 — 좌우 12px / 상하 4px 안여백 */}
    {/*  text-xs — 작은 글자 (0.75rem) */}
    {/*  rounded-full — border-radius:9999px — 알약 형태 (pill) */}
    {/*  bg-lime-400/20 — 라임 그린 20% 불투명 배경. 은은한 색 */}
    {/*  text-lime-200 — 그린 계열 연한 글자. 배경 대비용 */}
    {/*  flex items-center gap-1 — 아이콘·글자 가로 정렬 + 4px 간격 */}
    <ClockIcon className="w-3 h-3" />
    {/* 위: 12px 시계 아이콘. "남은 시간" 시각적 힌트 */}
    D-{daysLeft}
    {/* 위: D-7 ~ D-1 레이블 (텍스트). daysLeft 에 숫자 그대로 매핑 */}
  </span>
)}

// v2.5 — app/page.tsx 최상단: 만료 게이트 (7일 지난 비로그인 차단)
const { active } = useGuestMode();
// 위: 게스트 활성 여부만 필요 — daysLeft 는 이 화면에서 표시 안 함
const { user } = useAuth();
// 위: 로그인 사용자 정보. user 가 truthy 이면 로그인 완료 상태

useEffect(() => {
  if (!user && !active) {
    // 위: 로그인 안 했고 (!user) AND 게스트도 만료됨 (!active)
    //      → 둘러볼 권한 없음 → 강제 회원가입
    router.replace('/signup?reason=guestExpired');
    // 위: replace 는 브라우저 히스토리에 현재 페이지 남기지 않음 (뒤로가기로 돌아올 수 없음)
    //      reason=guestExpired — signup 페이지가 이 이유를 읽고 해당 배너를 띄우도록 신호 전달
  }
}, [user, active]);
// 위: 의존성 배열 [user, active] — 이 둘 중 하나라도 변하면 재실행
//      예: 게스트 자연 만료(이 흐름에서는 발생 안 함) / 로그아웃 후 재돌입 시

// v2.5 — signup/page.tsx 조건부 배너
const reason = useSearchParams().get('reason');
// 위: Next.js 훅으로 현재 URL 의 쿼리스트리링 읽기
//      reason 파라미터 값을 가져옴 (예: 'guestExpired')
//      쿼리가 없으면 null

{reason === 'guestExpired' && (
  // 위: 일치할 때만 배너 렌더링
  <div className="mb-6 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20">
    {/* 위: 테일윈드 클래스 조합 */}
    {/*  mb-6 — 아래에 24px 마진 (폼과 간격) */}
    {/*  p-4 — 안여백 16px */}
    {/*  rounded-xl — 모서리 둥글게 (반경 12px) */}
    {/*  bg-amber-50 — 라이트 모드: 아주 연한 엠버 (부드러운 느낌) */}
    {/*  dark:bg-amber-900/20 — 다크 모드: 진한 엠버 20% 불투명 */}
    7일 무료 체험이 끝났어요. 30초면 끝나요.
    {/* 위: 완료·소요 연속성을 담은 카피. 장황한 설명 없이 단축 완료 유도 */}
  </div>
)}