From 2201ca1238e72c03a188db5765019579c40362ef Mon Sep 17 00:00:00 2001
From: xxxjinn <tlsguswls319@naver.com>
Date: Sat, 15 Feb 2025 02:50:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=A0=EB=AC=BC=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20-=20=EC=88=9C?=
 =?UTF-8?q?=EC=B0=A8=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=82=98=ED=83=80?=
 =?UTF-8?q?=EB=82=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/gift-upload/GiftForm.tsx | 80 ++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/src/components/gift-upload/GiftForm.tsx b/src/components/gift-upload/GiftForm.tsx
index d742ad5..d3dc14a 100644
--- a/src/components/gift-upload/GiftForm.tsx
+++ b/src/components/gift-upload/GiftForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import CharacterCountInput from "../common/CharacterCountInput";
 import { Button } from "../ui/button";
@@ -24,6 +24,7 @@ const GiftForm = () => {
   const { selectedTagIndex } = useTagIndexStore();
   const { isBoxEditing, setIsBoxEditing } = useEditBoxStore();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const existingGift = giftBoxes[index] || {
     name: "",
     message: "",
@@ -31,9 +32,6 @@ const GiftForm = () => {
     tag: "",
   };
 
-  {
-    /* 이미지쪽 추후 수정 필요 (api 달고) */
-  }
   const [imageCount, setImageCount] = useState(existingGift.filled ? 1 : 0);
   const [giftName, setGiftName] = useState(existingGift.name);
   const [giftReason, setGiftReason] = useState(existingGift.reason || "");
@@ -41,6 +39,12 @@ const GiftForm = () => {
   const [giftTag, setGiftTag] = useState(existingGift.tag || "");
   const [isSubmitted, setIsSubmitted] = useState(false);
 
+  const isGiftNameFilled = useRef(giftName.length > 0);
+  const isReasonFilled = useRef(giftReason.length > 0);
+
+  const reasonRef = useRef<HTMLDivElement>(null);
+  const linkRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (isBoxEditing) {
       setGiftName(existingGift.name);
@@ -50,6 +54,41 @@ const GiftForm = () => {
     }
   }, [isBoxEditing, existingGift]);
 
+  useEffect(() => {
+    if (!isGiftNameFilled.current && giftName.length > 0) {
+      isGiftNameFilled.current = true;
+      setTimeout(() => {
+        reasonRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }, 100);
+    }
+  }, [giftName]);
+
+  useEffect(() => {
+    if (!isReasonFilled.current && giftReason.length > 0) {
+      isReasonFilled.current = true;
+      setTimeout(() => {
+        linkRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }, 100);
+    }
+  }, [giftReason]);
+
+  useEffect(() => {
+    if (giftReason.length > 0) {
+      setTimeout(() => {
+        linkRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }, 100);
+    }
+  }, [giftReason]);
+
   const handleSubmit = () => {
     if (imageCount === 0 || giftName.length === 0) {
       setIsSubmitted(true);
@@ -70,8 +109,8 @@ const GiftForm = () => {
   };
 
   return (
-    <div className="px-4 flex flex-col h-full">
-      <div className="flex flex-col flex-grow gap-[50px]  overflow-y-auto mt-[18px] pb-[70px]">
+    <div className="px-4 flex flex-col h-full overflow-y-auto">
+      <div className="flex flex-col flex-grow gap-[50px] mt-[18px] pb-[70px]">
         <div>
           <div className="mb-[22px]">
             <UploadImageList onImagesChange={setImageCount} />
@@ -84,22 +123,33 @@ const GiftForm = () => {
               maxLength={GIFT_NAME_MAX_LENGTH}
               value={giftName}
               placeholder="선물명을 적어주세요"
-              onChange={setGiftName}
+              onChange={(text) => {
+                setGiftName(text);
+              }}
             />
             {isSubmitted && giftName.length === 0 && (
               <ErrorMessage message="필수 입력 정보입니다." />
             )}
           </div>
         </div>
-        <InputReason
-          value={giftReason}
-          onReasonChange={setGiftReason}
-          onTagChange={setGiftTag}
-          giftBoxIndex={index}
-        />
-        <InputLink value={giftLink} onChange={setGiftLink} />
+        {isGiftNameFilled.current && (
+          <div ref={reasonRef}>
+            <InputReason
+              value={giftReason}
+              onReasonChange={(text) => {
+                setGiftReason(text);
+              }}
+              onTagChange={setGiftTag}
+              giftBoxIndex={index}
+            />
+          </div>
+        )}
+        {isReasonFilled.current && (
+          <div ref={linkRef}>
+            <InputLink value={giftLink} onChange={setGiftLink} />
+          </div>
+        )}
       </div>
-
       <div className="sticky bottom-4 w-full left-0">
         <Button size="lg" onClick={handleSubmit}>
           {isBoxEditing ? "수정 완료" : "채우기 완료"}