🐛 fix: 방정보 팝업 공유하기 영역 ui 수정

Techit-Springles · Sep 13, 2023 · 1a9c9bd · 1a9c9bd
1 parent 33820da
commit 1a9c9bd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/src/main/resources/static/css/basic.css b/src/main/resources/static/css/basic.css
@@ -724,3 +724,32 @@ body {
     top: -2px;
 }
 
+.hr-sect {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 16px;
+    margin: 36px 0px 8px 0px;
+}
+
+.hr-sect::before,
+.hr-sect::after {
+    content: "";
+    flex-grow: 1;
+    background: rgba(0, 0, 0, 0.35);
+    height: 1px;
+    font-size: 0px;
+    line-height: 0px;
+    margin: 0px 16px;
+}
+
+.sns-btn {
+    border: #ced4da solid 1px;
+    background-color: #ffffff;
+    color: #666666;
+    font-size: 14px;
+    border-radius: 30px;
+    width: 84px;
+}
+
diff --git a/src/main/resources/templates/chat-room.html b/src/main/resources/templates/chat-room.html
@@ -61,22 +61,20 @@ <h3 class="modal-title fs-5" id="room-info">방 정보</h3>
                                 <!--                                    </div>-->
 
                                 <!-- 공유하기 -->
-                                <div class="row mb-3 mt-3">
-                                    <div class="col mx-auto">
-                                        <div class="sns">
-                                            <a href="#n" id="btnKakao"
+                                <div class="hr-sect mt-4">친구에게 공유하기</div>
+                                <div class="mb-3 mt-3">
+                                        <div class="sns center">
+                                            <button id="btnKakao"
                                                onclick="fn_sendFB('kakaotalk');return false;"
-                                               class="kakaotalk text-link" target="_self"
-                                               title="카카오톡 새창열림"><span class="skip">카카오톡</span></a>
-                                            <a href="#n" onclick="handleCopyClipBoard();return false;"
-                                               class="clipboard text-link" target="_self"
-                                               title="클립보드 복사"><span class="skip">복사하기</span></a>
+                                               class="kakaotalk text-link sns-btn" target="_self"
+                                               title="카카오톡 새창열림"><span class="skip">카카오톡<br>공유하기</span></button>
+                                            <button onclick="handleCopyClipBoard();return false;"
+                                               class="clipboard text-link sns-btn ml-2" target="_self"
+                                               title="클립보드 복사"><span class="skip">URL<br>복사하기</span></button>
                                             <!--<img id="preview"  alt="Preview" class="rounded-circle shadow" width="200px" height="200px">-->
                                         </div>
-                                    </div>
                                 </div>
-
-                                <div class="row mt-4 center">
+                                <div class="mt-4 center">
                                     <div>
                                         <button class="btn modal-btn-secondary" onclick="roomInfoClose()">닫기
                                         </button>