From f2a7d1106836498ae208411b2102d0dbbccd84a0 Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 11:19:52 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=93=9D=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.jsx | 90 ++++++++++++++++--------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/write/WritePost.jsx b/src/components/write/WritePost.jsx
index a7624a36..11a1b066 100644
--- a/src/components/write/WritePost.jsx
+++ b/src/components/write/WritePost.jsx
@@ -26,6 +26,8 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
   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([]);
@@ -329,7 +331,7 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
             alt={`${userName}님의 프로필 사진`}
           />
           <p className={styles["user-name"]}>
-            {userName}
+            <span className={styles["user-name-text"]}>{userName}</span>
             <span className={styles["user-id"]}>@{userId}</span>
           </p>
         </div>
@@ -349,7 +351,7 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
               className={styles["title-input"]}
               htmlFor="title"
             >
-              Title
+              <span className="sr-only">제목</span>
               <input
                 type="text"
                 id="title"
@@ -425,7 +427,7 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
                     onClick={openMoodModal}
                     ref={moodButtonRef}
                   >
-                    <ul>
+                    <ul className={styles["feeling-selected-list"]}>
                       {selectedMoods.map((item) => (
                         <li key={item.text}>{item.text}</li>
                       ))}
@@ -436,46 +438,48 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
 
               <div className={styles["rate-star-container"]}>
                 <p>오늘의 꿈 별점: </p>
-                <input
-                  type="radio"
-                  className={styles["rate-star"]}
-                  name="rate-star"
-                  value={1}
-                  onChange={handleRatingChange}
-                  checked={rating === "1"}
-                />
-                <input
-                  type="radio"
-                  className={styles["rate-star"]}
-                  name="rate-star"
-                  value={2}
-                  onChange={handleRatingChange}
-                  checked={rating === "2"}
-                />
-                <input
-                  type="radio"
-                  className={styles["rate-star"]}
-                  name="rate-star"
-                  value={3}
-                  onChange={handleRatingChange}
-                  checked={rating === "3"}
-                />
-                <input
-                  type="radio"
-                  className={styles["rate-star"]}
-                  name="rate-star"
-                  value={4}
-                  onChange={handleRatingChange}
-                  checked={rating === "4"}
-                />
-                <input
-                  type="radio"
-                  className={styles["rate-star"]}
-                  name="rate-star"
-                  value={5}
-                  onChange={handleRatingChange}
-                  checked={rating === "5"}
-                />
+                <div>
+                  <input
+                    type="radio"
+                    className={styles["rate-star"]}
+                    name="rate-star"
+                    value={1}
+                    onChange={handleRatingChange}
+                    checked={rating === "1"}
+                  />
+                  <input
+                    type="radio"
+                    className={styles["rate-star"]}
+                    name="rate-star"
+                    value={2}
+                    onChange={handleRatingChange}
+                    checked={rating === "2"}
+                  />
+                  <input
+                    type="radio"
+                    className={styles["rate-star"]}
+                    name="rate-star"
+                    value={3}
+                    onChange={handleRatingChange}
+                    checked={rating === "3"}
+                  />
+                  <input
+                    type="radio"
+                    className={styles["rate-star"]}
+                    name="rate-star"
+                    value={4}
+                    onChange={handleRatingChange}
+                    checked={rating === "4"}
+                  />
+                  <input
+                    type="radio"
+                    className={styles["rate-star"]}
+                    name="rate-star"
+                    value={5}
+                    onChange={handleRatingChange}
+                    checked={rating === "5"}
+                  />
+                </div>
               </div>
               <div className={styles["image-uploader"]}>
                 <label>

From 97e9d0d80ad3e8246099602f4ddb0dc9d2b2d145 Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 11:20:22 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=92=84=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.module.css | 85 +++++++++++++++++++++--
 1 file changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/components/write/WritePost.module.css b/src/components/write/WritePost.module.css
index 0d3bc502..e23c1d4f 100644
--- a/src/components/write/WritePost.module.css
+++ b/src/components/write/WritePost.module.css
@@ -28,6 +28,7 @@
   gap: 1.6rem;
   align-items: center;
   margin-bottom: 3rem;
