Mac 44

.zed/settings.json

@@ -0,0 +1,32 @@
+{
+  "languages": {
+    "JavaScript": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TypeScript": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TSX": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    }
+  },
+  "lsp": {
+    "biome": {
+      "settings": {
+        "require_config_file": true
+      }
+    }
+  }
+}

CLAUDE.md

@@ -1,165 +1,8 @@
-# macOS Web React - Project Documentation
+# CLAUDE.md
 
-## Project Overview
-A React-based web application that recreates the macOS desktop experience in a browser. It provides a functional desktop environment with windows, dock, menus, and applications.
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Tech Stack
-- **Frontend Framework**: React 18 + TypeScript
-- **Build Tool**: Vite with SWC
-- **Styling**: Vanilla Extract (CSS-in-JS)
-- **State Management**: Zustand
-- **Animation**: Framer Motion + Canvas API
-- **Testing**: Vitest + React Testing Library
-- **Code Quality**: Biome (linting & formatting)
-- **Package Manager**: Yarn
-
-## Project Structure
-
-```
-macos-web-react/
-├── src/
-│   ├── domains/              # Business logic domains
-│   │   ├── app/             # Application system
-│   │   ├── dock/            # Dock UI and behavior
-│   │   ├── menu/            # Menu system
-│   │   ├── window/          # Window management
-│   │   └── window-animation/ # Window animations
-│   ├── modules/              # Reusable technical modules
-│   │   ├── movable/         # Drag and drop
-│   │   ├── movable-react/   # React wrapper
-│   │   ├── resizable/       # Resize functionality
-│   │   └── resizable-react/ # React wrapper
-│   ├── third-parties/        # External library wrappers
-│   │   ├── classnames/      # Classname utilities
-│   │   ├── floating-ui/     # Floating UI
-│   │   ├── vanilla-extract/ # Style system
-│   │   └── zustand/         # State management
-│   ├── utils/                # Utility functions
-│   │   ├── array/           # Array utilities
-│   │   ├── canvas/          # Canvas utilities
-│   │   ├── dom/             # DOM utilities
-│   │   ├── math/            # Math functions
-│   │   ├── object/          # Object utilities
-│   │   └── type/            # Type utilities
-│   ├── views/                # Page components
-│   └── assets/               # Static resources
-│       └── app-icons/       # Application icons
-├── public/                   # Static files
-├── tests/                    # Test files
-└── config files...           # Configuration files
-```
-
-## Core Domains
-
-### 1. Window System (`/domains/window/`)
-Core window management system
-
-**Key Features:**
-- Draggable windows with screen boundary constraints
-- Resizable windows (8 directions)
-- Focus management with automatic z-index ordering
-- Minimize/restore animations
-- Window snapping (edge and inter-window)
-
-**Store Structure:**
-```typescript
-interface WindowsState {
-  windows: Window[]                    // Active windows list
-  minimizedWindows: MinimizedWindow[]  // Minimized windows
-  focusedWindowID: string | null       // Currently focused window
-  isDraggingWindow: boolean            // Dragging state
-}
-```
-
-**Recent Updates:**
-- Mouse cursor constrained to screen boundaries during drag
-- Dock hover animation disabled during window dragging
-
-### 2. Window Animation (`/domains/window-animation/`)
-Canvas-based implementation of macOS Genie effect
-
-**Core Technologies:**
-- Bézier curve-based image transformation
-- RequestAnimationFrame utilization
-- Screen capture and real-time rendering
-- Reverse animation support
-
-### 3. Application System (`/domains/app/`)
-Pluggable application architecture
-
-**Currently Implemented Apps:**
-- **Calculator**: Fully functional calculator
-  - 469 test cases
-  - Floating-point precision handling
-  - Operator precedence support
-- **Finder**: File browser UI (basic implementation)
-
-**Application Interface:**
-```typescript
-interface ApplicationConfig {
-  id: ApplicationID
-  app: () => React.ReactElement
-  initialStyle: WindowStyle
-}
-```
-
-### 4. Dock (`/domains/dock/`)
-macOS-style dock implementation
-
-**Features:**
-- Icon magnification on hover
-- Minimized window display
-- App launch and restore
-- Dynamic sizing (distance-based)
-
-### 5. Menu System (`/domains/menu/`)
-Floating UI-based menu system
-
-**Components:**
-- Apple menu dropdown
-- Submenu support
-- Keyboard navigation
-
-## Technical Features
-
-### State Management Pattern
-Zustand with action separation pattern:
-```typescript
-export const useStore = create<State, Actions>((set) => ({
-  // state
-  windows: [],
-  // actions separated
-  actions: {
-    createWindow: () => set(...),
-    updateWindow: () => set(...)
-  }
-}))
-
-// Hook for actions only
-export const useStoreActions = () => 
-  useStore(state => state.actions)
-```
-
-### Style System
-Type-safe CSS with Vanilla Extract:
-- Centralized design tokens
-- Dark mode support
-- Zero-runtime CSS extraction
-- Component-specific `.css.ts` files
-
-### Module System
-
-**Movable Module:**
-- Custom drag and drop implementation
-- Event manager pattern
-- React component wrapper provided
-
-**Resizable Module:**
-- 8-direction resize handlers
-- Min/max size constraints
-- Automatic cursor style changes
-
-## Development Scripts
+## Development Commands
 
 ```bash
 # Start development server
@@ -181,48 +24,71 @@ yarn test
 yarn typecheck
 ```
 
