모루틴 (Morutine) Frontend

하루를 달구고, 꿈에 가까워지다

Daily routine & goal achievement diary app built with SvelteKit and TailwindCSS.

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The app will be available at http://localhost:5173

📁 Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── Calendar/        # Calendar components
│   │   ├── Todo/            # Todo management components
│   │   ├── Layout/          # Header & navigation
│   │   └── Common/          # Reusable components
│   ├── store/               # Svelte stores
│   ├── api/                 # API wrappers
│   └── utils/               # Utility functions
└── routes/
    ├── login/               # Login page
    ├── home/                # Main calendar & todo page
    └── my/                  # Profile page

✨ Features

• 📅 Calendar View: Monthly calendar with task tracking
• 🔥 Fire Icon: Visual indicator for fully completed days
• ✅ Task Management: Add up to 3 tasks per day
• 📝 Status Tracking: Done, Failed, or Replaced
• 🎨 Premium Design: Minimalist, diary-like aesthetic
• 📱 Responsive: Works on desktop and mobile

🎨 Design System

Colors

• Fire Orange: #FF6A3D - Primary brand color
• Selected Background: #FFE8DD - Selected date highlight
• Text Primary: #1a1a1a - Main text
• Text Secondary: #6b7280 - Secondary text

Typography

• Font: Pretendard (Korean optimized)
• Weights: 500-700
• Sizes: 0.75rem - 3rem

🔧 Configuration

Environment Variables

Create a .env file (copy from .env.example):

VITE_API_URL=http://localhost:8080

Backend Integration

The app is ready for backend integration. Update the API calls in:

1. src/lib/api/todo.js - Todo endpoints
2. src/lib/api/user.js - User endpoints
3. src/routes/home/+page.svelte - Replace mock data with API calls
4. src/routes/login/+page.svelte - Implement OAuth flow

📱 Pages

/login

• Kakao social login
• Minimalist design
• Brand colors and typography

/home

• Calendar with month navigation
• Todo list for selected date
• Add/edit/delete tasks
• Status management

/my

• User profile
• Account settings
• Logout & delete account

🛠️ Tech Stack

• Framework: SvelteKit 2.x
• Styling: TailwindCSS 4.x
• Language: JavaScript (Svelte 5 runes)
• State: Svelte stores
• Build: Vite 7.x

📝 Business Rules

1. Max 3 tasks per day
2. No past date additions - Can't add tasks to dates that have passed
3. Edit restrictions - Tasks can only be modified before their date
4. Status updates - Always allowed (even on past dates)
5. Replacement logic - Original task shown with strikethrough

🎯 Task Status Options

• 대기 (Pending): Not started
• 완료 (Done): Completed successfully
• 실패 (Failed): Not completed
• 대체 (Replaced): Replaced with different task

🔄 Development

Available Scripts

npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run check        # Run Svelte check
npm run format       # Format code with Prettier
npm run lint         # Lint code with Prettier

Code Style

• Prettier for formatting
• Svelte 5 runes syntax
• Component-based architecture
• Utility-first CSS with Tailwind

📦 Dependencies

Production

• @sveltejs/kit - SvelteKit framework
• svelte - Svelte 5
• tailwindcss - Utility-first CSS
• @tailwindcss/vite - Tailwind Vite plugin

Development

• @sveltejs/adapter-auto - SvelteKit adapter
• @sveltejs/vite-plugin-svelte - Svelte Vite plugin
• prettier - Code formatter
• vite - Build tool

🚀 Deployment

Build

npm run build

The built files will be in the build directory.

Deploy

Deploy to any static hosting service:

• Vercel
• Netlify
• Cloudflare Pages
• GitHub Pages

Or use with Node.js adapter for SSR.

📄 License

Private project - All rights reserved

🤝 Contributing

This is a private project. Contact the maintainer for contribution guidelines.

📧 Support

For support or inquiries, contact: [email protected]

---

Built with ❤️ using SvelteKit and TailwindCSS