0b967a84fa
✨ 주요 변경사항: - 단일 docker-compose.yml로 통합 (로컬/시놀로지 환경 지원) - 시놀로지 볼륨 매핑 설정 (volume1: 이미지, volume3: 데이터) - 통합 배포 가이드 및 자동 배포 스크립트 추가 - 완전한 Memos 스타일 워크플로우 구현 🎯 새로운 기능: - 📝 메모 작성 (upload.html) - 이미지 업로드 지원 - 📥 수신함 (inbox.html) - 메모 편집 및 Todo/보드 변환 - ✅ Todo 목록 (todo-list.html) - 오늘 할 일 관리 - 📋 보드 (board.html) - 프로젝트 관리, 접기/펼치기, 이미지 지원 - 📚 아카이브 (archive.html) - 완료된 보드 보관 - 🔐 초기 설정 화면 - 관리자 계정 생성 🔧 기술적 개선: - 이미지 업로드/편집 완전 지원 - 반응형 디자인 및 모바일 최적화 - 보드 완료 후 자동 숨김 처리 - 메모 편집 시 제목 필드 제거 - 테스트 로그인 버튼 제거 (프로덕션 준비) - 과거 코드 정리 (TodoService, CalendarSyncService 등) 📦 배포 관련: - env.synology.example - 시놀로지 환경 설정 템플릿 - SYNOLOGY_DEPLOYMENT_GUIDE.md - 상세한 배포 가이드 - deploy-synology.sh - 원클릭 자동 배포 스크립트 - Nginx 정적 파일 서빙 및 이미지 프록시 설정 🗑️ 정리된 파일: - 사용하지 않는 HTML 페이지들 (dashboard, calendar, checklist 등) - 복잡한 통합 서비스들 (integrations 폴더) - 중복된 시놀로지 설정 파일들
644 lines
25 KiB
HTML
644 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Todo 목록 - Todo Project</title>
|
|
<link rel="icon" type="image/x-icon" href="static/icons/favicon.ico">
|
|
<link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--parchment: #f7f3e9;
|
|
--parchment-dark: #f0ead6;
|
|
--ink: #2c1810;
|
|
--ink-light: #5d4e37;
|
|
--sepia: #8b7355;
|
|
--gold: #d4af37;
|
|
--shadow: rgba(139, 115, 85, 0.2);
|
|
--success: #22c55e;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Serif KR', serif;
|
|
background: linear-gradient(135deg, #f7f3e9 0%, #f0ead6 100%);
|
|
background-attachment: fixed;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.parchment-container {
|
|
background: var(--parchment);
|
|
background-image:
|
|
radial-gradient(circle at 25% 25%, rgba(139, 115, 85, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 75%, rgba(139, 115, 85, 0.05) 0%, transparent 50%);
|
|
border: 2px solid var(--sepia);
|
|
border-radius: 8px;
|
|
box-shadow:
|
|
0 8px 32px var(--shadow),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.parchment-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(45deg, var(--gold), var(--sepia), var(--gold));
|
|
border-radius: 10px;
|
|
z-index: -1;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.header-vintage {
|
|
background: linear-gradient(135deg, var(--parchment), var(--parchment-dark));
|
|
border-bottom: 3px solid var(--gold);
|
|
box-shadow: 0 2px 10px var(--shadow);
|
|
}
|
|
|
|
.todo-item {
|
|
background: var(--parchment-dark);
|
|
border: 1px solid var(--sepia);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.todo-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px var(--shadow);
|
|
}
|
|
|
|
.todo-item.overdue {
|
|
border-left: 4px solid var(--danger);
|
|
background: linear-gradient(135deg, var(--parchment-dark), #fef2f2);
|
|
}
|
|
|
|
.todo-item.today {
|
|
border-left: 4px solid var(--warning);
|
|
background: linear-gradient(135deg, var(--parchment-dark), #fffbeb);
|
|
}
|
|
|
|
.action-button {
|
|
background: linear-gradient(135deg, var(--sepia), var(--ink-light));
|
|
color: var(--parchment);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 20px;
|
|
padding: 0.5rem 1rem;
|
|
font-family: 'Noto Serif KR', serif;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.action-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px var(--shadow);
|
|
}
|
|
|
|
.action-button.complete {
|
|
background: linear-gradient(135deg, var(--success), #16a34a);
|
|
}
|
|
|
|
.action-button.delay {
|
|
background: linear-gradient(135deg, var(--warning), #d97706);
|
|
}
|
|
|
|
.action-button.extend {
|
|
background: linear-gradient(135deg, var(--sepia), var(--ink-light));
|
|
}
|
|
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
|
|
gap: 0.5rem;
|
|
max-width: 240px;
|
|
}
|
|
|
|
.image-item {
|
|
aspect-ratio: 1;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--sepia);
|
|
}
|
|
|
|
.image-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.date-modal {
|
|
background: rgba(44, 24, 16, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.date-input {
|
|
background: var(--parchment);
|
|
border: 2px solid var(--sepia);
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
font-family: 'Noto Serif KR', serif;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.date-input:focus {
|
|
outline: none;
|
|
border-color: var(--gold);
|
|
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
|
|
}
|
|
|
|
.priority-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.priority-high {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--danger);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.priority-medium {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
color: var(--warning);
|
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.priority-low {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: var(--success);
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<header class="header-vintage">
|
|
<div class="max-w-6xl mx-auto px-4 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<h1 class="text-2xl font-semibold" style="color: var(--ink);">
|
|
<i class="fas fa-tasks mr-3" style="color: var(--gold);"></i>
|
|
Todo 목록
|
|
</h1>
|
|
<span id="todoCount" class="ml-4 px-3 py-1 bg-gold text-white rounded-full text-sm font-medium"></span>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<a href="upload.html" class="action-button">
|
|
<i class="fas fa-feather-alt mr-2"></i>메모
|
|
</a>
|
|
<a href="inbox.html" class="action-button">
|
|
<i class="fas fa-inbox mr-2"></i>수신함
|
|
</a>
|
|
<a href="todo-list.html" class="action-button" style="background: var(--gold); border-color: var(--gold); color: var(--ink);">
|
|
<i class="fas fa-tasks mr-2"></i>Todo 목록
|
|
</a>
|
|
<a href="board.html" class="action-button">
|
|
<i class="fas fa-clipboard mr-2"></i>보드
|
|
</a>
|
|
<a href="archive.html" class="action-button">
|
|
<i class="fas fa-archive mr-2"></i>아카이브
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="max-w-6xl mx-auto px-4 py-8">
|
|
<!-- 오늘 날짜 표시 -->
|
|
<div class="parchment-container p-4 mb-6">
|
|
<div class="flex items-center justify-center">
|
|
<div class="text-center">
|
|
<h2 class="text-xl font-medium" style="color: var(--ink);">
|
|
<i class="fas fa-calendar-day mr-3" style="color: var(--gold);"></i>
|
|
<span id="todayDate"></span>
|
|
</h2>
|
|
<p class="text-sm mt-1" style="color: var(--ink-light);">오늘 해야 할 일들</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Todo 목록 -->
|
|
<div class="parchment-container p-6">
|
|
<div id="todoList">
|
|
<!-- Todo 목록이 여기에 표시됩니다 -->
|
|
</div>
|
|
|
|
<div id="emptyState" class="hidden text-center py-12">
|
|
<i class="fas fa-clipboard-list text-6xl mb-4" style="color: var(--sepia); opacity: 0.5;"></i>
|
|
<h3 class="text-xl font-medium mb-2" style="color: var(--ink-light);">진행할 Todo가 없습니다</h3>
|
|
<p class="text-sm mb-6" style="color: var(--sepia);">수신함에서 새로운 Todo를 추가해보세요</p>
|
|
<a href="inbox.html" class="action-button">
|
|
<i class="fas fa-inbox mr-2"></i>수신함으로 이동
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 날짜 선택 모달 -->
|
|
<div id="dateModal" class="hidden fixed inset-0 date-modal flex items-center justify-center z-50">
|
|
<div class="parchment-container p-6 max-w-md w-full mx-4">
|
|
<h3 class="text-lg font-semibold mb-4 text-center" style="color: var(--ink);">
|
|
<i class="fas fa-calendar-alt mr-2" style="color: var(--gold);"></i>
|
|
새로운 날짜 선택
|
|
</h3>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--ink-light);">지연할 날짜</label>
|
|
<input type="date" id="newDueDate" class="date-input w-full">
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button onclick="confirmDateChange()" class="action-button flex-1">
|
|
<i class="fas fa-check mr-2"></i>확인
|
|
</button>
|
|
<button onclick="closeDateModal()" class="action-button flex-1" style="background: var(--sepia);">
|
|
<i class="fas fa-times mr-2"></i>취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="static/js/api.js"></script>
|
|
<script src="static/js/auth.js"></script>
|
|
<script>
|
|
let allTodos = [];
|
|
let currentTodoId = null;
|
|
|
|
// 페이지 초기화
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 인증 확인
|
|
const token = localStorage.getItem('authToken') || localStorage.getItem('token');
|
|
if (!token) {
|
|
window.location.href = 'index.html';
|
|
return;
|
|
}
|
|
|
|
displayTodayDate();
|
|
loadTodos();
|
|
});
|
|
|
|
// Todo 목록 로드
|
|
async function loadTodos() {
|
|
try {
|
|
const todos = await TodoAPI.getTodos(null, 'todo');
|
|
|
|
// 서울 시간 기준 오늘 날짜 계산
|
|
const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
|
|
const today = new Date(seoulTime);
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
allTodos = todos.filter(todo => {
|
|
if (todo.status === 'completed') return false;
|
|
|
|
// 시작 날짜가 오늘 이전이거나 오늘인 Todo들 표시 (해야 할 시점이 된 것들)
|
|
const startDate = new Date(todo.start_date);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
|
|
return startDate.getTime() <= today.getTime();
|
|
});
|
|
|
|
filterTodos();
|
|
} catch (error) {
|
|
console.error('Todo 로드 실패:', error);
|
|
showEmptyState();
|
|
}
|
|
}
|
|
|
|
// Todo 정렬 및 렌더링
|
|
function filterTodos() {
|
|
let sortedTodos = [...allTodos];
|
|
|
|
// 상태별 우선순위 정렬 (오늘 시작 > 진행 중) + 생성일 최신순
|
|
sortedTodos.sort((a, b) => {
|
|
const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
|
|
const today = new Date(seoulTime);
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
const startDateA = new Date(a.start_date);
|
|
const startDateB = new Date(b.start_date);
|
|
startDateA.setHours(0, 0, 0, 0);
|
|
startDateB.setHours(0, 0, 0, 0);
|
|
|
|
// 오늘 시작하는 것을 우선으로
|
|
const isATodayStart = startDateA.getTime() === today.getTime();
|
|
const isBTodayStart = startDateB.getTime() === today.getTime();
|
|
|
|
if (isATodayStart && !isBTodayStart) return -1;
|
|
if (!isATodayStart && isBTodayStart) return 1;
|
|
|
|
// 같은 상태면 생성일 최신순
|
|
const createdA = new Date(a.created_at);
|
|
const createdB = new Date(b.created_at);
|
|
return createdB - createdA;
|
|
});
|
|
|
|
renderTodos(sortedTodos);
|
|
}
|
|
|
|
// 오늘 날짜 표시
|
|
function displayTodayDate() {
|
|
const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
|
|
const today = new Date(seoulTime);
|
|
|
|
const options = {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
weekday: 'long',
|
|
timeZone: 'Asia/Seoul'
|
|
};
|
|
|
|
const todayString = today.toLocaleDateString('ko-KR', options);
|
|
document.getElementById('todayDate').textContent = todayString;
|
|
}
|
|
|
|
// Todo 목록 렌더링
|
|
function renderTodos(todos) {
|
|
const todoList = document.getElementById('todoList');
|
|
const emptyState = document.getElementById('emptyState');
|
|
const todoCount = document.getElementById('todoCount');
|
|
|
|
todoCount.textContent = `${todos.length}개`;
|
|
|
|
if (!todos || todos.length === 0) {
|
|
showEmptyState();
|
|
return;
|
|
}
|
|
|
|
emptyState.classList.add('hidden');
|
|
|
|
// 서울 시간 기준 오늘 날짜 계산
|
|
const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
|
|
const today = new Date(seoulTime);
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
todoList.innerHTML = todos.map(todo => {
|
|
const hasImages = todo.image_urls && todo.image_urls.length > 0;
|
|
const createdAt = new Date(todo.created_at);
|
|
const timeAgo = getTimeAgo(createdAt);
|
|
|
|
// 시작 날짜 상태 계산
|
|
const startDate = new Date(todo.start_date);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
|
|
let statusClass = '';
|
|
let statusText = '';
|
|
let statusIcon = '';
|
|
|
|
if (startDate.getTime() < today.getTime()) {
|
|
// 시작 날짜가 지났지만 아직 완료하지 않은 경우
|
|
statusClass = 'overdue';
|
|
statusText = '진행 중';
|
|
statusIcon = 'fas fa-play';
|
|
} else if (startDate.getTime() === today.getTime()) {
|
|
// 오늘 시작하는 Todo
|
|
statusClass = 'today';
|
|
statusText = '오늘 시작';
|
|
statusIcon = 'fas fa-clock';
|
|
}
|
|
|
|
const formattedDate = startDate.toLocaleDateString('ko-KR', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
weekday: 'short'
|
|
});
|
|
|
|
return `
|
|
<div class="todo-item ${statusClass}">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="flex-1">
|
|
<div class="flex items-center mb-2">
|
|
<span class="priority-badge priority-medium">
|
|
<i class="${statusIcon} mr-1"></i>
|
|
${statusText}
|
|
</span>
|
|
</div>
|
|
<p class="text-base mb-2 font-medium" style="color: var(--ink);">
|
|
${todo.description || '내용 없음'}
|
|
</p>
|
|
<div class="flex items-center text-xs" style="color: var(--sepia);">
|
|
<i class="fas fa-calendar mr-1"></i>
|
|
<span>시작일: ${formattedDate}</span>
|
|
${hasImages ? `<i class="fas fa-images ml-3 mr-1"></i><span>${todo.image_urls.length}장</span>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${hasImages ? `
|
|
<div class="image-grid mb-4">
|
|
${todo.image_urls.slice(0, 4).map(url => `
|
|
<div class="image-item">
|
|
<img src="${url}" alt="첨부 이미지" onclick="showImageModal('${url}')">
|
|
</div>
|
|
`).join('')}
|
|
${todo.image_urls.length > 4 ? `
|
|
<div class="image-item flex items-center justify-center" style="background: var(--parchment); border: 2px dashed var(--sepia);">
|
|
<span class="text-xs" style="color: var(--sepia);">+${todo.image_urls.length - 4}</span>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<button onclick="completeTodo('${todo.id}')" class="action-button complete">
|
|
<i class="fas fa-check mr-1"></i>완료
|
|
</button>
|
|
<button onclick="extendTodo('${todo.id}', 3)" class="action-button extend">
|
|
<i class="fas fa-plus mr-1"></i>+3일
|
|
</button>
|
|
<button onclick="extendTodo('${todo.id}', 5)" class="action-button extend">
|
|
<i class="fas fa-plus mr-1"></i>+5일
|
|
</button>
|
|
<button onclick="openDateModal('${todo.id}')" class="action-button delay">
|
|
<i class="fas fa-calendar-alt mr-1"></i>지연
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// 빈 상태 표시
|
|
function showEmptyState() {
|
|
document.getElementById('todoList').innerHTML = '';
|
|
document.getElementById('emptyState').classList.remove('hidden');
|
|
document.getElementById('todoCount').textContent = '0개';
|
|
}
|
|
|
|
// Todo 완료 처리
|
|
async function completeTodo(todoId) {
|
|
try {
|
|
await TodoAPI.updateTodo(todoId, {
|
|
status: 'completed',
|
|
completed_at: new Date().toISOString()
|
|
});
|
|
|
|
// 완료된 Todo를 목록에서 제거
|
|
allTodos = allTodos.filter(todo => todo.id !== todoId);
|
|
filterTodos();
|
|
|
|
// 성공 메시지
|
|
showToast('Todo가 완료되었습니다!', 'success');
|
|
} catch (error) {
|
|
console.error('Todo 완료 실패:', error);
|
|
showToast('Todo 완료에 실패했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// Todo 기간 연장
|
|
async function extendTodo(todoId, days) {
|
|
try {
|
|
const todo = allTodos.find(t => t.id === todoId);
|
|
if (!todo) return;
|
|
|
|
const currentDate = new Date(todo.start_date);
|
|
const newDate = new Date(currentDate.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
|
|
await TodoAPI.updateTodo(todoId, {
|
|
start_date: newDate.toISOString().split('T')[0]
|
|
});
|
|
|
|
// 로컬 데이터 업데이트
|
|
todo.start_date = newDate.toISOString().split('T')[0];
|
|
filterTodos();
|
|
|
|
showToast(`${days}일 연장되었습니다!`, 'success');
|
|
} catch (error) {
|
|
console.error('Todo 연장 실패:', error);
|
|
showToast('Todo 연장에 실패했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// 날짜 선택 모달 열기
|
|
function openDateModal(todoId) {
|
|
currentTodoId = todoId;
|
|
const todo = allTodos.find(t => t.id === todoId);
|
|
if (todo) {
|
|
// 현재 날짜를 기본값으로 설정
|
|
const currentDate = new Date(todo.start_date);
|
|
document.getElementById('newDueDate').value = currentDate.toISOString().split('T')[0];
|
|
}
|
|
document.getElementById('dateModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 날짜 선택 모달 닫기
|
|
function closeDateModal() {
|
|
currentTodoId = null;
|
|
document.getElementById('dateModal').classList.add('hidden');
|
|
}
|
|
|
|
// 날짜 변경 확인
|
|
async function confirmDateChange() {
|
|
if (!currentTodoId) return;
|
|
|
|
const newDate = document.getElementById('newDueDate').value;
|
|
if (!newDate) {
|
|
alert('새로운 날짜를 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await TodoAPI.updateTodo(currentTodoId, {
|
|
start_date: newDate
|
|
});
|
|
|
|
// 로컬 데이터 업데이트
|
|
const todo = allTodos.find(t => t.id === currentTodoId);
|
|
if (todo) {
|
|
todo.start_date = newDate;
|
|
}
|
|
|
|
filterTodos();
|
|
closeDateModal();
|
|
showToast('날짜가 변경되었습니다!', 'success');
|
|
} catch (error) {
|
|
console.error('날짜 변경 실패:', error);
|
|
showToast('날짜 변경에 실패했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// 토스트 메시지 표시
|
|
function showToast(message, type = 'info') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed top-4 right-4 px-4 py-2 rounded-lg text-white font-medium z-50 transform transition-all duration-300`;
|
|
|
|
switch (type) {
|
|
case 'success':
|
|
toast.style.background = 'var(--success)';
|
|
break;
|
|
case 'error':
|
|
toast.style.background = 'var(--danger)';
|
|
break;
|
|
default:
|
|
toast.style.background = 'var(--sepia)';
|
|
}
|
|
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
// 애니메이션
|
|
setTimeout(() => toast.style.transform = 'translateX(0)', 100);
|
|
setTimeout(() => {
|
|
toast.style.transform = 'translateX(100%)';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// 시간 경과 표시
|
|
function getTimeAgo(date) {
|
|
const now = new Date();
|
|
const diffMs = now - date;
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
const diffHours = Math.floor(diffMs / 3600000);
|
|
const diffDays = Math.floor(diffMs / 86400000);
|
|
|
|
if (diffMins < 1) return '방금 전';
|
|
if (diffMins < 60) return `${diffMins}분 전`;
|
|
if (diffHours < 24) return `${diffHours}시간 전`;
|
|
if (diffDays < 7) return `${diffDays}일 전`;
|
|
|
|
return date.toLocaleDateString('ko-KR', {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
|
|
// 이미지 모달 표시
|
|
function showImageModal(imageUrl) {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 date-modal flex items-center justify-center z-50';
|
|
modal.innerHTML = `
|
|
<div class="max-w-4xl max-h-4xl p-4">
|
|
<img src="${imageUrl}" class="max-w-full max-h-full object-contain rounded-lg">
|
|
</div>
|
|
`;
|
|
modal.onclick = () => modal.remove();
|
|
document.body.appendChild(modal);
|
|
}
|
|
|
|
// 전역 함수 등록
|
|
window.filterTodos = filterTodos;
|
|
window.completeTodo = completeTodo;
|
|
window.extendTodo = extendTodo;
|
|
window.openDateModal = openDateModal;
|
|
window.closeDateModal = closeDateModal;
|
|
window.confirmDateChange = confirmDateChange;
|
|
window.showImageModal = showImageModal;
|
|
</script>
|
|
</body>
|
|
</html>
|