---
title: "📓 작업일지 — 루트(/) 소개 랜딩 페이지 신설"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-06"
priority: "Medium"
purpose: "비로그인 방문자가 루트(/) 진입 시 대시보드 대신 서비스 소개 랜딩 페이지를 보게 해, 검색엔진 색인·신규 방문자 전환에 도움이 되도록 함."
read_when: ["랜딩페이지", "LandingPage", "히어로", "비로그인 방문자", "루트 진입"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260706_223415"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 db9b736."
---

# 작업일지 — 루트(/) 소개 랜딩 페이지 신설

> 로그인하지 않은 방문자가 달록 사이트(dallog.kr)에 처음 들어오면, 이제는 바로 로그인 화면 대신 "달록이 뭐 하는 서비스인지" 소개하는 페이지를 보게 됩니다. 이미 로그인한 사용자는 기존과 동일하게 대시보드로 이동합니다.

## 1. 무엇을 했나

### 1-1. LandingPage 컴포넌트 신설
`src/pages/LandingPage.tsx`(99줄) 신설. 구성:
- **상단 네비게이션** — 로고, 로그인 링크, "무료로 시작" 버튼.
- **히어로 섹션** — "흩어진 운동 기록을 하나의 흐름으로" 카피, 부제(러닝·근력·체성분+AI코치), CTA 버튼 2개("무료로 시작하기", "기능 둘러보기"), 스크린샷 이미지.
- **기능 소개 3카드** — "세 가지를 한 곳에", "내 기록을 읽는 AI 코치", "쌓일수록 선명해지는 기록".
- **실제 화면 스크린샷 3장** — `/landing/02_fitlog_running.png`, `/landing/01_brief.png`, `/landing/08_coachnote.png`.
- **다운로드 CTA 섹션** — "지금 달록과 시작하세요", 플레이스토어 출시 예고 문구.
- **푸터** — 로고, 이용약관·개인정보처리방침·계정삭제·문의 링크, 저작권 표기.
- "무료로 시작"/"무료로 시작하기" 버튼은 게스트 진입(`/brief`)으로 연결됨(회원가입 강제 없음).
- 랜딩 페이지는 사용자의 라이트/다크 테마 설정과 무관하게 다크 브랜드 테마로 고정 표시하고, 페이지를 벗어날 때 원래 테마로 복원하는 `useEffect`를 둠.

```tsx
useEffect(() => {
  const html = document.documentElement
  const prev = html.getAttribute('data-theme')
  html.setAttribute('data-theme', 'dark')
  return () => { if (prev) html.setAttribute('data-theme', prev); else html.removeAttribute('data-theme') }
}, [])
```

### 1-2. 라우팅 분기 (App.tsx)
- 비로그인 방문자가 루트 경로(`/`)로 들어올 때만 `LandingPage`를 렌더하도록 조건 분기 추가. 로그인된 사용자는 기존 대시보드 흐름(AppRouter/StartRedirect)이 그대로 적용되어 랜딩 페이지에 도달하지 않음.

```diff
+    // 루트(/) 랜딩 — 비로그인 방문자 첫 진입은 소개 페이지. 로그인 유저는 위 분기/AppRouter(StartRedirect)로 대시보드.
+    else if (!isRealUser && location.pathname === '/') content = <LandingPage />
```

### 1-3. 전용 스타일시트 신설
- `src/pages/landing.css`(87줄) 신설. 색상은 기존 CSS 변수 토큰(`--bg`, `--accent`, `--border`, `--text1/2/3`)을 재사용하고, 여백은 `clamp()` 기반 반응형. 히어로는 데스크탑에서 2단(`1.1fr 0.9fr`) 그리드, 768px 이하에서는 1단으로 전환.
- 스크린샷 3장(PNG) 신규 추가: `public/landing/01_brief.png`, `02_fitlog_running.png`, `08_coachnote.png`.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/pages/LandingPage.tsx` | 랜딩 페이지 컴포넌트 신설 |
| `src/pages/landing.css` | 랜딩 전용 스타일 신설 |
| `src/App.tsx` | 비로그인+루트 경로 조건에서 `LandingPage` 렌더 분기 추가 |
| `public/landing/01_brief.png`, `02_fitlog_running.png`, `08_coachnote.png` | 랜딩용 실제 화면 스크린샷 3장 신규 |

## 3. 관련 커밋

- `db9b736` feat(landing): 루트(/) 소개 랜딩 페이지 신설 — 비로그인 방문자용 히어로·기능3·스크린샷·CTA·푸터 (다크 브랜드 고정, 로그인 유저는 기존 대시보드 흐름 무변경) (2026-07-06)

## 4. 남은 이슈

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