+  width: calc(100% - 4rem);
 }
 .user-profile-img {
   border-radius: 50%;
@@ -35,14 +36,23 @@
 }
 .user-name {
   display: flex;
-  font-size: 3.2rem;
+  flex-direction: column;
+  font-size: 2.4rem;
   font-weight: 700;
+  width: calc(100% - 5rem);
   color: var(--black-font-color);
 }
 .user-id {
   font-weight: normal;
+  font-size: 1.6rem;
   color: var(--gray-font-color);
 }
+.user-name-text,
+.user-id {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .btn-close {
   width: 3rem;
   height: 3rem;
@@ -115,6 +125,10 @@
   margin-bottom: 2rem;
   padding: 2rem;
   box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .write-field-opt {
   display: flex;
@@ -122,10 +136,11 @@
   align-items: flex-start;
   justify-content: space-around;
   gap: 0.4rem;
-  margin: 0 1.6rem;
+  margin: 0 0.6rem;
 }
 .genre-picker {
   display: flex;
+  width: 100%;
 }
 .genre-picker ul {
   display: flex;
@@ -150,12 +165,12 @@
   border: 0;
   border-radius: 1rem;
 }
-.btn-feeling-selected {
+/* .btn-feeling-selected {
   height: 2rem;
   padding: 0 2rem;
   background-color: var(--background-lightgray);
   border-radius: 1rem;
-}
+} */
 .btn-feeling-selected ul {
   display: flex;
   gap: 1rem;
@@ -163,6 +178,10 @@
 .btn-feeling-selected li {
   list-style: none;
   color: var(--black-font-color);
+  height: 2rem;
+  padding: 0 2rem;
+  background-color: var(--background-lightgray);
+  border-radius: 1rem;
 }
 /* 별점 */
 .rate-star-container {
@@ -230,22 +249,30 @@
   background-image: url("/images/dash.svg");
   background-repeat: repeat-x;
   background-position: center;
+  margin: 0.8rem 0;
 }
 .text-field-area {
   width: 100%;
-  height: calc(100% - 7rem);
-  padding: 1rem;
+  /* height: calc(100% - 16rem); */
+  height: 100%;
+  padding: 0.4rem;
   resize: none;
   border: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .text-field-area.has-image {
-  height: calc(100% - 20rem);
+  height: calc(100% - 15rem);
 }
 
 .text-field-area textarea {
   background-color: inherit;
   color: var(--black-font-color);
+  height: 100%;
+  padding: 0.6rem;
 }
 .text-field-area::-webkit-scrollbar,
 .image-preview-field::-webkit-scrollbar {
@@ -328,4 +355,48 @@
   .new-post-form {
     gap: 3rem;
   }
+  #title {
+    width: 100%;
+  }
+  .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;
+  }
+  .genre-picker li {
+    font-size: 1.4rem;
+  }
+  .user-feeling {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.4rem;
+  }
+  .btn-feeling-selected .feeling-selected-list {
+    gap: 0.4rem;
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 480px) {
+  .new-post {
+    width: calc(100% - 6rem);
+  }
+  #title {
+    padding: 0.8rem;
+    /* padding-bottom: 0.8rem; */
+  }
+  .write-field {
+    padding: 0.8rem;
+  }
+  .write-field-opt {
+    margin: 0.8rem;
+  }
+  .rate-star-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }

From 98a1f672f9660c38c404851e487aaeb5347a026b Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 14:33:10 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20=EA=B8=80=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EB=B0=98=EC=9D=91=ED=98=95=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.module.css | 62 +++++++++++++++++++----
 1 file changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/write/WritePost.module.css b/src/components/write/WritePost.module.css
index e23c1d4f..25320067 100644
--- a/src/components/write/WritePost.module.css
+++ b/src/components/write/WritePost.module.css
@@ -135,12 +135,14 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-around;
-  gap: 0.4rem;
+  gap: 0.6rem;
   margin: 0 0.6rem;
+  width: calc(100% - 1.6rem);
 }
 .genre-picker {
   display: flex;
   width: 100%;
+  position: relative;
 }
 .genre-picker ul {
   display: flex;
@@ -148,6 +150,12 @@
   gap: 0.4rem;
   align-items: center;
   margin-left: 1rem;
+  width: calc(100% - 3rem);
+  overflow-x: scroll;
+  white-space: nowrap;
+  position: absolute;
+  left: 2.4rem;
+  top: 0.1rem;
 }
 .genre-picker li {
   padding: 0.2rem 1rem;
@@ -157,6 +165,8 @@
   display: flex;
   align-items: center;
   gap: 1rem;
+  width: 100%;
+  position: relative;
 }
 .btn-feeling {
   background-color: var(--background-lightgray);
@@ -164,6 +174,10 @@
   height: 2rem;
   border: 0;
   border-radius: 1rem;
+  position: absolute;
+  top: 0.18rem;
+  left: 6rem;
+  margin-left: 0.4rem;
 }
 /* .btn-feeling-selected {
   height: 2rem;
@@ -174,6 +188,13 @@
 .btn-feeling-selected ul {
   display: flex;
   gap: 1rem;
+  width: calc(100% - 5.9rem);
+  overflow-x: scroll;
+  white-space: nowrap;
+  position: absolute;
+  top: 0.18rem;
+  left: 6rem;
+  margin-left: 0.4rem;
 }
 .btn-feeling-selected li {
   list-style: none;
@@ -275,11 +296,17 @@
   padding: 0.6rem;
 }
 .text-field-area::-webkit-scrollbar,
-.image-preview-field::-webkit-scrollbar {
+.image-preview-field::-webkit-scrollbar,
+.genre-picker ul::-webkit-scrollbar,
+.btn-feeling-selected ul::-webkit-scrollbar {
   background-color: inherit;
   width: 2rem;
   height: 2rem;
 }
+.genre-picker ul::-webkit-scrollbar,
+.btn-feeling-selected ul::-webkit-scrollbar {
+  height: 1rem;
+}
 
 .text-field-area::-webkit-scrollbar-thumb {
   width: 100%;
@@ -290,17 +317,26 @@
 }
 
 .text-field-area::-webkit-scrollbar-thumb,
-.image-preview-field::-webkit-scrollbar-thumb {
+.image-preview-field::-webkit-scrollbar-thumb,
+.genre-picker ul::-webkit-scrollbar-thumb,
+.btn-feeling-selected ul::-webkit-scrollbar-thumb {
   background-color: var(--none-active-color);
   background-clip: padding-box;
   border: 0.6rem solid transparent;
   border-radius: 1rem;
 }
 .text-field-area::-webkit-scrollbar-track,
-.image-preview-field::-webkit-scrollbar-track {
+.image-preview-field::-webkit-scrollbar-track,
+.genre-picker ul::-webkit-scrollbar-track,
+.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.3rem solid transparent;
+}
+
 /* 추가이미지 */
 .image-preview-field {
   display: flex;
@@ -352,33 +388,42 @@
     left: 4%;
     justify-content: flex-start;
   }
+  .user-prof {
+    margin-bottom: 1rem;
+  }
   .new-post-form {
     gap: 3rem;
   }
   #title {
     width: 100%;
+    padding: 1rem;
+  }
+  .write-field {
+    padding: 1rem;
   }
   .genre-picker {
-    flex-direction: column;
+    /* flex-direction: column; */
     align-items: flex-start;
   }
   .genre-picker ul {
     gap: 0.4rem;
     align-items: flex-start;
     margin-left: 0;
-    flex-wrap: wrap;
+    /* flex-wrap: wrap; */
+    left: 3.2rem;
+    top: 0.2rem;
   }
   .genre-picker li {
     font-size: 1.4rem;
   }
   .user-feeling {
-    flex-direction: column;
+    /* flex-direction: column; */
     align-items: flex-start;
     gap: 0.4rem;
   }
   .btn-feeling-selected .feeling-selected-list {
     gap: 0.4rem;
-    flex-wrap: wrap;
+    /* flex-wrap: wrap; */
   }
 }
 @media (max-width: 480px) {
@@ -387,7 +432,6 @@
   }
   #title {
     padding: 0.8rem;
