Modify modal button

> 버튼 모양/크기 변경
> 버튼 안에 로고 삽입

src/css/modal.css

@@ -10,8 +10,7 @@
   bottom: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-}
+  align-items: center; }
 
 #modal {
   width: 400px;
@@ -24,15 +23,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 20px;
-}
-#modal h2 {
-  margin-top: 56px;
-  user-select: none;
-  font-size: 32px;
-  font-weight: 700;
-  letter-spacing: 2px;
-}
+  gap: 20px; }
+  #modal h2 {
+    margin-top: 56px;
+    user-select: none;
+    font-size: 32px;
+    font-weight: 700;
+    letter-spacing: 2px; }
 
 .kakao-image {
   position: absolute;
@@ -42,8 +39,7 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  background-image: url(https://i.namu.wiki/i/IqmOmj71Vd9La5zunuoLdkOXMuy8BHcg2Hk5KN-oGgJp1gvlCytffdNpbUwd3P4WfORoqi7cad4f71d6uOgEug.svg);
-}
+  background-image: url(https://i.namu.wiki/i/IqmOmj71Vd9La5zunuoLdkOXMuy8BHcg2Hk5KN-oGgJp1gvlCytffdNpbUwd3P4WfORoqi7cad4f71d6uOgEug.svg); }
 
 .modal-under-box {
   width: 100%;
@@ -57,11 +53,9 @@
   justify-content: center;
   align-items: center;
   font-size: 20px;
-  font-weight: bold;
-}
-.modal-under-box:hover {
-  text-decoration: underline;
-}
+  font-weight: bold; }
+  .modal-under-box:hover {
+    text-decoration: underline; }
 
 #close {
   width: 20px;
@@ -70,34 +64,28 @@
   top: 20px;
   right: 20px;
   cursor: pointer;
-  transition: transform 0.3s ease-in-out;
-}
-#close:hover {
-  transform: scale(1.5);
-}
-#close:hover span {
-  background-color: #f00;
-}
-#close span {
-  width: 20px;
-  height: 2px;
-  background: #000;
-  border-radius: 20px;
-  position: absolute;
-  top: 40%;
-  transition: transform 0.3s ease-in-out;
-}
-#close span:first-child {
-  transform: rotate(45deg);
-}
-#close span:last-child {
-  transform: rotate(-45deg);
-}
+  transition: transform 0.3s ease-in-out; }
+  #close:hover {
+    transform: scale(1.5); }
+    #close:hover span {
+      background-color: #f00; }
+  #close span {
+    width: 20px;
+    height: 2px;
+    background: #000;
+    border-radius: 20px;
+    position: absolute;
+    top: 40%;
+    transition: transform 0.3s ease-in-out; }
+    #close span:first-child {
+      transform: rotate(45deg); }
+    #close span:last-child {
+      transform: rotate(-45deg); }
 
 #open {
   background: #fae105;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   position: fixed;
   bottom: 60px;
   right: 60px;
@@ -110,4 +98,14 @@
   z-index: 9999;
   font-weight: 700;
   letter-spacing: -1px;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 8px; }
+  #open .kakao-link-icon {
+    display: block;
+    width: 70px;
+    height: 30px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url(https://i.namu.wiki/i/IqmOmj71Vd9La5zunuoLdkOXMuy8BHcg2Hk5KN-oGgJp1gvlCytffdNpbUwd3P4WfORoqi7cad4f71d6uOgEug.svg); }

src/scss/modal.scss

@@ -96,8 +96,8 @@
 
 #open {
   background: #fae105;
-  width: 60px;
-  height: 60px;
+  width: 100px;
+  height: 100px;
   position: fixed;
   bottom: 60px;
   right: 60px;
@@ -106,8 +106,20 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 12px;
+  font-size: 14px;
   z-index: 9999;
   font-weight: 700;
   letter-spacing: -1px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .kakao-link-icon {
+    display: block;
+    width: 70px;
+    height: 30px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url(https://i.namu.wiki/i/IqmOmj71Vd9La5zunuoLdkOXMuy8BHcg2Hk5KN-oGgJp1gvlCytffdNpbUwd3P4WfORoqi7cad4f71d6uOgEug.svg);
+  }
 }