디자인 변경

public/images/avatars/svg/person-1.svg

@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#89B7FF" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/></svg>
+<svg fill="#014099" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 27.9999 35.9922 C 20.9452 35.9922 15.5077 38.5 13.1405 41.3125 C 9.9999 37.7968 8.1014 33.1328 8.1014 28 C 8.1014 16.9609 16.9140 8.0781 27.9765 8.0781 C 39.0155 8.0781 47.8983 16.9609 47.9219 28 C 47.9219 33.1563 46.0234 37.8203 42.8593 41.3359 C 40.4921 38.5234 35.0546 35.9922 27.9999 35.9922 Z M 27.9999 32.0078 C 32.4999 32.0547 36.0390 28.2109 36.0390 23.1719 C 36.0390 18.4375 32.4765 14.5 27.9999 14.5 C 23.4999 14.5 19.9140 18.4375 19.9609 23.1719 C 19.9843 28.2109 23.4765 31.9609 27.9999 32.0078 Z"/></svg>

public/images/avatars/svg/person-2.svg

@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#89B7FF" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 27.9999 35.9922 C 20.9452 35.9922 15.5077 38.5 13.1405 41.3125 C 9.9999 37.7968 8.1014 33.1328 8.1014 28 C 8.1014 16.9609 16.9140 8.0781 27.9765 8.0781 C 39.0155 8.0781 47.8983 16.9609 47.9219 28 C 47.9219 33.1563 46.0234 37.8203 42.8593 41.3359 C 40.4921 38.5234 35.0546 35.9922 27.9999 35.9922 Z M 27.9999 32.0078 C 32.4999 32.0547 36.0390 28.2109 36.0390 23.1719 C 36.0390 18.4375 32.4765 14.5 27.9999 14.5 C 23.4999 14.5 19.9140 18.4375 19.9609 23.1719 C 19.9843 28.2109 23.4765 31.9609 27.9999 32.0078 Z"/></svg>
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 27.9999 35.9922 C 20.9452 35.9922 15.5077 38.5 13.1405 41.3125 C 9.9999 37.7968 8.1014 33.1328 8.1014 28 C 8.1014 16.9609 16.9140 8.0781 27.9765 8.0781 C 39.0155 8.0781 47.8983 16.9609 47.9219 28 C 47.9219 33.1563 46.0234 37.8203 42.8593 41.3359 C 40.4921 38.5234 35.0546 35.9922 27.9999 35.9922 Z M 27.9999 32.0078 C 32.4999 32.0547 36.0390 28.2109 36.0390 23.1719 C 36.0390 18.4375 32.4765 14.5 27.9999 14.5 C 23.4999 14.5 19.9140 18.4375 19.9609 23.1719 C 19.9843 28.2109 23.4765 31.9609 27.9999 32.0078 Z"/></svg>

src/components/base/VAvatar.vue