-    /* padding-bottom: 0.8rem; */
   }
   .write-field {
     padding: 0.8rem;

From 2fb7421e684c9f3f17922fa24d89fa0349f7adaa Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 17:28:33 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=93=9D=20=EB=B9=84=EA=B3=B5=EA=B0=9C?=
 =?UTF-8?q?=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.jsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/write/WritePost.jsx b/src/components/write/WritePost.jsx
index adac827d..3ba2542c 100644
--- a/src/components/write/WritePost.jsx
+++ b/src/components/write/WritePost.jsx
@@ -345,7 +345,6 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
           className={styles["new-post-form"]}
           onSubmit={handleSubmit}
         >
-          <div id={styles["title"]}>
             <label
               id="title-input"
               className={styles["title-input"]}
@@ -360,16 +359,6 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
                 value={inputValue}
               />
             </label>
-            <label id="hidden" className={styles["hidden"]} htmlFor="hidden">
-              <input
-                type="checkbox"
-                id="hidden"
-                checked={isPrivate}
-                onChange={() => setIsPrivate((prev) => !prev)}
-              />
-              비공개
-            </label>
-          </div>
 
           <div className={styles["write-field"]}>
             <div className={styles["write-field-opt"]}>
@@ -535,6 +524,20 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
             {isLoading ? (
               <Uploading />
             ) : (
+              <>
+                <label
+                  id="hidden"
+                  className={styles["hidden"]}
+                  htmlFor="hidden"
+                >
+                  <input
+                    type="checkbox"
+                    id="hidden"
+                    checked={isPrivate}
+                    onChange={() => setIsPrivate((prev) => !prev)}
+                  />
+                  비공개
+                </label>
               <button
                 type="submit"
                 form="new-post-form"
@@ -542,6 +545,7 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
               >
                 전송
               </button>
+              </>
             )}
           </div>
         </form>

From 55bf3aca3a2a5007b4ca1b00b118f24f7076ba47 Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 17:41:47 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8E=A8=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20textarea=20=EB=86=92=EC=9D=B4?=
 =?UTF-8?q?=20=EC=B8=A1=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.jsx | 65 ++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/components/write/WritePost.jsx b/src/components/write/WritePost.jsx
index 3ba2542c..aaa44076 100644
--- a/src/components/write/WritePost.jsx
+++ b/src/components/write/WritePost.jsx
@@ -236,6 +236,27 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
     setIsPrivate(false);
   };
 
