디자인 금액 , 추가

package.json

@@ -115,7 +115,6 @@
     "unplugin-vue-router": "0.8.6",
     "uuid": "^11.1.0",
     "v-calendar": "3.0.3",
-    "vee-validate": "4.12.6",
     "vivus": "0.4.6",
     "vue": "3.4.26",
     "vue-accessible-color-picker": "5.0.1",

src/components/layouts/navbar/Navbar.vue

@@ -644,4 +644,12 @@ a {
     background-color:white !important;
   }
 }
+
+.toolbar {
+  a {
+    &:hover {
+      background-color:transparent !important;
+    }
+  }
+}
 </style>

src/components/pages/contract/Contract.vue

@@ -73,6 +73,7 @@ const onEstimateSave = () => {
 }
 
 const setData = (data: iEstimate[]) => {
+  console.log(data)
   estimates.value = data
 }
 const setAttData = (data: iPbAtt[]) => {
@@ -154,5 +155,11 @@ watch(params, (newValue) => {
 </template>
 
 <style lang="scss">
+.text-right {
+  text-align:right !important;
+}
+.text-center {
+  text-align:center !important;
+}
 
 </style>

src/components/pages/contract/ContractSave.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { iPrcs, iDtlSpec, iEstimate, UserData, iPbAtt } from '/@src/utils/types'
+import regex from "/@src/utils/regex.ts";
 
 const props = defineProps<{
   prcs: iPrcs
@@ -67,7 +68,7 @@ const onFilDelete = (fileOrd: number) => {
 const totPrc = computed(() => {
   return estimates.value.map((item: iEstimate) => {
     item.amt = item.unitPrc * item.qty
-    return item.amt
+    return item.amt.toString().replace(regex.currency, ',')
   })
 })
 
@@ -215,10 +216,10 @@ watch(pbAtts.value, (newValue) => {
                     <table class="table datatable-table is-fullwidth">
                       <colgroup>
                         <col width="50px"/>
-                        <col/>
+                        <col width="200px"/>
                         <col/>
                         <col width="50px"/>
-                        <col width="50px"/>
+                        <col width="80px"/>
                         <col width="120px"/>
                         <col width="100px"/>
                       </colgroup>
@@ -236,13 +237,13 @@ watch(pbAtts.value, (newValue) => {
                           <td class="text-center">{{ index + 1 }}</td>
                           <td>{{ dtl.itemNm }}</td>
                           <td>{{ dtl.spec }}</td>
-                          <td>{{ dtl.qty }}</td>
+                          <td class="text-center">{{ dtl.qty }}</td>
-                          <td>{{ dtl.unit }}</td>
+                          <td class="text-center">{{ dtl.unit }}</td>
                           <td>
                             <input
                               v-model="estimates[index].unitPrc"
                               type="number"
-                              class="input custom-text-filter"
+                              class="input custom-text-filter text-right"
                               placeholder="10,000"
                             >
                           </td>

src/components/pages/contract/ContractView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { iPrcs, iDtlSpec, iEstimate, UserData, iPbAtt } from '/@src/utils/types'
+import regex from "/@src/utils/regex.ts";
 
 const props = defineProps<{
   prcs: iPrcs
@@ -67,7 +68,7 @@ const onFilDelete = (fileOrd: number) => {
 const totPrc = computed(() => {
   return estimates.value.map((item: iEstimate) => {
     item.amt = item.unitPrc * item.qty
-    return item.amt
+    return item.amt.toString().replace(regex.currency, ',')
   })
 })
 
@@ -87,47 +88,6 @@ watch(pbAtts.value, (newValue) => {
     class="form-layout"
   >
     <div class="form-body">
-      <!--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="content">-->
-<!--                    <p>{{ user.compNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>사업자번호</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.bizNo }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>대표자명</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.repNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-      <!--Fieldset-->
       <div class="form-fieldset">
         <div class="form-outer">
           <div class="fieldset-heading">
@@ -224,6 +184,15 @@ watch(pbAtts.value, (newValue) => {
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
+                      <colgroup>
+                        <col width="50px"/>
+                        <col width="200px"/>
+                        <col/>
+                        <col width="50px"/>
+                        <col width="80px"/>
+                        <col width="120px"/>
+                        <col width="100px"/>
+                      </colgroup>
                       <thead>
                         <th>순번</th>
                         <th>품명</th>
@@ -235,13 +204,13 @@ watch(pbAtts.value, (newValue) => {
                       </thead>
                       <tbody v-for="(dtl, index) in props.prcs.dtlSpecs" :key="dtl.dtlSpNo">
                         <tr>
-                          <td>{{ index + 1 }}</td>
+                          <td class="text-center">{{ index + 1 }}</td>
                           <td>{{ dtl.itemNm }}</td>
                           <td>{{ dtl.spec }}</td>
-                          <td>{{ dtl.qty }}</td>
+                          <td class="text-center">{{ dtl.qty }}</td>
-                          <td>{{ dtl.unit }}</td>
+                          <td class="text-center">{{ dtl.unit }}</td>
-                          <td>0</td>
+                          <td class="text-right">0</td>
-                          <td>{{ totPrc[index] || 0 }}</td>
+                          <td class="text-right">{{ totPrc[index] || 0 }}</td>
                         </tr>
                       </tbody>
                     </table>

src/components/pages/estimate/Estimate.vue

@@ -49,6 +49,7 @@ function onSearch(data: any) {
 }
 
 const setData = (data: iEstimate[]) => {
+  console.log(data)
   ests.value = data
 }
 
@@ -152,5 +153,11 @@ watch(params, (newValue) => {
 </template>
 
 <style lang="scss">
+.text-right {
+  text-align:right !important;
+}
+.text-center {
+  text-align:center !important;
+}
 
 </style>

src/components/pages/estimate/EstimateList.vue

@@ -193,12 +193,6 @@ watch(changePage, (newParams) => {
 </template>
 
 <style lang="scss">
-.text-right {
-  text-align:right !important;
-}
-.text-center {
-  text-align:center !important;
-}
 
 .is-navbar {
   .datatable-toolbar {

src/components/pages/estimate/EstimateUpdate.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { iDtlSpec, iEstimate, UserData, iPbAtt } from '/@src/utils/types'
+import regex from "/@src/utils/regex.ts";
 
 const props = defineProps<{
   estimate: iEstimate
@@ -93,7 +94,7 @@ const onPbAttDownload = (prcsNo: string, bizNo: string, fileOrd: number, logiFnm
 const totPrc = computed(() => {
   return estimates.value.map((item: iEstimate) => {
     item.amt = item.unitPrc * item.qty
-    return item.amt
+    return item.amt.toString().replace(regex.currency, ',')
   })
 })
 
@@ -113,47 +114,6 @@ watch(pbAtts.value, (newValue) => {
     class="form-layout"
   >
     <div class="form-body">
-      <!--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="content">-->
-<!--                    <p>{{ user.compNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>사업자번호</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.bizNo }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>대표자명</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.repNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-      <!--Fieldset-->
       <div class="form-fieldset">
         <div class="form-outer">
           <div class="fieldset-heading">
@@ -277,6 +237,15 @@ watch(pbAtts.value, (newValue) => {
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
+                      <colgroup>
+                        <col width="50px"/>
+                        <col width="200px"/>
+                        <col/>
+                        <col width="50px"/>
+                        <col width="80px"/>
+                        <col width="120px"/>
+                        <col width="100px"/>
+                      </colgroup>
                       <thead>
                         <th>순번</th>
                         <th>품명</th>
@@ -288,16 +257,16 @@ watch(pbAtts.value, (newValue) => {
                       </thead>
                       <tbody v-for="(dtl, index) in props.estimate.dtlSpecs" :key="dtl.dtlSpNo">
                         <tr>
-                          <td>{{ index + 1 }}</td>
+                          <td class="text-center">{{ index + 1 }}</td>
                           <td>{{ dtl.itemNm }}</td>
                           <td>{{ dtl.spec }}</td>
-                          <td>{{ dtl.qty }}</td>
+                          <td class="text-center">{{ dtl.qty }}</td>
-                          <td>{{ dtl.unit }}</td>
+                          <td class="text-center">{{ dtl.unit }}</td>
                           <td>
                             <input
                               v-model="estimates[index].unitPrc"
                               type="number"
-                              class="input custom-text-filter"
+                              class="input custom-text-filter text-right"
                               placeholder="10,000"
                             >
                           </td>

src/components/pages/estimate/EstimateView.vue

@@ -66,47 +66,6 @@ const totPrc = computed(() => {
     class="form-layout"
   >
     <div class="form-body">
-      <!--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="content">-->
-<!--                    <p>{{ user.compNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>사업자번호</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.bizNo }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>대표자명</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.repNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-      <!--Fieldset-->
       <div class="form-fieldset">
         <div class="form-outer">
           <div class="fieldset-heading">
@@ -222,6 +181,15 @@ const totPrc = computed(() => {
                 <div class="datatable-wrapper">
                   <div class="table-container">
                     <table class="table datatable-table is-fullwidth">
+                      <colgroup>
+                        <col width="50px"/>
+                        <col width="200px"/>
+                        <col/>
+                        <col width="50px"/>
+                        <col width="80px"/>
+                        <col width="120px"/>
+                        <col width="100px"/>
+                      </colgroup>
                       <thead>
                         <th>순번</th>
                         <th>품명</th>
@@ -233,11 +201,11 @@ const totPrc = computed(() => {
                       </thead>
                       <tbody v-for="(dtl, index) in props.estimate.dtlSpecs" :key="dtl.dtlSpNo">
                         <tr>
-                          <td>{{ index + 1 }}</td>
+                          <td class="text-center">{{ index + 1 }}</td>
                           <td>{{ dtl.itemNm }}</td>
                           <td>{{ dtl.spec }}</td>
-                          <td>{{ dtl.qty }}</td>
+                          <td class="text-center">{{ dtl.qty }}</td>
-                          <td>{{ dtl.unit }}</td>
+                          <td class="text-center">{{ dtl.unit }}</td>
                           <td class="text-right">{{ String(estimates[index].unitPrc).replace(regex.currency, ',') }}</td>
                           <td>{{ String(totPrc[index]).replace(regex.currency, ',') || 0 }}</td>
                         </tr>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { UserData, iRePassword } from '/@src/utils/types'
 import regex from '/@src/utils/regex'
+import rules from '/@src/utils/rules'
 const userSession = useUserSession()
 const router = useRouter()
 const notyf = useNotyf()
@@ -34,13 +35,6 @@ const initRePassword = {
 }
 const rePasswordValid = ref(initRePassword)
 
-const rules = {
-  email: {
-    mask: /^\S*@?\S*$/,
-    lazy: false,
-  },
-}
-
 const onEmailComplete = (e) => {
   modifyForm.value.email = e.value
 }

src/pages/auth/login.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import api from '/@src/utils/api.ts'
 import type { UserData } from '/@src/utils/types'
-import regex from '/@src/utils/regex.ts'
+import regex from '/@src/utils/regex'
+import rules from '/@src/utils/rules'
 
 type StepId = 'login' | 'forgot-password'
 const step = ref<StepId>('login')
@@ -24,17 +25,6 @@ const notyf = useNotyf()
 const token = useUserToken()
 const userSession = useUserSession()
 
-const rules = {
-  bizNo: {
-    mask: '000-00-00000',
-    lazy: false,
-  },
-  email: {
-    mask: /^\S*@?\S*$/,
-    lazy: false,
-  },
-}
-
 const onComplete = (e: any) => {
   loginForm.value.bizNo = e.value
 }

src/pages/auth/signup.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import regex from '/@src/utils/regex'
+import rules from '/@src/utils/rules'
 const router = useRouter()
 const notyf = useNotyf()
 const step = ref(0)
@@ -83,17 +84,6 @@ const handleSignup = async () => {
   }
 }
 
-const rules = {
-  bizNo: {
-    mask: '000-00-00000',
-    lazy: false,
-  },
-  email: {
-    mask: /^\S*@?\S*$/,
-    lazy: false,
-  },
-}
-
 const onBizNoComplete = (e: any) => {
   registerForm.value.bizNo = e.value
 }

src/scss/components/_custom-contract.scss

@@ -59,6 +59,7 @@ input {
     border: 1px solid var(--fade-grey);
 
     td {
+      word-break: break-word;
       padding: 5px 10px !important;
       border: 1px solid #ededed;
       input {
@@ -162,7 +163,7 @@ a.mouse-pointer {
   .estimate-file-name {
     width: 400px;
     line-height: 40px;
-    color: var(--modal-text-reverse)
+    color: var(--modal-text)
   }
   .estimate-file-size {
     width: 150px;

src/utils/rules.ts

@@ -0,0 +1,22 @@
+/**
+ * Resolve after `time` has been spend.
+ *
+ * @param time Time in milliseconds to wait
+ */
+
+const rules = {
+  bizNo: {
+    mask: '000-00-00000',
+    lazy: false,
+  },
+  email: {
+    mask: /^\S*@?\S*$/,
+    lazy: false,
+  },
+  currency: {
+    mask: /(?=.*\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|0)?(\.\d{1,2})?$/,
+    lazy: false,
+  },
+}
+
+export default rules

types/imports.d.ts

@@ -105,6 +105,7 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const rules: typeof import('../src/utils/rules')['default']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']

vite.config.ts

@@ -296,8 +296,6 @@ export default defineConfig(({ isSsrBuild }) => ({
   // Predefine dependencies in order to prevent reloading them in the browser during development.
   optimizeDeps: {
     include: [
-      '@ckeditor/ckeditor5-vue',
-      '@ckeditor/ckeditor5-build-classic',
       '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.min.js',
       '@shikijs/rehype',
       '@vee-validate/zod',