feat: enhance database environment handling and cleanup project
- Add environment-specific database selection (SQLite for local, MariaDB for NAS) - Remove edit button from admin detail view modal for cleaner UX - Clean up project files: remove redundant docs and test files - Update deployment script with improved SSH handling - Maintain backward compatibility while supporting both database types 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
164
CLAUDE.md
164
CLAUDE.md
@@ -1,146 +1,34 @@
|
||||
# CLAUDE.md
|
||||
---
|
||||
allowed-tools: [Read, Grep, Glob, Bash, Edit, MultiEdit]
|
||||
description: "Clean up code, remove dead code, and optimize project structure"
|
||||
---
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
# /sc:cleanup - Code and Project Cleanup
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is a web-based file management system (자료실) with full CRUD functionality. It's a hybrid application built with vanilla HTML, CSS, and JavaScript that supports both Supabase cloud database and localStorage for data persistence, providing seamless offline/online capabilities.
|
||||
|
||||
### Key Features
|
||||
- Create, Read, Update, Delete operations for file records
|
||||
- File upload with multiple file support (local + cloud storage)
|
||||
- User authentication and authorization
|
||||
- Search and filtering by title, description, tags, and category
|
||||
- Categorization system (문서, 이미지, 동영상, 프레젠테이션, 기타)
|
||||
- Tag-based organization
|
||||
- Responsive design for mobile and desktop
|
||||
- Modal-based editing interface
|
||||
- Cloud database with real-time synchronization
|
||||
- Offline support with localStorage fallback
|
||||
- Cross-device data synchronization
|
||||
|
||||
## File Structure
|
||||
## Purpose
|
||||
Systematically clean up code, remove dead code, optimize imports, and improve project structure.
|
||||
|
||||
## Usage
|
||||
```
|
||||
자료실/
|
||||
├── index.html # Main HTML file with UI structure and auth components
|
||||
├── styles.css # Complete styling with responsive design and auth styles
|
||||
├── script.js # Core JavaScript with FileManager class and Supabase integration
|
||||
├── supabase-config.js # Supabase configuration and helper functions
|
||||
├── supabase-schema.sql # Database schema for Supabase setup
|
||||
├── setup-guide.md # Comprehensive Supabase setup guide
|
||||
└── CLAUDE.md # This documentation file
|
||||
/sc:cleanup [target] [--type code|imports|files|all] [--safe|--aggressive] [--dry-run]
|
||||
```
|
||||
|
||||
## Architecture
|
||||
## Arguments
|
||||
- `target` - Files, directories, or entire project to clean
|
||||
- `--type` - Cleanup type (code, imports, files, all)
|
||||
- `--safe` - Conservative cleanup (default)
|
||||
- `--aggressive` - More thorough cleanup with higher risk
|
||||
- `--dry-run` - Preview changes without applying them
|
||||
|
||||
### Core Components
|
||||
## Execution
|
||||
1. Analyze target for cleanup opportunities
|
||||
2. Identify dead code, unused imports, and redundant files
|
||||
3. Create cleanup plan with risk assessment
|
||||
4. Execute cleanup operations with appropriate safety measures
|
||||
5. Validate changes and report cleanup results
|
||||
|
||||
1. **FileManager Class** (`script.js`)
|
||||
- Main application controller with hybrid storage support
|
||||
- Handles all CRUD operations (Supabase + localStorage fallback)
|
||||
- Manages user authentication and session state
|
||||
- Contains event handling and UI updates
|
||||
- Real-time synchronization capabilities
|
||||
|
||||
2. **Supabase Integration** (`supabase-config.js`)
|
||||
- Database configuration and connection management
|
||||
- Authentication helper functions (signup, login, logout)
|
||||
- CRUD helper functions for files and attachments
|
||||
- Storage helper functions for file uploads/downloads
|
||||
- Real-time subscription management
|
||||
|
||||
3. **Data Model**
|
||||
```javascript
|
||||
// Files table
|
||||
{
|
||||
id: UUID, // Primary key
|
||||
title: string, // File title (required)
|
||||
description: string, // Optional description
|
||||
category: string, // Required category
|
||||
tags: string[], // Array of tags
|
||||
user_id: UUID, // Foreign key to auth.users
|
||||
created_at: timestamp,
|
||||
updated_at: timestamp
|
||||
}
|
||||
|
||||
// File attachments table
|
||||
{
|
||||
id: UUID,
|
||||
file_id: UUID, // Foreign key to files
|
||||
original_name: string,
|
||||
storage_path: string, // Supabase Storage path
|
||||
file_size: integer,
|
||||
mime_type: string,
|
||||
created_at: timestamp
|
||||
}
|
||||
```
|
||||
|
||||
4. **UI Components**
|
||||
- Authentication section (login/signup/logout)
|
||||
- Sync status indicator
|
||||
- Search and filter section
|
||||
- Add new file form with cloud upload
|
||||
- File list display with sorting
|
||||
- Edit modal for updates
|
||||
- Responsive card-based layout
|
||||
- Offline mode notifications
|
||||
|
||||
### Development Commands
|
||||
|
||||
This is a hybrid web application supporting both online and offline modes:
|
||||
|
||||
1. **Local Development**
|
||||
```bash
|
||||
# Open index.html in a web browser
|
||||
# OR use a simple HTTP server:
|
||||
python -m http.server 8000
|
||||
# OR
|
||||
npx serve .
|
||||
```
|
||||
|
||||
2. **Supabase Setup (Required for online features)**
|
||||
```bash
|
||||
# 1. Follow setup-guide.md for complete setup
|
||||
# 2. Create Supabase project and database
|
||||
# 3. Run supabase-schema.sql in SQL Editor
|
||||
# 4. Create Storage bucket named 'files'
|
||||
# 5. Update supabase-config.js with your credentials
|
||||
```
|
||||
|
||||
3. **File Access**
|
||||
- Open `index.html` directly in browser
|
||||
- Works offline with localStorage (limited functionality)
|
||||
- Full features available with Supabase configuration
|
||||
|
||||
### Technical Implementation
|
||||
|
||||
- **Database**: Supabase PostgreSQL with Row Level Security (RLS)
|
||||
- **Storage**: Supabase Storage for files + localStorage fallback
|
||||
- **Authentication**: Supabase Auth with email/password
|
||||
- **Real-time**: Supabase Realtime for live synchronization
|
||||
- **File Handling**: FileReader API + Supabase Storage API
|
||||
- **UI Updates**: Vanilla JavaScript DOM manipulation
|
||||
- **Styling**: CSS Grid and Flexbox for responsive layouts
|
||||
- **Animations**: CSS transitions and keyframe animations
|
||||
- **Offline Support**: Automatic fallback to localStorage when offline
|
||||
|
||||
### Data Management
|
||||
|
||||
- **Online Mode**: Files stored in Supabase PostgreSQL + Storage
|
||||
- **Offline Mode**: Files stored as base64 strings in localStorage
|
||||
- **Hybrid Sync**: Automatic synchronization when connection restored
|
||||
- User-specific data isolation with RLS policies
|
||||
- Search works across title, description, and tags
|
||||
- Sorting available by date, title, or category
|
||||
- Categories are predefined but can be extended
|
||||
- Real-time updates across devices for same user
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- Modern browsers with ES6+ support
|
||||
- localStorage API support required
|
||||
- FileReader API for file uploads
|
||||
- Fetch API for Supabase communication
|
||||
- WebSocket support for real-time features
|
||||
- External dependency: Supabase JavaScript client library
|
||||
## Claude Code Integration
|
||||
- Uses Glob for systematic file discovery
|
||||
- Leverages Grep for dead code detection
|
||||
- Applies MultiEdit for batch cleanup operations
|
||||
- Maintains backup and rollback capabilities
|
||||
Reference in New Issue
Block a user