---
title: "📓 작업일지 — 로그인 유도 배너 새로고침 시 깜빡임(flicker) 수정"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-14"
priority: "Low"
purpose: "새로고침 직후 인증 세션 조회가 끝나기 전 잠깐 게스트로 오인되어 빨간 로그인 유도 배너가 번쩍이던 문제를, 인증 로딩 상태(loading)를 배너 표시 조건에 반영해 해결한 기록(demo 검증분 main 반영)."
read_when: ["로그인 배너 깜빡임", "has-banner", "useAuth loading", "showAnonymousBanner", "Layout.tsx"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260714_164628"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 e3545fd(2026-07-14, demo 검증분 main 반영 — deploy 배치 커밋의 일부)."
---

# 작업일지 — 로그인 유도 배너 새로고침 시 깜빡임 수정

> 로그인된 사용자가 페이지를 새로고침하면, 브라우저가 세션 정보를 다시 조회하는 짧은 순간 동안 `isGuest`가 일시적으로 `true`가 되면서 "로그인하지 않은 방문자용" 빨간 배너가 잠깐 나타났다 사라지는 현상이 있었다. 원인은 인증 로딩이 끝나기 전의 중간 상태를 게스트 상태와 구분하지 않았기 때문이다.

## 1. 무엇을 했나

- `src/components/Layout.tsx`에서 `useAuth()`가 제공하는 `loading` 값을 새로 받아, 배너 표시 여부를 `isGuest` 단독이 아니라 `showAnonymousBanner = isGuest && !loading`으로 계산하도록 변경.
- 기존에는 `showAnonymousBanner` 계산이 `mainNode`를 만드는 코드 블록 안에서 `isGuest`만으로 이루어져, `mainClass`(`.has-banner` 클래스 부여 여부) 계산 시점에는 아직 반영되지 않는 순서 문제도 있었음 — 이번 변경으로 `showAnonymousBanner`를 상단에서 먼저 계산해 `mainClass`에도 같은 값을 사용하도록 정리.
- 결과적으로 인증 세션 조회가 끝나기 전에는 배너도, `.has-banner` 여백도 적용되지 않다가, 로딩이 끝난 뒤 실제 게스트일 때만 배너가 나타남 — 깜빡임 제거.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/components/Layout.tsx` | `showAnonymousBanner`를 `isGuest && !loading`으로 계산, `mainClass`도 동일 값 사용 |

### 핵심 발췌
```diff
-  const { user, isMasterUser, isGuest } = useAuth()
+  const { user, isMasterUser, isGuest, loading } = useAuth()
+  // 로그인 유도 배너는 인증 확정 후에만 — 새로고침 시 세션 조회 전 잠깐 isGuest=true가 되며 빨간 배너가 번쩍이던 문제 해결
+  const showAnonymousBanner = isGuest && !loading
   ...
-  const mainClass = 'lay-main' + ... + (isGuest ? ' has-banner' : '')
+  const mainClass = 'lay-main' + ... + (showAnonymousBanner ? ' has-banner' : '')
   ...
-  // 본문 main
-  const showAnonymousBanner = isGuest
+  // 본문 main (showAnonymousBanner 는 위에서 loading 반영해 계산)
```

## 3. 관련 커밋

- `e3545fd` deploy(main): demo 검증분 일괄 반영 — 로그인배너 깜빡임 수정 포함 (2026-07-14)

## 4. 남은 이슈

커밋 기준 별도로 언급된 남은 이슈 없음.