HANYANG_REACT/www/ksvc/inc/css/scss/component/_boardBtn.scss

.board-container{
  position: absolute;
  bottom: 0px;
  right: 0;
  
  display: flex;

  flex-direction: column;
  justify-content: flex-end;

  height: 0px;
  width: 0px;
  
  z-index: 999;



  .board{
    position: absolute;
    right: 10px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    margin-bottom: 20px;
    height: 0px;
    width: 0px;
    
    
    background: white;
    border: 2px solid $blue-005;
    border-radius: 10px;
    
    transition: all 0.5s ease; /* CSS Transition for smooth animation */
    
    .board-contents{
      // opacity: 0;
      display: none;
      text-wrap: nowrap;
      height: 100%;



      .ql-toolbar.ql-snow{
        border: none;
        border-bottom : 2px solid $blue-005;

        .expand-tool{
          display: none;
        }
        // width: 100%;
      }

      #editor{
        height: 80%;
        width: 100%;
        border: none;

        *{
          font-size: 15px;
  
        }
        .ql-size-huge{
          font-size: 2em;
        }
        .ql-size-large{
          font-size: 1.3em;
        }
        .ql-size-small{
          font-size: 0.8em;
        }

      }

      .board-submit{
        height: 7%;
        width: 30%;
        border-radius: 50px;

      }
    }
    
    &.on{
      height: 70vh;
      width: 380px;
      
      .board-contents{
        // opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    &.expand{
      width: 800px;
      
      .board-contents{
        .ql-toolbar.ql-snow{

          .expand-tool{
            display: block;
          }
        }
      }
    }
    
    .board-input{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;

      height: 20%;
      padding-top: 20px;
      
      border-top: solid;
      
      box-sizing: border-box;
      
      textarea{
        width: 65%;
        height: fit-content;
      }
      .board-submit{
        width: 50px;
        height: 50px;
      }
    }
  }

  .board-btn{
    position: absolute;
    // display: none;
    width: 100px;
    height: 100px;
    background: white;

    // bottom: 10px;
    // right: 10px;
    bottom: -40px;
    right: -40px;
    border-radius: 50px;
    border: solid 7px $blue-005;
    cursor: pointer;
    padding: 17px 20px;
    box-sizing: border-box;
  
    &:hover{
      animation: moveAni 0.5s forwards; /* hover 시 애니메이션 적용 */

    }

    i{
      font-size: 28px;
      color: $blue-005;
      &::before{
        rotate: -45deg;
      }
    }
  }
}


@keyframes moveAni {
  from {
    bottom: -40px;
    right: -40px;
  }
  to {
    bottom: -30px;
    right: -30px;
  }
}