diff --git a/src/app/(protected)/goals/[goalId]/_components/GoalHeader.tsx b/src/app/(protected)/goals/[goalId]/_components/GoalHeader.tsx index 08427b2..e16976b 100644 --- a/src/app/(protected)/goals/[goalId]/_components/GoalHeader.tsx +++ b/src/app/(protected)/goals/[goalId]/_components/GoalHeader.tsx @@ -5,7 +5,7 @@ import { useUpdateGoalMutation } from "@/hooks/queries/goals/useUpdateGoalMutati import { useGoalDetail } from "@/hooks/queries/goals/useGoalDetail"; import { useDropdown } from "@/hooks/useDropdown"; import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import TextButton from "@/components/common/button/TextButton"; import { useDeleteGoalMutation } from "@/hooks/queries/goals/useDeleteGoalMutation"; import ConfirmModal from "@/components/common/popup-modal/ConfirmModal"; @@ -19,12 +19,18 @@ type GoalHeaderProps = { export default function GoalHeader({ goalId }: GoalHeaderProps) { const numericGoalId = Number(goalId); + const inputRef = useRef(null); const router = useRouter(); const { data: goal } = useGoalDetail(numericGoalId); const [confirmOpen, setConfirmOpen] = useState(false); const [isEditing, setIsEditing] = useState(false); + useEffect(() => { + if (isEditing && inputRef.current) { + inputRef.current.focus(); + } + }, [isEditing]); const [editTitle, setEditTitle] = useState(""); const { mutate: updateGoal } = useUpdateGoalMutation(numericGoalId); @@ -42,7 +48,7 @@ export default function GoalHeader({ goalId }: GoalHeaderProps) { text: "수정하기", onClick: () => { closeDropdown(); - setEditTitle(""); + setEditTitle(goal?.title ?? ""); setIsEditing(true); }, }, @@ -92,21 +98,24 @@ export default function GoalHeader({ goalId }: GoalHeaderProps) {

{goal?.title}

) : (
- setEditTitle(e.target.value)} - placeholder="수정할 목표를 적어주세요." - onKeyDown={(e) => { - if (e.key === "Enter") { - e.preventDefault(); - handleSave(); - } - }} - /> - +
+ setEditTitle(e.target.value)} + placeholder="수정할 목표를 적어주세요." + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + handleSave(); + } + }} + /> +
diff --git a/src/app/(protected)/goals/[goalId]/_components/GoalNotesCard.tsx b/src/app/(protected)/goals/[goalId]/_components/GoalNotesCard.tsx index e5a8a06..387c3f0 100644 --- a/src/app/(protected)/goals/[goalId]/_components/GoalNotesCard.tsx +++ b/src/app/(protected)/goals/[goalId]/_components/GoalNotesCard.tsx @@ -11,13 +11,13 @@ type GoalNotesCardProps = { export default function GoalNotesCard({ goalId, todoId }: GoalNotesCardProps) { return ( -
- + +
노트 모아보기 - -
+
+ ); }