[fix] textarea 맨 위로 스크롤 올라가는 현상 수정

TUK-DP · Jun 19, 2024 · 18b64b0 · 18b64b0
1 parent 58df55b
commit 18b64b0
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/src/pages/Calendar/Diary.js b/src/pages/Calendar/Diary.js
@@ -28,20 +28,19 @@ const Diary = () => {
     textarea.style.height = "auto"; // Reset height to auto
     textarea.style.height = textarea.scrollHeight + "px";
   }, []);
+
   useEffect(() => {
     handleResizeHeight();
   }, [handleResizeHeight]);
 
   const handleContentChange = (e) => {
-    // 내용이 변경될 때마다 높이 조정
-    handleResizeHeight();
     setNewContent(e.target.value);
   };
 
   // 다이어리 수정
   const updateDiary = async () => {
     try {
-      if (newContent == "") {
+      if (newContent === "") {
         return alert("내용을 작성해주세요.");
       }
       setIsSaving(true);
@@ -74,7 +73,6 @@ const Diary = () => {
     try {
       const res = await DiaryController.deleteDiary(diaryId);
       console.log("일기가 삭제되었습니다.");
-      // window.location.reload();
       navigate("/");
     } catch (error) {
       setIsSaving(false);
@@ -100,6 +98,21 @@ const Diary = () => {
     );
   }, []);
 
+  const handleScroll = (e) => {
+    e.preventDefault();
+    textRef.current.scrollTop = textRef.current.scrollHeight;
+  };
+
+  const handleInput = (e) => {
+    const textarea = e.target;
+    const scrollTop = textarea.scrollTop;
+    const scrollHeight = textarea.scrollHeight;
+
+    textarea.scrollTop = scrollTop;
+    textarea.style.height = "auto";
+    textarea.style.height = scrollHeight + "px";
+  };
+
   return (
     <div id="diary">
       {isSaving ? <Loading text="일기 수정 중..." /> : null}
@@ -147,6 +160,8 @@ const Diary = () => {
           ref={textRef}
           onChange={handleContentChange}
           value={newContent}
+          onInput={handleInput}
+          onScroll={handleScroll}
         />
       </div>
       <div