# Uygulama Planı: Safnaturel Özel Tasarım Takı Uygulaması

## Genel Bakış

React + TypeScript + Vite projesi kurularak, ana sayfa, tasarım editörü (taş kataloğu, takı modeli, ayarlar/sepet panelleri), sürükle-bırak mekanizması, şablon yönetimi ve sipariş oluşturma akışı adım adım geliştirilecektir.

## Görevler

- [x] 1. Proje yapısını ve temel altyapıyı kur
  - [x] 1.1 Vite + React + TypeScript projesi oluştur, bağımlılıkları ekle
    - Tailwind CSS, Zustand, React Router, @dnd-kit/core, Vitest, fast-check
    - Mor/mavi gradient tema renklerini Tailwind config'e ekle
    - _Gereksinimler: 10.1_
  - [x] 1.2 TypeScript tip tanımlarını oluştur (`src/types/index.ts`)
    - Stone, JewelryType, JewelrySize, StoneSizeMm, ModelTemplate, SlotPosition, BeadSlot, DesignState, CartItem, Order
    - _Gereksinimler: Tüm_
  - [x] 1.3 Yardımcı fonksiyonları oluştur (`src/utils/calculations.ts`)
    - calculateSlotCount, generateSlotPositions, filterStones
    - _Gereksinimler: 2.2, 8.1_

  - [ ]* 1.4 Yardımcı fonksiyonlar için özellik testleri yaz
    - **Property 1: Taş arama filtreleme doğruluğu**
    - **Validates: Requirements 2.2**
    - **Property 5: Ayar değişikliğinde yuva sayısı tutarlılığı**
    - **Validates: Requirements 6.3, 6.4, 8.1, 8.2, 8.3**

- [x] 2. Zustand store'larını oluştur
  - [x] 2.1 Template Store oluştur (`src/store/templateStore.ts`)
    - templates, loadTemplates, addTemplate, removeTemplate
    - localStorage senkronizasyonu
    - _Gereksinimler: 3.3, 3.4_
  - [x] 2.2 Design Store oluştur (`src/store/designStore.ts`)
    - State: jewelryType, size, stoneSizeMm, selectedTemplate, slots, slotCount, zoom
    - Actions: setJewelryType (sıfırlama dahil), setSize, setStoneSizeMm, setTemplate, placeStone, removeStone, resetSlots, zoomIn, zoomOut
    - Tür değişikliğinde sıfırlama, ölçü/boyut değişikliğinde yeniden hesaplama
    - _Gereksinimler: 5.2, 5.3, 6.2, 6.3, 6.4, 8.3_
  - [ ]* 2.3 Store'lar için özellik testleri yaz
    - **Property 2: Taş yerleştirme tutarlılığı** — **Validates: Requirements 5.2, 7.2**
    - **Property 3: Geçersiz bırakma durumunda model değişmezliği** — **Validates: Requirements 5.3**
    - **Property 4: Tür değişikliğinde sıfırlama** — **Validates: Requirements 6.2**
    - **Property 6: Sepet-model senkronizasyonu** — **Validates: Requirements 7.2, 7.3, 7.4**
    - **Property 7: Şablon ekleme/kaldırma tutarlılığı** — **Validates: Requirements 3.3, 3.4**

- [x] 3. Checkpoint - Temel altyapı doğrulaması
  - Tüm testlerin geçtiğinden emin ol, sorular varsa kullanıcıya sor.

- [x] 4. Ana Sayfa bileşenini oluştur
  - [x] 4.1 LandingPage, Logo ve CategoryCard bileşenlerini oluştur
    - Safnaturel logosu, başlık, alt başlık
    - Bileklik, Kolye, Tesbih kategori kartları
    - Mor/mavi gradient arka plan
    - Kart tıklamasında `/editor/:type` yönlendirmesi
    - _Gereksinimler: 1.1, 1.2, 1.3, 10.1_

