Merge pull request #256 from ODOICHON/design/#255

Design/#255 댓글 버튼 UI 수정
ODOICHON · May 6, 2024 · 910bde6 · 910bde6
2 parents 8306574 + df39e30
commit 910bde6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/src/components/Board/Comments/index.tsx b/src/components/Board/Comments/index.tsx
@@ -92,11 +92,15 @@ export default function Comments({
         />
         <span>
           <p>{content.length}/400</p>
-          <button type="button" onClick={onClickButton}>
-            등록
-          </button>
         </span>
       </div>
+      <button
+        className={styles.commentWrite}
+        type="button"
+        onClick={onClickButton}
+      >
+        등록
+      </button>
       {comments.map((comment) => (
         <CommentDetail
           key={comment.commentId}

diff --git a/src/components/Board/Comments/styles.module.scss b/src/components/Board/Comments/styles.module.scss
@@ -1,4 +1,6 @@
 .wrapper {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   margin-bottom: 5rem;
   & > h1 {
@@ -45,18 +47,23 @@
       font-size: 1.125rem;
       color: #717171;
     }
-    & > button {
-      width: 6.85rem;
-      height: 3.125rem;
-      background-color: transparent;
-      border: 1px solid black;
-      border-radius: 25px;
-      font-size: 1.25rem;
-      font-weight: bold;
-      cursor: pointer;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
+  }
+}
+
+.commentWrite {
+  font-family: 'Pretendard';
+  margin-left: auto;
+  margin-bottom: 1.5rem;
+  width: 6.75rem;
+  height: 3.125rem;
+  border: 1px solid #d9d9d9;
+  background-color: #d9d9d9;
+  border-radius: 8px;
+  font-size: 1.25rem;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.8;
+    background-color: #4d5256;
+    color: #f1f5f5;
   }
 }