hyungi/Todo-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 체크리스트 이미지 미리보기 기능 구현

Browse Source 
- 체크리스트 섹션에 이미지 썸네일 미리보기 추가 (16x16)
- 대시보드 상단 체크리스트 카드에 이미지 미리보기 기능 추가
- 이미지 클릭 시 전체 화면 모달로 확대 보기
- 백엔드 image_url 컬럼을 TEXT 타입으로 변경하여 Base64 이미지 지원
- 파일 업로드를 이미지만 지원하도록 단순화 (file_url, file_name 제거)
- 422 validation 오류 해결 및 상세 로깅 추가
- 체크리스트 렌더링 누락 문제 해결
This commit is contained in:
hyungi
2025-09-23 07:49:54 +09:00
parent 5c9ea92fb8
commit f80995c1ec
22 changed files with 2635 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/checklist.html
View File

@@ -225,34 +225,15 @@
}
// 체크리스트 항목 로드
function loadChecklistItems() {
// 임시 데이터 (실제로는 API에서 가져옴)
checklistItems = [
{
id: 1,
content: '책상 정리하기',
photo: null,
completed: false,
created_at: '2024-01-15',
completed_at: null
},
{
id: 2,
content: '운동 계획 세우기',
photo: null,
completed: true,
created_at: '2024-01-16',
completed_at: '2024-01-18'
},
{
id: 3,
content: '독서 목록 만들기',
photo: null,
completed: false,
created_at: '2024-01-17',
completed_at: null
}
];
async function loadChecklistItems() {
try {
// API에서 체크리스트 카테고리 항목들만 가져오기
const items = await TodoAPI.getTodos(null, 'checklist');
checklistItems = items;
} catch (error) {
console.error('체크리스트 항목 로드 실패:', error);
checklistItems = [];
}
renderChecklistItems(checklistItems);
updateProgress();
@@ -276,7 +257,7 @@
<div class="flex items-start space-x-4">
<!-- 체크박스 -->
<div class="flex-shrink-0 mt-1">
<div class="checkbox-custom ${item.completed ? 'checked' : ''}" onclick="toggleComplete(${item.id})">
<div class="checkbox-custom ${item.completed ? 'checked' : ''}" onclick="toggleComplete('${item.id}')">
${item.completed ? '<i class="fas fa-check text-xs"></i>' : ''}
</div>
</div>
@@ -290,7 +271,7 @@
<!-- 내용 -->
<div class="flex-1 min-w-0">
<h4 class="item-content text-gray-900 font-medium mb-2">${item.content}</h4>
<h4 class="item-content text-gray-900 font-medium mb-2">${item.title}</h4>
<div class="flex items-center space-x-4 text-sm text-gray-500">
<span>
<i class="fas fa-clock mr-1"></i>등록: ${formatDate(item.created_at)}
@@ -305,10 +286,26 @@
<!-- 액션 버튼 -->
<div class="flex-shrink-0 flex space-x-2">
<button onclick="editChecklist(${item.id})" class="text-gray-400 hover:text-blue-500" title="수정하기">
<!-- 카테고리 변경 버튼 -->
<div class="relative">
<button onclick="showCategoryMenu('${item.id}')" class="text-gray-400 hover:text-purple-500" title="카테고리 변경">
<i class="fas fa-exchange-alt"></i>
</button>
<div id="categoryMenu-${item.id}" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border z-10">
<div class="py-2">
<button onclick="changeCategory('${item.id}', 'todo')" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">
<i class="fas fa-calendar-day mr-2 text-blue-500"></i>Todo로 변경
</button>
<button onclick="changeCategory('${item.id}', 'calendar')" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-orange-50 hover:text-orange-600">
<i class="fas fa-calendar-times mr-2 text-orange-500"></i>캘린더로 변경
</button>
</div>
</div>
</div>
<button onclick="editChecklist('${item.id}')" class="text-gray-400 hover:text-blue-500" title="수정하기">
<i class="fas fa-edit"></i>
</button>
<button onclick="deleteChecklist(${item.id})" class="text-gray-400 hover:text-red-500" title="삭제하기">
<button onclick="deleteChecklist('${item.id}')" class="text-gray-400 hover:text-red-500" title="삭제하기">
<i class="fas fa-trash"></i>
</button>
</div>
@@ -376,7 +373,9 @@
// 날짜 포맷팅
function formatDate(dateString) {
if (!dateString) return '날짜 없음';
const date = new Date(dateString);
if (isNaN(date.getTime())) return '날짜 없음';
return date.toLocaleDateString('ko-KR');
}
@@ -401,6 +400,77 @@
console.log('필터:', filter);
}
// 카테고리 메뉴 표시/숨김
function showCategoryMenu(itemId) {
// 다른 메뉴들 숨기기
document.querySelectorAll('[id^="categoryMenu-"]').forEach(menu => {
if (menu.id !== `categoryMenu-${itemId}`) {
menu.classList.add('hidden');
}
});
// 해당 메뉴 토글
const menu = document.getElementById(`categoryMenu-${itemId}`);
if (menu) {
menu.classList.toggle('hidden');
}
}
// 카테고리 변경
async function changeCategory(itemId, newCategory) {
try {
// 날짜 입력 받기 (todo나 calendar인 경우)
let dueDate = null;
if (newCategory === 'todo' || newCategory === 'calendar') {
const dateInput = prompt(
newCategory === 'todo' ?
'시작 날짜를 입력하세요 (YYYY-MM-DD):' :
'마감 날짜를 입력하세요 (YYYY-MM-DD):'
);
if (!dateInput) {
return; // 취소
}
if (!/^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
alert('올바른 날짜 형식을 입력해주세요 (YYYY-MM-DD)');
return;
}
dueDate = dateInput + 'T09:00:00Z';
}
// API 호출하여 카테고리 변경
const updateData = {
category: newCategory
};
if (dueDate) {
updateData.due_date = dueDate;
}
await TodoAPI.updateTodo(itemId, updateData);
// 성공 메시지
const categoryNames = {
'todo': 'Todo',
'calendar': '캘린더'
};
alert(`항목이 ${categoryNames[newCategory]}로 이동되었습니다!`);
// 메뉴 숨기기
document.getElementById(`categoryMenu-${itemId}`).classList.add('hidden');
// 페이지 새로고침하여 변경된 항목 제거
await loadChecklistItems();
} catch (error) {
console.error('카테고리 변경 실패:', error);
alert('카테고리 변경에 실패했습니다.');
}
}
// 대시보드로 이동
function goToDashboard() {
window.location.href = 'dashboard.html';
@@ -408,6 +478,19 @@
// 전역 함수 등록
window.goToDashboard = goToDashboard;
window.showCategoryMenu = showCategoryMenu;
window.changeCategory = changeCategory;
// 문서 클릭 시 메뉴 숨기기
document.addEventListener('click', (e) => {
if (!e.target.closest('.relative')) {
document.querySelectorAll('[id^="categoryMenu-"]').forEach(menu => {
menu.classList.add('hidden');
});
}
});
</script>
<script src="static/js/api.js?v=20250921110800"></script>
<script src="static/js/auth.js?v=20250921110800"></script>
</body>
</html>