- [x] 5. Tasarım Editörü iskeletini oluştur
  - [x] 5.1 DesignEditor ana bileşenini ve üç panelli düzeni oluştur
    - Sol, orta, sağ panel yerleşimi
    - URL parametresinden jewelryType okuma
    - Duyarlı tasarım: 768px altında dikey, üstünde yatay
    - _Gereksinimler: 6.1, 10.2, 10.3_

- [x] 6. Taş Kataloğu panelini oluştur
  - [x] 6.1 StonePanel, SearchBar ve StoneGrid bileşenlerini oluştur
    - Taş verilerini statik JSON'dan yükleme
    - Arama çubuğu ile filtreleme
    - İki sütunlu grid, sonuç bulunamadığında mesaj
    - Taş kartlarını @dnd-kit ile sürüklenebilir yapma
    - _Gereksinimler: 2.1, 2.2, 2.3, 2.4, 5.1_

- [x] 7. Takı Modeli görüntüleme bileşenini oluştur
  - [x] 7.1 ModelView, JewelryCanvas, BeadSlot ve ZoomControls bileşenlerini oluştur
    - Dairesel düzende boncuk yuvaları (SVG)
    - generateSlotPositions ile pozisyon hesaplama
    - Dolu/boş yuva görsel ayrımı
    - Zoom butonları
    - Yuvaları @dnd-kit ile bırakılabilir yapma
    - _Gereksinimler: 3.2, 4.1, 4.2, 4.3, 4.4_

- [x] 8. Sürükle-bırak entegrasyonunu tamamla
  - [x] 8.1 DndContext ile sürükle-bırak akışını bağla
    - DndContext provider'ını DesignEditor'a ekle
    - onDragEnd: geçerli yuva → placeStone, geçersiz → iptal
    - Kapasite kontrolü, DragOverlay
    - _Gereksinimler: 5.2, 5.3, 5.4_

- [x] 9. Ayarlar ve Sepet panelini oluştur
  - [x] 9.1 SettingsPanel bileşenini oluştur
    - TypeSelector, SizeSelector, StoneSizeSelector
    - Ayar değişikliklerinde store action'larını tetikleme
    - _Gereksinimler: 6.1, 6.2, 6.3, 6.4_
  - [x] 9.2 Cart ve OrderButton bileşenlerini oluştur
    - Boş sepet mesajı, taş listesi, X/Y sayaç
    - Taş çıkarma işlevi
    - Sipariş Oluştur butonu (tüm yuvalar doluyken aktif)
    - _Gereksinimler: 7.1, 7.2, 7.3, 7.4, 9.1_
  - [ ]* 9.3 Sipariş butonu aktivasyon testi yaz
    - **Property 8: Sipariş butonu aktivasyon invariantı**
    - **Validates: Requirements 9.1**

- [x] 10. Şablon yönetimi ve sipariş oluşturma
  - [x] 10.1 Model şablonu seçim arayüzünü oluştur
    - Türe göre şablon listesi, şablon seçiminde model güncelleme
    - _Gereksinimler: 3.1, 3.2_
  - [x] 10.2 Sipariş oluşturma akışını implement et
    - Sipariş özeti modal, onaylama, localStorage kaydetme
    - Hata durumunda mesaj ve veri koruma
    - _Gereksinimler: 9.2, 9.3, 9.4_
  - [ ]* 10.3 Sipariş kaydetme round-trip testi yaz
    - **Property 9: Sipariş kaydetme round-trip**
    - **Validates: Requirements 9.3**

- [x] 11. Son checkpoint
  - Tüm testlerin geçtiğinden emin ol, sorular varsa kullanıcıya sor.

## Notlar

- `*` ile işaretli görevler opsiyoneldir ve hızlı MVP için atlanabilir
- Her görev belirli gereksinimlere referans verir
- Özellik testleri evrensel doğruluk özelliklerini, birim testleri belirli örnekleri doğrular