+  //   textarea 높이
+  const handleResizeHeight = (e) => {
+    if (window.innerWidth <= 720) {
+      const textarea = e.target;
+      const maxHeight = 100;
+      const minHeight = 30;
+      textarea.style.height = "auto";
+
+      if (textarea.value.trim() === "") {
+        textarea.style.height = `${minHeight}rem`;
+      } else {
+        textarea.style.height = `${(textarea.scrollHeight, maxHeight)}rem`;
+      }
+    }
+  };
+
+  const handleInputChange = (e) => {
+    handleResizeHeight(e);
+    handleContentChange(e);
+  };
+
   // 날짜
   const today = new Date();
   const year = ("0" + today.getFullYear()).slice(-2);
@@ -345,20 +366,20 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
           className={styles["new-post-form"]}
           onSubmit={handleSubmit}
         >
-            <label
-              id="title-input"
-              className={styles["title-input"]}
-              htmlFor="title"
-            >
-              <span className="sr-only">제목</span>
-              <input
-                type="text"
-                id="title"
-                placeholder={`${year}년 ${month}월 ${date}일 꿈 일기`}
-                onChange={handleTitleChange}
-                value={inputValue}
-              />
-            </label>
+          <label
+            id="title-input"
+            className={styles["title-input"]}
+            htmlFor="title"
+          >
+            <span className="sr-only">제목</span>
+            <input
+              type="text"
+              id="title"
+              placeholder={`${year}년 ${month}월 ${date}일 꿈 일기`}
+              onChange={handleTitleChange}
+              value={inputValue}
+            />
+          </label>
 
           <div className={styles["write-field"]}>
             <div className={styles["write-field-opt"]}>
