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 폴더) - 중복된 시놀로지 설정 파일들
575 lines
23 KiB
HTML
575 lines
23 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 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);
|
|
}
|
|
|
|
.search-container {
|
|
background: var(--parchment-dark);
|
|
border: 2px solid var(--sepia);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.search-input {
|
|
background: var(--parchment);
|
|
border: 2px solid var(--sepia);
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
width: 100%;
|
|
font-family: 'Noto Serif KR', serif;
|
|
color: var(--ink);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--gold);
|
|
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
|
|
}
|
|
|
|
.archive-board {
|
|
background: var(--parchment-dark);
|
|
border: 2px solid var(--sepia);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.archive-board:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px var(--shadow);
|
|
border-color: var(--gold);
|
|
opacity: 1;
|
|
}
|
|
|
|
.archive-board.expanded {
|
|
border-color: var(--gold);
|
|
box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
|
|
opacity: 1;
|
|
}
|
|
|
|
.board-header-archive {
|
|
background: linear-gradient(135deg, var(--sepia), var(--ink-light));
|
|
color: var(--parchment);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px var(--shadow);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.board-header-archive:hover {
|
|
background: linear-gradient(135deg, var(--ink-light), var(--ink));
|
|
}
|
|
|
|
.completed-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
background: var(--success);
|
|
color: white;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.memo-item-archive {
|
|
background: var(--parchment);
|
|
border: 1px solid var(--sepia);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.filter-button {
|
|
background: var(--parchment);
|
|
border: 1px solid var(--sepia);
|
|
border-radius: 20px;
|
|
padding: 0.5rem 1rem;
|
|
font-family: 'Noto Serif KR', serif;
|
|
font-size: 0.875rem;
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-button:hover, .filter-button.active {
|
|
background: var(--gold);
|
|
border-color: var(--gold);
|
|
color: var(--ink);
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
}
|
|
|
|
.date-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-size: 0.75rem;
|
|
color: var(--sepia);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
|
|
gap: 0.25rem;
|
|
max-width: 160px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.image-item {
|
|
aspect-ratio: 1;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--sepia);
|
|
}
|
|
|
|
.image-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.modal {
|
|
background: rgba(44, 24, 16, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.memos-container {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.memos-container.expanded {
|
|
max-height: 500px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.filter-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.date-info {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
</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-archive mr-3" style="color: var(--gold);"></i>
|
|
아카이브
|
|
</h1>
|
|
<span id="archiveCount" 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">
|
|
<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" style="background: var(--gold); border-color: var(--gold); color: var(--ink);">
|
|
<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="search-container">
|
|
<div class="mb-4">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<i class="fas fa-search" style="color: var(--gold);"></i>
|
|
<input type="text" id="searchInput" class="search-input" placeholder="보드 제목이나 내용으로 검색하세요..." onkeyup="handleSearch()">
|
|
</div>
|
|
|
|
<div class="filter-buttons">
|
|
<button class="filter-button active" onclick="setDateFilter('all')">전체</button>
|
|
<button class="filter-button" onclick="setDateFilter('week')">최근 1주일</button>
|
|
<button class="filter-button" onclick="setDateFilter('month')">최근 1개월</button>
|
|
<button class="filter-button" onclick="setDateFilter('quarter')">최근 3개월</button>
|
|
<button class="filter-button" onclick="setDateFilter('year')">최근 1년</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 아카이브 목록 -->
|
|
<div id="archiveContainer">
|
|
<!-- 완료된 보드들이 여기에 표시됩니다 -->
|
|
</div>
|
|
|
|
<div id="emptyState" class="hidden text-center py-12">
|
|
<div class="parchment-container p-8">
|
|
<i class="fas fa-archive 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);">완료된 보드가 없습니다</h3>
|
|
<p class="text-sm mb-6" style="color: var(--sepia);">보드를 완료하면 여기에서 확인할 수 있습니다</p>
|
|
<a href="board.html" class="action-button">
|
|
<i class="fas fa-clipboard mr-2"></i>보드로 이동
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="static/js/api.js"></script>
|
|
<script src="static/js/auth.js"></script>
|
|
<script>
|
|
let allArchivedBoards = [];
|
|
let filteredBoards = [];
|
|
let currentDateFilter = 'all';
|
|
let currentSearchTerm = '';
|
|
|
|
// 페이지 초기화
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 인증 확인
|
|
const token = localStorage.getItem('authToken') || localStorage.getItem('token');
|
|
if (!token) {
|
|
window.location.href = 'index.html';
|
|
return;
|
|
}
|
|
|
|
loadArchivedBoards();
|
|
});
|
|
|
|
// 완료된 보드 목록 로드
|
|
async function loadArchivedBoards() {
|
|
try {
|
|
const boards = await TodoAPI.getTodos(null, 'board');
|
|
|
|
// 완료된 보드만 필터링하고 그룹화
|
|
const completedBoards = boards.filter(item => item.status === 'completed');
|
|
const boardGroups = {};
|
|
|
|
completedBoards.forEach(item => {
|
|
const boardId = item.board_id || item.id;
|
|
if (!boardGroups[boardId]) {
|
|
boardGroups[boardId] = {
|
|
header: null,
|
|
memos: []
|
|
};
|
|
}
|
|
|
|
if (item.is_board_header) {
|
|
boardGroups[boardId].header = item;
|
|
} else {
|
|
boardGroups[boardId].memos.push(item);
|
|
}
|
|
});
|
|
|
|
allArchivedBoards = Object.values(boardGroups)
|
|
.filter(board => board.header)
|
|
.sort((a, b) => new Date(b.header.completed_at) - new Date(a.header.completed_at));
|
|
|
|
applyFilters();
|
|
} catch (error) {
|
|
console.error('아카이브 로드 실패:', error);
|
|
showEmptyState();
|
|
}
|
|
}
|
|
|
|
// 필터 적용
|
|
function applyFilters() {
|
|
let filtered = [...allArchivedBoards];
|
|
|
|
// 날짜 필터 적용
|
|
if (currentDateFilter !== 'all') {
|
|
const now = new Date();
|
|
const filterDate = new Date();
|
|
|
|
switch (currentDateFilter) {
|
|
case 'week':
|
|
filterDate.setDate(now.getDate() - 7);
|
|
break;
|
|
case 'month':
|
|
filterDate.setMonth(now.getMonth() - 1);
|
|
break;
|
|
case 'quarter':
|
|
filterDate.setMonth(now.getMonth() - 3);
|
|
break;
|
|
case 'year':
|
|
filterDate.setFullYear(now.getFullYear() - 1);
|
|
break;
|
|
}
|
|
|
|
filtered = filtered.filter(board =>
|
|
new Date(board.header.completed_at) >= filterDate
|
|
);
|
|
}
|
|
|
|
// 검색어 필터 적용
|
|
if (currentSearchTerm) {
|
|
const searchLower = currentSearchTerm.toLowerCase();
|
|
filtered = filtered.filter(board => {
|
|
const headerMatch = (board.header.title || board.header.description || '').toLowerCase().includes(searchLower);
|
|
const memoMatch = board.memos.some(memo =>
|
|
memo.description.toLowerCase().includes(searchLower)
|
|
);
|
|
return headerMatch || memoMatch;
|
|
});
|
|
}
|
|
|
|
filteredBoards = filtered;
|
|
renderArchivedBoards();
|
|
}
|
|
|
|
// 아카이브 보드 렌더링
|
|
function renderArchivedBoards() {
|
|
const archiveContainer = document.getElementById('archiveContainer');
|
|
const emptyState = document.getElementById('emptyState');
|
|
const archiveCount = document.getElementById('archiveCount');
|
|
|
|
archiveCount.textContent = `${filteredBoards.length}개`;
|
|
|
|
if (!filteredBoards || filteredBoards.length === 0) {
|
|
showEmptyState();
|
|
return;
|
|
}
|
|
|
|
emptyState.classList.add('hidden');
|
|
|
|
archiveContainer.innerHTML = filteredBoards.map(board => {
|
|
const header = board.header;
|
|
const memos = board.memos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
|
|
|
const completedDate = new Date(header.completed_at);
|
|
const createdDate = new Date(header.created_at);
|
|
const duration = Math.ceil((completedDate - createdDate) / (1000 * 60 * 60 * 24));
|
|
|
|
return `
|
|
<div class="archive-board" id="board_${header.id}">
|
|
<div class="board-header-archive" onclick="toggleBoardExpansion('${header.id}')">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold">
|
|
${header.title || header.description}
|
|
<span class="completed-badge">
|
|
<i class="fas fa-check mr-1"></i>완료됨
|
|
</span>
|
|
</h3>
|
|
<i id="expandIcon_${header.id}" class="fas fa-chevron-down transition-transform"></i>
|
|
</div>
|
|
<div class="date-info">
|
|
<span><i class="fas fa-calendar-plus mr-1"></i>시작: ${createdDate.toLocaleDateString('ko-KR')}</span>
|
|
<span><i class="fas fa-calendar-check mr-1"></i>완료: ${completedDate.toLocaleDateString('ko-KR')}</span>
|
|
<span><i class="fas fa-clock mr-1"></i>기간: ${duration}일</span>
|
|
<span><i class="fas fa-sticky-note mr-1"></i>메모: ${memos.length}개</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="memos_${header.id}" class="memos-container">
|
|
<div class="p-2">
|
|
${memos.length > 0 ? memos.map(memo => {
|
|
const memoDate = new Date(memo.created_at);
|
|
const hasImages = memo.image_urls && memo.image_urls.length > 0;
|
|
|
|
return `
|
|
<div class="memo-item-archive">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<p class="mb-2">${memo.description}</p>
|
|
<div class="flex items-center text-xs" style="color: var(--sepia);">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span>${memoDate.toLocaleDateString('ko-KR')} ${memoDate.toLocaleTimeString('ko-KR', {hour: '2-digit', minute: '2-digit'})}</span>
|
|
${hasImages ? `<i class="fas fa-images ml-3 mr-1"></i><span>${memo.image_urls.length}장</span>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${hasImages ? `
|
|
<div class="image-grid mt-2">
|
|
${memo.image_urls.slice(0, 6).map(url => `
|
|
<div class="image-item">
|
|
<img src="${url}" alt="첨부 이미지" onclick="showImageModal('${url}')">
|
|
</div>
|
|
`).join('')}
|
|
${memo.image_urls.length > 6 ? `
|
|
<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);">+${memo.image_urls.length - 6}</span>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}).join('') : '<p class="text-center text-sm" style="color: var(--sepia);">메모가 없습니다</p>'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// 빈 상태 표시
|
|
function showEmptyState() {
|
|
document.getElementById('archiveContainer').innerHTML = '';
|
|
document.getElementById('emptyState').classList.remove('hidden');
|
|
document.getElementById('archiveCount').textContent = '0개';
|
|
}
|
|
|
|
// 보드 확장/축소
|
|
function toggleBoardExpansion(boardId) {
|
|
const memosContainer = document.getElementById(`memos_${boardId}`);
|
|
const expandIcon = document.getElementById(`expandIcon_${boardId}`);
|
|
const boardElement = document.getElementById(`board_${boardId}`);
|
|
|
|
if (memosContainer.classList.contains('expanded')) {
|
|
memosContainer.classList.remove('expanded');
|
|
expandIcon.style.transform = 'rotate(0deg)';
|
|
boardElement.classList.remove('expanded');
|
|
} else {
|
|
memosContainer.classList.add('expanded');
|
|
expandIcon.style.transform = 'rotate(180deg)';
|
|
boardElement.classList.add('expanded');
|
|
}
|
|
}
|
|
|
|
// 검색 처리
|
|
function handleSearch() {
|
|
currentSearchTerm = document.getElementById('searchInput').value.trim();
|
|
applyFilters();
|
|
}
|
|
|
|
// 날짜 필터 설정
|
|
function setDateFilter(filter) {
|
|
currentDateFilter = filter;
|
|
|
|
// 필터 버튼 활성화 상태 업데이트
|
|
document.querySelectorAll('.filter-button').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
applyFilters();
|
|
}
|
|
|
|
// 이미지 모달 표시
|
|
function showImageModal(imageUrl) {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 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.toggleBoardExpansion = toggleBoardExpansion;
|
|
window.handleSearch = handleSearch;
|
|
window.setDateFilter = setDateFilter;
|
|
window.showImageModal = showImageModal;
|
|
</script>
|
|
</body>
|
|
</html>
|