jaryo/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

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

자료실/
├── 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

Architecture

Core Components

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

   // 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

   # 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)

   # 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