Merge pull request #239 from oreumi-dreamer/jinhui

[PostModal] 반응형 수정 및 모바일 css 적용
oreumi-dreamer · Dec 20, 2024 · 511c446 · 511c446
2 parents 62f6bb0 + 8957e73
commit 511c446
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/src/components/modal/CommentArticles.jsx b/src/components/modal/CommentArticles.jsx
@@ -95,12 +95,14 @@ export default function CommentArticles({
             }`}
           >
             <Link href={`/users/${comment.authorId}`}>
-              <span>
+              <span className={styles["author-name"]}>
                 {comment.authorName.length > 7
-                  ? comment.authorName.slice(0, 10) + "..."
+                  ? comment.authorName.slice(0, 9) + "..."
                   : comment.authorName}
-              </span>{" "}
-              {`@${comment.authorId.length > 7 ? comment.authorId.slice(0, 10) + "..." : comment.authorId}`}
+              </span>
+              <span className={styles["author-id"]}>
+                {`@${comment.authorId.length > 7 ? comment.authorId.slice(0, 7) + "..." : comment.authorId}`}
+              </span>
             </Link>
           </li>
           <li>

diff --git a/src/components/modal/CommentArticles.module.css b/src/components/modal/CommentArticles.module.css
@@ -21,6 +21,7 @@
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 
 .comment-article:has(.comment-close):not(.comment-open) {
@@ -50,15 +51,17 @@
   left: 0.4rem;
 }
 
-.comment-info a {
+.author-id {
   color: var(--gray-font-color);
+  font-size: var(--small-text-font-size);
   margin-right: 0.4rem;
 }
-.comment-info a span {
-  font-size: var(--body-font-size);
+.author-name {
+  font-size: var(--body-text-font-size);
   color: var(--black-font-color);
 }
 .comment-info time {
+  font-size: var(--small-text-font-size);
   color: var(--time-font-color);
 }
 .comment-info img {

diff --git a/src/components/modal/PostModal.module.css b/src/components/modal/PostModal.module.css
@@ -23,7 +23,6 @@ html:has(.post-modal) {
   width: 95vw;
   max-width: 155.4rem;
   height: 90vh;
-  min-height: 50rem;
   max-height: 100rem;
   border-radius: 1rem;
   background-color: var(--background-lightgray);
@@ -82,7 +81,7 @@ html:has(.post-modal) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 16ch;
+  width: 22ch;
 }
 .uploaded-time,
 .profile-info span {
@@ -119,10 +118,10 @@ html:has(.post-modal) {
 }
 
 .post-text {
-  min-width: 43.8rem;
+  min-width: 40.5rem;
   max-width: 66.5rem;
-  height: 82.3%;
-  max-height: 80.3rem;
+  height: 100%;
+  max-height: 79%;
   background-color: var(--background-white);
   border-radius: 1rem;
   padding: 1.6rem 1rem 4rem 4.3rem;
@@ -264,7 +263,6 @@ img.tomong-icon {
 
 .comment-input {
   width: 100%;
-  min-width: 19rem;
   height: 9.4rem;
   background-color: unset;
   color: var(--black-font-color);
@@ -362,12 +360,14 @@ input[type="checkbox"]:checked + label.checkbox::before {
 
 @media (max-width: 720px) {
   .post-modal {
-    padding: 2rem 2rem 2rem 2rem;
+    padding: 2rem 0 2rem 2rem;
     flex-direction: column;
     min-width: 34rem;
     overflow-y: scroll;
   }
-
+  .bookmark {
+    display: none;
+  }
   .post-section {
     padding-right: 0;
     margin-right: 0;
@@ -376,6 +376,9 @@ input[type="checkbox"]:checked + label.checkbox::before {
     background: url(/images/dash.svg) repeat-x bottom;
     background-size: 12px 2px;
   }
+  .post-info-section {
+    padding-left: 1.4rem;
+  }
   .post-text {
     min-width: 30rem;
     padding-left: 1.6rem;
@@ -388,6 +391,7 @@ input[type="checkbox"]:checked + label.checkbox::before {
     justify-content: flex-start;
     gap: 1rem;
     flex-wrap: wrap;
+    padding-right: 2rem;
   }
 
   .button-list li:first-of-type {
@@ -412,10 +416,37 @@ input[type="checkbox"]:checked + label.checkbox::before {
   .comment-input {
     height: 5rem;
   }
+  .close-btn {
+    top: 1.5rem;
+    right: 0;
+  }
+  .more-btn {
+    position: absolute;
+    top: 4.15rem;
+    right: 1rem;
+  }
 }
 
 @media (max-width: 480px) {
   .long-profile-info {
     font-size: var(--body-font-size);
   }
+  .post-tag {
+    gap: 0.4rem;
+  }
+  .post-tag li {
+    padding: 0.4rem 1rem;
+    font-size: var(--tiny-text-font-size);
+  }
+  .dream-felt {
+    padding: 0.4rem 1.6rem;
+    font-size: var(--tiny-text-font-size);
+  }
+  .button-list button img {
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+  .dream-score {
+    font-size: var(--tiny-text-font-size);
+  }
 }