feat: Add Spinner component and update styles

- Introduced a new Spinner component for loading indicators.
- Removed unused btn_arr_up.svg asset and related styles.
- Updated radio button styles for improved UI consistency.
- Added new PDF view styles for enhanced document presentation.
- Included spinner styles for better loading visuals.

public/assets/images/common/btn_arr_up.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 5L5 1L9 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg> 

src/components/ui/common/Spinner.tsx

@@ -0,0 +1,7 @@
+export default function Spinner() {
+  return (
+    <div className="spinner-wrap">
+      <span className="loader"></span>
+    </div>
+  )
+}

src/styles/base/_button.scss

@@ -49,14 +49,6 @@
     background-size: cover;
     margin-left: 12px;
   }
-  .btn-arr-up{
-    display: block;
-    width: 10px;
-    height: 6px;
-    background: url(/assets/images/common/btn_arr_up.svg)no-repeat center;
-    background-size: cover;
-    margin-left: 12px;
-  }
   .btn-edit{
     display: block;
     width: 10px;

src/styles/base/_check-radio.scss

@@ -201,7 +201,7 @@
     }
   }
   input:checked + .slider {
-    background-color: #A8B6C7;
+    background-color: #0081b5;
     &:after {
         content: '';
         left: 10px;

src/styles/components/_index.scss

@@ -1,4 +1,6 @@
 @forward 'main';
 @forward 'login';
 @forward 'pop-contents';
-@forward 'sub';
+@forward 'sub';
+@forward 'pdfview';
+@forward 'spinner';

src/styles/components/_pdfview.scss

@@ -0,0 +1,57 @@
+@use "../abstracts" as *;
+
+.pdf-contents{
+  padding: 0 20px;
+  border-top: 1px solid #ececec;
+}
+.pdf-cont-head{
+  align-items: center;
+  padding: 24px 0 15px;
+  border-bottom: 2px solid $black-1010;
+  .pdf-cont-head-tit{
+    @include defaultFont($font-s-16, $font-w-600, $black-1010);
+    margin-bottom: 10px;
+  }
+}
+.pdf-cont-head-data-wrap{
+  @include flex(20px);
+  align-items: center;
+  .pdf-cont-head-data-tit{
+    @include defaultFont($font-s-13, $font-w-500, $black-1010);
+  }
+  .pdf-cont-head-data{
+    @include defaultFont($font-s-13, $font-w-400, #FF5656);
+  }
+}
+.pdf-cont-body{
+  padding: 24px 0 0;
+}
+.pdf-data-tit{
+  @include defaultFont($font-s-13, $font-w-500, $black-1010);
+  margin-bottom: 5px;
+}
+.pdf-table{
+  margin-bottom: 24px;
+  table{
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    th{
+      padding: 9.5px;
+      @include defaultFont($font-s-11, $font-w-500, $black-1010);
+      border: 1px solid #2E3A59;
+      background-color: #F5F6FA;
+    }
+    td{
+      padding: 9.5px;
+      @include defaultFont($font-s-11, $font-w-400, #FF5656);
+      border: 1px solid #2E3A59;
+    }
+  }
+}
+.pdf-textarea-data{
+  padding: 10px;
+  @include defaultFont($font-s-11, $font-w-400, #FF5656);
+  border: 1px solid $black-1010;
+  min-height: 150px;
+}

src/styles/components/_pop-contents.scss

@@ -103,16 +103,12 @@
   @include defaultFont($font-s-13, $font-w-400, $font-c);
 }
 .pop-data-table-footer{
-  @include flex(0px);
   .pop-data-table-footer-unit{
-    flex: 1;
     padding: 10px;
     @include defaultFont($font-s-13, $font-w-500, $font-c);
-    border-right: 1px solid #2E3A59;
+    border-bottom: 1px solid #2E3A59;
   }
   .pop-data-table-footer-data{
-    flex: none;
-    width: 104px;
     padding: 10px;
     @include defaultFont($font-s-13, $font-w-400, $font-c);
   }

src/styles/components/_spinner.scss

@@ -0,0 +1,37 @@
+.spinner-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #101010, $alpha: 0.5);
+    z-index: 2000000;
+}
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 32px 0 #fff, -32px 0 #fff;
+  position: relative;
+  animation: flash 0.5s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
+  }
+  50% {
+    background-color: #FFF;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
+  }
+  100% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
+  }
+}
+