-## Recent Updates
-- Window snap feature in development (`feat/snap` branch)
-- Velocity-based snap implementation
-- Improved window movement constraints (mouse cursor-based)
-- Dock hover animation optimization
+## Architecture Overview
 
-## Code Conventions
-- TypeScript strict mode enabled
-- Components: PascalCase
-- Utilities: camelCase
-- Barrel exports via `index.ts`
-- Domain-based folder structure
-- Test files colocated with source (`.spec.ts`)
+**macOS Web React** is a React-based web application that recreates the macOS desktop experience in a browser using modern web technologies.
 
-## Performance Optimizations
-- Canvas-based animations (GPU acceleration)
-- Event delegation
-- Appropriate use of React.memo and useMemo
+### Core Components
+
+- **domains/window/**: Window management system with drag, resize, focus, and minimize
+- **domains/dock/**: macOS-style dock with icon magnification and app management
+- **domains/menu/**: Floating UI-based menu system
+- **domains/app/**: Pluggable application architecture (Calculator, Finder)
+- **domains/window-animation/**: Canvas-based Genie effect animations
+
+### Technical Stack
+
+- **Frontend**: React 18 + TypeScript with Vite/SWC
+- **Styling**: Vanilla Extract (zero-runtime CSS-in-JS)
+- **State**: Zustand with action separation pattern
+- **Animation**: Framer Motion + Canvas API
+- **Testing**: Vitest + React Testing Library
+- **Quality**: Biome (linting & formatting)
+
+### Key Architectural Patterns
+
+1. **Domain-Driven Structure**: Business logic organized by domain
+2. **Module System**: Reusable technical modules (movable, resizable)
+3. **Action Separation**: Zustand stores with separated actions
+4. **Type Safety**: Comprehensive TypeScript throughout
+5. **Performance**: Canvas animations, event delegation, memoization
+
+### File Locations
+
+- Core domains: `/src/domains/*/`
+- Reusable modules: `/src/modules/*/`
+- Third-party wrappers: `/src/third-parties/*/`
+- Utilities: `/src/utils/*/`
+- Application icons: `/src/assets/app-icons/`
+
+### Development Workflow
+
+1. Make changes to source code
+2. Run `yarn lint:fix` to format code
+3. Run `yarn typecheck` to verify types
+4. Run `yarn test` to verify changes
+5. Use `yarn build` to test production build
+
+### Working with Current Directory
+
+You are in the root of the macOS Web React project. Key areas:
+
+- **Window System**: Handles dragging, resizing, focus, minimize/restore
+- **Dock Implementation**: Distance-based magnification, app launching
+- **Animation Engine**: Bézier curve-based transformations
+- **Application System**: Pluggable apps with standardized interface
+
+### Performance Notes
+
+- Uses Canvas API for hardware-accelerated animations
+- Implements custom drag/drop with event delegation
 - Zero-runtime CSS with Vanilla Extract
+- Appropriate React optimization (memo, useMemo)
+
+### Code Conventions
 
-## Future Plans
-- More native app implementations
-- File system simulation
-- System preferences
-- Multitasking gestures
-- Terminal application
-
-## Key Strengths
-
-1. **Clean Architecture**: Domain-driven design with clear separation of concerns
-2. **Performance**: Optimized animations and event handling
-3. **Type Safety**: Comprehensive TypeScript usage
-4. **Testing**: Thorough test coverage for business logic
-5. **Extensibility**: Pluggable application system
-6. **User Experience**: Authentic macOS interactions
-7. **Code Quality**: Modern tooling and consistent patterns
-
-## Technical Highlights
-
-- Custom animation engine with Bézier curves
-- Advanced state management architecture
-- Modular event system for drag/drop and resize
-- Comprehensive design system with theming
-- Floating-point precision in calculator
-- Performance optimizations throughout
+- Components: PascalCase
+- Utilities: camelCase
+- Barrel exports via `index.ts`
+- Test files colocated with source (`.test.ts`)
+- Domain-based folder organization

biome.json

@@ -24,6 +24,13 @@
       },
       "suspicious": {
         "noArrayIndexKey": "off"
+      },
+      "correctness": {
+        "noUnusedImports": {
+          "level": "warn",
+          "fix": "safe",
+          "options": {}
+        }
       }
     }
   },

cspell.json

@@ -0,0 +1,11 @@
+{
+    "version": "0.2",
+    "language": "en",
+    "words": [
+        // font
+        "Pretendard",
+
+        "trackpad",
+        "hotspot"
+    ],
+}