@@ -489,7 +510,7 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
               <textarea
                 placeholder="오늘은 어떤 꿈을 꾸셨나요?"
                 className={`${styles["text-field-area"]} ${imageFiles && styles["has-image"]}`}
-                onChange={handleContentChange}
+                onChange={handleInputChange}
                 value={contentValue}
               />
               <section className={styles["image-preview-field"]}>
@@ -538,13 +559,13 @@ export default function WritePost({ isWriteModalOpen, closeWriteModal }) {
                   />
                   비공개
                 </label>
-              <button
-                type="submit"
-                form="new-post-form"
-                className={styles["btn-submit"]}
-              >
-                전송
-              </button>
+                <button
+                  type="submit"
+                  form="new-post-form"
+                  className={styles["btn-submit"]}
+                >
+                  전송
+                </button>
               </>
             )}
           </div>

From 0f22f5f6ada835c62c3cb390e2c00285c78202f9 Mon Sep 17 00:00:00 2001
From: "han.j33" <jeehyun0212@naver.com>
Date: Fri, 20 Dec 2024 17:42:20 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=84=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/write/WritePost.module.css | 117 ++++++++++++++++------
 1 file changed, 89 insertions(+), 28 deletions(-)

diff --git a/src/components/write/WritePost.module.css b/src/components/write/WritePost.module.css
index 25320067..264cdd4d 100644
--- a/src/components/write/WritePost.module.css
+++ b/src/components/write/WritePost.module.css
@@ -69,12 +69,12 @@
   margin-bottom: 2rem;
   color: var(--black-font-color);
 }
-#title {
+.title-input {
   background-color: var(--background-white);
   display: flex;
   gap: 1rem;
   width: 88%;
-  padding: 2rem;
+  padding: 2rem 3rem;
   border-radius: 1rem;
   margin-right: 1rem;
   position: relative;
@@ -82,18 +82,26 @@
 .title-input {
   width: 100%;
 }
-#title input[type="text"] {
+.title-input input[type="text"] {
   background-color: inherit;
   border: 0;
 
-  margin-left: 1rem;
-  width: 80%;
+  /* margin-left: 1rem; */
+  width: 100%;
   color: var(--black-font-color);
 }
-#title input[type="checkbox"] {
+.hidden {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  position: relative;
+  margin-right: 2rem;
+}
+.hidden input {
   appearance: none;
 }
-#title input[type="checkbox"]::after {
+.hidden input::after {
   background-image: url("/images/checkbox.svg");
   content: "";
   background-position: center;
@@ -101,25 +109,22 @@
   display: inline-block;
   width: 2rem;
   height: 2rem;
+  position: absolute;
+  left: -2rem;
+  top: 0.7rem;
 }
-#title input[type="checkbox"]:checked::after {
+.hidden input:checked::after {
   background-image: url("/images/checkbox-checked.svg");
   content: "";
   background-position: center;
   background-size: contain;
 }
-.hidden {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.2rem;
-  position: absolute;
-  right: -12%;
-}
+
 .write-field {
   background-color: var(--background-white);
   border-radius: 1rem;
   height: 100%;
+  min-height: 60%;
   margin-top: 1rem;
 
   margin-bottom: 2rem;
@@ -135,7 +140,7 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-around;
-  gap: 0.6rem;
+  gap: 0.8rem;
   margin: 0 0.6rem;
   width: calc(100% - 1.6rem);
 }
@@ -208,10 +213,17 @@
 .rate-star-container {
   display: flex;
   align-items: center;
+  position: relative;
+  width: 100%;
 }
 .rate-star-container p {
   margin-right: 0.2rem;
 }
+.rate-star-container div {
+  position: absolute;
+  left: 9.4rem;
+  top: 0;
+}
 .rate-star {
   appearance: none;
 }
@@ -276,6 +288,7 @@
   width: 100%;
   /* height: calc(100% - 16rem); */
   height: 100%;
+  /* min-height: 40%; */
   padding: 0.4rem;
   resize: none;
   border: 0;
@@ -286,7 +299,7 @@
 }
 
 .text-field-area.has-image {
-  height: calc(100% - 15rem);
+  height: calc(100% - 12rem);
 }
 
 .text-field-area textarea {
@@ -303,9 +316,12 @@
   width: 2rem;
   height: 2rem;
 }
