[fix/goal-239] 🚨 Fix : 목표상세 ux 수정

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<HTMLInputElement>(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) {
         <h3 className="truncate text-base font-semibold">{goal?.title}</h3>
       ) : (
         <div className="flex w-full gap-2">
-          <BaseInput
-            id="goal-title-edit"
-            className="w-[70%] sm:w-[80%]"
-            value={editTitle}
-            type="text"
-            onChange={(e) => setEditTitle(e.target.value)}
-            placeholder="수정할 목표를 적어주세요."
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                handleSave();
-              }
-            }}
-          />
-
+          <div className="relative w-full">
+            <input
+              ref={inputRef}
+              name="goal-title-edit"
+              id="goal-title-edit"
+              className="focus-visible:ring-none w-[70%] outline-none focus:outline-none sm:w-[80%]"
+              value={editTitle}
+              type="text"
+              onChange={(e) => setEditTitle(e.target.value)}
+              placeholder="수정할 목표를 적어주세요."
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleSave();
+                }
+              }}
+            />
+          </div>
           <TextButton
             onClick={handleSave}
             className="w-[20%] sm:w-[10%]">

src/app/(protected)/goals/[goalId]/_components/GoalNotesCard.tsx

@@ -11,13 +11,13 @@ type GoalNotesCardProps = {
 
 export default function GoalNotesCard({ goalId, todoId }: GoalNotesCardProps) {
   return (
-    <div className="transition-al l mt-4 flex h-40 items-end rounded-4xl bg-blue-200 bg-[url('/images/goals/obj-note.png')] bg-size-[98px_auto] bg-position-[right_14px_top_14px] bg-no-repeat px-10 py-7.5 text-white shadow-[0_10px_40px_0_rgba(0,212,190,0.24)] sm:mt-0 sm:h-auto sm:bg-position-[right_4px_top_14px] lg:h-31.25 lg:py-4 xl:h-auto xl:py-7.5">
-      <Link
-        href={`/notes?goalId=${goalId}`}
-        className="flex items-center gap-1 text-2xl font-bold break-keep sm:text-xl lg:text-2xl">
+    <Link
+      href={`/notes?goalId=${goalId}`}
+      className="transition-al l mt-4 flex h-40 items-end rounded-4xl bg-blue-200 bg-[url('/images/goals/obj-note.png')] bg-size-[98px_auto] bg-position-[right_14px_top_14px] bg-no-repeat px-10 py-7.5 text-white shadow-[0_10px_40px_0_rgba(0,212,190,0.24)] sm:mt-0 sm:h-auto sm:bg-position-[right_4px_top_14px] lg:h-31.25 lg:py-4 xl:h-auto xl:py-7.5">
+      <div className="flex items-center gap-1 text-2xl font-bold break-keep sm:text-xl lg:text-2xl">
         노트 모아보기
         <ChevronRightIcon className="ml-0.5 w-5 sm:w-3.5 lg:w-5" />
-      </Link>
-    </div>
+      </div>
+    </Link>
   );
 }