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

116
frontend/index.html
View File

@@ -130,8 +130,26 @@
</button>
</form>
<div class="mt-4 space-y-2">
<button onclick="testLogin()" class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition-colors text-sm">
🚀 테스트 로그인 (관리자)
</button>
</div>
<div class="mt-4 text-xs text-gray-500 text-center">
<p>테스트 계정: user1 / password123</p>
<p>관리자: hyungi / admin123</p>
</div>
<!-- 이미 로그인된 상태 표시 -->
<div id="alreadyLoggedIn" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg hidden">
<div class="text-center">
<i class="fas fa-check-circle text-green-500 text-xl mb-2"></i>
<p class="text-green-800 font-medium mb-2">이미 로그인되어 있습니다!</p>
<button onclick="window.location.href='dashboard.html'"
class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition-colors">
대시보드로 이동
</button>
</div>
</div>
</div>
</div>
@@ -149,8 +167,8 @@
<div class="flex items-center space-x-4">
<button onclick="goToClassify()" class="text-purple-600 hover:text-purple-800 font-medium">
<i class="fas fa-inbox mr-1"></i>분류 센터
<span class="ml-1 px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">3</span>
<i class="fas fa-list-ul mr-1"></i>INDEX
<span class="ml-1 px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full" id="indexCount">0</span>
</button>
<button onclick="goToDashboard()" class="text-blue-600 hover:text-blue-800 font-medium">
<i class="fas fa-chart-line mr-1"></i>대시보드
@@ -182,13 +200,13 @@
<div class="bg-white rounded-xl shadow-sm">
<div class="p-6 border-b">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
<i class="fas fa-list text-blue-500 mr-2"></i>등록된 항목들
<i class="fas fa-list text-blue-500 mr-2"></i>Todo 목록
</h2>
<!-- 분류 안내 -->
<div class="bg-blue-50 rounded-lg p-4 mb-4">
<p class="text-sm text-blue-800 mb-2">
<i class="fas fa-info-circle mr-2"></i>등록된 항목을 클릭하여 3가지 방법으로 분류하세요:
<i class="fas fa-info-circle mr-2"></i>Todo 항목을 클릭하여 다른 카테고리로 변경하거나 내용을 수정하세요:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div class="flex items-center text-blue-700">
@@ -213,7 +231,7 @@
<div id="emptyState" class="p-12 text-center text-gray-500">
<i class="fas fa-inbox text-4xl mb-4 opacity-50"></i>
<p>아직 등록된 항목이 없습니다.</p>
<p>아직 Todo 항목이 없습니다.</p>
<p class="text-sm">위에서 새로운 항목을 등록해보세요!</p>
</div>
</div>
@@ -274,9 +292,87 @@
</div>
<!-- JavaScript -->
<script src="static/js/image-utils.js"></script>
<script src="static/js/api.js"></script>
<script src="static/js/todos.js"></script>
<script src="static/js/auth.js"></script>
<script>
// 토큰 상태 확인
console.log('=== 토큰 상태 확인 ===');
const existingToken = localStorage.getItem('authToken');
const existingUser = localStorage.getItem('currentUser');
console.log('기존 토큰 존재:', existingToken ? '있음' : '없음');
console.log('기존 사용자 정보:', existingUser);
// 토큰이 있으면 대시보드로 리다이렉트 (무한 루프 방지)
if (existingToken && existingUser) {
console.log('유효한 토큰이 있습니다. 대시보드로 이동합니다.');
window.location.href = 'dashboard.html';
}
</script>
<script src="static/js/api.js?v=20250921110800"></script>
<script src="static/js/image-utils.js?v=20250921110800"></script>
<script src="static/js/todos.js?v=20250921110800"></script>
<script src="static/js/auth.js?v=20250921110800"></script>
<script>
// 페이지 로드 시 디버깅 정보
document.addEventListener('DOMContentLoaded', () => {
console.log('=== 인덱스 페이지 로드 완료 ===');
console.log('AuthAPI 존재:', typeof AuthAPI !== 'undefined');
console.log('window.currentUser:', window.currentUser);
// 로그인 폼 이벤트 리스너 수동 추가 (백업)
const loginForm = document.getElementById('loginForm');
if (loginForm && !loginForm.hasAttribute('data-listener-added')) {
loginForm.setAttribute('data-listener-added', 'true');
loginForm.addEventListener('submit', async (event) => {
event.preventDefault();
console.log('수동 로그인 폼 제출 처리');
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (!username || !password) {
alert('사용자명과 비밀번호를 입력해주세요.');
return;
}
try {
console.log('로그인 시도:', username);
const result = await AuthAPI.login(username, password);
console.log('로그인 성공:', result);
window.location.href = 'dashboard.html';
} catch (error) {
console.error('로그인 실패:', error);
alert('로그인 실패: ' + error.message);
}
});
}
});
// 테스트 로그인 함수
async function testLogin() {
try {
console.log('테스트 로그인 시작...');
const result = await AuthAPI.login('hyungi', 'admin123');
console.log('로그인 성공:', result);
// 토큰 확인
const token = localStorage.getItem('authToken');
console.log('저장된 토큰:', token ? '있음' : '없음');
// 사용자 정보 확인
const user = localStorage.getItem('currentUser');
console.log('저장된 사용자 정보:', user);
// 대시보드로 이동
setTimeout(() => {
window.location.href = 'dashboard.html';
}, 1000);
} catch (error) {
console.error('테스트 로그인 실패:', error);
alert('로그인 실패: ' + error.message);
}
}
</script>
</body>
</html>