+.image-preview-field::-webkit-scrollbar {
+  height: 1.2rem;
+}
 .genre-picker ul::-webkit-scrollbar,
 .btn-feeling-selected ul::-webkit-scrollbar {
-  height: 1rem;
+  height: 0.6rem;
 }
 
 .text-field-area::-webkit-scrollbar-thumb {
@@ -325,6 +341,9 @@
   border: 0.6rem solid transparent;
   border-radius: 1rem;
 }
+.image-preview-field::-webkit-scrollbar-thumb {
+  border: 0.4rem solid transparent;
+}
 .text-field-area::-webkit-scrollbar-track,
 .image-preview-field::-webkit-scrollbar-track,
 .genre-picker ul::-webkit-scrollbar-track,
@@ -334,7 +353,7 @@
 
 .genre-picker ul::-webkit-scrollbar-thumb,
 .btn-feeling-selected ul::-webkit-scrollbar-thumb {
-  border: 0.3rem solid transparent;
+  border: 0.1rem solid transparent;
 }
 
 /* 추가이미지 */
@@ -344,6 +363,7 @@
   gap: 2.5rem;
   max-height: 15rem;
   overflow-x: auto;
+  overflow-y: hidden;
   padding: 1rem;
 }
 
@@ -384,15 +404,13 @@
 }
 @media (max-width: 720px) {
   .hidden {
-    top: 110%;
-    left: 4%;
-    justify-content: flex-start;
+    margin-right: 1rem;
   }
   .user-prof {
     margin-bottom: 1rem;
   }
   .new-post-form {
-    gap: 3rem;
+    gap: 2rem;
   }
   #title {
     width: 100%;
@@ -400,6 +418,28 @@
   }
   .write-field {
     padding: 1rem;
+    padding-right: 0rem;
+    margin-bottom: 0;
+    display: block;
+    overflow-y: scroll;
+  }
+  .write-field::-webkit-scrollbar {
+    background-color: inherit;
+    width: 1.2rem;
+    border-radius: 1rem;
+    /* display: none; */
+  }
+  .write-field::-webkit-scrollbar-thumb {
+    width: 100%;
+  }
+  .write-field::-webkit-scrollbar-thumb {
+    background-color: var(--none-active-color);
+    background-clip: padding-box;
+    border: 0.4rem solid transparent;
+    border-radius: 1rem;
+  }
+  .write-field::-webkit-scrollbar-track {
+    border-radius: 1rem;
   }
   .genre-picker {
     /* flex-direction: column; */
@@ -421,10 +461,34 @@
     align-items: flex-start;
     gap: 0.4rem;
   }
+  .user-feeling {
+    font-size: 1.4rem;
+  }
   .btn-feeling-selected .feeling-selected-list {
     gap: 0.4rem;
     /* flex-wrap: wrap; */
   }
+  .rate-star-container p {
+    font-size: 1.4rem;
+  }
+  .rate-star-container div {
+    left: 8.2rem;
+  }
+  .break-line {
+    margin: 0;
+  }
+  .text-field-area {
+    height: auto;
+  }
+  .text-field-area textarea {
+    height: 40rem;
+  }
+  .text-field-area::-webkit-scrollbar {
+    width: 1.2rem;
+  }
+  .text-field-area::-webkit-scrollbar-thumb {
+    border: 0.4rem solid transparent;
+  }
 }
 @media (max-width: 480px) {
   .new-post {
@@ -435,12 +499,9 @@
   }
   .write-field {
     padding: 0.8rem;
+    padding-right: 0;
   }
   .write-field-opt {
     margin: 0.8rem;
   }
-  .rate-star-container {
-    flex-direction: column;
-    align-items: flex-start;
-  }
 }