Skip to content

Commit 18b64b0

Browse files
committed
[fix] textarea 맨 위로 스크롤 올라가는 현상 수정
1 parent 58df55b commit 18b64b0

File tree

1 file changed

+19
-4
lines changed

1 file changed

+19
-4
lines changed

src/pages/Calendar/Diary.js

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,19 @@ const Diary = () => {
2828
textarea.style.height = "auto"; // Reset height to auto
2929
textarea.style.height = textarea.scrollHeight + "px";
3030
}, []);
31+
3132
useEffect(() => {
3233
handleResizeHeight();
3334
}, [handleResizeHeight]);
3435

3536
const handleContentChange = (e) => {
36-
// 내용이 변경될 때마다 높이 조정
37-
handleResizeHeight();
3837
setNewContent(e.target.value);
3938
};
4039

4140
// 다이어리 수정
4241
const updateDiary = async () => {
4342
try {
44-
if (newContent == "") {
43+
if (newContent === "") {
4544
return alert("내용을 작성해주세요.");
4645
}
4746
setIsSaving(true);
@@ -74,7 +73,6 @@ const Diary = () => {
7473
try {
7574
const res = await DiaryController.deleteDiary(diaryId);
7675
console.log("일기가 삭제되었습니다.");
77-
// window.location.reload();
7876
navigate("/");
7977
} catch (error) {
8078
setIsSaving(false);
@@ -100,6 +98,21 @@ const Diary = () => {
10098
);
10199
}, []);
102100

101+
const handleScroll = (e) => {
102+
e.preventDefault();
103+
textRef.current.scrollTop = textRef.current.scrollHeight;
104+
};
105+
106+
const handleInput = (e) => {
107+
const textarea = e.target;
108+
const scrollTop = textarea.scrollTop;
109+
const scrollHeight = textarea.scrollHeight;
110+
111+
textarea.scrollTop = scrollTop;
112+
textarea.style.height = "auto";
113+
textarea.style.height = scrollHeight + "px";
114+
};
115+
103116
return (
104117
<div id="diary">
105118
{isSaving ? <Loading text="일기 수정 중..." /> : null}
@@ -147,6 +160,8 @@ const Diary = () => {
147160
ref={textRef}
148161
onChange={handleContentChange}
149162
value={newContent}
163+
onInput={handleInput}
164+
onScroll={handleScroll}
150165
/>
151166
</div>
152167
<div

0 commit comments

Comments
 (0)