docs/dashboard-workspace-map.md

# 대시보드 중심 워크스페이스 맵

**목적**: 상단 헤더 메인메뉴·랜딩 타임라인·`/dashboard` 워크스페이스 구역이 **같은 5개 프로젝트**를 가리키도록 유지하고, 구조 개선·허브 추가 시 **대시보드에서의 가시성**을 기준으로 자산을 정리한다.  
**단일 진실 공급원**: `components/dashboard/workspace-projects-data.ts` 의 `workspaceProjectTimeline`  
**플랜 연계**: `docs/structure-improvement-plan.md` **Phase 2 (대시보드 중심)**

> **경로(Phase 14):** §3 표의 `id`·`app/projects/...` 는 **앱 라우트·허브 slug**다. 로컬 작업·Git clone 의 **루트는 `./`** (`docs/deployment-registry.md` 참고).

---

## 1. 질문에 대한 정리 (제품 관점)

- **맞다.** 이 앱은 **`/dashboard`** 를 로그인 사용자의 허브로 두고, **스튜디오 브랜드 헤더**의 메인 네비는 `workspaceProjectTimeline` 과 동일한 **5개 프로젝트**로 구성된다 (`components/layout/site-header.tsx`).
- **랜딩 `/`** 도 동일 데이터로 워크스페이스 타임라인을 그린다. 즉 “스튜디오 홈 = 5개 프로젝트 로드맵”, “대시보드 = 그 로드맵 + 구독·사용량·온보딩 타임라인” 이라는 **이중 중심**이며, 개선 작업은 이 둘을 **시각적으로 더 구체화**(진행 상태, 다음 액션, 허브 심화 링크 등)하는 방향과 맞물리면 일관된다.
- **Phase 2 UI**: `WorkspaceProjectsTimelineSection` 에서 **`highlights` 최대 2줄**·**「학습 허브」(`startHref`)** 를 노출해 소개 페이지와 2번 허브를 한 화면에서 구분한다. (진행 배지·마지막 갱신 등은 추후 확장)

---

## 2. 데이터 흐름 (요약)

| 소비처 | 소스 | 역할 |
|--------|------|------|
| 헤더 메인메뉴 (데스크톱·모바일) | `workspaceProjectTimeline` | 5개 프로젝트 링크 |
| 랜딩 `/` 타임라인 | 동일 | 스튜디오 홈 |
| `/dashboard` 우측 컬럼 | `WorkspaceProjectsTimelineSection` | 동일 5종 + 소개 페이지로 이동 |
| 온보딩 3단계 (계정·플랜·채팅) | `buildDashboardTimelineSteps` | 구독 API 기반 — **프로젝트 5종과는 별 트랙** (혼동 시 설명 문구로 구분) |

새 프로젝트를 메뉴·대시보드에 넣으려면 **반드시** `workspaceProjectTimeline` 에 항목을 추가하고, 아래 표의 소개·허브·인덱스·파일 라우트를 채운다.

---

## 3. 5개 프로젝트 · 허브 · 정적 라우트 대응표

| `id` (slug) | 소개 (1번) | 허브 (2번) | 허브 컴포넌트 | 팔레트 인덱스 | 정적 파일 라우트 |
|-------------|------------|------------|---------------|----------------|------------------|
| `ai-coding-tools` | `app/projects/[slug]/page.tsx` | `app/projects/ai-coding-tools/hub/page.tsx` | `components/ai-coding-tools-hub/ai-coding-tools-learning-hub-page.tsx` | `lib/ai-coding-tools-hub-index.ts` | `app/ai-coding-tools-files/[...path]/route.ts` |
| `detailpage-ai-engine` | 동일 공용 slug 페이지 | `app/projects/detailpage-ai-engine/hub/page.tsx` | `components/detailpage-hub/core/detailpage-hub-entry.tsx` | `lib/detailpage-hub-index.ts` | `app/detailpage-files/[...path]/route.ts` |
| `saas-engine` | 동일 | `app/projects/saas-engine/hub/page.tsx` | `components/saas-hub/saas-learning-hub-page.tsx` | `lib/saas-hub-index.ts` | `app/saas-files/[...path]/route.ts` |
| `openclaw` | 동일 | `app/projects/openclaw/hub/page.tsx` | `components/openclaw-hub/openclaw-learning-hub-page.tsx` | `lib/openclaw-hub-index.ts` | `app/openclaw-files/[...path]/route.ts` |
| `skoolchef-tutorial` | 동일 | `app/projects/skoolchef-tutorial/hub/page.tsx` | `components/skoolchef-hub/skoolchef-learning-hub-page.tsx` | `lib/skoolchef-hub-index.ts` | `app/skoolchef-files/[...path]/route.ts` |

