diff --git a/src/modules/todo/TodoPage.tsx b/src/modules/todo/TodoPage.tsx index db3efa7..7e5619a 100644 --- a/src/modules/todo/TodoPage.tsx +++ b/src/modules/todo/TodoPage.tsx @@ -35,7 +35,14 @@ export const TodoPage: React.FC = () => { const [addingDate, setAddingDate] = useState(null) const [newTodoContent, setNewTodoContent] = useState('') const [isInitialLoad, setIsInitialLoad] = useState(true) - const inputRef = useRef(null) + const inputRef = useRef(null) + const editInputRef = useRef(null) + + const adjustTextAreaHeight = (el: HTMLTextAreaElement) => { + const baseHeight = 28 // 1.75rem = 28px + el.style.height = baseHeight + 'px' + el.style.height = Math.max(el.scrollHeight, baseHeight) + 'px' + } const loadTodoData = useCallback(async (year: number, month: number, isInitial: boolean = false) => { if (isInitial) { @@ -62,9 +69,16 @@ export const TodoPage: React.FC = () => { useEffect(() => { if (addingDate && inputRef.current) { inputRef.current.focus() + adjustTextAreaHeight(inputRef.current) } }, [addingDate]) + useEffect(() => { + if (editingItem && editInputRef.current) { + adjustTextAreaHeight(editInputRef.current) + } + }, [editingItem]) + const handlePrevMonth = () => { if (currentMonth === 1) { setCurrentMonth(12) @@ -266,11 +280,11 @@ export const TodoPage: React.FC = () => { )} -
+
{dayTodo?.items.map((item, index) => (
{editingItem?.date === date && editingItem?.index === index ? ( - setEditContent(e.target.value)} + onChange={(e) => { + setEditContent(e.target.value) + adjustTextAreaHeight(e.target) + }} onKeyDown={handleEditKeyDown} onBlur={handleSaveEdit} autoFocus - className="flex-1 px-2 py-0.5 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200" + rows={1} + className="flex-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 resize-none overflow-hidden align-top" + style={{ height: '1.75rem' }} /> ) : ( canEdit && handleStartEdit(date, index, item.content)} + onDoubleClick={() => canEdit && !item.completed && handleStartEdit(date, index, item.content)} className={`flex-1 ${canEdit ? 'cursor-pointer' : 'cursor-default' } ${item.completed ? 'text-gray-400 dark:text-gray-500 line-through' @@ -310,7 +329,7 @@ export const TodoPage: React.FC = () => { )} - {canEdit && ( +{canEdit && !item.completed && (