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

20
frontend/todos.html
View File

@@ -457,7 +457,7 @@
<!-- TODO 탭 -->
<div x-show="activeTab === 'todo'" class="space-y-4">
<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-1">
<p class="text-gray-900 mb-3" x-text="todo.content"></p>
@@ -481,20 +481,20 @@
<i class="fas fa-clock mr-1"></i>지연
</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"
>
<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>
</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">
<template x-for="memo in memos" :key="memo.id">
<div x-show="getTodoMemos(todo.id).length > 0" class="space-y-2 mb-3">
<template x-for="memo in getTodoMemos(todo.id)" :key="memo.id">
<div class="comment-bubble">
<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>
@@ -509,10 +509,10 @@
x-model="newMemo"
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"
@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
@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"
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 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">
<h3 class="text-xl font-bold text-gray-900">일정 설정</h3>
<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 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">
<h3 class="text-xl font-bold text-gray-900">할일 지연</h3>
<p class="text-sm text-gray-600 mt-1">새로운 날짜를 선택하고 예정된 할일을 확인하세요</p>