**프로덕션 허브 확인 URL(별칭 고정)**: `https://saas-engine-xi.vercel.app/projects/<slug>/hub` — 예: [ai-coding-tools 허브](https://saas-engine-xi.vercel.app/projects/ai-coding-tools/hub).

공통 타입: `lib/hub-palette-item.ts` (`HubPaletteItem`).

---

## 4. Phase 2에서의 “대시보드 구체화” 원칙

1. **목록 단일화**: 메뉴·랜딩·대시보드에 넣는 프로젝트는 `workspaceProjectTimeline` **한 곳**에서만 늘린다.  
2. **자산 완결성**: 표 3절의 열이 비면 그 프로젝트는 “메뉴에만 있고 허브는 없음” 상태가 되어 대시보드 신뢰도가 떨어진다. Phase 2 체크리스트로 막는다.  
3. **시각적 다음 단계 (설계만, 구현 선택)**: 대시보드 타임라인 행에 `highlights` 일부·`/hub` CTA·구현 단계 배지 등을 노출할 때는 **이 문서 + `hub-template-standard.md`** 를 기준으로 컴포넌트 props를 추가한다.  
4. **온보딩 vs 워크스페이스**: `DashboardTimeline`(3단계)은 결제·채팅용, `WorkspaceProjectsTimeline` 은 5프로젝트용 — UI 카피에서 역할을 분명히 한다.

---

## 5. 참조

- 허브 표준·체크리스트: `docs/hub-template-standard.md`
- 대시보드 일일 루틴: `docs/dashboard-update-routine.md`
- 워크스페이스 디렉터리 개요: `docs/workspace-structure.md`

<h1>대시보드 중심 워크스페이스 맵</h1>
<p><strong>목적</strong>: 상단 헤더 메인메뉴·랜딩 타임라인·<code>/dashboard</code> 워크스페이스 구역이 <strong>같은 5개 프로젝트</strong>를 가리키도록 유지하고, 구조 개선·허브 추가 시 <strong>대시보드에서의 가시성</strong>을 기준으로 자산을 정리한다.<br><strong>단일 진실 공급원</strong>: <code>components/dashboard/workspace-projects-data.ts</code> 의 <code>workspaceProjectTimeline</code><br><strong>플랜 연계</strong>: <code>docs/structure-improvement-plan.md</code> <strong>Phase 2 (대시보드 중심)</strong></p>
<blockquote>
<p><strong>경로(Phase 14):</strong> §3 표의 <code>id</code>·<code>app/projects/...</code> 는 <strong>앱 라우트·허브 slug</strong>다. 로컬 작업·Git clone 의 <strong>루트는 <code>./</code></strong> (<code>docs/deployment-registry.md</code> 참고).</p>
</blockquote>
<hr>
<h2>1. 질문에 대한 정리 (제품 관점)</h2>
<ul>
<li><strong>맞다.</strong> 이 앱은 <strong><code>/dashboard</code></strong> 를 로그인 사용자의 허브로 두고, <strong>스튜디오 브랜드 헤더</strong>의 메인 네비는 <code>workspaceProjectTimeline</code> 과 동일한 <strong>5개 프로젝트</strong>로 구성된다 (<code>components/layout/site-header.tsx</code>).</li>
<li><strong>랜딩 <code>/</code></strong> 도 동일 데이터로 워크스페이스 타임라인을 그린다. 즉 “스튜디오 홈 = 5개 프로젝트 로드맵”, “대시보드 = 그 로드맵 + 구독·사용량·온보딩 타임라인” 이라는 <strong>이중 중심</strong>이며, 개선 작업은 이 둘을 <strong>시각적으로 더 구체화</strong>(진행 상태, 다음 액션, 허브 심화 링크 등)하는 방향과 맞물리면 일관된다.</li>
<li><strong>Phase 2 UI</strong>: <code>WorkspaceProjectsTimelineSection</code> 에서 <strong><code>highlights</code> 최대 2줄</strong>·<strong>「학습 허브」(<code>startHref</code>)</strong> 를 노출해 소개 페이지와 2번 허브를 한 화면에서 구분한다. (진행 배지·마지막 갱신 등은 추후 확장)</li>
</ul>
<hr>
<h2>2. 데이터 흐름 (요약)</h2>
<table>
<thead>
<tr>
<th>소비처</th>
<th>소스</th>
<th>역할</th>
</tr>
</thead>
<tbody><tr>
<td>헤더 메인메뉴 (데스크톱·모바일)</td>
<td><code>workspaceProjectTimeline</code></td>
<td>5개 프로젝트 링크</td>
</tr>
<tr>
<td>랜딩 <code>/</code> 타임라인</td>
<td>동일</td>
<td>스튜디오 홈</td>
</tr>
<tr>
<td><code>/dashboard</code> 우측 컬럼</td>
<td><code>WorkspaceProjectsTimelineSection</code></td>
<td>동일 5종 + 소개 페이지로 이동</td>
</tr>
<tr>
<td>온보딩 3단계 (계정·플랜·채팅)</td>
<td><code>buildDashboardTimelineSteps</code></td>
<td>구독 API 기반 — <strong>프로젝트 5종과는 별 트랙</strong> (혼동 시 설명 문구로 구분)</td>
</tr>
</tbody></table>
<p>새 프로젝트를 메뉴·대시보드에 넣으려면 <strong>반드시</strong> <code>workspaceProjectTimeline</code> 에 항목을 추가하고, 아래 표의 소개·허브·인덱스·파일 라우트를 채운다.</p>
<hr>
<h2>3. 5개 프로젝트 · 허브 · 정적 라우트 대응표</h2>
<table>
<thead>
<tr>
<th><code>id</code> (slug)</th>
<th>소개 (1번)</th>
<th>허브 (2번)</th>
<th>허브 컴포넌트</th>
<th>팔레트 인덱스</th>
<th>정적 파일 라우트</th>
</tr>
</thead>
<tbody><tr>
<td><code>ai-coding-tools</code></td>
<td><code>app/projects/[slug]/page.tsx</code></td>
<td><code>app/projects/ai-coding-tools/hub/page.tsx</code></td>
<td><code>components/ai-coding-tools-hub/ai-coding-tools-learning-hub-page.tsx</code></td>
<td><code>lib/ai-coding-tools-hub-index.ts</code></td>
<td><code>app/ai-coding-tools-files/[...path]/route.ts</code></td>
</tr>
<tr>
<td><code>detailpage-ai-engine</code></td>
<td>동일 공용 slug 페이지</td>
<td><code>app/projects/detailpage-ai-engine/hub/page.tsx</code></td>
<td><code>components/detailpage-hub/core/detailpage-hub-entry.tsx</code></td>
<td><code>lib/detailpage-hub-index.ts</code></td>
<td><code>app/detailpage-files/[...path]/route.ts</code></td>
</tr>
<tr>
<td><code>saas-engine</code></td>
<td>동일</td>
<td><code>app/projects/saas-engine/hub/page.tsx</code></td>
<td><code>components/saas-hub/saas-learning-hub-page.tsx</code></td>
<td><code>lib/saas-hub-index.ts</code></td>
<td><code>app/saas-files/[...path]/route.ts</code></td>
</tr>
<tr>
<td><code>openclaw</code></td>
<td>동일</td>
<td><code>app/projects/openclaw/hub/page.tsx</code></td>
<td><code>components/openclaw-hub/openclaw-learning-hub-page.tsx</code></td>
<td><code>lib/openclaw-hub-index.ts</code></td>
<td><code>app/openclaw-files/[...path]/route.ts</code></td>
</tr>
<tr>
<td><code>skoolchef-tutorial</code></td>
<td>동일</td>
<td><code>app/projects/skoolchef-tutorial/hub/page.tsx</code></td>
<td><code>components/skoolchef-hub/skoolchef-learning-hub-page.tsx</code></td>
<td><code>lib/skoolchef-hub-index.ts</code></td>
<td><code>app/skoolchef-files/[...path]/route.ts</code></td>
</tr>
</tbody></table>
<p><strong>프로덕션 허브 확인 URL(별칭 고정)</strong>: <code>https://saas-engine-xi.vercel.app/projects/&lt;slug&gt;/hub</code> — 예: <a href="https://saas-engine-xi.vercel.app/projects/ai-coding-tools/hub">ai-coding-tools 허브</a>.</p>
<p>공통 타입: <code>lib/hub-palette-item.ts</code> (<code>HubPaletteItem</code>).</p>
<hr>
<h2>4. Phase 2에서의 “대시보드 구체화” 원칙</h2>
<ol>
<li><strong>목록 단일화</strong>: 메뉴·랜딩·대시보드에 넣는 프로젝트는 <code>workspaceProjectTimeline</code> <strong>한 곳</strong>에서만 늘린다.  </li>
<li><strong>자산 완결성</strong>: 표 3절의 열이 비면 그 프로젝트는 “메뉴에만 있고 허브는 없음” 상태가 되어 대시보드 신뢰도가 떨어진다. Phase 2 체크리스트로 막는다.  </li>
<li><strong>시각적 다음 단계 (설계만, 구현 선택)</strong>: 대시보드 타임라인 행에 <code>highlights</code> 일부·<code>/hub</code> CTA·구현 단계 배지 등을 노출할 때는 <strong>이 문서 + <code>hub-template-standard.md</code></strong> 를 기준으로 컴포넌트 props를 추가한다.  </li>
<li><strong>온보딩 vs 워크스페이스</strong>: <code>DashboardTimeline</code>(3단계)은 결제·채팅용, <code>WorkspaceProjectsTimeline</code> 은 5프로젝트용 — UI 카피에서 역할을 분명히 한다.</li>
</ol>
<hr>
<h2>5. 참조</h2>
<ul>
<li>허브 표준·체크리스트: <code>docs/hub-template-standard.md</code></li>
<li>대시보드 일일 루틴: <code>docs/dashboard-update-routine.md</code></li>
<li>워크스페이스 디렉터리 개요: <code>docs/workspace-structure.md</code></li>
</ul>