Skip to content

CLAUDE.md

Latest commit

 

History

History
115 lines (89 loc) · 6.07 KB

CLAUDE.md

File metadata and controls

115 lines (89 loc) · 6.07 KB

CLAUDE.md

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

Project Overview

This is a Next.js 15.5.4 application using React 19 and TypeScript, configured with Turbopack for enhanced development performance. The project is a developer utility app that provides various tools including JSON formatting, time conversion, and timer functionality. The UI is built with Tailwind CSS v4 and shadcn/ui components.

Development Commands

  • npm run dev - Start development server with Turbopack optimization (runs on port 3001)
  • npm run build - Build production bundle with Turbopack
  • npm start - Start production server

Architecture

Project Structure

  • App Router: Uses Next.js App Router with app/ directory structure
  • Layout: Root layout with Geist fonts, dark mode support, and sidebar navigation
  • Tool Pages: Individual pages for each utility tool under /time/, /json/, /string/, /random/, /computer/ routes
  • Components: Modular UI components with shadcn/ui system
  • Utilities: Central utility functions in lib/utils.ts
  • Dashboard: Main landing page (/) with tool overview and quick navigation

Application Features

The application provides developer utility tools across 5 main categories:

Time Tools

  1. Timer (/time/timer): Countdown timer with notifications, preset times, and visual feedback
  2. Time Converter (/time/converter): Multi-format time conversion with timezone support
  3. Cron (/time/cron): Cron expression generator and validator

JSON Tools

  1. JSON Formatter (/json/formatter): JSON validation, formatting, and error detection with Korean interface
  2. JSON Converter (/json/converter): Convert JSON to various formats

String Tools

  1. Case (/string/case): Convert text between different case styles (camelCase, snake_case, etc.)
  2. Newline (/string/newline): Convert line endings and handle newline characters
  3. Regex (/string/regex): Regular expression tester with real-time matching
  4. Manipulator (/string/manipulator): String manipulation tools (trim, reverse, etc.)
  5. Extractor (/string/extractor): Extract specific patterns from text
  6. Unique (/string/unique): Remove duplicates, count occurrences, and display statistics with visual progress bars
  7. Set Operations (/string/set-operations): Perform set operations (union, intersection, difference) on text sets

Random Tools

  1. Roulette (/random/roulette): Random selection tool with customizable options
  2. Lotto (/random/lotto): Generate random lottery numbers

Computer Tools

  1. Sort (/computer/sort): Sort algorithms visualizer and tool
  2. Encoding (/computer/encoding): Encode/decode text in various formats (Base64, URL, etc.)
  3. Base Converter (/computer/base-converter): Convert numbers between different bases (binary, decimal, hex, etc.)
  4. CIDR (/computer/cidr): CIDR notation calculator for network subnetting

Styling System

  • Tailwind CSS v4: Uses new CSS-first approach with @import "tailwindcss"
  • Design Tokens: Comprehensive CSS variables for light/dark theming with OKLCH color space
  • Dark Mode: Configured with next-themes and .dark class switching
  • Component Library: shadcn/ui "new-york" style with Lucide icons
  • Custom Animations: Includes shake animation for timer completion

Navigation & Layout

  • Sidebar Navigation: Collapsible sidebar with categorized tool navigation using Radix UI (max-height increased to 500px to accommodate all menu items)
  • Header: Breadcrumb navigation with theme toggle
  • Responsive: Mobile-friendly layout with proper responsive grid systems
  • Dashboard: Category-based tool overview with stats and quick access cards

Key Dependencies

  • UI Components: Radix UI primitives, shadcn/ui components, Lucide React icons
  • Date/Time: date-fns and date-fns-tz for time manipulation and timezone handling
  • Styling: Tailwind CSS v4, clsx, tailwind-merge for conditional styling
  • Theme: next-themes for dark/light mode switching

TypeScript Configuration

  • Strict mode enabled with path aliases (@/* maps to root directory)
  • Next.js plugin configured for optimal development experience
  • Target ES2017 with modern module resolution

Path Aliases

As defined in components.json:

  • @/components - UI components directory
  • @/lib - Utility functions and shared logic
  • @/hooks - React hooks
  • @/components/ui - shadcn/ui components

Key Files

  • app/globals.css - Tailwind imports, comprehensive design tokens, and shake animation keyframes
  • lib/utils.ts - Exports cn() function for conditional class merging
  • components/app-sidebar.tsx - Main navigation with collapsible tool categories
  • components/header.tsx - Header with breadcrumbs and theme toggle
  • components.json - shadcn/ui configuration with aliases and style preferences

Development Notes

  • Turbopack: Used for both development and production builds for faster compilation
  • Internationalization: Interface uses Korean text for user-facing elements
  • Client Components: All tool pages use "use client" directive for interactivity
  • Notifications: Timer uses browser Notification API with permission handling
  • Clipboard API: Copy functionality with fallback for older browsers
  • Debouncing: Input validation uses 300ms debounce for performance
  • Visual Feedback: Tools like Unique feature progress bars and statistics cards for better UX
  • Real-time Processing: Most tools process input in real-time with useEffect hooks

CSS 컴포넌트 규칙

  • CSS 컴포넌트가 필요하면 Shadcn 의 컴포넌트를 사용한다
  • 컴포넌트를 추가하는 방법은 npx shadcn@latest add 컴포넌트명 으로 추가한다
  • 기존 컴포넌트 스타일과 일관성을 유지하고 "new-york" 스타일을 따른다

작업 시 챙길 부분

  • npm run dev 커맨드를 사용해서 확인해볼 필요 없음
  • 새로운 페이지가 추가 될 경우 Dashboard 와 도구 검색에도 반영 시키기