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

Alpine.js 문제 해결: 메모 기능을 메인 컴포넌트로 통합

Browse Source
This commit is contained in:
Hyungi Ahn
2025-09-04 10:58:52 +09:00
parent b5167b3569
commit ca5e7525f9
2 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/static/js/todos.js
View File

@@ -35,6 +35,10 @@ function todosApp() {
currentTodo: null, currentTodo: null,
currentTodoComments: [], currentTodoComments: [],
// 메모 상태 (각 할일별)
todoMemos: {},
showMemoForTodo: {},
// 폼 데이터 // 폼 데이터
scheduleForm: { scheduleForm: {
start_date: '', start_date: '',
@@ -505,9 +509,11 @@ function todosApp() {
async loadTodoMemos(todoId) { async loadTodoMemos(todoId) {
try { try {
const response = await window.api.get(`/todos/${todoId}/comments`); const response = await window.api.get(`/todos/${todoId}/comments`);
return response || []; this.todoMemos[todoId] = response || [];
return this.todoMemos[todoId];
} catch (error) { } catch (error) {
console.error('❌ 메모 로드 실패:', error); console.error('❌ 메모 로드 실패:', error);
this.todoMemos[todoId] = [];
return []; return [];
} }
}, },
@@ -519,6 +525,9 @@ function todosApp() {
content: content.trim() content: content.trim()
}); });
// 메모 목록 새로고침
await this.loadTodoMemos(todoId);
console.log('✅ 메모 추가 완료'); console.log('✅ 메모 추가 완료');
return response; return response;
@@ -527,6 +536,26 @@ function todosApp() {
alert('메모 추가 중 오류가 발생했습니다.'); alert('메모 추가 중 오류가 발생했습니다.');
throw error; throw error;
} }
},
// 메모 토글
toggleMemo(todoId) {
this.showMemoForTodo[todoId] = !this.showMemoForTodo[todoId];
// 메모가 처음 열릴 때만 로드
if (this.showMemoForTodo[todoId] && !this.todoMemos[todoId]) {
this.loadTodoMemos(todoId);
}
},
// 특정 할일의 메모 개수 가져오기
getTodoMemoCount(todoId) {
return this.todoMemos[todoId] ? this.todoMemos[todoId].length : 0;
},
// 특정 할일의 메모 목록 가져오기
getTodoMemos(todoId) {
return this.todoMemos[todoId] || [];
} }
}; };
} }
@@ -558,12 +587,19 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
// 캘린더 컴포넌트 // 캘린더 컴포넌트 (메인 컴포넌트에 통합)
function calendarComponent() { function calendarComponent() {
return { return {
currentDate: new Date(), currentDate: new Date(),
init() {
// 부모 컴포넌트 참조 설정
this.parentApp = this.$el.closest('[x-data*="todosApp"]').__x.$data;
},
get calendarDays() { get calendarDays() {
if (!this.parentApp) return [];
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const firstDay = new Date(year, month, 1); const firstDay = new Date(year, month, 1);
@@ -584,7 +620,7 @@ function calendarComponent() {
const isToday = dateString === todayString; const isToday = dateString === todayString;
// 해당 날짜의 할일들 찾기 // 해당 날짜의 할일들 찾기
const dayTodos = this.$parent.todos.filter(todo => { const dayTodos = this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false; if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10); const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === dateString && (todo.status === 'scheduled' || todo.status === 'active'); return todoDate === dateString && (todo.status === 'scheduled' || todo.status === 'active');
@@ -621,28 +657,32 @@ function calendarComponent() {
}, },
selectDate(dateString) { selectDate(dateString) {
this.$parent.scheduleForm.start_date = dateString; if (this.parentApp) {
this.parentApp.scheduleForm.start_date = dateString;
}
}, },
selectDelayDate(dateString) { selectDelayDate(dateString) {
this.$parent.delayForm.delayed_until = dateString; if (this.parentApp) {
this.parentApp.delayForm.delayed_until = dateString;
}
}, },
getSelectedDateTodos() { getSelectedDateTodos() {
if (!this.$parent.scheduleForm.start_date) return []; if (!this.parentApp || !this.parentApp.scheduleForm.start_date) return [];
return this.$parent.todos.filter(todo => { return this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false; if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10); const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === this.$parent.scheduleForm.start_date && (todo.status === 'scheduled' || todo.status === 'active'); return todoDate === this.parentApp.scheduleForm.start_date && (todo.status === 'scheduled' || todo.status === 'active');
}); });
}, },
getDelayDateTodos() { getDelayDateTodos() {
if (!this.$parent.delayForm.delayed_until) return []; if (!this.parentApp || !this.parentApp.delayForm.delayed_until) return [];
return this.$parent.todos.filter(todo => { return this.parentApp.todos.filter(todo => {
if (!todo.start_date) return false; if (!todo.start_date) return false;
const todoDate = new Date(todo.start_date).toISOString().slice(0, 10); const todoDate = new Date(todo.start_date).toISOString().slice(0, 10);
return todoDate === this.$parent.delayForm.delayed_until && (todo.status === 'scheduled' || todo.status === 'active'); return todoDate === this.parentApp.delayForm.delayed_until && (todo.status === 'scheduled' || todo.status === 'active');
}); });
} }
}; };

20
frontend/todos.html
View File

@@ -457,7 +457,7 @@
<!-- TODO 탭 --> <!-- TODO 탭 -->
<div x-show="activeTab === 'todo'" class="space-y-4"> <div x-show="activeTab === 'todo'" class="space-y-4">
<template x-for="todo in activeTodos" :key="todo.id"> <template x-for="todo in activeTodos" :key="todo.id">
<div class="todo-card active bg-white rounded-lg shadow-sm p-6" x-data="{ showMemos: false, newMemo: '', addingMemo: false, memos: [] }" x-init="memos = await $parent.loadTodoMemos(todo.id)"> <div class="todo-card active bg-white rounded-lg shadow-sm p-6" x-data="{ newMemo: '', addingMemo: false }">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<p class="text-gray-900 mb-3" x-text="todo.content"></p> <p class="text-gray-900 mb-3" x-text="todo.content"></p>
@@ -481,20 +481,20 @@
<i class="fas fa-clock mr-1"></i>지연 <i class="fas fa-clock mr-1"></i>지연
</button> </button>
<button <button
@click="showMemos = !showMemos; if(showMemos && memos.length === 0) { memos = await $parent.loadTodoMemos(todo.id); } $parent.hapticFeedback($event.target)" @click="toggleMemo(todo.id); hapticFeedback($event.target)"
class="action-btn bg-indigo-600 text-white hover:bg-indigo-700" class="action-btn bg-indigo-600 text-white hover:bg-indigo-700"
> >
<i class="fas fa-sticky-note mr-1"></i>메모 <i class="fas fa-sticky-note mr-1"></i>메모
<span x-show="memos.length > 0" class="ml-1 bg-white text-indigo-600 rounded-full px-1 text-xs" x-text="memos.length"></span> <span x-show="getTodoMemoCount(todo.id) > 0" class="ml-1 bg-white text-indigo-600 rounded-full px-1 text-xs" x-text="getTodoMemoCount(todo.id)"></span>
</button> </button>
</div> </div>
</div> </div>
<!-- 인라인 메모 섹션 --> <!-- 인라인 메모 섹션 -->
<div x-show="showMemos" x-transition class="mt-4 border-t pt-4"> <div x-show="showMemoForTodo[todo.id]" x-transition class="mt-4 border-t pt-4">
<!-- 기존 메모들 --> <!-- 기존 메모들 -->
<div x-show="memos.length > 0" class="space-y-2 mb-3"> <div x-show="getTodoMemos(todo.id).length > 0" class="space-y-2 mb-3">
<template x-for="memo in memos" :key="memo.id"> <template x-for="memo in getTodoMemos(todo.id)" :key="memo.id">
<div class="comment-bubble"> <div class="comment-bubble">
<p class="text-sm text-gray-700" x-text="memo.content"></p> <p class="text-sm text-gray-700" x-text="memo.content"></p>
<div class="text-xs text-gray-500 mt-1" x-text="formatRelativeTime(memo.created_at)"></div> <div class="text-xs text-gray-500 mt-1" x-text="formatRelativeTime(memo.created_at)"></div>
@@ -509,10 +509,10 @@
x-model="newMemo" x-model="newMemo"
placeholder="메모를 입력하세요..." placeholder="메모를 입력하세요..."
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
@keydown.enter="if(newMemo.trim()) { addingMemo = true; $parent.addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; memos = await $parent.loadTodoMemos(todo.id); }); }" @keydown.enter="if(newMemo.trim()) { addingMemo = true; addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; }); }"
> >
<button <button
@click="if(newMemo.trim()) { addingMemo = true; $parent.addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; memos = await $parent.loadTodoMemos(todo.id); }); $parent.hapticFeedback($event.target); }" @click="if(newMemo.trim()) { addingMemo = true; addTodoMemo(todo.id, newMemo).then(() => { newMemo = ''; addingMemo = false; }); hapticFeedback($event.target); }"
:disabled="!newMemo.trim() || addingMemo" :disabled="!newMemo.trim() || addingMemo"
class="action-btn bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" class="action-btn bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
> >
@@ -581,7 +581,7 @@
<!-- 일정 설정 모달 --> <!-- 일정 설정 모달 -->
<div x-show="showScheduleModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div x-show="showScheduleModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()"> <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()" x-init="init()">
<div class="p-6 border-b"> <div class="p-6 border-b">
<h3 class="text-xl font-bold text-gray-900">일정 설정</h3> <h3 class="text-xl font-bold text-gray-900">일정 설정</h3>
<p class="text-sm text-gray-600 mt-1">캘린더에서 날짜를 선택하고 예정된 할일을 확인하세요</p> <p class="text-sm text-gray-600 mt-1">캘린더에서 날짜를 선택하고 예정된 할일을 확인하세요</p>
@@ -701,7 +701,7 @@
<!-- 지연 모달 --> <!-- 지연 모달 -->
<div x-show="showDelayModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div x-show="showDelayModal" x-transition class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()"> <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" x-data="calendarComponent()" x-init="init()">
<div class="p-6 border-b"> <div class="p-6 border-b">
<h3 class="text-xl font-bold text-gray-900">할일 지연</h3> <h3 class="text-xl font-bold text-gray-900">할일 지연</h3>
<p class="text-sm text-gray-600 mt-1">새로운 날짜를 선택하고 예정된 할일을 확인하세요</p> <p class="text-sm text-gray-600 mt-1">새로운 날짜를 선택하고 예정된 할일을 확인하세요</p>