@@ -147,11 +147,11 @@ const { onceError } = useImageError()
   }
 
   .avatar {
-    width: 40px;
+    width: 35px;
-    min-width: 40px;
+    min-width: 30px;
-    height: 40px;
+    height: 35px;
     object-fit: cover;
-    border: 2px solid var(--white);
+    //border: 2px solid var(--white);
 
     &.is-squared {
       border-radius: 10px !important;

src/components/layouts/navbar/Navbar.vue

@@ -18,8 +18,8 @@ const isScrolling = computed(() => {
       theme === 'colored' && 'is-colored',
     ]"
   >
-    <div class="navbar-navbar-inner">
+    <div class="navbar-navbar-inner" style="padding:0 !important;">
-      <div class="left">
+      <div class="left" style="padding-left: 20px;">
         <slot name="title" />
       </div>
       <div class="center">
@@ -365,7 +365,9 @@ const isScrolling = computed(() => {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      width: 25%;
+      width: 15%;
+      padding-right: 33px;
+      background-color: var(--primary);
 
       .icon-link {
         display: flex;

src/components/layouts/navbar/NavbarItem.vue

@@ -70,7 +70,7 @@ const { activeSubnavId, toggleSubnav } = useNavbarLayoutContext()
   .router-link-active {
     //border-color: var(--primary) !important;
     //background-color: var(--primary) !important;
-    border-bottom: 3px solid var(--primary) !important;
+    border-bottom: 3px solid var(--primary-active) !important;
     //.iconify {
     //  color: white !important;
     //}

src/components/pages/contract/ContractSave.vue

@@ -156,15 +156,14 @@ watch(pbAtts.value, (newValue) => {
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
-                <VControl>
                 <div
                     v-for="f in props.prcs.prcsAtts"
                     :key="f.logiFnm"
                     class="content estimate-file-wrapper"
                 >
-<!--                    <div>-->
+                  <!--                    <div>-->
-<!--                      <i class="fa fa-file-pdf estimate-file-img" style="font-size:40px;" />-->
+                  <!--                      <i class="fa fa-file-pdf estimate-file-img" style="font-size:40px;" />-->
-<!--                    </div>-->
+                  <!--                    </div>-->
                   <div class="estimate-file-name">
                     {{ f.logiFnm }} ({{ Math.ceil(f.size / 1024) }}kb)
                   </div>
@@ -172,15 +171,9 @@ watch(pbAtts.value, (newValue) => {
                     <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>
-        </div>
-      </div>
-      <!--Fieldset-->
-      <div class="form-fieldset">
-        <div class="form-outer">
           <div class="fieldset-heading">
             <h4>상세 규격</h4>
           </div>
@@ -200,15 +193,12 @@ watch(pbAtts.value, (newValue) => {
                     <span>파일업로드</span>
                   </VButton>
                 </VLabel>
-                <VControl>
+                <div v-if="pbAtts.length == 0" style="width:100%; height:10px;"></div>
                 <div
                     v-for="(f, i) in pbAtts"
                     :key="f.logiFnm"
                     class="content estimate-file-wrapper"
                 >
-<!--                    <div>-->
-<!--                      <i class="fa fa-file-pdf estimate-file-img" style="font-size:40px;" />-->
-<!--                    </div>-->
                   <div class="estimate-file-name">
                     {{ f.logiFnm }} ({{ Math.ceil(f.size / 1024) }}kb)
                   </div>
@@ -216,18 +206,22 @@ watch(pbAtts.value, (newValue) => {
                     <i class="fa fa-trash estimate-file-delete" @click="onFilDelete(i)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
             <div class="column is-12">
               <VField>
-                <VLabel>
-                  규격
-                </VLabel>
-                <VControl>
                 <div class="datatable-wrapper">
-                    <div class="table-container">
+                  <div class="table-container dtl-spec-table">
                     <table class="table datatable-table is-fullwidth">
+                      <colgroup>
+                        <col width="50px"/>
+                        <col/>
+                        <col/>
+                        <col width="50px"/>
+                        <col width="50px"/>
+                        <col width="120px"/>
+                        <col width="100px"/>
+                      </colgroup>
                       <thead>
                         <th>순번</th>
                         <th>품명</th>
@@ -237,9 +231,9 @@ watch(pbAtts.value, (newValue) => {
                         <th>단가</th>
                         <th>금액</th>
                       </thead>
-                        <tbody v-for="(dtl, index) in props.prcs.dtlSpecs" :key="dtl.dtlSpNo">
+                      <tbody>
-                          <tr>
+                        <tr  v-for="(dtl, index) in props.prcs.dtlSpecs" :key="dtl.dtlSpNo">
-                            <td>{{ index + 1 }}</td>
+                          <td class="text-center">{{ index + 1 }}</td>
                           <td>{{ dtl.itemNm }}</td>
                           <td>{{ dtl.spec }}</td>
                           <td>{{ dtl.qty }}</td>
@@ -258,7 +252,6 @@ watch(pbAtts.value, (newValue) => {
                     </table>
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>

src/components/pages/contract/ContractView.vue

@@ -197,7 +197,6 @@ watch(pbAtts.value, (newValue) => {
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
-                <VControl>
                 <div
                   v-for="f in props.prcs.prcsAtts"
                   :key="f.logiFnm"
@@ -213,25 +212,15 @@ watch(pbAtts.value, (newValue) => {
                     <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>
-        </div>
-      </div>
-      <!--Fieldset-->
-      <div class="form-fieldset">
-        <div class="form-outer">
           <div class="fieldset-heading">
             <h4>상세 규격</h4>
           </div>
           <div class="columns is-multiline">
             <div class="column is-12">
               <VField>
-                <VLabel>
-                  규격
-                </VLabel>
-                <VControl>
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
@@ -258,7 +247,6 @@ watch(pbAtts.value, (newValue) => {
                     </table>
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>

src/components/pages/dashboards/Dashboard.vue

@@ -21,7 +21,7 @@ onMounted(() => {
       <div class="column is-12">
         <div class="dashboard-header">
           <VAvatar
-            picture="/images/avatars/svg/person-2.svg"
+            picture="/images/avatars/svg/person-1.svg"
             size="xl"
           />
           <div class="user-meta is-dark-bordered-12">

src/components/pages/estimate/EstimateUpdate.vue

@@ -224,7 +224,6 @@ watch(pbAtts.value, (newValue) => {
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
-                <VControl>
                 <div
                   v-for="f in props.estimate.prcsAtts"
                   :key="f.logiFnm"
@@ -237,15 +236,9 @@ watch(pbAtts.value, (newValue) => {
                     <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>
-        </div>
-      </div>
-      <!--Fieldset-->
-      <div class="form-fieldset">
-        <div class="form-outer">
           <div class="fieldset-heading">
             <h4>상세 규격</h4>
           </div>
@@ -264,7 +257,6 @@ watch(pbAtts.value, (newValue) => {
                     <span>파일업로드</span>
                   </VButton>
                 </VLabel>
-                <VControl>
                 <div
                   v-for="(f, i) in pbAtts"
                   :key="f.logiFnm"
@@ -278,15 +270,10 @@ watch(pbAtts.value, (newValue) => {
                     <i class="fa fa-trash estimate-file-delete" @click="onFilDelete(f.bizNo, i, f.fileOrd)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
             <div class="column is-12">
               <VField>
-                <VLabel>
-                  규격
-                </VLabel>
-                <VControl>
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
@@ -320,7 +307,6 @@ watch(pbAtts.value, (newValue) => {
                     </table>
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>

src/components/pages/estimate/EstimateView.vue

@@ -179,7 +179,6 @@ const totPrc = computed(() => {
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
-                <VControl>
                 <div
                   v-for="f in props.estimate.prcsAtts"
                   :key="f.logiFnm"
@@ -192,15 +191,9 @@ const totPrc = computed(() => {
                     <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>
-        </div>
-      </div>
-      <!--Fieldset-->
-      <div class="form-fieldset">
-        <div class="form-outer">
           <div class="fieldset-heading">
             <h4>상세 규격</h4>
           </div>
@@ -210,7 +203,6 @@ const totPrc = computed(() => {
                 <VLabel>
                   견적서
                 </VLabel>
-                <VControl>
                 <div
                   v-for="(f, i) in pbAtts"
                   :key="f.logiFnm"
@@ -223,15 +215,10 @@ const totPrc = computed(() => {
                     <i class="fa fa-download estimate-file-download" @click="onPbAttDownload(f.prcsNo, f.bizNo, f.fileOrd, f.logiFnm)" />
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
             <div class="column is-12">
               <VField>
-                <VLabel>
-                  규격
-                </VLabel>
-                <VControl>
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
@@ -258,7 +245,6 @@ const totPrc = computed(() => {
                     </table>
                   </div>
                 </div>
-                </VControl>
               </VField>
             </div>
           </div>

src/components/partials/layout/toolbar/ToolbarUserProfile.vue

@@ -109,7 +109,7 @@ function onRePassword() {
             <VAvatar picture="/images/avatars/svg/person-2.svg" />
           </a>
         </div>
-        <div class="company-nm">{{ biz.compNm }}</div>
+        <div class="company-nm" style="color:var(--modal-text-reverse)">{{ biz.compNm }}</div>
       </div>
     </template>
 
@@ -117,7 +117,7 @@ function onRePassword() {
       <div class="dropdown-head">
         <VAvatar
           size="large"
-          picture="/images/avatars/svg/person-2.svg"
+          picture="/images/avatars/svg/person-1.svg"
         />
 
         <div class="meta">
@@ -917,8 +917,8 @@ function onRePassword() {
 }
 
 .company-nm {
-  padding-left: 20px;
+  padding-left: 30px;
-  line-height:42px;
+  line-height: 35px;
   font-weight: 600;
   color: var(--modal-text)
 }

src/scss/components/_custom-contract.scss

@@ -45,8 +45,10 @@ input {
 
 .datatable-wrapper {
   margin-top: 10px !important;
+  padding: 0 10px 10px 10px;
 }
 
+
 .datatable-table {
   th {
     padding: 10px !important;
@@ -66,6 +68,17 @@ input {
   }
 }
 
+.dtl-spec-table {
+  thead{
+    background-color: var(--light-grey) !important;
+    th {
+      color: #000;
+      border: 1px solid #ccc;
+    }
+  }
+
+}
+
 ul {
   list-style-type: none;
 }
@@ -127,16 +140,15 @@ a.mouse-pointer {
   }
 }
 
+
 .estimate-file-wrapper {
   display:flex;
   justify-content: space-between;
-  border:1px solid #ccc;
+  //border:1px solid #ccc;
+  background-color: #ededed;
   border-radius:5px;
-  padding:0px 20px;
+  padding:0 20px;
-  margin-bottom:10px;
+  margin: 10px;
-  &:first-child {
-    margin-top: 5px;
-  }
   .estimate-file-download, .estimate-file-delete {
     font-size: 17px;
     line-height: 40px;
@@ -150,6 +162,7 @@ a.mouse-pointer {
   .estimate-file-name {
     width: 400px;
     line-height: 40px;
+    color: var(--modal-text-reverse)
   }
   .estimate-file-size {
     width: 150px;

src/scss/css-variables/_colors.scss

@@ -15,6 +15,8 @@
   --primary--dark-color: color-mix(in oklab, var(--primary), black 5%);
   --primary--light-color: color-mix(in oklab, var(--primary), white 90%);
 
+  --primary-active: #dc5638;
+
   --link: #485fc7;
   --link--color-invert: color-mix(in oklab, var(--link), white 85%);
   --link--dark-color: color-mix(in oklab, var(--link), black 5%);

src/scss/css-variables/_fonts.scss

@@ -3,6 +3,6 @@
 :root {
   --font: 'Noto Sans KR', sans-serif;
   --font-alt: 'Noto Sans KR', sans-serif;
-  --font-monospace: 'Fira Code Variable', monospace;
+  --font-monospace: 'Noto Sans KR', monospace;
   --font-size: 14px;
 }

src/scss/layout/_layout.scss

@@ -15,6 +15,7 @@
 
 body {
   background: var(--background-grey);
+  font-family: var(--font);
 
   &.opened {
     background: var(--white);
@@ -231,10 +232,10 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 34px;
+    height: 37px;
-    width: 34px;
+    width: 37px;
     border-radius: var(--radius-rounded);
-    margin: 0 4px;
+    margin: 0 27px;
     transition: all 0.3s; // transition-all test
 
     &:hover {