Particle Sandbox/구상/별도 페이지 구상

Particle Sandbox의 접속 구조 확장 및 시작 페이지(Homepage), 물질 & 물리학 도감 페이지(Material Guidebook Page) 구상 문서이다.

## 개요

현재 Particle Sandbox는 웹사이트 접속 즉시 메인 시뮬레이션 캔버스(canvas#game)와 인게임 컨트롤 패널(ControlPanel.svelte)이 마운트되어 게임이 바로 시작되는 단일 캔버스 구조를 가지고 있다. 

이러한 구조는 빠르게 시뮬레이션에 진입할 수 있는 장점이 있으나 다음과 같은 한계점이 존재한다:
- 신규 사용자에게 브랜딩과 게임의 핵심 재미요소(다양한 상호작용, 물리 반응 연쇄, 프리셋 맵)를 전달하는 **시작/랜딩 페이지의 부재**.
- 60여 종 이상의 다양한 파티클과 복잡한 반응 공식(제련, 분별증류, 고분자 중합, 폭발, 전기 회로 등)을 한눈에 파악하고 학습할 수 있는 **인게임 백과사전/가이드북의 부재**.
- 기존 저장 슬롯 관리 및 .psbx.json 세이브 파일 관리, 프리셋 맵 선택 진입 과정의 접근성 보완 필요성.

본 구상 문서에서는 현재의 단일 캔버스 구조를 확장하여 **시작 페이지 (Homepage / Landing Page)** 및 **물질 & 물리학 툴팁 페이지 (Material Tooltip & Guide Page)**를 새롭게 도입하고, 이를 기존 물리 엔진(Game.ts, Simulation.ts, snapshotFile.ts, snapshotFit.ts)과 유기적으로 통합하는 방안을 제시한다.

## 시스템 및 라우팅 아키텍처

Particle Sandbox의 프레임워크인 Astro의 MPA(Multi-Page Application) 구조와 Svelte 클라이언트 컴포넌트, Nanostores 상태 관리를 연동하여 라우트를 구성한다.

- **/ (시작 페이지 / Homepage)**:
  - 브랜드 비주얼 로고, 동적 particle 히어로 배너, 메인 CTA 버튼 그룹([게임 시작하기], [스냅샷 관리], [도감 페이지]), 샌드박스 프리셋 맵 선택 갤러리 렌더링.
- **/sandbox (메인 샌드박스 캔버스)**:
  - 기존 풀스크린/반응형 Particle Sandbox 게임 캔버스.
  - URL Query Parameter(예: /sandbox?preset=volcano 또는 /sandbox?slot=3)를 통해 지정된 프리셋이나 세이브 슬롯을 즉시 로드.
- **/guide (물질 & 물리학 도감 페이지)**:
  - 전체 물질 백과사전, 검색 및 상태/카테고리 필터링, 물질별 물리량 정보 카드, 상호작용 조합 표, **인터랙티브 미니 샌드박스 미리보기 캔버스** 제공.

### 엔진 및 모듈 재사용
- **Nanostores 공유**: $snapshots, $favorites, $recentPicks 등 기존 스토리지 스토어를 메인 게임과 시작 페이지/도감 페이지 간에 자유롭게 동기화.
- **엔진 모듈 공유**: snapshotFile.ts, snapshotFit.ts, categories.ts 등을 도감 및 시작 페이지 프리셋 로더에서 직접 재사용.

## 시작 페이지 구상

### 브랜드 비주얼 타이틀 및 동적 샌드박스 히어로 배너
- **비주얼 브랜드 로고**: Particle Sandbox 고유의 픽셀 아트 폰트 스타일 브랜드 로고 및 다이내믹 네온 액센트 헤더.
- **동적 백그라운드 히어로 샌드박스 (Dynamic Sandbox Hero Banner)**:
  - 메인 랜딩 화면의 배경 캔버스에서 낮은 해상도(예: 160×90 또는 240×135 격자)로 가벼운 파티클 연쇄 반응(예: 모래 낙하, 용암과 물의 급랭 흑요석 형성, 푸른 불꽃 연소, 연기 확산 등)이 30fps로 부드럽게 자동 재생됨.
  - **포인터 인터랙션**: 사용자가 마우스나 터치로 히어로 배너 위를 지나가면 커서 위치 주위로 부드러운 파동 충격파나 입자 흩날림 효과가 연출되어 유저의 시선을 사로잡음.
  - **성능 제어**: 배경 히어로 시뮬레이션은 CPU/GPU 리소스 소비를 최소화하도록 경량화 틱으로 구동하며, 브라우저 탭 비활성화 시 자동 일시정지.

### 메인 탐색 CTA 및 스냅샷 관리 UI
- **[게임 시작하기] (Start Sandbox)**:
  - 클릭 시 /sandbox 캔버스로 즉시 진입.
  - 서브 메뉴 옵션: "빈 월드로 시작" 또는 "마지막 자동저장 세이브 복원해서 시작".
- **[불러오기 / 스냅샷 관리] (Snapshot Manager)**:
  - 기존 세이브 슬롯 모달(SaveSlots.svelte / SnapshotLoad.svelte)을 대형 풀스크린 갤러리 UI로 확장.
  - **저장 슬롯 갤러리/목록 뷰**: 최대 50개 저장 슬롯의 썸네일(160px JPEG), 제목, 설명(desc), 생성 일자 노출.
  - **.psbx.json 파일 관리**: 로컬 파일로 내보내기(exportSnapshot), .psbx.json 드래그 앤 드롭 파일 가져오기(parseSnapshotFile), 가져온 스냅샷의 화면 배치 및 스케일 모드(snapshotFit — 자동 맞춤/원본 크기/수동 조절) 미리보기 모달 연동.
- **[물질 & 물리학 도감] (Guidebook)**:
  - 물질 & 물리학 가이드 페이지(/guide)로 진입하는 메인 안내 카드.

### 샌드박스 템플릿 / 프리셋 맵 선택
시작 페이지 하단에는 사용자가 클릭 한 번으로 특정 흥미진진한 무대를 즉시 시작할 수 있는 **프리셋 맵 선택 카드**를 제공한다.

- **🔥 화산과 화산유리 맵 (Volcano & Obsidian)**:
  - 웅장한 화산 지형에서 용암(Lava) 풀 위로 물(Water)이 떨어지며 흑요석(Obsidian) 껍질과 수증기(Steam)가 솟구치는 자연재해 맵.
- **⚒️ 고로 철 제련소 맵 (Blast Furnace Smelting)**:
  - 고체 철광석(Iron Ore), 석탄가루(Coal Powder), 석회석(Limestone) 장입층과 하단 석탄불 열원 노가 세팅되어 제련 환원 과정을 관찰하는 맵.
- **⚡ 전자회로 & 메카트로닉스 맵 (Circuitry & Physics)**:
  - 배터리(Battery), 스파크 릴레이, 레이저(Laser), 우퍼(Woofer), C4 폭약이 정밀하게 배선되어 반응하는 물리 회로 맵.
- **🛢️ 석유 정제 분별증류탑 맵 (Petroleum Refinery)**:
  - 원유(Crude Oil) 수조, 간접열 용기, 높이별 유분 획득관 및 고분자 촉매(Catalyst) 중합 파이프 라인이 갖춰진 화학공학 맵.
- **🌿 생태계와 생명 맵 (Ecosystem & Life)**:
  - 흙(Dirt), 물(Water), 식물(Plant), 흰개미(Termite), 불꽃이 위태롭게 공존하는 생태계 관찰 맵.

## 툴팁 & 가이드 백과사전 페이지 구상

인게임 물질 툴팁 및 가이드 백과사전 UI는 전체 60여 종 이상의 물질 및 독립 오브젝트의 물리적 수치와 반응 공식을 상세히 탐색하고 실험할 수 있는 종합 백과사전 페이지이다.

### 물질 검색 및 상태/카테고리 필터링
- **통합 검색창**: 한국어/영어 물질 이름, 키워드(예: "수소", "폭발", "내산성", "절연체", "유리") 검색.
- **상태 (Phase) 필터 칩**: 전체, 고체(Solid), 가루(Powder), 액체(Liquid), 기체(Gas), 불·열(Fire/Heat).
- **주제별 카테고리 탭**:
  - 고체 / 가루 / 액체 / 기체 / 불·열 / 제련 / 석유 / 고분자 / 폭발 / 전기 / 생명 / 특수
  - 각 탭 클릭 시 큐레이션된 물질 칩 그리드가 펼쳐지며 물질을 손쉽게 선택 가능.

### 물질 상세 물리량 정보 카드
선택한 물질의 과학적 고증 수치와 물리 법칙 사양을 한눈에 카드 형태로 보여준다:

- **기본 물리 사양**:
  - **상태 (Phase)**: 고체, 가루, 액체, 기체, 상전이 상태 등
  - **밀도 (Density)**: 파티클 침전 및 부력 우선순위 (예: 쇳물 8, 석탄가루 7.5, 원유 2.6, 물 3)
  - **온도 관련 수치**: 어는점, 끓는점, 녹는점(융점), 자연발화점, 열전도율(0.0~1.0)
  - **전기 & 물리 특성**: 전기 도체 여부, 내산성(Acid 면역), 방폭성, 자성 여부
- **속성 뱃지 표시**: [전기 도체], [내산성], [방폭], [가연성], [자연발화], [단열재], [레이저 거울], [충격파 파쇄] 등.

### 상호작용 & 반응 조합 표 (Reaction Combination Table)
해당 파티클이 다른 파티클 및 에너지와 반응할 때 일어나는 주요 상호작용 공식을 표 및 카드로 명확히 정리한다:

- 예시 1: **Aluminum Powder (알루미늄 가루)**
  - + Rust Powder → **Thermite** (절단 장약)
  - + Saltpeter → **Flash Powder** (섬광 장약)
  - + Liquid Gallium → **Activated Aluminum** (지연형 수소 발생 가루)
  - + Acid → **수소 거품 방출 (H₂ Gas)**
  - 불꽃 없이 660°C↑ → **Molten Aluminum** (주조)
  - 공중 비행 중 불씨 접촉 → **분진 폭발 (Dust Explosion)**
- 예시 2: **Molten Iron Ore (용융 철광석)**
  - + Coal Powder (석탄가루) → **Molten Iron (쇳물) + CO₂ 연기** (환원 반응)
  - + Limestone (석회석) → **철 수율 70% → 95% 상승**
  - 750°C 이하 동결 → **Slag (슬래그 실패 크러스트)**

### 인터랙티브 미니 샌드박스 미리보기 캔버스 (Playground)
도감 페이지 내에서 단순 설명글을 넘어서, 해당 물질의 상호작용을 즉석에서 실험할 수 있는 **인터랙티브 미니 샌드박스 캔버스**를 제공한다.

- **독립 소형 캔버스 (예: 128×128 또는 160×120 셀)**:
  - 툴팁 페이지 하단/우측에 소형 <canvas>를 배치하고, 경량화된 SimContext 및 Simulation 인스턴스를 바인딩하여 30Hz 시뮬레이션 구동.
  - 도감에서 물질을 선택하면 소형 샌드박스 중심에 해당 물질이 칠해진 상태로 대기.
- **인터랙티브 상호작용 액션 버튼**:
  - [🔥 불대기] : 화염 및 고온 열원 인가 (자연발화, 연소, 용융 테스트)
  - [💧 물붓기] : 수분 접촉 반응 테스트 (용해, Sodium 폭발, 알루미늄 활성화, 흑요석 급랭 등)
  - [🧪 산뿌리기] : Acid 부식 및 수소 기체 발생 테스트
  - [⚡ 전기 펄스] : Spark 인가하여 전기 도체 전파 및 가전 발동 테스트
  - [🧹 초기화] : 캔버스 리셋
- **인게임 돋보기 오버레이 연동**: 미니 샌드박스 위에서도 인게임 돋보기(InspectPanel)가 작동하여, 칠해진 입자의 개수, 구성 비율, 개별 평균 온도를 실시간으로 확인 가능.

## 구현 상세 및 개발 로드맵

### 컴포넌트 아키텍처
- src/pages/index.astro: 랜딩 시작 페이지. HeroSandbox.svelte, PresetGallery.svelte, SnapshotManagerModal.svelte 포함.
- src/pages/sandbox.astro: 메인 시뮬레이션 캔버스.
- src/pages/guide.astro: 물질 & 물리학 도감 페이지. MaterialWiki.svelte, MiniSandbox.svelte, ReactionTable.svelte 포함.
- src/components/MiniSandbox.svelte: 경량 Simulation 객체를 소형 <canvas>에 바인딩하여 메인 샌드박스의 엔진 틱 로직을 그대로 공유.

### 단계별 개발 로드맵
- **1단계**: Astro 라우팅 구성 (/, /sandbox, /guide) 및 공유 스토어/스타일 정리.
- **2단계**: 시작 페이지 랜딩 비주얼, 동적 히어로 배너 및 스냅샷 관리 갤러리 UI 통합.
- **3단계**: 프리셋 맵 스냅샷 덤프 데이터 작성 (presets.ts) 및 원클릭 게임 진입 연동.
- **4단계**: 도감 페이지 백과사전 데이터베이스 구성 및 미니 샌드박스 인터랙티브 플레이그라운드 연동.