Commit @ddc473858400840a3720371795a3da43ffdda6a9

류윤주 03-28

250328 류윤주 수정

@ddc473858400840a3720371795a3da43ffdda6a9

ddc4738

client/resources/img/page/background.jpg (Binary) (added)

+++ client/resources/img/page/background.jpg

Binary file is not shown

b3a1d45

client/resources/img/test_img.jpg (Binary) (deleted)

--- client/resources/img/test_img.jpg

Binary file is not shown

b3a1d45

ddc4738

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss


 .content-wrap {
     width: 100%;
-    height: calc(100% - 48px);
+    height: 100%;
     padding: 3rem;
 
 

                 }
             }
 
+
             .form-select {
                 width: 200px;
             }

             }
 
             .form-group {
+                width: calc(100% - 180px);
+
                 .form-control {
                     max-width: 100%;
                 }

                 }
             }
         }
+
         >div:nth-child(1),
         div:nth-child(2) {
             padding-top: 0;
         }
+
         >div:last-child {
             grid-column: 1/3;
             padding-bottom: 0;

 
         // 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
         &:has(> div:nth-child(even):last-child) {
-            > div{
+            >div {
                 padding-left: 3rem;
             }
-            > div:last-child {
+
+            >div:last-child {
                 grid-column: unset;
             }
-            > div:nth-last-child(2) {
+
+            >div:nth-last-child(2) {
                 border-bottom: 0;
             }
         }
 
-        .check-area{
+        .check-area {
             @include flex-layout(flex, center);
             gap: 3rem;
         }
 
+
+    }
+
+    
+    .title-zone {
+        @include flex-layout(flex, center, space-between);
+        margin-bottom: 3rem;
+
+        .section-title {
+            margin-bottom: 0;
+        }
     }
 
     >.content-zone {

                 overflow-y: auto;
 
                 .top-zone {
-
                     >div {
                         margin-bottom: 5rem;
 

                     width: calc(100% - 325px - 5rem);
                     height: 100%;
 
-                    .form-content{
+                    .form-content {
                         padding: 0;
-                        >div{
+
+                        >div {
                             padding: 1rem;
                         }
+
                         >div:nth-child(2),
                         div:nth-child(4),
-                        div:nth-child(6){
+                        div:nth-child(6) {
                             padding-left: 3rem;
                         }
-                        >div:last-child{
+
+                        >div:last-child {
                             align-items: flex-start;
                         }
-                        
+
                     }
                 }
 

     }
 
 
+}
+
+.content-wrap.main {
+    .content-zone {
+        height: 100%;
+    }
 }

b3a1d45

ddc4738

client/resources/scss/admin/layout.scss

--- client/resources/scss/admin/layout.scss

+++ client/resources/scss/admin/layout.scss


 .admin-wrap {
     background-color: #eaeff4;
     display: grid;
-    grid-template-columns: clamp(260px, 16vw, 450px) minmax(1020px, 1fr);
-    grid-template-rows: auto minmax(860px, auto);
+    grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
+    grid-template-rows: auto minmax(864px, auto);
     grid-template-areas:
         "sidebar header "
         "sidebar main ";
     height: 100%;
-    font-size: 1.8rem;
+    // font-size: 1.8rem;
 
 
     .admin-header {

         overflow-y: auto;
         
         .logo{
-            padding: 5rem 3rem;
+            padding: 1rem;
+            font-size: var(--tk-fz-title-lg);
+            font-weight: 700;
             text-align: center;
         }
 
         .info-wrap {
-            padding: 0 3rem;
+            background-color: var(--tk-gray-10);
 
             .info {
-                padding: 1.5rem;
-                background-color: var(--tk-gray-80);
-                color: #ffffff;
-                text-align: center;
-                border-radius: var(--tk-rd-12);
-
-                >p {
-                    margin-bottom: 1rem;
+                @include flex-layout(flex, center, space-between);
+                .info-name{
+                    padding: .8rem
                 }
-
-                button {
-                    padding: 0 1rem;
-                    font-size: 1.4rem;
-                }
-
-                >button:nth-of-type(1) {
-                    border-right: 1px solid var(--tk-white);
+                ul.info-btn{
+                    @include flex-layout(flex, center);
+                    li{
+                        @include flex-layout(flex, center, center);
+                        background-color: var(--tk-gray-20);
+                        padding: 1rem;
+                        border-left: 1px solid var(--tk-gray-30);
+                    }
                 }
             }
         }
-
-        ul {
-            padding: 5rem 0;
-
-            li {
-                cursor: pointer;
-                padding: 1rem 2rem;
-            }
-
-            li.sub-active {
-                background-color: var(--tk-primary);
-                color: var(--tk-white);
+        .menu-zone{
+            p{
+                font-size: var(--tk-fz-title-sm);
                 font-weight: 700;
+                text-align: center;
+                border-bottom: 3px solid var(--tk-gray-70);
+                padding: 1rem;
+            }
+            ul.side-menu {
+                li {
+                    cursor: pointer;
+                    padding: 1rem 2rem;
+                }
+    
+                li.sub-active {
+                    background-color: var(--tk-primary);
+                    color: var(--tk-white);
+                    font-weight: 700;
+                }
             }
         }
+        
 
     }
 

ddc4738

client/resources/scss/admin/login.scss (added)

+++ client/resources/scss/admin/login.scss

...	...	@@ -0,0 +1,80 @@
	1	+// 나중에 사용자 관리자 로그인 분리
	2	+
	3	+.user-wrap{
	4	+ width: 100%;
	5	+ height: 100%;
	6	+
	7	+ .main-wrap{
	8	+ width: 100%;
	9	+ height: 100%;
	10	+
	11	+ .login-page{
	12	+ width: 100%;
	13	+ height: 100%;
	14	+
	15	+ >div{
	16	+ width: 100%;
	17	+ height: 100%;
	18	+ @include flex-layout(flex, stretch,);
	19	+
	20	+ .background-img{
	21	+ width: 50%;
	22	+ height: 100%;
	23	+ background-image: url(#{$url}/page/background.jpg);
	24	+ background-position: bottom right 10%;
	25	+ background-size: auto 100%;
	26	+ position: relative;
	27	+
	28	+ p{
	29	+ font-size: var(--tk-fz-heading-md);
	30	+ color: #0b4dd1;
	31	+ font-weight: 700;
	32	+ position: absolute;
	33	+ top: 5rem;
	34	+ left: 5rem;
	35	+ // animation: bounce 1.5s infinite ease-in-out;
	36	+ }
	37	+ }
	38	+
	39	+ .login-wrap{
	40	+ width: 50%;
	41	+ height: 100%;
	42	+ @include flex-layout(flex, center, center, column);
	43	+
	44	+ .login{
	45	+ width: 500px;
	46	+
	47	+ .login-title{
	48	+ font-size: var(--tk-fz-title-xxlg);
	49	+ font-weight: 700;
	50	+ text-align: center;
	51	+ margin-bottom: 5rem;
	52	+ }
	53	+
	54	+ .form-group{
	55	+ margin-bottom: 2rem;
	56	+
	57	+ label{
	58	+ font-weight: 700;
	59	+ }
	60	+ }
	61	+
	62	+ button{
	63	+ width: 100%;
	64	+ }
	65	+ }
	66	+ }
	67	+ }
	68	+ }
	69	+ }
	70	+}
	71	+
	72	+
	73	+// @keyframes bounce {
	74	+// 0%, 100% {
	75	+// transform: translateY(0);
	76	+// }
	77	+// 50% {
	78	+// transform: translateY(-10px);
	79	+// }
	80	+// }

b3a1d45

ddc4738

client/resources/scss/common/base/_reset.scss

--- client/resources/scss/common/base/_reset.scss

+++ client/resources/scss/common/base/_reset.scss


 	font-size: $font-size-root;
 }
 body {
-	font-size: var(--#{$prefix}fz-body-md);
+	font-size: var(--#{$prefix}fz-body-sm);
 	overflow-x: hidden;
 }
 

b3a1d45

ddc4738

client/resources/scss/common/component/_breadcrumbs.scss

--- client/resources/scss/common/component/_breadcrumbs.scss

+++ client/resources/scss/common/component/_breadcrumbs.scss

...	...	@@ -1,4 +1,0 @@
1		-.navigation-wrap{
2		- padding: 1rem;
3		- border-bottom: 1px solid var(--tk-gray-10);
4		-} (파일 끝에 줄바꿈 문자 없음)

b3a1d45

ddc4738

client/resources/scss/common/component/_buttons.scss

--- client/resources/scss/common/component/_buttons.scss

+++ client/resources/scss/common/component/_buttons.scss


   align-items: center;
   justify-content: center;
   gap: 0.4rem;
-  min-width: 120px;
+  min-width: 100px;
   width: auto;
   height: var(--#{$prefix}btn-h-#{$size});
   padding: 0 var(--#{$prefix}btn-px-#{$size});

   &.ico-help {
     background-image: url(#{$url}/component/common/ico_help_24.svg);
   }
+  &.ico-logout {
+    background-image: url(#{$url}/component/common/ico_logout_16.svg);
+  }
+  &.ico-go {
+    background-image: url(#{$url}/component/common/ico_go_20.svg);
+  }
+  &.ico-reset {
+    background-image: url(#{$url}/component/common/ico_refresh_16.svg);
+  }
   &.ico-page-prev {
     border-radius: 10rem;
     border: 0.1rem solid var(--#{$prefix}gray-40);

b3a1d45

ddc4738

client/resources/scss/common/component/_modal.scss

--- client/resources/scss/common/component/_modal.scss

+++ client/resources/scss/common/component/_modal.scss


 		position: relative;
 		z-index: 1020;
 		width: 84.6rem;
-		height: calc(100% - $m * 2);
-		min-height: calc(100% - $m * 2);
+		height: calc(100% - var(--#{$prefix}spacer-20) * 2);
+		min-height: calc(100% - var(--#{$prefix}spacer-20) * 2);
 		margin: $m auto;
 		.modal-content {
 			@include flex-layout($ai: center, $fd: column);

b3a1d45

ddc4738

client/resources/scss/common/component/_pagination.scss

--- client/resources/scss/common/component/_pagination.scss

+++ client/resources/scss/common/component/_pagination.scss


         border: 1px solid var(--tk-gray-30);
         border-radius: var(--tk-rd-10);
         margin: 0 .5rem;
+
+        &.active{
+            background-color: #1a7ed3;
+            border: 1px solid #1a7ed3;
+            color: var(--tk-white);
+        }
+
+        &.prev{
+            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
+            background-repeat: no-repeat;
+            background-position: center;
+            transform: scaleX(-1); 
+        }
+        &.next{
+            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
+            background-repeat: no-repeat;
+            background-position: center;
+        }
     }
     
-    a.active{
-        background-color: #1a7ed3;
-        border: 1px solid #1a7ed3;
-        color: var(--tk-white);
-    }
 }

b3a1d45

ddc4738

client/resources/scss/common/component/_tables.scss

--- client/resources/scss/common/component/_tables.scss

+++ client/resources/scss/common/component/_tables.scss


 					text-align: left;
 				}
 			}
+			&.cursor{
+				cursor: pointer;
+			}
 		}
 		&.row {
 			border-top: 1px solid var(--#{$prefix}secondary-30);

b3a1d45

ddc4738

client/resources/scss/main.scss

--- client/resources/scss/main.scss

+++ client/resources/scss/main.scss

...	...	@@ -9,3 +9,4 @@
9	9	// admin
10	10	@import "./admin/layout.scss";
11	11	@import "./admin/content.scss";
	12	+@import "./admin/login.scss";

b3a1d45

ddc4738

client/views/component/userInfo/UserInfoInsert.vue

--- client/views/component/userInfo/UserInfoInsert.vue

+++ client/views/component/userInfo/UserInfoInsert.vue


 <template>
-  <details open class="form-table-style mb30">
-    <summary class="point-font2">
-      <p class="summary-style pl10">기본정보</p>
-    </summary>
-    <div class="pt10 pb10">
-      <table class="form-table">
-        <colgroup>
-          <col width="50%" />
-          <col width="50%" />
-        </colgroup>
-        <tr>
-          <td>
-            <div class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">아이디</label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.lgnId"
-                ref="mbrId"
-                minlength="5"
-                maxlength="50"
-                placeholder="아이디를 입력하세요."
-                :disabled="mbrVO.mbrId != null"
-              />
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <label for="" class="form-title point-font2 mb10">이름</label>
-              <input
-                type="text"
-                class="full-input"
-                ref="mbrNm"
-                v-model="mbrVO.mbrNm"
-                minlength="2"
-                maxlength="50"
-                placeholder="이름을 입력하세요."
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">
-                <span v-if="pageId == null">비밀번호</span>
-                <span v-else>비밀번호변경</span>
-              </label>
-              <span
-                :class="{
-                  'inline-block ml20': true,
-                  'red-text': pswd.errorPwd,
-                }"
-              >
-                영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
-              </span>
-              <input
-                type="password"
-                class="full-input"
-                ref="newPswd"
-                v-model="pswd.newPswd"
-                minlength="9"
-                placeholder="영문, 숫자, 특수문자 조합 9자 이상"
-              />
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <label for="" class="form-title point-font2 mb10">
-                <span v-if="pageId == null">비밀번호확인</span>
-                <span v-else>비밀번호변경 확인</span>
-              </label>
-              <input
-                type="password"
-                :class="{ 'full-input': true, 'err-border': pswd.pswdChk }"
-                ref="newPswdChk"
-                v-model="pswd.newPswdChk"
-                minlength="9"
-                :placeholder="
-                  pageId == null
-                    ? '비밀번호 확인을 입력하세요.'
-                    : '변경할 비밀번호 확인을 입력하세요'
-                "
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isMblNo || showOpt.isTelNo">
-          <td>
-            <div v-if="showOpt.isMblNo" class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">
-                휴대폰번호
-              </label>
-              <input
-                type="text"
-                class="full-input"
-                ref="mblTelno"
-                v-model="mbrVO.mblTelno"
-                minlength="10"
-                maxlength="11"
-                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
-                placeholder="휴대폰번호를 입력하세요."
-              />
-            </div>
-          </td>
-          <td>
-            <div v-if="showOpt.isTelNo" class="gd-12 pr0">
-              <label for="" class="point-font2 mb10">전화번호</label>
-              <input
-                type="text"
-                class="full-input"
-                ref="telno"
-                v-model="mbrVO.telno"
-                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
-                placeholder="전화번호를 입력하세요."
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
-          <td>
-            <div v-if="showOpt.isEml" class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">이메일</label>
-              <div class="flex align-center">
-                <div class="gd-3 pl0">
+  <div class="content-zone">
+    <div class="content">
+      <div class="scroll">
+        <div class="title-zone">
+          <div class="section-title">
+            <p>{{pageTit}}</p>
+          </div>
+          <PagiNavigationBar />
+        </div>
+        <div class="form-box">
+          <div class="form-box-title">
+            <p>기본정보</p>
+          </div>
+          <div class="form-content">
+            <div>
+                <label class="form-title">아이디</label>
+                <input
+                  type="text"
+                  class="form-control sm"
+                  v-model="mbrVO.lgnId"
+                  ref="mbrId"
+                  minlength="5"
+                  maxlength="50"
+                  placeholder="아이디를 입력하세요."
+                  :disabled="mbrVO.mbrId != null"
+                />
+              </div>
+              <div>
+                <label class="form-title">이름</label>
+                <input
+                  type="text"
+                  class="form-control sm"
+                  ref="mbrNm"
+                  v-model="mbrVO.mbrNm"
+                  minlength="2"
+                  maxlength="50"
+                  placeholder="이름을 입력하세요."
+                />
+              </div>
+              <div>
+                <label class="form-title">
+                  <p v-if="pageId == null">비밀번호</p>
+                  <p v-else>비밀번호변경</p>
+                </label>
+                <div class="form-group">
                   <input
-                    type="text"
-                    class="full-input"
-                    ref="emailId"
-                    v-model="email.id"
-                    oninput="this.value =
-                this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');"
-                    placeholder="이메일을 입력하세요."
+                    type="password"
+                    class="form-control sm"
+                    ref="newPswd"
+                    v-model="pswd.newPswd"
+                    minlength="9"
+                    placeholder="영문, 숫자, 특수문자 조합 9자 이상"
                   />
-                </div>
-                <div>@</div>
-                <div class="gd-3">
-                  <select
-                    class="full-select"
-                    ref="emailSelect"
-                    v-model="email.select"
+                  <span
+                    :class="{
+                      'red-text': pswd.errorPwd,
+                    }"
                   >
-                    <option value="">선택하세요</option>
-                    <option value="self">직접입력</option>
-                    <option value="naver.com">naver.com</option>
-                    <option value="google.com">google.com</option>
-                    <option value="hanmail.net">hanmail.net</option>
-                    <option value="nate.com">nate.com</option>
-                    <option value="kakao.com">kakao.com</option>
-                  </select>
+                    영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
+                  </span>
                 </div>
-                <div class="gd-3" v-show="email.select == 'self'">
+              </div>
+              <div>
+                <label class="form-title">
+                  <p v-if="pageId == null">비밀번호확인</p>
+                  <p v-else>비밀번호변경 확인</p>
+                </label>
+                <input
+                  type="password"
+                  :class="{ 'form-control sm': true, 'error': pswd.pswdChk }"
+                  ref="newPswdChk"
+                  v-model="pswd.newPswdChk"
+                  minlength="9"
+                  :placeholder="
+                    pageId == null
+                      ? '비밀번호 확인을 입력하세요.'
+                      : '변경할 비밀번호 확인을 입력하세요'
+                  "
+                />
+              </div>
+              <template v-if="showOpt.isMblNo || showOpt.isTelNo">
+                <div v-if="showOpt.isMblNo">
+                  <label  class="form-title">휴대폰번호</label>
                   <input
                     type="text"
-                    class="full-input"
-                    ref="emailAddress"
-                    v-model="email.address"
+                    class="form-control sm"
+                    ref="mblTelno"
+                    v-model="mbrVO.mblTelno"
+                    minlength="10"
+                    maxlength="11"
+                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
+                    placeholder="휴대폰번호를 입력하세요."
                   />
                 </div>
-              </div>
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <div class="flex">
-                <div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
-                  <label for="" class="form-title point-font2 mb10">
-                    문자수신
-                  </label>
-                  <div class="flex align-center no-gutters">
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="smsRcptnAgreYn"
-                        id="smsY"
-                        class="mr5"
-                        v-model="mbrVO.smsRcptnAgreYn"
-                        value="Y"
-                      />
-                      <label for="smsY">수신</label>
-                    </div>
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="smsRcptnAgreYn"
-                        id="smsN"
-                        class="mr5"
-                        v-model="mbrVO.smsRcptnAgreYn"
-                        value="N"
-                      />
-                      <label for="smsN">미수신</label>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
-                  <label for="" class="form-title point-font2 mb10">
-                    이메일수신
-                  </label>
-                  <div class="flex align-center no-gutters">
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="emlRcptnAgreYn"
-                        id="y"
-                        class="mr5"
-                        v-model="mbrVO.emlRcptnAgreYn"
-                        value="Y"
-                      />
-                      <label for="y">수신</label>
-                    </div>
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="emlRcptnAgreYn"
-                        id="n"
-                        class="mr5"
-                        v-model="mbrVO.emlRcptnAgreYn"
-                        value="N"
-                      />
-                      <label for="n">미수신</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-        <template v-if="showOpt.isAddr">
-          <tr>
-            <td>
-              <div class="gd-12 pl0">
-                <label for="" class="form-title point-font2 mb10">
-                  우편번호
-                </label>
-                <div class="flex align-center">
-                  <div class="gd-10 pl0">
-                    <input
-                      type="text"
-                      class="full-input"
-                      v-model="mbrVO.zip"
-                      readonly
-                    />
-                  </div>
-                  <div class="gd-2 pr0">
-                    <button
-                      :class="{
-                        'large-btn': true,
-                        'blue-border-btn': pageRole == 'adm',
-                        'green-border-btn': pageRole == 'portal',
-                      }"
-                      @click="fnZipSearch"
-                    >
-                      찾기
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </td>
-            <td>
-              <div class="gd-12 pr0">
-                <label for="" class="form-title point-font2 mb10">주소</label>
+              </template>
+              <div v-if="showOpt.isTelNo">
+                <label class="form-title">전화번호</label>
                 <input
                   type="text"
-                  class="full-input"
-                  v-model="mbrVO.addr"
-                  readonly
+                  class="form-control sm"
+                  ref="telno"
+                  v-model="mbrVO.telno"
+                  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
+                  placeholder="전화번호를 입력하세요."
                 />
               </div>
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <div class="gd-12 pl0 pr0">
-                <label for="" class="form-title point-font2 mb10">
-                  상세주소
-                </label>
-                <input
-                  type="text"
-                  class="full-input"
-                  ref="daddr"
-                  v-model="mbrVO.daddr"
-                  placeholder="상세주소를 입력하세요."
-                />
-              </div>
-            </td>
-          </tr>
-        </template>
-        <tr v-if="showOpt.isStts && pageRole == 'adm'">
-          <td>
-            <div class="flex gd-12 pl0">
-              <div class="gd-6 pl0">
-                <label for="" class="form-title point-font2 mb10">
-                  회원상태
-                </label>
-                <select class="full-select" v-model="mbrVO.mbrStts">
-                  <option value="1">승인</option>
-                  <option value="2">승인대기</option>
-                  <option value="0">탈퇴</option>
-                  <option value="3">차단</option>
-                </select>
-              </div>
-              <div class="gd-6 pr0">
-                <label for="" class="point-font2 mb10">차단일</label>
-                <input
-                  type="date"
-                  class="full-input"
-                  ref="cntrlDt"
-                  v-model="mbrVO.cntrlDt"
-                />
-              </div>
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <label for="" class="point-font2 mb10">차단 사유</label>
-              <input
-                type="text"
-                class="full-input"
-                ref="cntrlRsn"
-                v-model="mbrVO.cntrlRsn"
-                placeholder="차단 사유를 입력하세요."
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isAuthor && pageRole == 'adm'">
-          <td colspan="2">
-            <UserAuthorList :mbrVO="mbrVO" />
-          </td>
-        </tr>
-      </table>
-    </div>
-  </details>
+              <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
+                <div v-if="showOpt.isEml" >
+                  <label  class="form-title">이메일</label>
+                  <div class="check-area">
+                      <input
+                        type="text"
+                        class="form-control sm"
+                        ref="emailId"
+                        v-model="email.id"
+                        oninput="this.value =
+                        this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');"
+                        placeholder="이메일을 입력하세요."
+                      />
+                      <div>@</div>
+                      <template v-if="email.select == 'self'">
+                        <input
+                          type="text"
+                          class="form-control sm"
+                          ref="emailAddress"
+                          v-model="email.address"
+                        />
+                      </template>
+                      <select
+                        class="form-select sm"
+                        ref="emailSelect"
+                        v-model="email.select"
+                      >
+                        <option value="">선택하세요</option>
+                        <option value="self">직접입력</option>
+                        <option value="naver.com">naver.com</option>
+                        <option value="google.com">google.com</option>
+                        <option value="hanmail.net">hanmail.net</option>
+                        <option value="nate.com">nate.com</option>
+                        <option value="kakao.com">kakao.com</option>
+                      </select>
+                  </div>
+                </div>
+                <div v-if="showOpt.isSmsAgree">
+                    <label class="form-title">
+                      문자수신
+                    </label>
+                    <div class="check-area">
+                      <div class="form-check">
+                        <input
+                          type="radio"
+                          name="smsRcptnAgreYn"
+                          id="smsY"
+                          class="mr5"
+                          v-model="mbrVO.smsRcptnAgreYn"
+                          value="Y"
+                        />
+                        <label for="smsY">수신</label>
+                      </div>
+                      <div class="form-check">
+                        <input
+                          type="radio"
+                          name="smsRcptnAgreYn"
+                          id="smsN"
+                          class="mr5"
+                          v-model="mbrVO.smsRcptnAgreYn"
+                          value="N"
+                        />
+                        <label for="smsN">미수신</label>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="showOpt.isEmlAgree">
+                    <label class="form-title">
+                      이메일수신
+                    </label>
+                    <div class="check-area">
+                      <div class="form-check">
+                        <input
+                          type="radio"
+                          name="emlRcptnAgreYn"
+                          id="y"
+                          class="mr5"
+                          v-model="mbrVO.emlRcptnAgreYn"
+                          value="Y"
+                        />
+                        <label for="y">수신</label>
+                      </div>
+                      <div class="form-check">
+                        <input
+                          type="radio"
+                          name="emlRcptnAgreYn"
+                          id="n"
+                          class="mr5"
+                          v-model="mbrVO.emlRcptnAgreYn"
+                          value="N"
+                        />
+                        <label for="n">미수신</label>
+                      </div>
+                    </div>
+                  </div>
+              </template>
+              <template  v-if="showOpt.isAddr">
+                <div>
+                  <label class="form-title">우편번호</label>
+                      <input
+                        type="text"
+                        class="form-control sm"
+                        v-model="mbrVO.zip"
+                        readonly
+                      />
 
-  <div class="flex justify-end align-center no-gutters">
-    <div class="gd-1 mr10">
+                      <button
+                        :class="{
+                          'large-btn': true,
+                          'blue-border-btn': pageRole == 'adm',
+                          'green-border-btn': pageRole == 'portal',
+                        }"
+                        @click="fnZipSearch"
+                      >
+                        찾기
+                      </button>
+                </div>
+                <div>
+                  <label class="form-title">주소</label>
+                  <input
+                    type="text"
+                    class="form-control sm"
+                    v-model="mbrVO.addr"
+                    readonly
+                  />
+                </div>
+                <div>
+                  <label class="form-title">
+                    상세주소
+                  </label>
+                  <input
+                    type="text"
+                    class="form-control sm"
+                    ref="daddr"
+                    v-model="mbrVO.daddr"
+                    placeholder="상세주소를 입력하세요."
+                  />
+                </div>
+              </template>
+              <template  v-if="showOpt.isStts && pageRole == 'adm'">
+                <div>
+                      <label class="form-title">회원상태</label>
+                      <select class="form-select sm" v-model="mbrVO.mbrStts">
+                        <option value="1">승인</option>
+                        <option value="2">승인대기</option>
+                        <option value="0">탈퇴</option>
+                        <option value="3">차단</option>
+                      </select>
+                  </div>
+                  <div >
+                      <label class="form-title">차단일</label>
+                      <input
+                        type="date"
+                        class="form-control sm"
+                        ref="cntrlDt"
+                        v-model="mbrVO.cntrlDt"
+                      />
+                    </div>
+              </template>
+              <div>
+                <label class="form-title">차단 사유</label>
+                <input
+                  type="text"
+                  class="form-control sm"
+                  ref="cntrlRsn"
+                  v-model="mbrVO.cntrlRsn"
+                  placeholder="차단 사유를 입력하세요."
+                />
+              </div>
+              <div v-if="showOpt.isAuthor && pageRole == 'adm'">
+                  <UserAuthorList :mbrVO="mbrVO" />
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="btn-wrap">
       <button
         :class="{
-          'large-btn': true,
-          'blue-btn': pageRole == 'adm',
-          'green-btn': pageRole == 'portal',
+          'btn sm primary': true,
+          // 'blue-btn': pageRole == 'adm',
+          // 'green-btn': pageRole == 'portal',
         }"
         @click="fnUpsert"
       >
         {{ pageId == null ? "등록" : "수정" }}
       </button>
-    </div>
-    <div class="gd-1">
-      <button class="large-btn gray-btn" @click="fnCancel">취소</button>
-    </div>
+      <button class="btn sm tertiary" @click="fnCancel">취소</button>
   </div>
 </template>
 

   defaultUserInfoParams,
 } from "../../../resources/js/defaultUserInfoParams";
 import validateParams from "../../../resources/js/validateParams";
+import PagiNavigationBar from "../paginavigationbar/PagiNavigationBar.vue";
 
 // COMPONENT
 import UserAuthorList from "./UserAuthorList.vue";

 
 export default {
   mixins: [validateParams],
-  components: { UserAuthorList },
+  components: { UserAuthorList,PagiNavigationBar },
   props: {
     pageId: {
       type: String,

       type: String,
       default: "user",
     },
+    pageTit: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/component/userInfo/UserInfoView.vue

--- client/views/component/userInfo/UserInfoView.vue

+++ client/views/component/userInfo/UserInfoView.vue


 <template>
-  <details open class="form-table-style mb30">
-    <summary class="point-font2">
-      <p class="summary-style pl10">기본정보</p>
-    </summary>
-    <div class="pt10 pb10">
-      <table class="form-table">
-        <colgroup>
-          <col width="50%" />
-          <col width="50%" />
-        </colgroup>
-        <tr>
-          <td>
-            <div class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">아이디</label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.lgnId"
-                disabled
-              />
+    <div class="content-zone">
+      <div class="content">
+        <div class="scroll">
+          <div class="title-zone">
+            <div class="section-title">
+              <p>{{pageTit}}</p>
             </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <label for="" class="form-title point-font2 mb10">이름</label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.mbrNm"
-                disabled
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isMblNo || showOpt.isTelNo">
-          <td>
-            <div v-if="showOpt.isMblNo" class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">
-                휴대폰번호
-              </label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.mblTelno"
-                disabled
-              />
-            </div>
-          </td>
-          <td>
-            <div v-if="showOpt.isTelNo" class="gd-12 pr0">
-              <label for="" class="point-font2 mb10">전화번호</label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.telno"
-                disabled
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
-          <td>
-            <div v-if="showOpt.isEml" class="gd-12 pl0">
-              <label for="" class="form-title point-font2 mb10">이메일</label>
-              <div class="flex align-center">
-                <div class="gd-3 pl0">
-                  <input
-                    type="text"
-                    class="full-input"
-                    v-model="email.id"
-                    disabled
-                  />
-                </div>
-                <div>@</div>
-                <div class="gd-3">
-                  <select class="full-select" v-model="email.select" disabled>
-                    <option value="">선택하세요</option>
-                    <option value="self">직접입력</option>
-                    <option value="naver.com">naver.com</option>
-                    <option value="google.com">google.com</option>
-                    <option value="hanmail.net">hanmail.net</option>
-                    <option value="nate.com">nate.com</option>
-                    <option value="kakao.com">kakao.com</option>
-                  </select>
-                </div>
-                <div class="gd-3" v-show="email.select == 'self'">
-                  <input
-                    type="text"
-                    class="full-input"
-                    v-model="email.address"
-                    disabled
-                  />
-                </div>
+            <PagiNavigationBar />
+          </div>
+          <div class="form-box">
+              <div class="form-box-title">
+                <p>기본정보</p>
               </div>
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <div class="flex">
-                <div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
-                  <label for="" class="form-title point-font2 mb10">
-                    문자수신
-                  </label>
-                  <div class="flex align-center no-gutters">
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="smsRcptnAgreYn"
-                        id="smsY"
-                        class="mr5"
-                        v-model="mbrVO.smsRcptnAgreYn"
-                        value="Y"
-                        disabled
-                      />
-                      <label for="smsY">수신</label>
-                    </div>
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="smsRcptnAgreYn"
-                        id="smsN"
-                        class="mr5"
-                        v-model="mbrVO.smsRcptnAgreYn"
-                        value="N"
-                        disabled
-                      />
-                      <label for="smsN">미수신</label>
-                    </div>
-                  </div>
+              <div class="form-content">
+                <div>
+                  <label class="form-title">아이디</label>
+                  <p>{{ mbrVO.lgnId }}</p>
+                  <!-- <input
+                    type="text"
+                    class="form-control sm"
+                    v-model="mbrVO.lgnId"
+                    disabled
+                  /> -->
                 </div>
-                <div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
-                  <label for="" class="form-title point-font2 mb10">
-                    이메일수신
-                  </label>
-                  <div class="flex align-center no-gutters">
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="emlRcptnAgreYn"
-                        id="y"
-                        class="mr5"
-                        v-model="mbrVO.emlRcptnAgreYn"
-                        value="Y"
-                        disabled
-                      />
-                      <label for="y">수신</label>
-                    </div>
-                    <div class="gd-4">
-                      <input
-                        type="radio"
-                        name="emlRcptnAgreYn"
-                        id="n"
-                        class="mr5"
-                        v-model="mbrVO.emlRcptnAgreYn"
-                        value="N"
-                        disabled
-                      />
-                      <label for="n">미수신</label>
-                    </div>
-                  </div>
+                <div>
+                  <label class="form-title">이름</label>
+                  <p>{{ mbrVO.mbrNm }}</p>
+                  <!-- <input
+                    type="text"
+                    class="form-control sm"
+                    v-model="mbrVO.mbrNm"
+                    disabled
+                  /> -->
                 </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-        <template v-if="showOpt.isAddr">
-          <tr>
-            <td>
-              <div class="gd-12 pl0">
-                <label for="" class="form-title point-font2 mb10">
-                  우편번호
-                </label>
-                <div class="flex align-center">
-                  <div class="gd-10 pl0 pr0">
-                    <input
+                <template v-if="showOpt.isMblNo || showOpt.isTelNo">
+                  <div v-if="showOpt.isMblNo">
+                    <label for="" class="form-title">
+                      휴대폰번호
+                    </label>
+                    <p>{{ mbrVO.mblTelno }}</p>
+                    <!-- <input
                       type="text"
-                      class="full-input"
-                      v-model="mbrVO.zip"
+                      class="form-control sm"
+                      v-model="mbrVO.mblTelno"
                       disabled
-                    />
+                    /> -->
                   </div>
-                </div>
-              </div>
-            </td>
-            <td>
-              <div class="gd-12 pr0">
-                <label for="" class="form-title point-font2 mb10">주소</label>
-                <input
-                  type="text"
-                  class="full-input"
-                  v-model="mbrVO.addr"
-                  disabled
-                />
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <div class="gd-12 pl0 pr0">
-                <label for="" class="form-title point-font2 mb10">
-                  상세주소
-                </label>
-                <input
-                  type="text"
-                  class="full-input"
-                  v-model="mbrVO.daddr"
-                  disabled
-                />
-              </div>
-            </td>
-          </tr>
-        </template>
-        <tr v-if="showOpt.isStts && pageRole == 'adm'">
-          <td>
-            <div class="flex gd-12 pl0">
-              <div class="gd-6 pl0">
-                <label for="" class="form-title point-font2 mb10">
-                  회원상태
-                </label>
-                <select class="full-select" v-model="mbrVO.mbrStts" disabled>
-                  <option value="1">승인</option>
-                  <option value="2">승인대기</option>
-                  <option value="0">탈퇴</option>
-                  <option value="3">차단</option>
-                </select>
-              </div>
-              <div class="gd-6 pr0">
-                <label for="" class="point-font2 mb10">차단일</label>
-                <input
-                  type="date"
-                  class="full-input"
-                  v-model="mbrVO.cntrlDt"
-                  disabled
-                />
-              </div>
-            </div>
-          </td>
-          <td>
-            <div class="gd-12 pr0">
-              <label for="" class="point-font2 mb10">차단 사유</label>
-              <input
-                type="text"
-                class="full-input"
-                v-model="mbrVO.cntrlRsn"
-                disabled
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="showOpt.isAuthor && pageRole == 'adm'">
-          <td colspan="2">
-            <UserAuthorList :mbrVO="mbrVO" editMode="view" />
-          </td>
-        </tr>
-      </table>
-    </div>
-  </details>
+                  <div v-if="showOpt.isTelNo">
+                    <label class="form-title">전화번호</label>
+                    <p>{{ mbrVO.telno }}</p>
+                    <!-- <input
+                      type="text"
+                      class="form-control sm"
+                      v-model="mbrVO.telno"
+                      disabled
+                    /> -->
+                  </div>
+                </template>
+                <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
+                      <div v-if="showOpt.isEml">
+                        <label for="" class="form-title point-font2 mb10">이메일</label>
+                        <div class="check-area">
+                          <p>{{ email.address ? email.id + '@' + email.address : email.id + '@' + email.select }}</p>
+                            <!-- <input
+                              type="text"
+                              class="form-control sm"
+                              v-model="email.id"
+                              disabled
+                            />
+                          <div>@</div>
+                          <div v-show="email.select == 'self'">
+                            <input
+                              type="text"
+                                class="form-control sm"
+                              v-model="email.address"
+                              disabled
+                            />
+                          </div>
+                            <select class="form-select sm" v-model="email.select" disabled>
+                              <option value="">선택하세요</option>
+                              <option value="self">직접입력</option>
+                              <option value="naver.com">naver.com</option>
+                              <option value="google.com">google.com</option>
+                              <option value="hanmail.net">hanmail.net</option>
+                              <option value="nate.com">nate.com</option>
+                              <option value="kakao.com">kakao.com</option>
+                            </select> -->
+                        </div>
+                      </div>
+         
+                      <div v-if="showOpt.isSmsAgree">
+                        <label class="form-title">
+                          문자수신
+                        </label>
+                        <p>{{ mbrVO.smsRcptnAgreYn }}</p>
+                        <!-- <div class="check-area">
+                          <div class="form-check">
+                            <input
+                              type="radio"
+                              name="smsRcptnAgreYn"
+                              id="smsY"
+                              class="mr5"
+                              v-model="mbrVO.smsRcptnAgreYn"
+                              value="Y"
+                              disabled
+                            />
+                            <label for="smsY">수신</label>
+                          </div>
+                            <div class="form-check">
+                              <input
+                                type="radio"
+                                name="smsRcptnAgreYn"
+                                id="smsN"
+                                class="mr5"
+                                v-model="mbrVO.smsRcptnAgreYn"
+                                value="N"
+                                disabled
+                              />
+                              <label for="smsN">미수신</label>
+                            </div>
+                          </div> -->
+                      </div>
 
-  <div class="flex justify-end align-center no-gutters">
-    <div v-if="pageRole == 'adm'" class="gd-1 mr10">
-      <button class="large-btn gray-border-btn" @click="fnList">목록</button>
+                      <div v-if="showOpt.isEmlAgree">
+                        <label class="form-title">
+                          이메일수신
+                        </label>
+                        <p>{{ mbrVO.emlRcptnAgreYn }}</p>
+                        <!-- <div class="check-area">
+                          <div class="form-check">
+                            <input
+                              type="radio"
+                              name="emlRcptnAgreYn"
+                              id="y"
+                              class="mr5"
+                              v-model="mbrVO.emlRcptnAgreYn"
+                              value="Y"
+                              disabled
+                            />
+                            <label for="y">수신</label>
+                          </div>
+                          <div class="form-check">
+                            <input
+                              type="radio"
+                              name="emlRcptnAgreYn"
+                              id="n"
+                              class="mr5"
+                              v-model="mbrVO.emlRcptnAgreYn"
+                              value="N"
+                              disabled
+                            />
+                            <label for="n">미수신</label>
+                          </div>
+                        </div> -->
+                      </div>
+                  </template>
+                  <template v-if="showOpt.isAddr">
+        
+                        <div>
+                          <label class="form-title">
+                            우편번호
+                          </label>
+                          <p>{{ '(' + mbrVO.zip + ')'+ mbrVO.addr + mbrVO.daddr}}</p>
+                          <!-- <input
+                            type="text"
+                            class="full-input"
+                            v-model="mbrVO.zip"
+                            disabled
+                          /> -->
+                        </div>
+                        <!-- <div>
+                          <label class="form-title">주소</label>
+                          <input
+                            type="text"
+                            class="full-input"
+                            v-model="mbrVO.addr"
+                            disabled
+                          />
+                        </div> -->
+             
+                        <!-- <div>
+                          <label for="" class="form-title">
+                            상세주소
+                          </label>
+                          <input
+                            type="text"
+                            class="full-input"
+                            v-model="mbrVO.daddr"
+                            disabled
+                          />
+                        </div> -->
+                  </template>
+                  <template v-if="showOpt.isStts && pageRole == 'adm'">
+            
+                      <div>
+                          <label class="form-title">
+                            회원상태
+                          </label>
+                          <select class="full-select" v-model="mbrVO.mbrStts" disabled>
+                            <option value="1">승인</option>
+                            <option value="2">승인대기</option>
+                            <option value="0">탈퇴</option>
+                            <option value="3">차단</option>
+                          </select>
+                        <div>
+                          <label class="form-title">차단일</label>
+                          <input
+                            type="date"
+                            class="full-input"
+                            v-model="mbrVO.cntrlDt"
+                            disabled
+                          />
+                        </div>
+                      </div>
+              
+                      <div>
+                        <label  class="form-title">차단 사유</label>
+                        <input
+                          type="text"
+                          class="full-input"
+                          v-model="mbrVO.cntrlRsn"
+                          disabled
+                        />
+                      </div>
+                  </template>
+                  <template v-if="showOpt.isAuthor && pageRole == 'adm'">
+                      <UserAuthorList :mbrVO="mbrVO" editMode="view" />
+                  </template>
+              </div>
+            </div>
+        </div>
+      </div>
     </div>
-    <div class="gd-1 mr10">
+  <div class="btn-wrap">
+    <template v-if="pageRole == 'adm'" class="gd-1 mr10">
+      <button class="btn sm tertiary" @click="fnList">목록</button>
+    </template>
       <button
         v-if="pageAuth.mdfcnAuthrt == 'Y'"
         :class="{
-          'large-btn': true,
-          'blue-border-btn': pageRole == 'adm',
-          'green-border-btn': pageRole == 'portal',
+          'btn sm primary': true,
         }"
         @click="fnUpdate"
       >
         수정
       </button>
-    </div>
-    <div v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
-      <button class="large-btn red-border-btn" @click="fnDelete">삭제</button>
-    </div>
+    <template v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
+      <button class="btn sm red" @click="fnDelete">삭제</button>
+    </template>
   </div>
 </template>
 

 
 // COMPONENT
 import UserAuthorList from "./UserAuthorList.vue";
+import PagiNavigationBar from "../paginavigationbar/PagiNavigationBar.vue";
 
 // API
 import { mbrDetailProc } from "../../../resources/api/mbrInfo";
 import { mbrDeleteProc } from "../../../resources/api/mbrInfo";
 
 export default {
-  components: { UserAuthorList },
+  components: { UserAuthorList,PagiNavigationBar },
   props: {
     pageId: {
       type: String,

       type: String,
       default: "user",
     },
+    pageTit: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/layout/AdminMenu.vue

--- client/views/layout/AdminMenu.vue

+++ client/views/layout/AdminMenu.vue


     <div class="info-wrap">
       <div class="info">
         <p class="info-name">{{ mbrNm }}</p>
-        <button  @click="fnlogOut">로그아웃</button>
-        <button  @click="fnSiteMove">사이트이동</button>
-    
-        <div class="reset-wrap">
-            <button  @click="cacheClean()">
-              <svg-icon type="mdi" :path="refreshPath"></svg-icon> 변경사항 적용 </button>
-        </div>
+        <ul class="info-btn">
+            <li><button class="btn-ico xsm ico-logout"  @click="fnlogOut" title="로그아웃"></button></li>
+            <li><button class="btn-ico xsm ico-go"  @click="fnSiteMove" title="사이트이동"></button></li>
+            <li><button class="btn-ico xsm ico-reset"  @click="cacheClean()" title="변경사항 적용"></button></li>
+        </ul>
       </div>
     </div>
-    <ul class="side-menu">
-      <template v-if="menuList.length > 0">
-        <li v-for="(sub, subidx) in menuList" :key="subidx" :class="{ 'sub-active': isActive(sub.routerUrl) }">
-          <div  @click="
-            menuClick(
-              sub.routerUrl != '' && sub.routerUrl != null
-                ? sub
-                : sub.childList[0]
-            )
-            ">
-            <span>{{ sub.menuNm }}</span>
-          </div>
-          <ul v-show="sub.childList.length > 0">
-            <li v-for="(third, thirdIdx) in sub.childList" :key="thirdIdx" :class="{
-              'sub-active': isActive(third.routerUrl),
-            }" @click="menuClick(third)">
-              <span>{{ third.menuNm }}</span>
-            </li>
-          </ul>
-        </li>
-      </template>
-    </ul>
+    <div class="menu-zone">
+      <p>MENU</p>
+      <ul class="side-menu">
+        <template v-if="menuList.length > 0">
+          <li v-for="(sub, subidx) in menuList" :key="subidx" :class="{ 'sub-active': isActive(sub.routerUrl) }">
+            <div  @click="
+              menuClick(
+                sub.routerUrl != '' && sub.routerUrl != null
+                  ? sub
+                  : sub.childList[0]
+              )
+              ">
+              <span>{{ sub.menuNm }}</span>
+            </div>
+            <ul v-show="sub.childList.length > 0">
+              <li v-for="(third, thirdIdx) in sub.childList" :key="thirdIdx" :class="{
+                'sub-active': isActive(third.routerUrl),
+              }" @click="menuClick(third)">
+                <span>{{ third.menuNm }}</span>
+              </li>
+            </ul>
+          </li>
+        </template>
+      </ul>
+    </div>
   </nav>
 </template>
 <script>

 import { mapActions } from "vuex";
 import cntnStatsSave from "../../resources/js/cntnStatsSave";
 import { cacheReSet } from "../../resources/api/cacheReSet";
-import { mdiRefresh } from "@mdi/js";
 
 export default {
   mixins: [queryParams, cntnStatsSave],

       currentPath: this.$route.path,
       resetSearch: { ...defaultSearchParams },
       menuList: [],
-      refreshPath: mdiRefresh,
     };
   },
   created() {

b3a1d45

ddc4738

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


     <AdminHeader />
     <AdminMenu />
     <main class="main-wrap">
-        <Paginavigationbar :className="'navigation-wrap'"/>
-        <div class="content-wrap">
+        <div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
           <router-view />
         </div>
     </main>

 import UserHeader from "../layout/UserHeader.vue";
 import AdminHeader from "../layout/AdminHeader.vue";
 import AdminMenu from "../layout/AdminMenu.vue";
-import Paginavigationbar from "../component/paginavigationbar/PagiNavigationBar.vue";
 
 const App = {
   data: () => {

     'UserHeader': UserHeader,
     'AdminHeader': AdminHeader,
     'AdminMenu': AdminMenu,
-    'Paginavigationbar': Paginavigationbar
   },
   mounted() {},
 };

b3a1d45

ddc4738

client/views/pages/adm/member/adminManagement/AdminManagementInsert.vue

--- client/views/pages/adm/member/adminManagement/AdminManagementInsert.vue

+++ client/views/pages/adm/member/adminManagement/AdminManagementInsert.vue


 <template>
-  <div class="content admin-style">
-    <div class="admin-page-title point-font2 mb30">
-      <p>관리자 관리</p>
-    </div>
-
-    <UserInfoInsert :pageId="pageId" pageNm="adm" />
-  </div>
+    <UserInfoInsert :pageId="pageId" pageNm="adm" :pageTit="'관리자 관리'"/>
 </template>
 
 <script>

b3a1d45

ddc4738

client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue

--- client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue

+++ client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue


 <template>
-  <div class="content">
-    <div class="admin-page-title point-font2 mb30">
-      <p>관리자 관리</p>
-    </div>
-    <div class="search-bar mb15">
-      <div class="flex justify-end align-center no-gutters">
-        <div class="gd-6 mr10">
-          <div class="border">
-            <select class="border-none gd-2" v-model="search['searchType']">
+  <div class="content-zone">
+    <div class="content">
+      <div class="scroll">
+        <div class="title-zone">
+          <div class="section-title">
+            <p>관리자 관리</p>
+          </div>
+          <PagiNavigationBar />
+        </div>
+        <div class="search-bar">
+            <select class="form-select sm" v-model="search['searchType']">
               <option value="">전체</option>
               <option value="lgn_id">아이디</option>
               <option value="mbr_nm">이름</option>
             </select>
             <input
               type="text"
-              class="full-input border-none gd-10 condition-input"
+              class="form-control sm"
               v-model="search['searchText']"
               v-on:keyup.enter="fnViewList"
             />
-          </div>
-        </div>
-        <div class="gd-1">
-          <button class="large-btn blue-border-btn" @click="fnViewList">
+
+          <button class="btn sm ico-before ico-sch" @click="fnViewList">
             검색
           </button>
         </div>
+        <div class="tbl-wrap">
+          <ListTable
+            :colgroup="colgroup"
+            :thead="thead"
+            :tbody="tbody"
+            className="data cursor"
+            @listClick="fnViewDetail"
+          >
+            <template #button="buttonProps">
+              <button
+                title="초기화"
+                class="btn-ico md ico-refresh"
+                @click.stop="fnReset(buttonProps)"
+                v-if="pageAuth.mdfcnAuthrt == 'Y'"
+              >
+                
+              </button>
+            </template>
+          </ListTable>
+        </div>
       </div>
     </div>
-    <ListTable
-      :colgroup="colgroup"
-      :thead="thead"
-      :tbody="tbody"
-      className="admin-list"
-      @listClick="fnViewDetail"
-    >
-      <template #button="buttonProps">
-        <button
-          class="large-btn red-border-btn"
-          @click.stop="fnReset(buttonProps)"
-          v-if="pageAuth.mdfcnAuthrt == 'Y'"
-        >
-          초기화
-        </button>
-      </template>
-    </ListTable>
-    <div class="flex justify-between align-center no-gutters">
-      <div class="gd-1"></div>
-      <div class="gd-10">
-        <PaginationButton
-          :className="'admin-pagination'"
-          v-model:currentPage="search['currentPage']"
-          :pagination="search"
-          :click="fnViewList"
-        />
-      </div>
-      <div class="gd-1">
-        <button
-          class="large-btn blue-btn"
-          @click="fnInsert"
-          v-if="pageAuth.regAuthrt == 'Y'"
-        >
-          등록
-        </button>
-      </div>
-    </div>
+  </div>
+  <div class="btn-wrap list">
+    <div></div>
+      <PaginationButton
+        :className="'pagination'"
+        v-model:currentPage="search['currentPage']"
+        :pagination="search"
+        :click="fnViewList"
+      />
+      <button
+        class="btn sm primary"
+        @click="fnInsert"
+        v-if="pageAuth.regAuthrt == 'Y'"
+      >
+        등록
+      </button>
   </div>
 </template>
 

 // COMPONENT
 import ListTable from "../../../../component/table/ListTable.vue";
 import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 // RESOURCES
 import queryParams from "../../../../../resources/js/queryParams";

   components: {
     ListTable: ListTable,
     PaginationButton: PaginationButton,
+    PagiNavigationBar: PagiNavigationBar
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/pages/adm/member/adminManagement/AdminManagementSelectListOne.vue

--- client/views/pages/adm/member/adminManagement/AdminManagementSelectListOne.vue

+++ client/views/pages/adm/member/adminManagement/AdminManagementSelectListOne.vue


 <template>
-  <div class="content admin-style">
-    <div class="admin-page-title point-font2 mb30">
-      <p>관리자 관리</p>
-    </div>
-
-    <UserInfoView :pageId="pageId" pageNm="adm" />
-  </div>
+    <UserInfoView :pageId="pageId" pageNm="adm" :pageTit="'관리자 관리'"/>
 </template>
 
 <script>

b3a1d45

ddc4738

client/views/pages/adm/member/userManagement/UserManagementInsert.vue

--- client/views/pages/adm/member/userManagement/UserManagementInsert.vue

+++ client/views/pages/adm/member/userManagement/UserManagementInsert.vue


 <template>
-  <div class="content admin-style">
-    <div class="admin-page-title point-font2 mb30">
-      <p>일반회원 관리</p>
-    </div>
-
-    <UserInfoInsert :pageId="pageId" />
-  </div>
+    <UserInfoInsert :pageId="pageId" :pageTit="'일반회원 관리'"/>
 </template>
 
 <script>

b3a1d45

ddc4738

client/views/pages/adm/member/userManagement/UserManagementSelectList.vue

--- client/views/pages/adm/member/userManagement/UserManagementSelectList.vue

+++ client/views/pages/adm/member/userManagement/UserManagementSelectList.vue


 <template>
-  <div class="content">
-    <div class="admin-page-title point-font2 mb30">
-      <p>일반회원 관리</p>
-    </div>
-    <div class="search-bar mb15">
-      <div class="flex justify-end align-center no-gutters">
-        <div class="gd-6 mr10">
-          <div class="border">
-            <select class="border-none gd-2" v-model="search['searchType']">
+  <div class="content-zone">
+    <div class="content">
+      <div class="scroll">
+        <div class="title-zone">
+          <div class="section-title">
+            <p>일반회원 관리</p>
+          </div>
+          <PagiNavigationBar />
+        </div>
+        <div class="search-bar">
+            <select class="form-select sm" v-model="search['searchType']">
               <option value="">전체</option>
               <option value="lgn_id">아이디</option>
               <option value="mbr_nm">이름</option>
             </select>
             <input
               type="text"
-              class="full-input border-none gd-10 condition-input"
+              class="form-control sm"
               v-model="search['searchText']"
               v-on:keyup.enter="fnViewList"
             />
-          </div>
+          <button class="btn sm ico-before ico-sch" @click="fnViewList">검색</button>
         </div>
-        <div class="gd-1">
-          <button class="large-btn blue-border-btn" @click="fnViewList">
-            검색
-          </button>
+        <div class="tbl-wrap">
+          <ListTable
+          :colgroup="colgroup"
+          :thead="thead"
+          :tbody="tbody"
+          :className="'data cursor'"
+          @listClick="fnModalOpen"
+        >
+          <template #button="buttonProps">
+            <button
+              title="초기화"
+              class="btn-ico md ico-refresh"
+              @click.stop="fnReset(buttonProps)"
+              v-if="pageAuth.mdfcnAuthrt == 'Y'"
+            >
+            </button>
+          </template>
+        </ListTable>
         </div>
       </div>
     </div>
-    <ListTable
-      :colgroup="colgroup"
-      :thead="thead"
-      :tbody="tbody"
-      :className="'admin-list'"
-      @listClick="fnModalOpen"
-    >
-      <template #button="buttonProps">
-        <button
-          class="large-btn red-border-btn"
-          @click.stop="fnReset(buttonProps)"
-          v-if="pageAuth.mdfcnAuthrt == 'Y'"
-        >
-          초기화
-        </button>
-      </template>
-    </ListTable>
-    <div class="flex justify-between align-center no-gutters">
-      <div class="gd-1"></div>
-      <div class="gd-10">
+  </div>
+  <div class="btn-wrap list">
+      <div></div>
         <PaginationButton
           :className="'admin-pagination'"
           v-model:currentPage="search['currentPage']"
           :pagination="search"
           :click="fnViewList"
         />
-      </div>
-      <div class="gd-1">
+
         <button
-          class="large-btn blue-btn"
+          class="btn sm primary"
           @click="fnInsert"
           v-if="pageAuth.regAuthrt == 'Y'"
         >
           등록
         </button>
-      </div>
     </div>
     <!-- 모달: 개인정보조회이력 -->
     <Modal :showModal="isOpen">

         <div class="box-title point-font2">
           <p>개인 정보 조회 사유 등록</p>
         </div>
-        <button class="close-btn" @click="fnModalClose">X</button>
+        <button class="btn-close" @click="fnModalClose"></button>
       </template>
       <div>
         <textarea
           v-model="prvcInqHstry['inqRsn']"
           placeholder="개인 정보 조회 사유를 작성하세요."
           ref="inqRsn"
+          class="form-control"
         ></textarea>
       </div>
       <template v-slot:footer>
-        <div class="gd-2 mr10">
-          <button class="large-btn blue-border-btn" @click="fnModalInsert">
+          <button class="btn sm primary" @click="fnModalInsert">
             등록
           </button>
-        </div>
-        <div class="gd-2">
-          <button class="large-btn red-border-btn" @click="fnModalClose">
+          <button class="btn sm tertiary" @click="fnModalClose">
             취소
           </button>
-        </div>
       </template>
     </Modal>
-  </div>
 </template>
 
 <script>

 import Modal from "../../../../component/modal/Modal.vue";
 import ListTable from "../../../../component/table/ListTable.vue";
 import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 // RESOURCES
 import queryParams from "../../../../../resources/js/queryParams";

     Modal: Modal,
     ListTable: ListTable,
     PaginationButton: PaginationButton,
+    PagiNavigationBar: PagiNavigationBar
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/pages/adm/member/userManagement/UserManagementSelectListOne.vue

--- client/views/pages/adm/member/userManagement/UserManagementSelectListOne.vue

+++ client/views/pages/adm/member/userManagement/UserManagementSelectListOne.vue


 <template>
-  <div class="content admin-style">
-    <div class="admin-page-title point-font2 mb30">
-      <p>일반회원 관리</p>
-    </div>
-
-    <UserInfoView :pageId="pageId" />
-  </div>
+    <UserInfoView :pageId="pageId"  :pageTit="'일반회원 관리'"/>
 </template>
 
 <script>

b3a1d45

ddc4738

client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue

--- client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue

+++ client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue


 <template>
   <div class="content-zone">
     <div class="content">
-      <div class="section-title">
-        <p>공통코드관리</p>
-      </div>
+      <div class="title-zone">
+          <div class="section-title">
+            <p>공통코드관리</p>
+          </div>
+          <PagiNavigationBar />
+        </div>
       <div class="setting-box">
 
           <div class="node-zone">

 <script>
 import draggable from "vuedraggable";
 import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 import {
   findAll,
   findByCd,

   components: {
     draggable: draggable,
     Hierachy: Hierachy,
+    PagiNavigationBar: PagiNavigationBar,
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementInsert.vue

--- client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementInsert.vue

+++ client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementInsert.vue


   <div class="content-zone">
     <div class="content">
       <div class="scroll">
-        <div class="section-title">
-          <p>콘텐츠 유형 관리</p>
+        <div class="title-zone">
+          <div class="section-title">
+            <p>콘텐츠 유형 관리</p>
+          </div>
+          <PagiNavigationBar />
         </div>
         <div open class="form-box">
           <div class="form-box-title">

 import { findByContsType } from "../../../../../resources/api/contsType";
 import { updateProc } from "../../../../../resources/api/contsType";
 import validationParams from "../../../../../resources/js/validateParams";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 export default {
   mixins: [validationParams],
+  components: {
+    PagiNavigationBar: PagiNavigationBar,
+  },
   data() {
     return {
       pageId: this.$route.query.pageId, // 페이지 아이디

b3a1d45

ddc4738

client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue

--- client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue

+++ client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue


   <div class="content-zone">
     <div class="content">
       <div class="scroll">
-        <div class="section-title">
-          <p>콘텐츠 유형 관리</p>
+        <div class="title-zone">
+          <div class="section-title">
+            <p>콘텐츠 유형 관리</p>
+          </div>
+          <PagiNavigationBar />
         </div>
         <div class="search-bar">
             <input

 import { toRaw } from "vue";
 import queryParams from "../../../../../resources/js/queryParams";
 import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 // API
 import { findAll } from "../../../../../resources/api/contsType";

   components: {
     ListTable: ListTable,
     PaginationButton: PaginationButton,
+    PagiNavigationBar: PagiNavigationBar,
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectListOne.vue

--- client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectListOne.vue

+++ client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectListOne.vue


   <div class="content-zone">
     <div class="content">
       <div class="scroll">
-        <div class="section-title">
-      <p>콘텐츠 유형 관리</p>
-    </div>
+        <div class="title-zone">
+          <div class="section-title">
+            <p>콘텐츠 유형 관리</p>
+          </div>
+          <PagiNavigationBar />
+        </div>
     <div class="form-box">
         <div class="form-box-title">
           <p>기본정보</p>

   findByContsType,
   deleteProc,
 } from "../../../../../resources/api/contsType";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 export default {
   data() {

       contsTypeVO: {},
     };
   },
+  components: {
+    PagiNavigationBar: PagiNavigationBar,
+  },
   created() {
     this.fnViewDetail();
   },

b3a1d45

ddc4738

client/views/pages/adm/system/networkAccessControl/NetworkAccessControlInsert.vue

--- client/views/pages/adm/system/networkAccessControl/NetworkAccessControlInsert.vue

+++ client/views/pages/adm/system/networkAccessControl/NetworkAccessControlInsert.vue


     <div class="content-zone">
         <div class="content">
             <div class="scroll">
-                <div class="section-title">
-                    <p>IP접근제어</p>
+                <div class="title-zone">
+                    <div class="section-title">
+                        <p>IP접근제어</p>
+                    </div>
+                    <PagiNavigationBar />
                 </div>
                 <div class="form-box">
                     <div class="form-box-title">

 
 <script>
 import { findByAcces, save, update } from '../../../../../resources/api/accesCtrl'
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 export default {
     components: {
-
+        PagiNavigationBar: PagiNavigationBar,
     },
     data() {
         return {

b3a1d45

ddc4738

client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue

--- client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue

+++ client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue


   <div class="content-zone">
     <div class="content">
       <div class="scroll">
-        <div class="section-title">
-          <p>IP접근제어</p>
+        <div class="title-zone">
+          <div class="section-title">
+            <p>IP접근제어</p>
+          </div>
+          <PagiNavigationBar />
         </div>
         <div class="search-bar">
             <select

 import { toRaw } from "vue";
 import queryParams from "../../../../../resources/js/queryParams";
 import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 
 export default {
   mixins: [queryParams],
   components: {
     ListTable: ListTable,
     PaginationButton: PaginationButton,
+    PagiNavigationBar: PagiNavigationBar,
   },
   data() {
     return {

b3a1d45

ddc4738

client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectListOne.vue

--- client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectListOne.vue

+++ client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectListOne.vue


   <div class="content-zone">
     <div class="content">
       <div class="scroll">
-        <div class="section-title">
-          <p>IP접근제어</p>
+        <div class="title-zone">
+          <div class="section-title">
+            <p>IP접근제어</p>
+          </div>
+          <PagiNavigationBar />
         </div>
         <div open class="form-box">
           <div class="form-box-title">

 <script>
 import { findByAcces, del } from "../../../../../resources/api/accesCtrl";
 import queryParams from "../../../../../resources/js/queryParams";
+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
 export default {
   mixins: [queryParams],
-  components: {},
+  components: {
+    PagiNavigationBar: PagiNavigationBar,
+  },
   data() {
     return {
       // 페이지 권한 객체

b3a1d45

ddc4738

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


 <template>
   <div class="login-page page">
-    <div class="flex-column justify-center align-center content">
-      <div class="login-wrap pd30">
-        <div
-          :class="{
-            'login-title text-ct mb40': true,
-            'user-login': !isAdminPage,
-          }"
-        >
-          LOGIN
+      <div>
+        <div class="background-img">
+          <p>
+            콘텐츠 관리 시스템에 오신 것을 환영합니다.<br />
+            원활한 관리와 운영을 위해 로그인하세요.
+          </p>
         </div>
-        <div class="input-group mb20">
-          <label for="id" class="login-label">아이디</label>
-          <input
-            type="text"
-            name=""
-            id="id"
-            class="full-input login-input"
-            placeholder="아이디를 입력하세요"
-            v-model="member['lgnId']"
-          />
+        <div class="login-wrap">
+            <div class="login">
+              <div
+                :class="{
+                  'login-title': true,
+                  'user-login': !isAdminPage,
+                }"
+              >
+                LOGIN
+              </div>
+              <div class="form-group">
+                <label for="id" class="login-label">아이디</label>
+                <input
+                  type="text"
+                  name=""
+                  id="id"
+                  class="form-control md"
+                  placeholder="아이디를 입력하세요"
+                  v-model="member['lgnId']"
+                />
+              </div>
+              <div class="form-group">
+                <label for="pw" class="login-label">비밀번호</label>
+                <input
+                  type="password"
+                  name=""
+                  id="pw"
+                  class="form-control md"
+                  placeholder="비밀번호를 입력하세요"
+                  v-model="member['pswd']"
+                  @keyup.enter="fnLogin"
+                />
+              </div>
+              <div
+                class="input-group"
+                v-if="!isAdminPage"
+              >
+                <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
+                <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
+              </div>
+              <button
+                class="large-btn green-btn point-font fw-bold"
+                v-if="!isAdminPage"
+                @click="fnLogin"
+              >
+                로그인
+              </button>
+              <button
+                class="btn md primary"
+                v-else
+                @click="fnLogin"
+              >
+                로그인
+              </button>
+            </div>
         </div>
-        <div class="input-group mb20">
-          <label for="pw" class="login-label">비밀번호</label>
-          <input
-            type="password"
-            name=""
-            id="pw"
-            class="full-input login-input"
-            placeholder="비밀번호를 입력하세요"
-            v-model="member['pswd']"
-            @keyup.enter="fnLogin"
-          />
-        </div>
-        <div
-          class="find-zone flex justify-end align-center mb40"
-          v-if="!isAdminPage"
-        >
-          <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
-          <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
-        </div>
-        <button
-          class="large-btn green-btn point-font fw-bold"
-          v-if="!isAdminPage"
-          @click="fnLogin"
-        >
-          로그인
-        </button>
-        <button
-          class="large-btn darkg-btn point-font2 fw-bold"
-          v-else
-          @click="fnLogin"
-        >
-          로그인
-        </button>
       </div>
-    </div>
   </div>
 </template>
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	.content-wrap {
2	2	width: 100%;
3		- height: calc(100% - 48px);
	3	+ height: 100%;
4	4	padding: 3rem;
5	5
6	6
...	...	@@ -67,6 +67,7 @@
67	67	}
68	68	}
69	69
	70	+
70	71	.form-select {
71	72	width: 200px;
72	73	}
...	...	@@ -76,6 +77,8 @@
76	77	}
77	78
78	79	.form-group {
	80	+ width: calc(100% - 180px);
	81	+
79	82	.form-control {
80	83	max-width: 100%;
81	84	}
...	...	@@ -85,10 +88,12 @@
85	88	}
86	89	}
87	90	}
	91	+
88	92	>div:nth-child(1),
89	93	div:nth-child(2) {
90	94	padding-top: 0;
91	95	}
	96	+
92	97	>div:last-child {
93	98	grid-column: 1/3;
94	99	padding-bottom: 0;
...	...	@@ -97,22 +102,35 @@
97	102
98	103	// 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
99	104	&:has(> div:nth-child(even):last-child) {
100		- > div{
	105	+ >div {
101	106	padding-left: 3rem;
102	107	}
103		- > div:last-child {
	108	+
	109	+ >div:last-child {
104	110	grid-column: unset;
105	111	}
106		- > div:nth-last-child(2) {
	112	+
	113	+ >div:nth-last-child(2) {
107	114	border-bottom: 0;
108	115	}
109	116	}
110	117
111		- .check-area{
	118	+ .check-area {
112	119	@include flex-layout(flex, center);
113	120	gap: 3rem;
114	121	}
115	122
	123	+
	124	+ }
	125	+
	126	+
	127	+ .title-zone {
	128	+ @include flex-layout(flex, center, space-between);
	129	+ margin-bottom: 3rem;
	130	+
	131	+ .section-title {
	132	+ margin-bottom: 0;
	133	+ }
116	134	}
117	135
118	136	>.content-zone {
...	...	@@ -129,7 +147,6 @@
129	147	overflow-y: auto;
130	148
131	149	.top-zone {
132		-
133	150	>div {
134	151	margin-bottom: 5rem;
135	152
...	...	@@ -230,20 +247,23 @@
230	247	width: calc(100% - 325px - 5rem);
231	248	height: 100%;
232	249
233		- .form-content{
	250	+ .form-content {
234	251	padding: 0;
235		- >div{
	252	+
	253	+ >div {
236	254	padding: 1rem;
237	255	}
	256	+
238	257	>div:nth-child(2),
239	258	div:nth-child(4),
240		- div:nth-child(6){
	259	+ div:nth-child(6) {
241	260	padding-left: 3rem;
242	261	}
243		- >div:last-child{
	262	+
	263	+ >div:last-child {
244	264	align-items: flex-start;
245	265	}
246		-
	266	+
247	267	}
248	268	}
249	269
...	...	@@ -272,4 +292,10 @@
272	292	}
273	293
274	294
	295	+}
	296	+
	297	+.content-wrap.main {
	298	+ .content-zone {
	299	+ height: 100%;
	300	+ }
275	301	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,13 +1,13 @@
1	1	.admin-wrap {
2	2	background-color: #eaeff4;
3	3	display: grid;
4		- grid-template-columns: clamp(260px, 16vw, 450px) minmax(1020px, 1fr);
5		- grid-template-rows: auto minmax(860px, auto);
	4	+ grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
	5	+ grid-template-rows: auto minmax(864px, auto);
6	6	grid-template-areas:
7	7	"sidebar header "
8	8	"sidebar main ";
9	9	height: 100%;
10		- font-size: 1.8rem;
	10	+ // font-size: 1.8rem;
11	11
12	12
13	13	.admin-header {
...	...	@@ -39,49 +39,53 @@
39	39	overflow-y: auto;
40	40
41	41	.logo{
42		- padding: 5rem 3rem;
	42	+ padding: 1rem;
	43	+ font-size: var(--tk-fz-title-lg);
	44	+ font-weight: 700;
43	45	text-align: center;
44	46	}
45	47
46	48	.info-wrap {
47		- padding: 0 3rem;
	49	+ background-color: var(--tk-gray-10);
48	50
49	51	.info {
50		- padding: 1.5rem;
51		- background-color: var(--tk-gray-80);
52		- color: #ffffff;
53		- text-align: center;
54		- border-radius: var(--tk-rd-12);
55		-
56		- >p {
57		- margin-bottom: 1rem;
	52	+ @include flex-layout(flex, center, space-between);
	53	+ .info-name{
	54	+ padding: .8rem
58	55	}
59		-
60		- button {
61		- padding: 0 1rem;
62		- font-size: 1.4rem;
63		- }
64		-
65		- >button:nth-of-type(1) {
66		- border-right: 1px solid var(--tk-white);
	56	+ ul.info-btn{
	57	+ @include flex-layout(flex, center);
	58	+ li{
	59	+ @include flex-layout(flex, center, center);
	60	+ background-color: var(--tk-gray-20);
	61	+ padding: 1rem;
	62	+ border-left: 1px solid var(--tk-gray-30);
	63	+ }
67	64	}
68	65	}
69	66	}
70		-
71		- ul {
72		- padding: 5rem 0;
73		-
74		- li {
75		- cursor: pointer;
76		- padding: 1rem 2rem;
77		- }
78		-
79		- li.sub-active {
80		- background-color: var(--tk-primary);
81		- color: var(--tk-white);
	67	+ .menu-zone{
	68	+ p{
	69	+ font-size: var(--tk-fz-title-sm);
82	70	font-weight: 700;
	71	+ text-align: center;
	72	+ border-bottom: 3px solid var(--tk-gray-70);
	73	+ padding: 1rem;
	74	+ }
	75	+ ul.side-menu {
	76	+ li {
	77	+ cursor: pointer;
	78	+ padding: 1rem 2rem;
	79	+ }
	80	+
	81	+ li.sub-active {
	82	+ background-color: var(--tk-primary);
	83	+ color: var(--tk-white);
	84	+ font-weight: 700;
	85	+ }
83	86	}
84	87	}
	88	+
85	89
86	90	}
87	91

...	...	@@ -15,7 +15,7 @@
15	15	font-size: $font-size-root;
16	16	}
17	17	body {
18		- font-size: var(--#{$prefix}fz-body-md);
	18	+ font-size: var(--#{$prefix}fz-body-sm);
19	19	overflow-x: hidden;
20	20	}
21	21

...	...	@@ -5,7 +5,7 @@
5	5	align-items: center;
6	6	justify-content: center;
7	7	gap: 0.4rem;
8		- min-width: 120px;
	8	+ min-width: 100px;
9	9	width: auto;
10	10	height: var(--#{$prefix}btn-h-#{$size});
11	11	padding: 0 var(--#{$prefix}btn-px-#{$size});
...	...	@@ -254,6 +254,15 @@
254	254	&.ico-help {
255	255	background-image: url(#{$url}/component/common/ico_help_24.svg);
256	256	}
	257	+ &.ico-logout {
	258	+ background-image: url(#{$url}/component/common/ico_logout_16.svg);
	259	+ }
	260	+ &.ico-go {
	261	+ background-image: url(#{$url}/component/common/ico_go_20.svg);
	262	+ }
	263	+ &.ico-reset {
	264	+ background-image: url(#{$url}/component/common/ico_refresh_16.svg);
	265	+ }
257	266	&.ico-page-prev {
258	267	border-radius: 10rem;
259	268	border: 0.1rem solid var(--#{$prefix}gray-40);

...	...	@@ -59,8 +59,8 @@
59	59	position: relative;
60	60	z-index: 1020;
61	61	width: 84.6rem;
62		- height: calc(100% - $m * 2);
63		- min-height: calc(100% - $m * 2);
	62	+ height: calc(100% - var(--#{$prefix}spacer-20) * 2);
	63	+ min-height: calc(100% - var(--#{$prefix}spacer-20) * 2);
64	64	margin: $m auto;
65	65	.modal-content {
66	66	@include flex-layout($ai: center, $fd: column);

...	...	@@ -8,11 +8,24 @@
8	8	border: 1px solid var(--tk-gray-30);
9	9	border-radius: var(--tk-rd-10);
10	10	margin: 0 .5rem;
	11	+
	12	+ &.active{
	13	+ background-color: #1a7ed3;
	14	+ border: 1px solid #1a7ed3;
	15	+ color: var(--tk-white);
	16	+ }
	17	+
	18	+ &.prev{
	19	+ background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
	20	+ background-repeat: no-repeat;
	21	+ background-position: center;
	22	+ transform: scaleX(-1);
	23	+ }
	24	+ &.next{
	25	+ background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
	26	+ background-repeat: no-repeat;
	27	+ background-position: center;
	28	+ }
11	29	}
12	30
13		- a.active{
14		- background-color: #1a7ed3;
15		- border: 1px solid #1a7ed3;
16		- color: var(--tk-white);
17		- }
18	31	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -33,6 +33,9 @@
33	33	text-align: left;
34	34	}
35	35	}
	36	+ &.cursor{
	37	+ cursor: pointer;
	38	+ }
36	39	}
37	40	&.row {
38	41	border-top: 1px solid var(--#{$prefix}secondary-30);

...	...	@@ -1,16 +1,20 @@
1	1	<template>
2		- <div class="modal-wrapper" v-if="showModal">
3		- <div :class="['modal-container', className]">
4		- <div class="modal-title">
5		- <div class="flex justify-between align-center">
6		- <slot name="header"></slot>
	2	+ <div :class="['modal-back', { in: showModal }]">
	3	+ <div :class="['modal', { in: showModal, shown: showModal }]">
	4	+ <div class="modal-dialog">
	5	+ <div class="modal-content">
	6	+ <div class="modal-header">
	7	+ <div class="flex justify-between align-center">
	8	+ <slot name="header"></slot>
	9	+ </div>
	10	+ </div>
	11	+ <div class="modal-conts">
	12	+ <slot></slot>
	13	+ </div>
	14	+ <div class="modal-btn flex justify-end">
	15	+ <slot name="footer"></slot>
	16	+ </div>
7	17	</div>
8		- </div>
9		- <div class="modal-content-monthly">
10		- <slot></slot>
11		- </div>
12		- <div class="modal-end flex justify-end">
13		- <slot name="footer"></slot>
14	18	</div>
15	19	</div>
16	20	</div>

...	...	@@ -9,13 +9,11 @@
9	9	class="first-page"
10	10	@click="excute(1)"
11	11	title="첫 번째 페이지로 이동"
12		- v-show="pagination.existPrevPage"
13	12	></a>
14	13	<a
15	14	class="prev"
16	15	@click="excute(currentPage - 1)"
17	16	title="이전 페이지로 이동"
18		- v-show="currentPage != 1"
19	17	></a>
20	18	<a
21	19	@click="excute(i)"
...	...	@@ -28,13 +26,11 @@
28	26	class="next"
29	27	@click="excute(currentPage + 1)"
30	28	title="다음 페이지로 이동"
31		- v-show="currentPage != pagination.totalPageCount"
32	29	></a>
33	30	<a
34	31	class="end-page"
35	32	@click="excute(pagination.totalPageCount)"
36	33	title="마지막 페이지로 이동"
37		- v-show="pagination.existNextPage"
38	34	></a>
39	35	</div>
40	36	</div>

...	...	@@ -1,354 +1,301 @@
1	1	<template>
2		- <details open class="form-table-style mb30">
3		- <summary class="point-font2">
4		- <p class="summary-style pl10">기본정보</p>
5		- </summary>
6		- <div class="pt10 pb10">
7		- <table class="form-table">
8		- <colgroup>
9		- <col width="50%" />
10		- <col width="50%" />
11		- </colgroup>
12		- <tr>
13		- <td>
14		- <div class="gd-12 pl0">
15		- <label for="" class="form-title point-font2 mb10">아이디</label>
16		- <input
17		- type="text"
18		- class="full-input"
19		- v-model="mbrVO.lgnId"
20		- ref="mbrId"
21		- minlength="5"
22		- maxlength="50"
23		- placeholder="아이디를 입력하세요."
24		- :disabled="mbrVO.mbrId != null"
25		- />
26		- </div>
27		- </td>
28		- <td>
29		- <div class="gd-12 pr0">
30		- <label for="" class="form-title point-font2 mb10">이름</label>
31		- <input
32		- type="text"
33		- class="full-input"
34		- ref="mbrNm"
35		- v-model="mbrVO.mbrNm"
36		- minlength="2"
37		- maxlength="50"
38		- placeholder="이름을 입력하세요."
39		- />
40		- </div>
41		- </td>
42		- </tr>
43		- <tr>
44		- <td>
45		- <div class="gd-12 pl0">
46		- <label for="" class="form-title point-font2 mb10">
47		- <span v-if="pageId == null">비밀번호</span>
48		- <span v-else>비밀번호변경</span>
49		- </label>
50		- <span
51		- :class="{
52		- 'inline-block ml20': true,
53		- 'red-text': pswd.errorPwd,
54		- }"
55		- >
56		- 영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
57		- </span>
58		- <input
59		- type="password"
60		- class="full-input"
61		- ref="newPswd"
62		- v-model="pswd.newPswd"
63		- minlength="9"
64		- placeholder="영문, 숫자, 특수문자 조합 9자 이상"
65		- />
66		- </div>
67		- </td>
68		- <td>
69		- <div class="gd-12 pr0">
70		- <label for="" class="form-title point-font2 mb10">
71		- <span v-if="pageId == null">비밀번호확인</span>
72		- <span v-else>비밀번호변경 확인</span>
73		- </label>
74		- <input
75		- type="password"
76		- :class="{ 'full-input': true, 'err-border': pswd.pswdChk }"
77		- ref="newPswdChk"
78		- v-model="pswd.newPswdChk"
79		- minlength="9"
80		- :placeholder="
81		- pageId == null
82		- ? '비밀번호 확인을 입력하세요.'
83		- : '변경할 비밀번호 확인을 입력하세요'
84		- "
85		- />
86		- </div>
87		- </td>
88		- </tr>
89		- <tr v-if="showOpt.isMblNo \|\| showOpt.isTelNo">
90		- <td>
91		- <div v-if="showOpt.isMblNo" class="gd-12 pl0">
92		- <label for="" class="form-title point-font2 mb10">
93		- 휴대폰번호
94		- </label>
95		- <input
96		- type="text"
97		- class="full-input"
98		- ref="mblTelno"
99		- v-model="mbrVO.mblTelno"
100		- minlength="10"
101		- maxlength="11"
102		- oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
103		- placeholder="휴대폰번호를 입력하세요."
104		- />
105		- </div>
106		- </td>
107		- <td>
108		- <div v-if="showOpt.isTelNo" class="gd-12 pr0">
109		- <label for="" class="point-font2 mb10">전화번호</label>
110		- <input
111		- type="text"
112		- class="full-input"
113		- ref="telno"
114		- v-model="mbrVO.telno"
115		- oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
116		- placeholder="전화번호를 입력하세요."
117		- />
118		- </div>
119		- </td>
120		- </tr>
121		- <tr v-if="showOpt.isEml \|\| showOpt.isSmsAgree \|\| showOpt.isEmlAgree">
122		- <td>
123		- <div v-if="showOpt.isEml" class="gd-12 pl0">
124		- <label for="" class="form-title point-font2 mb10">이메일</label>
125		- <div class="flex align-center">
126		- <div class="gd-3 pl0">
	2	+ <div class="content-zone">
	3	+ <div class="content">
	4	+ <div class="scroll">
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>{{pageTit}}</p>
	8	+ </div>
	9	+ <PagiNavigationBar />
	10	+ </div>
	11	+ <div class="form-box">
	12	+ <div class="form-box-title">
	13	+ <p>기본정보</p>
	14	+ </div>
	15	+ <div class="form-content">
	16	+ <div>
	17	+ <label class="form-title">아이디</label>
	18	+ <input
	19	+ type="text"
	20	+ class="form-control sm"
	21	+ v-model="mbrVO.lgnId"
	22	+ ref="mbrId"
	23	+ minlength="5"
	24	+ maxlength="50"
	25	+ placeholder="아이디를 입력하세요."
	26	+ :disabled="mbrVO.mbrId != null"
	27	+ />
	28	+ </div>
	29	+ <div>
	30	+ <label class="form-title">이름</label>
	31	+ <input
	32	+ type="text"
	33	+ class="form-control sm"
	34	+ ref="mbrNm"
	35	+ v-model="mbrVO.mbrNm"
	36	+ minlength="2"
	37	+ maxlength="50"
	38	+ placeholder="이름을 입력하세요."
	39	+ />
	40	+ </div>
	41	+ <div>
	42	+ <label class="form-title">
	43	+ <p v-if="pageId == null">비밀번호</p>
	44	+ <p v-else>비밀번호변경</p>
	45	+ </label>
	46	+ <div class="form-group">
127	47	<input
128		- type="text"
129		- class="full-input"
130		- ref="emailId"
131		- v-model="email.id"
132		- oninput="this.value =
133		- this.value.replace(/[ㄱ-ㅎ\|ㅏ-ㅣ\|가-힣]/g, '');"
134		- placeholder="이메일을 입력하세요."
	48	+ type="password"
	49	+ class="form-control sm"
	50	+ ref="newPswd"
	51	+ v-model="pswd.newPswd"
	52	+ minlength="9"
	53	+ placeholder="영문, 숫자, 특수문자 조합 9자 이상"
135	54	/>
136		- </div>
137		- <div>@</div>
138		- <div class="gd-3">
139		- <select
140		- class="full-select"
141		- ref="emailSelect"
142		- v-model="email.select"
	55	+ <span
	56	+ :class="{
	57	+ 'red-text': pswd.errorPwd,
	58	+ }"
143	59	>
144		- <option value="">선택하세요</option>
145		- <option value="self">직접입력</option>
146		- <option value="naver.com">naver.com</option>
147		- <option value="google.com">google.com</option>
148		- <option value="hanmail.net">hanmail.net</option>
149		- <option value="nate.com">nate.com</option>
150		- <option value="kakao.com">kakao.com</option>
151		- </select>
	60	+ 영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
	61	+ </span>
152	62	</div>
153		- <div class="gd-3" v-show="email.select == 'self'">
	63	+ </div>
	64	+ <div>
	65	+ <label class="form-title">
	66	+ <p v-if="pageId == null">비밀번호확인</p>
	67	+ <p v-else>비밀번호변경 확인</p>
	68	+ </label>
	69	+ <input
	70	+ type="password"
	71	+ :class="{ 'form-control sm': true, 'error': pswd.pswdChk }"
	72	+ ref="newPswdChk"
	73	+ v-model="pswd.newPswdChk"
	74	+ minlength="9"
	75	+ :placeholder="
	76	+ pageId == null
	77	+ ? '비밀번호 확인을 입력하세요.'
	78	+ : '변경할 비밀번호 확인을 입력하세요'
	79	+ "
	80	+ />
	81	+ </div>
	82	+ <template v-if="showOpt.isMblNo \|\| showOpt.isTelNo">
	83	+ <div v-if="showOpt.isMblNo">
	84	+ <label class="form-title">휴대폰번호</label>
154	85	<input
155	86	type="text"
156		- class="full-input"
157		- ref="emailAddress"
158		- v-model="email.address"
	87	+ class="form-control sm"
	88	+ ref="mblTelno"
	89	+ v-model="mbrVO.mblTelno"
	90	+ minlength="10"
	91	+ maxlength="11"
	92	+ oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
	93	+ placeholder="휴대폰번호를 입력하세요."
159	94	/>
160	95	</div>
161		- </div>
162		- </div>
163		- </td>
164		- <td>
165		- <div class="gd-12 pr0">
166		- <div class="flex">
167		- <div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
168		- <label for="" class="form-title point-font2 mb10">
169		- 문자수신
170		- </label>
171		- <div class="flex align-center no-gutters">
172		- <div class="gd-4">
173		- <input
174		- type="radio"
175		- name="smsRcptnAgreYn"
176		- id="smsY"
177		- class="mr5"
178		- v-model="mbrVO.smsRcptnAgreYn"
179		- value="Y"
180		- />
181		- <label for="smsY">수신</label>
182		- </div>
183		- <div class="gd-4">
184		- <input
185		- type="radio"
186		- name="smsRcptnAgreYn"
187		- id="smsN"
188		- class="mr5"
189		- v-model="mbrVO.smsRcptnAgreYn"
190		- value="N"
191		- />
192		- <label for="smsN">미수신</label>
193		- </div>
194		- </div>
195		- </div>
196		- <div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
197		- <label for="" class="form-title point-font2 mb10">
198		- 이메일수신
199		- </label>
200		- <div class="flex align-center no-gutters">
201		- <div class="gd-4">
202		- <input
203		- type="radio"
204		- name="emlRcptnAgreYn"
205		- id="y"
206		- class="mr5"
207		- v-model="mbrVO.emlRcptnAgreYn"
208		- value="Y"
209		- />
210		- <label for="y">수신</label>
211		- </div>
212		- <div class="gd-4">
213		- <input
214		- type="radio"
215		- name="emlRcptnAgreYn"
216		- id="n"
217		- class="mr5"
218		- v-model="mbrVO.emlRcptnAgreYn"
219		- value="N"
220		- />
221		- <label for="n">미수신</label>
222		- </div>
223		- </div>
224		- </div>
225		- </div>
226		- </div>
227		- </td>
228		- </tr>
229		- <template v-if="showOpt.isAddr">
230		- <tr>
231		- <td>
232		- <div class="gd-12 pl0">
233		- <label for="" class="form-title point-font2 mb10">
234		- 우편번호
235		- </label>
236		- <div class="flex align-center">
237		- <div class="gd-10 pl0">
238		- <input
239		- type="text"
240		- class="full-input"
241		- v-model="mbrVO.zip"
242		- readonly
243		- />
244		- </div>
245		- <div class="gd-2 pr0">
246		- <button
247		- :class="{
248		- 'large-btn': true,
249		- 'blue-border-btn': pageRole == 'adm',
250		- 'green-border-btn': pageRole == 'portal',
251		- }"
252		- @click="fnZipSearch"
253		- >
254		- 찾기
255		- </button>
256		- </div>
257		- </div>
258		- </div>
259		- </td>
260		- <td>
261		- <div class="gd-12 pr0">
262		- <label for="" class="form-title point-font2 mb10">주소</label>
	96	+ </template>
	97	+ <div v-if="showOpt.isTelNo">
	98	+ <label class="form-title">전화번호</label>
263	99	<input
264	100	type="text"
265		- class="full-input"
266		- v-model="mbrVO.addr"
267		- readonly
	101	+ class="form-control sm"
	102	+ ref="telno"
	103	+ v-model="mbrVO.telno"
	104	+ oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
	105	+ placeholder="전화번호를 입력하세요."
268	106	/>
269	107	</div>
270		- </td>
271		- </tr>
272		- <tr>
273		- <td colspan="2">
274		- <div class="gd-12 pl0 pr0">
275		- <label for="" class="form-title point-font2 mb10">
276		- 상세주소
277		- </label>
278		- <input
279		- type="text"
280		- class="full-input"
281		- ref="daddr"
282		- v-model="mbrVO.daddr"
283		- placeholder="상세주소를 입력하세요."
284		- />
285		- </div>
286		- </td>
287		- </tr>
288		- </template>
289		- <tr v-if="showOpt.isStts && pageRole == 'adm'">
290		- <td>
291		- <div class="flex gd-12 pl0">
292		- <div class="gd-6 pl0">
293		- <label for="" class="form-title point-font2 mb10">
294		- 회원상태
295		- </label>
296		- <select class="full-select" v-model="mbrVO.mbrStts">
297		- <option value="1">승인</option>
298		- <option value="2">승인대기</option>
299		- <option value="0">탈퇴</option>
300		- <option value="3">차단</option>
301		- </select>
302		- </div>
303		- <div class="gd-6 pr0">
304		- <label for="" class="point-font2 mb10">차단일</label>
305		- <input
306		- type="date"
307		- class="full-input"
308		- ref="cntrlDt"
309		- v-model="mbrVO.cntrlDt"
310		- />
311		- </div>
312		- </div>
313		- </td>
314		- <td>
315		- <div class="gd-12 pr0">
316		- <label for="" class="point-font2 mb10">차단 사유</label>
317		- <input
318		- type="text"
319		- class="full-input"
320		- ref="cntrlRsn"
321		- v-model="mbrVO.cntrlRsn"
322		- placeholder="차단 사유를 입력하세요."
323		- />
324		- </div>
325		- </td>
326		- </tr>
327		- <tr v-if="showOpt.isAuthor && pageRole == 'adm'">
328		- <td colspan="2">
329		- <UserAuthorList :mbrVO="mbrVO" />
330		- </td>
331		- </tr>
332		- </table>
333		- </div>
334		- </details>
	108	+ <template v-if="showOpt.isEml \|\| showOpt.isSmsAgree \|\| showOpt.isEmlAgree">
	109	+ <div v-if="showOpt.isEml" >
	110	+ <label class="form-title">이메일</label>
	111	+ <div class="check-area">
	112	+ <input
	113	+ type="text"
	114	+ class="form-control sm"
	115	+ ref="emailId"
	116	+ v-model="email.id"
	117	+ oninput="this.value =
	118	+ this.value.replace(/[ㄱ-ㅎ\|ㅏ-ㅣ\|가-힣]/g, '');"
	119	+ placeholder="이메일을 입력하세요."
	120	+ />
	121	+ <div>@</div>
	122	+ <template v-if="email.select == 'self'">
	123	+ <input
	124	+ type="text"
	125	+ class="form-control sm"
	126	+ ref="emailAddress"
	127	+ v-model="email.address"
	128	+ />
	129	+ </template>
	130	+ <select
	131	+ class="form-select sm"
	132	+ ref="emailSelect"
	133	+ v-model="email.select"
	134	+ >
	135	+ <option value="">선택하세요</option>
	136	+ <option value="self">직접입력</option>
	137	+ <option value="naver.com">naver.com</option>
	138	+ <option value="google.com">google.com</option>
	139	+ <option value="hanmail.net">hanmail.net</option>
	140	+ <option value="nate.com">nate.com</option>
	141	+ <option value="kakao.com">kakao.com</option>
	142	+ </select>
	143	+ </div>
	144	+ </div>
	145	+ <div v-if="showOpt.isSmsAgree">
	146	+ <label class="form-title">
	147	+ 문자수신
	148	+ </label>
	149	+ <div class="check-area">
	150	+ <div class="form-check">
	151	+ <input
	152	+ type="radio"
	153	+ name="smsRcptnAgreYn"
	154	+ id="smsY"
	155	+ class="mr5"
	156	+ v-model="mbrVO.smsRcptnAgreYn"
	157	+ value="Y"
	158	+ />
	159	+ <label for="smsY">수신</label>
	160	+ </div>
	161	+ <div class="form-check">
	162	+ <input
	163	+ type="radio"
	164	+ name="smsRcptnAgreYn"
	165	+ id="smsN"
	166	+ class="mr5"
	167	+ v-model="mbrVO.smsRcptnAgreYn"
	168	+ value="N"
	169	+ />
	170	+ <label for="smsN">미수신</label>
	171	+ </div>
	172	+ </div>
	173	+ </div>
	174	+ <div v-if="showOpt.isEmlAgree">
	175	+ <label class="form-title">
	176	+ 이메일수신
	177	+ </label>
	178	+ <div class="check-area">
	179	+ <div class="form-check">
	180	+ <input
	181	+ type="radio"
	182	+ name="emlRcptnAgreYn"
	183	+ id="y"
	184	+ class="mr5"
	185	+ v-model="mbrVO.emlRcptnAgreYn"
	186	+ value="Y"
	187	+ />
	188	+ <label for="y">수신</label>
	189	+ </div>
	190	+ <div class="form-check">
	191	+ <input
	192	+ type="radio"
	193	+ name="emlRcptnAgreYn"
	194	+ id="n"
	195	+ class="mr5"
	196	+ v-model="mbrVO.emlRcptnAgreYn"
	197	+ value="N"
	198	+ />
	199	+ <label for="n">미수신</label>
	200	+ </div>
	201	+ </div>
	202	+ </div>
	203	+ </template>
	204	+ <template v-if="showOpt.isAddr">
	205	+ <div>
	206	+ <label class="form-title">우편번호</label>
	207	+ <input
	208	+ type="text"
	209	+ class="form-control sm"
	210	+ v-model="mbrVO.zip"
	211	+ readonly
	212	+ />
335	213
336		- <div class="flex justify-end align-center no-gutters">
337		- <div class="gd-1 mr10">
	214	+ <button
	215	+ :class="{
	216	+ 'large-btn': true,
	217	+ 'blue-border-btn': pageRole == 'adm',
	218	+ 'green-border-btn': pageRole == 'portal',
	219	+ }"
	220	+ @click="fnZipSearch"
	221	+ >
	222	+ 찾기
	223	+ </button>
	224	+ </div>
	225	+ <div>
	226	+ <label class="form-title">주소</label>
	227	+ <input
	228	+ type="text"
	229	+ class="form-control sm"
	230	+ v-model="mbrVO.addr"
	231	+ readonly
	232	+ />
	233	+ </div>
	234	+ <div>
	235	+ <label class="form-title">
	236	+ 상세주소
	237	+ </label>
	238	+ <input
	239	+ type="text"
	240	+ class="form-control sm"
	241	+ ref="daddr"
	242	+ v-model="mbrVO.daddr"
	243	+ placeholder="상세주소를 입력하세요."
	244	+ />
	245	+ </div>
	246	+ </template>
	247	+ <template v-if="showOpt.isStts && pageRole == 'adm'">
	248	+ <div>
	249	+ <label class="form-title">회원상태</label>
	250	+ <select class="form-select sm" v-model="mbrVO.mbrStts">
	251	+ <option value="1">승인</option>
	252	+ <option value="2">승인대기</option>
	253	+ <option value="0">탈퇴</option>
	254	+ <option value="3">차단</option>
	255	+ </select>
	256	+ </div>
	257	+ <div >
	258	+ <label class="form-title">차단일</label>
	259	+ <input
	260	+ type="date"
	261	+ class="form-control sm"
	262	+ ref="cntrlDt"
	263	+ v-model="mbrVO.cntrlDt"
	264	+ />
	265	+ </div>
	266	+ </template>
	267	+ <div>
	268	+ <label class="form-title">차단 사유</label>
	269	+ <input
	270	+ type="text"
	271	+ class="form-control sm"
	272	+ ref="cntrlRsn"
	273	+ v-model="mbrVO.cntrlRsn"
	274	+ placeholder="차단 사유를 입력하세요."
	275	+ />
	276	+ </div>
	277	+ <div v-if="showOpt.isAuthor && pageRole == 'adm'">
	278	+ <UserAuthorList :mbrVO="mbrVO" />
	279	+ </div>
	280	+ </div>
	281	+ </div>
	282	+ </div>
	283	+ </div>
	284	+ </div>
	285	+
	286	+
	287	+ <div class="btn-wrap">
338	288	<button
339	289	:class="{
340		- 'large-btn': true,
341		- 'blue-btn': pageRole == 'adm',
342		- 'green-btn': pageRole == 'portal',
	290	+ 'btn sm primary': true,
	291	+ // 'blue-btn': pageRole == 'adm',
	292	+ // 'green-btn': pageRole == 'portal',
343	293	}"
344	294	@click="fnUpsert"
345	295	>
346	296	{{ pageId == null ? "등록" : "수정" }}
347	297	</button>
348		- </div>
349		- <div class="gd-1">
350		- <button class="large-btn gray-btn" @click="fnCancel">취소</button>
351		- </div>
	298	+ <button class="btn sm tertiary" @click="fnCancel">취소</button>
352	299	</div>
353	300	</template>
354	301
...	...	@@ -359,6 +306,7 @@
359	306	defaultUserInfoParams,
360	307	} from "../../../resources/js/defaultUserInfoParams";
361	308	import validateParams from "../../../resources/js/validateParams";
	309	+import PagiNavigationBar from "../paginavigationbar/PagiNavigationBar.vue";
362	310
363	311	// COMPONENT
364	312	import UserAuthorList from "./UserAuthorList.vue";
...	...	@@ -372,7 +320,7 @@
372	320
373	321	export default {
374	322	mixins: [validateParams],
375		- components: { UserAuthorList },
	323	+ components: { UserAuthorList,PagiNavigationBar },
376	324	props: {
377	325	pageId: {
378	326	type: String,
...	...	@@ -381,6 +329,10 @@
381	329	type: String,
382	330	default: "user",
383	331	},
	332	+ pageTit: {
	333	+ type: String,
	334	+ required: true,
	335	+ },
384	336	},
385	337	data() {
386	338	return {

...	...	@@ -1,282 +1,253 @@
1	1	<template>
2		- <details open class="form-table-style mb30">
3		- <summary class="point-font2">
4		- <p class="summary-style pl10">기본정보</p>
5		- </summary>
6		- <div class="pt10 pb10">
7		- <table class="form-table">
8		- <colgroup>
9		- <col width="50%" />
10		- <col width="50%" />
11		- </colgroup>
12		- <tr>
13		- <td>
14		- <div class="gd-12 pl0">
15		- <label for="" class="form-title point-font2 mb10">아이디</label>
16		- <input
17		- type="text"
18		- class="full-input"
19		- v-model="mbrVO.lgnId"
20		- disabled
21		- />
	2	+ <div class="content-zone">
	3	+ <div class="content">
	4	+ <div class="scroll">
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>{{pageTit}}</p>
22	8	</div>
23		- </td>
24		- <td>
25		- <div class="gd-12 pr0">
26		- <label for="" class="form-title point-font2 mb10">이름</label>
27		- <input
28		- type="text"
29		- class="full-input"
30		- v-model="mbrVO.mbrNm"
31		- disabled
32		- />
33		- </div>
34		- </td>
35		- </tr>
36		- <tr v-if="showOpt.isMblNo \|\| showOpt.isTelNo">
37		- <td>
38		- <div v-if="showOpt.isMblNo" class="gd-12 pl0">
39		- <label for="" class="form-title point-font2 mb10">
40		- 휴대폰번호
41		- </label>
42		- <input
43		- type="text"
44		- class="full-input"
45		- v-model="mbrVO.mblTelno"
46		- disabled
47		- />
48		- </div>
49		- </td>
50		- <td>
51		- <div v-if="showOpt.isTelNo" class="gd-12 pr0">
52		- <label for="" class="point-font2 mb10">전화번호</label>
53		- <input
54		- type="text"
55		- class="full-input"
56		- v-model="mbrVO.telno"
57		- disabled
58		- />
59		- </div>
60		- </td>
61		- </tr>
62		- <tr v-if="showOpt.isEml \|\| showOpt.isSmsAgree \|\| showOpt.isEmlAgree">
63		- <td>
64		- <div v-if="showOpt.isEml" class="gd-12 pl0">
65		- <label for="" class="form-title point-font2 mb10">이메일</label>
66		- <div class="flex align-center">
67		- <div class="gd-3 pl0">
68		- <input
69		- type="text"
70		- class="full-input"
71		- v-model="email.id"
72		- disabled
73		- />
74		- </div>
75		- <div>@</div>
76		- <div class="gd-3">
77		- <select class="full-select" v-model="email.select" disabled>
78		- <option value="">선택하세요</option>
79		- <option value="self">직접입력</option>
80		- <option value="naver.com">naver.com</option>
81		- <option value="google.com">google.com</option>
82		- <option value="hanmail.net">hanmail.net</option>
83		- <option value="nate.com">nate.com</option>
84		- <option value="kakao.com">kakao.com</option>
85		- </select>
86		- </div>
87		- <div class="gd-3" v-show="email.select == 'self'">
88		- <input
89		- type="text"
90		- class="full-input"
91		- v-model="email.address"
92		- disabled
93		- />
94		- </div>
	9	+ <PagiNavigationBar />
	10	+ </div>
	11	+ <div class="form-box">
	12	+ <div class="form-box-title">
	13	+ <p>기본정보</p>
95	14	</div>
96		- </div>
97		- </td>
98		- <td>
99		- <div class="gd-12 pr0">
100		- <div class="flex">
101		- <div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
102		- <label for="" class="form-title point-font2 mb10">
103		- 문자수신
104		- </label>
105		- <div class="flex align-center no-gutters">
106		- <div class="gd-4">
107		- <input
108		- type="radio"
109		- name="smsRcptnAgreYn"
110		- id="smsY"
111		- class="mr5"
112		- v-model="mbrVO.smsRcptnAgreYn"
113		- value="Y"
114		- disabled
115		- />
116		- <label for="smsY">수신</label>
117		- </div>
118		- <div class="gd-4">
119		- <input
120		- type="radio"
121		- name="smsRcptnAgreYn"
122		- id="smsN"
123		- class="mr5"
124		- v-model="mbrVO.smsRcptnAgreYn"
125		- value="N"
126		- disabled
127		- />
128		- <label for="smsN">미수신</label>
129		- </div>
130		- </div>
	15	+ <div class="form-content">
	16	+ <div>
	17	+ <label class="form-title">아이디</label>
	18	+ <p>{{ mbrVO.lgnId }}</p>
	19	+ <!-- <input
	20	+ type="text"
	21	+ class="form-control sm"
	22	+ v-model="mbrVO.lgnId"
	23	+ disabled
	24	+ /> -->
131	25	</div>
132		- <div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
133		- <label for="" class="form-title point-font2 mb10">
134		- 이메일수신
135		- </label>
136		- <div class="flex align-center no-gutters">
137		- <div class="gd-4">
138		- <input
139		- type="radio"
140		- name="emlRcptnAgreYn"
141		- id="y"
142		- class="mr5"
143		- v-model="mbrVO.emlRcptnAgreYn"
144		- value="Y"
145		- disabled
146		- />
147		- <label for="y">수신</label>
148		- </div>
149		- <div class="gd-4">
150		- <input
151		- type="radio"
152		- name="emlRcptnAgreYn"
153		- id="n"
154		- class="mr5"
155		- v-model="mbrVO.emlRcptnAgreYn"
156		- value="N"
157		- disabled
158		- />
159		- <label for="n">미수신</label>
160		- </div>
161		- </div>
	26	+ <div>
	27	+ <label class="form-title">이름</label>
	28	+ <p>{{ mbrVO.mbrNm }}</p>
	29	+ <!-- <input
	30	+ type="text"
	31	+ class="form-control sm"
	32	+ v-model="mbrVO.mbrNm"
	33	+ disabled
	34	+ /> -->
162	35	</div>
163		- </div>
164		- </div>
165		- </td>
166		- </tr>
167		- <template v-if="showOpt.isAddr">
168		- <tr>
169		- <td>
170		- <div class="gd-12 pl0">
171		- <label for="" class="form-title point-font2 mb10">
172		- 우편번호
173		- </label>
174		- <div class="flex align-center">
175		- <div class="gd-10 pl0 pr0">
176		- <input
	36	+ <template v-if="showOpt.isMblNo \|\| showOpt.isTelNo">
	37	+ <div v-if="showOpt.isMblNo">
	38	+ <label for="" class="form-title">
	39	+ 휴대폰번호
	40	+ </label>
	41	+ <p>{{ mbrVO.mblTelno }}</p>
	42	+ <!-- <input
177	43	type="text"
178		- class="full-input"
179		- v-model="mbrVO.zip"
	44	+ class="form-control sm"
	45	+ v-model="mbrVO.mblTelno"
180	46	disabled
181		- />
	47	+ /> -->
182	48	</div>
183		- </div>
184		- </div>
185		- </td>
186		- <td>
187		- <div class="gd-12 pr0">
188		- <label for="" class="form-title point-font2 mb10">주소</label>
189		- <input
190		- type="text"
191		- class="full-input"
192		- v-model="mbrVO.addr"
193		- disabled
194		- />
195		- </div>
196		- </td>
197		- </tr>
198		- <tr>
199		- <td colspan="2">
200		- <div class="gd-12 pl0 pr0">
201		- <label for="" class="form-title point-font2 mb10">
202		- 상세주소
203		- </label>
204		- <input
205		- type="text"
206		- class="full-input"
207		- v-model="mbrVO.daddr"
208		- disabled
209		- />
210		- </div>
211		- </td>
212		- </tr>
213		- </template>
214		- <tr v-if="showOpt.isStts && pageRole == 'adm'">
215		- <td>
216		- <div class="flex gd-12 pl0">
217		- <div class="gd-6 pl0">
218		- <label for="" class="form-title point-font2 mb10">
219		- 회원상태
220		- </label>
221		- <select class="full-select" v-model="mbrVO.mbrStts" disabled>
222		- <option value="1">승인</option>
223		- <option value="2">승인대기</option>
224		- <option value="0">탈퇴</option>
225		- <option value="3">차단</option>
226		- </select>
227		- </div>
228		- <div class="gd-6 pr0">
229		- <label for="" class="point-font2 mb10">차단일</label>
230		- <input
231		- type="date"
232		- class="full-input"
233		- v-model="mbrVO.cntrlDt"
234		- disabled
235		- />
236		- </div>
237		- </div>
238		- </td>
239		- <td>
240		- <div class="gd-12 pr0">
241		- <label for="" class="point-font2 mb10">차단 사유</label>
242		- <input
243		- type="text"
244		- class="full-input"
245		- v-model="mbrVO.cntrlRsn"
246		- disabled
247		- />
248		- </div>
249		- </td>
250		- </tr>
251		- <tr v-if="showOpt.isAuthor && pageRole == 'adm'">
252		- <td colspan="2">
253		- <UserAuthorList :mbrVO="mbrVO" editMode="view" />
254		- </td>
255		- </tr>
256		- </table>
257		- </div>
258		- </details>
	49	+ <div v-if="showOpt.isTelNo">
	50	+ <label class="form-title">전화번호</label>
	51	+ <p>{{ mbrVO.telno }}</p>
	52	+ <!-- <input
	53	+ type="text"
	54	+ class="form-control sm"
	55	+ v-model="mbrVO.telno"
	56	+ disabled
	57	+ /> -->
	58	+ </div>
	59	+ </template>
	60	+ <template v-if="showOpt.isEml \|\| showOpt.isSmsAgree \|\| showOpt.isEmlAgree">
	61	+ <div v-if="showOpt.isEml">
	62	+ <label for="" class="form-title point-font2 mb10">이메일</label>
	63	+ <div class="check-area">
	64	+ <p>{{ email.address ? email.id + '@' + email.address : email.id + '@' + email.select }}</p>
	65	+ <!-- <input
	66	+ type="text"
	67	+ class="form-control sm"
	68	+ v-model="email.id"
	69	+ disabled
	70	+ />
	71	+ <div>@</div>
	72	+ <div v-show="email.select == 'self'">
	73	+ <input
	74	+ type="text"
	75	+ class="form-control sm"
	76	+ v-model="email.address"
	77	+ disabled
	78	+ />
	79	+ </div>
	80	+ <select class="form-select sm" v-model="email.select" disabled>
	81	+ <option value="">선택하세요</option>
	82	+ <option value="self">직접입력</option>
	83	+ <option value="naver.com">naver.com</option>
	84	+ <option value="google.com">google.com</option>
	85	+ <option value="hanmail.net">hanmail.net</option>
	86	+ <option value="nate.com">nate.com</option>
	87	+ <option value="kakao.com">kakao.com</option>
	88	+ </select> -->
	89	+ </div>
	90	+ </div>
	91	+
	92	+ <div v-if="showOpt.isSmsAgree">
	93	+ <label class="form-title">
	94	+ 문자수신
	95	+ </label>
	96	+ <p>{{ mbrVO.smsRcptnAgreYn }}</p>
	97	+ <!-- <div class="check-area">
	98	+ <div class="form-check">
	99	+ <input
	100	+ type="radio"
	101	+ name="smsRcptnAgreYn"
	102	+ id="smsY"
	103	+ class="mr5"
	104	+ v-model="mbrVO.smsRcptnAgreYn"
	105	+ value="Y"
	106	+ disabled
	107	+ />
	108	+ <label for="smsY">수신</label>
	109	+ </div>
	110	+ <div class="form-check">
	111	+ <input
	112	+ type="radio"
	113	+ name="smsRcptnAgreYn"
	114	+ id="smsN"
	115	+ class="mr5"
	116	+ v-model="mbrVO.smsRcptnAgreYn"
	117	+ value="N"
	118	+ disabled
	119	+ />
	120	+ <label for="smsN">미수신</label>
	121	+ </div>
	122	+ </div> -->
	123	+ </div>
259	124
260		- <div class="flex justify-end align-center no-gutters">
261		- <div v-if="pageRole == 'adm'" class="gd-1 mr10">
262		- <button class="large-btn gray-border-btn" @click="fnList">목록</button>
	125	+ <div v-if="showOpt.isEmlAgree">
	126	+ <label class="form-title">
	127	+ 이메일수신
	128	+ </label>
	129	+ <p>{{ mbrVO.emlRcptnAgreYn }}</p>
	130	+ <!-- <div class="check-area">
	131	+ <div class="form-check">
	132	+ <input
	133	+ type="radio"
	134	+ name="emlRcptnAgreYn"
	135	+ id="y"
	136	+ class="mr5"
	137	+ v-model="mbrVO.emlRcptnAgreYn"
	138	+ value="Y"
	139	+ disabled
	140	+ />
	141	+ <label for="y">수신</label>
	142	+ </div>
	143	+ <div class="form-check">
	144	+ <input
	145	+ type="radio"
	146	+ name="emlRcptnAgreYn"
	147	+ id="n"
	148	+ class="mr5"
	149	+ v-model="mbrVO.emlRcptnAgreYn"
	150	+ value="N"
	151	+ disabled
	152	+ />
	153	+ <label for="n">미수신</label>
	154	+ </div>
	155	+ </div> -->
	156	+ </div>
	157	+ </template>
	158	+ <template v-if="showOpt.isAddr">
	159	+
	160	+ <div>
	161	+ <label class="form-title">
	162	+ 우편번호
	163	+ </label>
	164	+ <p>{{ '(' + mbrVO.zip + ')'+ mbrVO.addr + mbrVO.daddr}}</p>
	165	+ <!-- <input
	166	+ type="text"
	167	+ class="full-input"
	168	+ v-model="mbrVO.zip"
	169	+ disabled
	170	+ /> -->
	171	+ </div>
	172	+ <!-- <div>
	173	+ <label class="form-title">주소</label>
	174	+ <input
	175	+ type="text"
	176	+ class="full-input"
	177	+ v-model="mbrVO.addr"
	178	+ disabled
	179	+ />
	180	+ </div> -->
	181	+
	182	+ <!-- <div>
	183	+ <label for="" class="form-title">
	184	+ 상세주소
	185	+ </label>
	186	+ <input
	187	+ type="text"
	188	+ class="full-input"
	189	+ v-model="mbrVO.daddr"
	190	+ disabled
	191	+ />
	192	+ </div> -->
	193	+ </template>
	194	+ <template v-if="showOpt.isStts && pageRole == 'adm'">
	195	+
	196	+ <div>
	197	+ <label class="form-title">
	198	+ 회원상태
	199	+ </label>
	200	+ <select class="full-select" v-model="mbrVO.mbrStts" disabled>
	201	+ <option value="1">승인</option>
	202	+ <option value="2">승인대기</option>
	203	+ <option value="0">탈퇴</option>
	204	+ <option value="3">차단</option>
	205	+ </select>
	206	+ <div>
	207	+ <label class="form-title">차단일</label>
	208	+ <input
	209	+ type="date"
	210	+ class="full-input"
	211	+ v-model="mbrVO.cntrlDt"
	212	+ disabled
	213	+ />
	214	+ </div>
	215	+ </div>
	216	+
	217	+ <div>
	218	+ <label class="form-title">차단 사유</label>
	219	+ <input
	220	+ type="text"
	221	+ class="full-input"
	222	+ v-model="mbrVO.cntrlRsn"
	223	+ disabled
	224	+ />
	225	+ </div>
	226	+ </template>
	227	+ <template v-if="showOpt.isAuthor && pageRole == 'adm'">
	228	+ <UserAuthorList :mbrVO="mbrVO" editMode="view" />
	229	+ </template>
	230	+ </div>
	231	+ </div>
	232	+ </div>
	233	+ </div>
263	234	</div>
264		- <div class="gd-1 mr10">
	235	+ <div class="btn-wrap">
	236	+ <template v-if="pageRole == 'adm'" class="gd-1 mr10">
	237	+ <button class="btn sm tertiary" @click="fnList">목록</button>
	238	+ </template>
265	239	<button
266	240	v-if="pageAuth.mdfcnAuthrt == 'Y'"
267	241	:class="{
268		- 'large-btn': true,
269		- 'blue-border-btn': pageRole == 'adm',
270		- 'green-border-btn': pageRole == 'portal',
	242	+ 'btn sm primary': true,
271	243	}"
272	244	@click="fnUpdate"
273	245	>
274	246	수정
275	247	</button>
276		- </div>
277		- <div v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
278		- <button class="large-btn red-border-btn" @click="fnDelete">삭제</button>
279		- </div>
	248	+ <template v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
	249	+ <button class="btn sm red" @click="fnDelete">삭제</button>
	250	+ </template>
280	251	</div>
281	252	</template>
282	253
...	...	@@ -289,13 +260,14 @@
289	260
290	261	// COMPONENT
291	262	import UserAuthorList from "./UserAuthorList.vue";
	263	+import PagiNavigationBar from "../paginavigationbar/PagiNavigationBar.vue";
292	264
293	265	// API
294	266	import { mbrDetailProc } from "../../../resources/api/mbrInfo";
295	267	import { mbrDeleteProc } from "../../../resources/api/mbrInfo";
296	268
297	269	export default {
298		- components: { UserAuthorList },
	270	+ components: { UserAuthorList,PagiNavigationBar },
299	271	props: {
300	272	pageId: {
301	273	type: String,
...	...	@@ -304,6 +276,10 @@
304	276	type: String,
305	277	default: "user",
306	278	},
	279	+ pageTit: {
	280	+ type: String,
	281	+ required: true,
	282	+ },
307	283	},
308	284	data() {
309	285	return {

...	...	@@ -6,37 +6,38 @@
6	6	<div class="info-wrap">
7	7	<div class="info">
8	8	<p class="info-name">{{ mbrNm }}</p>
9		- <button @click="fnlogOut">로그아웃</button>
10		- <button @click="fnSiteMove">사이트이동</button>
11		-
12		- <div class="reset-wrap">
13		- <button @click="cacheClean()">
14		- <svg-icon type="mdi" :path="refreshPath"></svg-icon> 변경사항 적용 </button>
15		- </div>
	9	+ <ul class="info-btn">
	10	+ <li><button class="btn-ico xsm ico-logout" @click="fnlogOut" title="로그아웃"></button></li>
	11	+ <li><button class="btn-ico xsm ico-go" @click="fnSiteMove" title="사이트이동"></button></li>
	12	+ <li><button class="btn-ico xsm ico-reset" @click="cacheClean()" title="변경사항 적용"></button></li>
	13	+ </ul>
16	14	</div>
17	15	</div>
18		- <ul class="side-menu">
19		- <template v-if="menuList.length > 0">
20		- <li v-for="(sub, subidx) in menuList" :key="subidx" :class="{ 'sub-active': isActive(sub.routerUrl) }">
21		- <div @click="
22		- menuClick(
23		- sub.routerUrl != '' && sub.routerUrl != null
24		- ? sub
25		- : sub.childList[0]
26		- )
27		- ">
28		- <span>{{ sub.menuNm }}</span>
29		- </div>
30		- <ul v-show="sub.childList.length > 0">
31		- <li v-for="(third, thirdIdx) in sub.childList" :key="thirdIdx" :class="{
32		- 'sub-active': isActive(third.routerUrl),
33		- }" @click="menuClick(third)">
34		- <span>{{ third.menuNm }}</span>
35		- </li>
36		- </ul>
37		- </li>
38		- </template>
39		- </ul>
	16	+ <div class="menu-zone">
	17	+ <p>MENU</p>
	18	+ <ul class="side-menu">
	19	+ <template v-if="menuList.length > 0">
	20	+ <li v-for="(sub, subidx) in menuList" :key="subidx" :class="{ 'sub-active': isActive(sub.routerUrl) }">
	21	+ <div @click="
	22	+ menuClick(
	23	+ sub.routerUrl != '' && sub.routerUrl != null
	24	+ ? sub
	25	+ : sub.childList[0]
	26	+ )
	27	+ ">
	28	+ <span>{{ sub.menuNm }}</span>
	29	+ </div>
	30	+ <ul v-show="sub.childList.length > 0">
	31	+ <li v-for="(third, thirdIdx) in sub.childList" :key="thirdIdx" :class="{
	32	+ 'sub-active': isActive(third.routerUrl),
	33	+ }" @click="menuClick(third)">
	34	+ <span>{{ third.menuNm }}</span>
	35	+ </li>
	36	+ </ul>
	37	+ </li>
	38	+ </template>
	39	+ </ul>
	40	+ </div>
40	41	</nav>
41	42	</template>
42	43	<script>
...	...	@@ -46,7 +47,6 @@
46	47	import { mapActions } from "vuex";
47	48	import cntnStatsSave from "../../resources/js/cntnStatsSave";
48	49	import { cacheReSet } from "../../resources/api/cacheReSet";
49		-import { mdiRefresh } from "@mdi/js";
50	50
51	51	export default {
52	52	mixins: [queryParams, cntnStatsSave],
...	...	@@ -58,7 +58,6 @@
58	58	currentPath: this.$route.path,
59	59	resetSearch: { ...defaultSearchParams },
60	60	menuList: [],
61		- refreshPath: mdiRefresh,
62	61	};
63	62	},
64	63	created() {

...	...	@@ -3,8 +3,7 @@
3	3	<AdminHeader />
4	4	<AdminMenu />
5	5	<main class="main-wrap">
6		- <Paginavigationbar :className="'navigation-wrap'"/>
7		- <div class="content-wrap">
	6	+ <div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
8	7	<router-view />
9	8	</div>
10	9	</main>
...	...	@@ -21,7 +20,6 @@
21	20	import UserHeader from "../layout/UserHeader.vue";
22	21	import AdminHeader from "../layout/AdminHeader.vue";
23	22	import AdminMenu from "../layout/AdminMenu.vue";
24		-import Paginavigationbar from "../component/paginavigationbar/PagiNavigationBar.vue";
25	23
26	24	const App = {
27	25	data: () => {
...	...	@@ -47,7 +45,6 @@
47	45	'UserHeader': UserHeader,
48	46	'AdminHeader': AdminHeader,
49	47	'AdminMenu': AdminMenu,
50		- 'Paginavigationbar': Paginavigationbar
51	48	},
52	49	mounted() {},
53	50	};

...	...	@@ -1,11 +1,5 @@
1	1	<template>
2		- <div class="content admin-style">
3		- <div class="admin-page-title point-font2 mb30">
4		- <p>관리자 관리</p>
5		- </div>
6		-
7		- <UserInfoInsert :pageId="pageId" pageNm="adm" />
8		- </div>
	2	+ <UserInfoInsert :pageId="pageId" pageNm="adm" :pageTit="'관리자 관리'"/>
9	3	</template>
10	4
11	5	<script>

...	...	@@ -1,69 +1,68 @@
1	1	<template>
2		- <div class="content">
3		- <div class="admin-page-title point-font2 mb30">
4		- <p>관리자 관리</p>
5		- </div>
6		- <div class="search-bar mb15">
7		- <div class="flex justify-end align-center no-gutters">
8		- <div class="gd-6 mr10">
9		- <div class="border">
10		- <select class="border-none gd-2" v-model="search['searchType']">
	2	+ <div class="content-zone">
	3	+ <div class="content">
	4	+ <div class="scroll">
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>관리자 관리</p>
	8	+ </div>
	9	+ <PagiNavigationBar />
	10	+ </div>
	11	+ <div class="search-bar">
	12	+ <select class="form-select sm" v-model="search['searchType']">
11	13	<option value="">전체</option>
12	14	<option value="lgn_id">아이디</option>
13	15	<option value="mbr_nm">이름</option>
14	16	</select>
15	17	<input
16	18	type="text"
17		- class="full-input border-none gd-10 condition-input"
	19	+ class="form-control sm"
18	20	v-model="search['searchText']"
19	21	v-on:keyup.enter="fnViewList"
20	22	/>
21		- </div>
22		- </div>
23		- <div class="gd-1">
24		- <button class="large-btn blue-border-btn" @click="fnViewList">
	23	+
	24	+ <button class="btn sm ico-before ico-sch" @click="fnViewList">
25	25	검색
26	26	</button>
27	27	</div>
	28	+ <div class="tbl-wrap">
	29	+ <ListTable
	30	+ :colgroup="colgroup"
	31	+ :thead="thead"
	32	+ :tbody="tbody"
	33	+ className="data cursor"
	34	+ @listClick="fnViewDetail"
	35	+ >
	36	+ <template #button="buttonProps">
	37	+ <button
	38	+ title="초기화"
	39	+ class="btn-ico md ico-refresh"
	40	+ @click.stop="fnReset(buttonProps)"
	41	+ v-if="pageAuth.mdfcnAuthrt == 'Y'"
	42	+ >
	43	+
	44	+ </button>
	45	+ </template>
	46	+ </ListTable>
	47	+ </div>
28	48	</div>
29	49	</div>
30		- <ListTable
31		- :colgroup="colgroup"
32		- :thead="thead"
33		- :tbody="tbody"
34		- className="admin-list"
35		- @listClick="fnViewDetail"
36		- >
37		- <template #button="buttonProps">
38		- <button
39		- class="large-btn red-border-btn"
40		- @click.stop="fnReset(buttonProps)"
41		- v-if="pageAuth.mdfcnAuthrt == 'Y'"
42		- >
43		- 초기화
44		- </button>
45		- </template>
46		- </ListTable>
47		- <div class="flex justify-between align-center no-gutters">
48		- <div class="gd-1"></div>
49		- <div class="gd-10">
50		- <PaginationButton
51		- :className="'admin-pagination'"
52		- v-model:currentPage="search['currentPage']"
53		- :pagination="search"
54		- :click="fnViewList"
55		- />
56		- </div>
57		- <div class="gd-1">
58		- <button
59		- class="large-btn blue-btn"
60		- @click="fnInsert"
61		- v-if="pageAuth.regAuthrt == 'Y'"
62		- >
63		- 등록
64		- </button>
65		- </div>
66		- </div>
	50	+ </div>
	51	+ <div class="btn-wrap list">
	52	+ <div></div>
	53	+ <PaginationButton
	54	+ :className="'pagination'"
	55	+ v-model:currentPage="search['currentPage']"
	56	+ :pagination="search"
	57	+ :click="fnViewList"
	58	+ />
	59	+ <button
	60	+ class="btn sm primary"
	61	+ @click="fnInsert"
	62	+ v-if="pageAuth.regAuthrt == 'Y'"
	63	+ >
	64	+ 등록
	65	+ </button>
67	66	</div>
68	67	</template>
69	68
...	...	@@ -73,6 +72,7 @@
73	72	// COMPONENT
74	73	import ListTable from "../../../../component/table/ListTable.vue";
75	74	import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
	75	+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
76	76
77	77	// RESOURCES
78	78	import queryParams from "../../../../../resources/js/queryParams";
...	...	@@ -87,6 +87,7 @@
87	87	components: {
88	88	ListTable: ListTable,
89	89	PaginationButton: PaginationButton,
	90	+ PagiNavigationBar: PagiNavigationBar
90	91	},
91	92	data() {
92	93	return {

...	...	@@ -1,68 +1,65 @@
1	1	<template>
2		- <div class="content">
3		- <div class="admin-page-title point-font2 mb30">
4		- <p>일반회원 관리</p>
5		- </div>
6		- <div class="search-bar mb15">
7		- <div class="flex justify-end align-center no-gutters">
8		- <div class="gd-6 mr10">
9		- <div class="border">
10		- <select class="border-none gd-2" v-model="search['searchType']">
	2	+ <div class="content-zone">
	3	+ <div class="content">
	4	+ <div class="scroll">
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>일반회원 관리</p>
	8	+ </div>
	9	+ <PagiNavigationBar />
	10	+ </div>
	11	+ <div class="search-bar">
	12	+ <select class="form-select sm" v-model="search['searchType']">
11	13	<option value="">전체</option>
12	14	<option value="lgn_id">아이디</option>
13	15	<option value="mbr_nm">이름</option>
14	16	</select>
15	17	<input
16	18	type="text"
17		- class="full-input border-none gd-10 condition-input"
	19	+ class="form-control sm"
18	20	v-model="search['searchText']"
19	21	v-on:keyup.enter="fnViewList"
20	22	/>
21		- </div>
	23	+ <button class="btn sm ico-before ico-sch" @click="fnViewList">검색</button>
22	24	</div>
23		- <div class="gd-1">
24		- <button class="large-btn blue-border-btn" @click="fnViewList">
25		- 검색
26		- </button>
	25	+ <div class="tbl-wrap">
	26	+ <ListTable
	27	+ :colgroup="colgroup"
	28	+ :thead="thead"
	29	+ :tbody="tbody"
	30	+ :className="'data cursor'"
	31	+ @listClick="fnModalOpen"
	32	+ >
	33	+ <template #button="buttonProps">
	34	+ <button
	35	+ title="초기화"
	36	+ class="btn-ico md ico-refresh"
	37	+ @click.stop="fnReset(buttonProps)"
	38	+ v-if="pageAuth.mdfcnAuthrt == 'Y'"
	39	+ >
	40	+ </button>
	41	+ </template>
	42	+ </ListTable>
27	43	</div>
28	44	</div>
29	45	</div>
30		- <ListTable
31		- :colgroup="colgroup"
32		- :thead="thead"
33		- :tbody="tbody"
34		- :className="'admin-list'"
35		- @listClick="fnModalOpen"
36		- >
37		- <template #button="buttonProps">
38		- <button
39		- class="large-btn red-border-btn"
40		- @click.stop="fnReset(buttonProps)"
41		- v-if="pageAuth.mdfcnAuthrt == 'Y'"
42		- >
43		- 초기화
44		- </button>
45		- </template>
46		- </ListTable>
47		- <div class="flex justify-between align-center no-gutters">
48		- <div class="gd-1"></div>
49		- <div class="gd-10">
	46	+ </div>
	47	+ <div class="btn-wrap list">
	48	+ <div></div>
50	49	<PaginationButton
51	50	:className="'admin-pagination'"
52	51	v-model:currentPage="search['currentPage']"
53	52	:pagination="search"
54	53	:click="fnViewList"
55	54	/>
56		- </div>
57		- <div class="gd-1">
	55	+
58	56	<button
59		- class="large-btn blue-btn"
	57	+ class="btn sm primary"
60	58	@click="fnInsert"
61	59	v-if="pageAuth.regAuthrt == 'Y'"
62	60	>
63	61	등록
64	62	</button>
65		- </div>
66	63	</div>
67	64	<!-- 모달: 개인정보조회이력 -->
68	65	<Modal :showModal="isOpen">
...	...	@@ -70,29 +67,25 @@
70	67	<div class="box-title point-font2">
71	68	<p>개인 정보 조회 사유 등록</p>
72	69	</div>
73		- <button class="close-btn" @click="fnModalClose">X</button>
	70	+ <button class="btn-close" @click="fnModalClose"></button>
74	71	</template>
75	72	<div>
76	73	<textarea
77	74	v-model="prvcInqHstry['inqRsn']"
78	75	placeholder="개인 정보 조회 사유를 작성하세요."
79	76	ref="inqRsn"
	77	+ class="form-control"
80	78	></textarea>
81	79	</div>
82	80	<template v-slot:footer>
83		- <div class="gd-2 mr10">
84		- <button class="large-btn blue-border-btn" @click="fnModalInsert">
	81	+ <button class="btn sm primary" @click="fnModalInsert">
85	82	등록
86	83	</button>
87		- </div>
88		- <div class="gd-2">
89		- <button class="large-btn red-border-btn" @click="fnModalClose">
	84	+ <button class="btn sm tertiary" @click="fnModalClose">
90	85	취소
91	86	</button>
92		- </div>
93	87	</template>
94	88	</Modal>
95		- </div>
96	89	</template>
97	90
98	91	<script>
...	...	@@ -102,6 +95,7 @@
102	95	import Modal from "../../../../component/modal/Modal.vue";
103	96	import ListTable from "../../../../component/table/ListTable.vue";
104	97	import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
	98	+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
105	99
106	100	// RESOURCES
107	101	import queryParams from "../../../../../resources/js/queryParams";
...	...	@@ -117,6 +111,7 @@
117	111	Modal: Modal,
118	112	ListTable: ListTable,
119	113	PaginationButton: PaginationButton,
	114	+ PagiNavigationBar: PagiNavigationBar
120	115	},
121	116	data() {
122	117	return {

...	...	@@ -1,9 +1,12 @@
1	1	<template>
2	2	<div class="content-zone">
3	3	<div class="content">
4		- <div class="section-title">
5		- <p>공통코드관리</p>
6		- </div>
	4	+ <div class="title-zone">
	5	+ <div class="section-title">
	6	+ <p>공통코드관리</p>
	7	+ </div>
	8	+ <PagiNavigationBar />
	9	+ </div>
7	10	<div class="setting-box">
8	11
9	12	<div class="node-zone">
...	...	@@ -98,6 +101,7 @@
98	101	<script>
99	102	import draggable from "vuedraggable";
100	103	import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
	104	+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
101	105	import {
102	106	findAll,
103	107	findByCd,
...	...	@@ -111,6 +115,7 @@
111	115	components: {
112	116	draggable: draggable,
113	117	Hierachy: Hierachy,
	118	+ PagiNavigationBar: PagiNavigationBar,
114	119	},
115	120	data() {
116	121	return {

...	...	@@ -2,8 +2,11 @@
2	2	<div class="content-zone">
3	3	<div class="content">
4	4	<div class="scroll">
5		- <div class="section-title">
6		- <p>콘텐츠 유형 관리</p>
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>콘텐츠 유형 관리</p>
	8	+ </div>
	9	+ <PagiNavigationBar />
7	10	</div>
8	11	<div open class="form-box">
9	12	<div class="form-box-title">
...	...	@@ -111,9 +114,13 @@
111	114	import { findByContsType } from "../../../../../resources/api/contsType";
112	115	import { updateProc } from "../../../../../resources/api/contsType";
113	116	import validationParams from "../../../../../resources/js/validateParams";
	117	+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
114	118
115	119	export default {
116	120	mixins: [validationParams],
	121	+ components: {
	122	+ PagiNavigationBar: PagiNavigationBar,
	123	+ },
117	124	data() {
118	125	return {
119	126	pageId: this.$route.query.pageId, // 페이지 아이디

...	...	@@ -2,9 +2,12 @@
2	2	<div class="content-zone">
3	3	<div class="content">
4	4	<div class="scroll">
5		- <div class="section-title">
6		- <p>콘텐츠 유형 관리</p>
7		- </div>
	5	+ <div class="title-zone">
	6	+ <div class="section-title">
	7	+ <p>콘텐츠 유형 관리</p>
	8	+ </div>
	9	+ <PagiNavigationBar />
	10	+ </div>
8	11	<div class="form-box">
9	12	<div class="form-box-title">
10	13	<p>기본정보</p>
...	...	@@ -118,6 +121,7 @@
118	121	findByContsType,
119	122	deleteProc,
120	123	} from "../../../../../resources/api/contsType";
	124	+import PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
121	125
122	126	export default {
123	127	data() {
...	...	@@ -128,6 +132,9 @@
128	132	contsTypeVO: {},
129	133	};
130	134	},
	135	+ components: {
	136	+ PagiNavigationBar: PagiNavigationBar,
	137	+ },
131	138	created() {
132	139	this.fnViewDetail();
133	140	},

...	...	@@ -1,61 +1,69 @@
1	1	<template>
2	2	<div class="login-page page">
3		- <div class="flex-column justify-center align-center content">
4		- <div class="login-wrap pd30">
5		- <div
6		- :class="{
7		- 'login-title text-ct mb40': true,
8		- 'user-login': !isAdminPage,
9		- }"
10		- >
11		- LOGIN
	3	+ <div>
	4	+ <div class="background-img">
	5	+ <p>
	6	+ 콘텐츠 관리 시스템에 오신 것을 환영합니다.<br />
	7	+ 원활한 관리와 운영을 위해 로그인하세요.
	8	+ </p>
12	9	</div>
13		- <div class="input-group mb20">
14		- <label for="id" class="login-label">아이디</label>
15		- <input
16		- type="text"
17		- name=""
18		- id="id"
19		- class="full-input login-input"
20		- placeholder="아이디를 입력하세요"
21		- v-model="member['lgnId']"
22		- />
	10	+ <div class="login-wrap">
	11	+ <div class="login">
	12	+ <div
	13	+ :class="{
	14	+ 'login-title': true,
	15	+ 'user-login': !isAdminPage,
	16	+ }"
	17	+ >
	18	+ LOGIN
	19	+ </div>
	20	+ <div class="form-group">
	21	+ <label for="id" class="login-label">아이디</label>
	22	+ <input
	23	+ type="text"
	24	+ name=""
	25	+ id="id"
	26	+ class="form-control md"
	27	+ placeholder="아이디를 입력하세요"
	28	+ v-model="member['lgnId']"
	29	+ />
	30	+ </div>
	31	+ <div class="form-group">
	32	+ <label for="pw" class="login-label">비밀번호</label>
	33	+ <input
	34	+ type="password"
	35	+ name=""
	36	+ id="pw"
	37	+ class="form-control md"
	38	+ placeholder="비밀번호를 입력하세요"
	39	+ v-model="member['pswd']"
	40	+ @keyup.enter="fnLogin"
	41	+ />
	42	+ </div>
	43	+ <div
	44	+ class="input-group"
	45	+ v-if="!isAdminPage"
	46	+ >
	47	+ <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
	48	+ <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
	49	+ </div>
	50	+ <button
	51	+ class="large-btn green-btn point-font fw-bold"
	52	+ v-if="!isAdminPage"
	53	+ @click="fnLogin"
	54	+ >
	55	+ 로그인
	56	+ </button>
	57	+ <button
	58	+ class="btn md primary"
	59	+ v-else
	60	+ @click="fnLogin"
	61	+ >
	62	+ 로그인
	63	+ </button>
	64	+ </div>
23	65	</div>
24		- <div class="input-group mb20">
25		- <label for="pw" class="login-label">비밀번호</label>
26		- <input
27		- type="password"
28		- name=""
29		- id="pw"
30		- class="full-input login-input"
31		- placeholder="비밀번호를 입력하세요"
32		- v-model="member['pswd']"
33		- @keyup.enter="fnLogin"
34		- />
35		- </div>
36		- <div
37		- class="find-zone flex justify-end align-center mb40"
38		- v-if="!isAdminPage"
39		- >
40		- <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
41		- <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
42		- </div>
43		- <button
44		- class="large-btn green-btn point-font fw-bold"
45		- v-if="!isAdminPage"
46		- @click="fnLogin"
47		- >
48		- 로그인
49		- </button>
50		- <button
51		- class="large-btn darkg-btn point-font2 fw-bold"
52		- v-else
53		- @click="fnLogin"
54		- >
55		- 로그인
56		- </button>
57	66	</div>
58		- </div>
59	67	</div>
60	68	</template>
61	69

Delete comment