Merge pull request #283 from oreumi-dreamer/jeehyun

글작성 모달 textarea 높이 변화 추가
oreumi-dreamer · Dec 23, 2024 · 9de85a7 · 9de85a7
2 parents edaedeb + ef8a2b9
commit 9de85a7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 39 deletions.
diff --git a/src/components/write/WritePost.jsx b/src/components/write/WritePost.jsx
@@ -37,13 +37,10 @@ export default function WritePost({
   const [isLoading, setIsLoading] = useState(false);
   const { user } = useSelector((state) => state.auth);
   const { theme } = useTheme();
-  const router = useRouter();
 
   const profileImageUrl = user?.profileImageUrl || "/images/rabbit.svg";
   const userId = user?.userId;
   const userName = user?.userName;
-  //   const userIdLength = user?.userId?.length || 0;
-  //   const userNameLength = user?.userName?.length || 0;
 
   const [selectedGenres, setSelectedGenres] = useState([]);
   const [selectedMoods, setSelectedMoods] = useState([]);
@@ -284,6 +281,12 @@ export default function WritePost({
   const handleContentChange = (e) => {
     setContentValue(e.target.value);
     setIsContentChanged(true);
+
+    if (e.target.classList.contains(styles["has-image"])) {
+      handleResizeHeight(e);
+    } else {
+      handleResizeHeightText(e);
+    }
   };
   const handleRatingChange = (e) => {
     setRating(e.target.value);
@@ -432,7 +435,21 @@ export default function WritePost({
     if (window.innerWidth <= 720) {
       const textarea = e.target;
       const maxHeight = 100;
-      const minHeight = 30;
+      const minHeight = 25;
+      textarea.style.height = "auto";
+
+      if (textarea.value.trim() === "") {
+        textarea.style.height = `${minHeight}rem`;
+      } else {
+        textarea.style.height = `${(textarea.scrollHeight, maxHeight)}rem`;
+      }
+    }
+  };
+  const handleResizeHeightText = (e) => {
+    if (window.innerWidth <= 720) {
+      const textarea = e.target;
+      const maxHeight = 500;
+      const minHeight = 25;
       textarea.style.height = "auto";
 
       if (textarea.value.trim() === "") {

diff --git a/src/components/write/WritePost.module.css b/src/components/write/WritePost.module.css
@@ -85,8 +85,6 @@
 .title-input input[type="text"] {
   background-color: inherit;
   border: 0;
-
-  /* margin-left: 1rem; */
   width: 100%;
   color: var(--black-font-color);
 }
@@ -126,11 +124,9 @@
   height: 100%;
   min-height: 60%;
   margin-top: 1rem;
-
   margin-bottom: 2rem;
   padding: 2rem;
   box-sizing: border-box;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -151,13 +147,11 @@
   position: relative;
   column-gap: 0.6rem;
 }
-
 .genre-picket button {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
 .genre-picker ul {
   display: flex;
   flex-wrap: wrap;
@@ -211,7 +205,6 @@
   white-space: nowrap;
   margin-left: 0.4rem;
 }
-
 .btn-feeling-selected ul:after {
   content: "";
   display: block;
@@ -222,7 +215,6 @@
   bottom: 0;
   right: 0;
 }
-
 .btn-feeling-selected li {
   display: flex;
   justify-content: center;
@@ -251,15 +243,13 @@
   align-items: center;
   height: fit-content;
 }
-
 .rate-star-container div input {
   display: flex;
   width: fit-content;
   height: fit-content;
   align-items: center;
   justify-content: center;
 }
-
 .rate-star {
   appearance: none;
 }
@@ -284,7 +274,6 @@
 .rate-star:hover ~ .rate-star::after {
   background-image: url("/images/star.svg");
 }
-
 /* 이미지첨부 */
 .image-uploader .btn-upload {
   background-color: var(--background-lightgray);
@@ -296,21 +285,18 @@
   color: var(--black-font-color);
   text-align: center;
 }
-
 .image-uploader .btn-upload:hover {
   background-color: var(--none-active-color);
   color: var(--white-color);
 }
-
 .image-uploader .btn-upload:active {
   background-color: var(--deep-pink-color);
   color: var(--white-color);
 }
-
 .image-uploader #file {
   display: none;
 }
-
+/* 구분선 */
 .break-line {
   display: inline-block;
   width: 100%;
@@ -322,22 +308,17 @@
 }
 .text-field-area {
   width: 100%;
-  /* height: calc(100% - 16rem); */
   height: 100%;
-  /* min-height: 40%; */
   padding: 0.4rem;
   resize: none;
   border: 0;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-
 .text-field-area.has-image {
   height: calc(100% - 12rem);
 }
-
 .text-field-area textarea {
   background-color: inherit;
   color: var(--black-font-color);
@@ -359,15 +340,12 @@
 .btn-feeling-selected ul::-webkit-scrollbar {
   height: 0.6rem;
 }
-
 .text-field-area::-webkit-scrollbar-thumb {
   width: 100%;
 }
-
 .image-preview-field::-webkit-scrollbar-thumb {
   height: 100%;
 }
-
 .text-field-area::-webkit-scrollbar-thumb,
 .image-preview-field::-webkit-scrollbar-thumb,
 .genre-picker ul::-webkit-scrollbar-thumb,
@@ -386,12 +364,10 @@
 .btn-feeling-selected ul::-webkit-scrollbar-track {
   border-radius: 1rem;
 }
-
 .genre-picker ul::-webkit-scrollbar-thumb,
 .btn-feeling-selected ul::-webkit-scrollbar-thumb {
   border: 0.1rem solid transparent;
 }
-
 /* 추가이미지 */
 .image-preview-field {
   display: flex;
@@ -402,17 +378,14 @@
   overflow-y: hidden;
   padding: 1rem;
 }
-
 .image-preview-field .preview-image {
   object-fit: contain;
 }
-
 .image-preview-field .image-container {
   position: relative;
   width: 10rem;
   height: 10rem;
 }
-
 .image-preview-field .image-delete {
   position: absolute;
   top: 0;
@@ -422,7 +395,6 @@
   width: 3rem;
   height: 3rem;
 }
-
 .btn-submit-area {
   width: calc(100% - 5rem);
   display: flex;
@@ -432,7 +404,6 @@
   right: 2.5rem;
   bottom: 2rem;
 }
-
 .btn-submit {
   background-color: var(--deep-pink-color);
   padding: 0.8rem 4rem;
@@ -463,7 +434,6 @@
     background-color: inherit;
     width: 1.2rem;
     border-radius: 1rem;
-    /* display: none; */
   }
   .write-field::-webkit-scrollbar-thumb {
     width: 100%;
@@ -478,22 +448,19 @@
     border-radius: 1rem;
   }
   .genre-picker {
-    /* flex-direction: column; */
     align-items: flex-start;
   }
   .genre-picker ul {
     gap: 0.4rem;
     align-items: flex-start;
     margin-left: 0;
-    /* flex-wrap: wrap; */
     left: 3.2rem;
     top: 0.2rem;
   }
   .genre-picker li {
     font-size: 1.4rem;
   }
   .user-feeling {
-    /* flex-direction: column; */
     align-items: flex-start;
     gap: 0.4rem;
   }
@@ -502,7 +469,6 @@
   }
   .btn-feeling-selected .feeling-selected-list {
     gap: 0.4rem;
-    /* flex-wrap: wrap; */
   }
   .rate-star-container p {
     font-size: 1.4rem;
@@ -516,6 +482,9 @@
   .text-field-area {
     height: auto;
   }
+  .text-field-area.has-image {
+    height: 25rem;
+  }
   .text-field-area textarea {
     height: 40rem;
   }