1. 데이트피커 가려지는 현상 수정 2. 로그아웃 메뉴 닫힘 처리 3. 셀렉트 스타일 수정

assets/scss/default.scss

@@ -977,11 +977,12 @@
         border-radius: 8px !important;
         
         .v-field {
+          max-height: 60px!important;
           border-radius: 8px !important;
           background: white;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
           border: 1px solid #e1e5e9 !important;
-          min-height: 3.63rem !important;
+          min-height: 60px !important;
           
           &.v-field--focused {
             border-color: #667eea !important;
@@ -1012,7 +1013,7 @@
         .v-field__input {
           padding: 12px 16px;
           font-size: 0.9rem;
-          min-height: 3.63rem !important;
+          min-height: 60px !important;
           
           &::placeholder {
             color: #9ca3af;
@@ -1021,10 +1022,11 @@
         
         .v-field__field {
           border-radius: 8px !important;
-          min-height: 3.63rem !important;
-          
+          min-height: 60px !important;
+          max-height: 60px!important;
           .v-field__input {
-            min-height: 3.63rem !important;
+            max-height: 60px!important;
+            min-height: 60px !important;
             align-items: center;
             display: flex;
           }

assets/scss/mode-w-m.scss

@@ -6768,14 +6768,14 @@ z
           .v-input{
             &.custom-input{
               &.v-text-field{
-                min-height: 2.25rem;
+                // min-height: 2.25rem;
                 .v-input__control{
-                  height: 2.25rem;
+                  // height: 2.25rem;
                   .v-field__field{
                     .v-field__input{
-                      min-height: 2.25rem;
-                      height: 2.25rem;
-                      padding: 0 0.75rem;
+                      // min-height: 2.25rem;
+                      // height: 2.25rem;
+                      // padding: 0 0.75rem;
                     }
                   }
                 }
@@ -8190,7 +8190,7 @@ z
 }
 
 .item-info h4 {
-  margin-bottom: 15px;
+  //margin-bottom: 15px;
   font-size: 0.9rem;
   font-weight: 600;
   color: #2d3748;

assets/scss/style.scss

@@ -685,6 +685,9 @@
     gap:10px;    
     > div{
       width:calc( (100% - 30px) / 2);
+      &:first-child{
+        width: 40%;  
+      }
     }
   }
 
@@ -732,7 +735,9 @@
 .custom-input.v-text-field {
   // flex: 0 0 auto;
   width: 100%;
-  min-height: 3.63rem;
+  height: 3.63rem;
+  min-height: 60px;
+  max-height: 60px;
   padding: 0;
   margin: 0;
   flex-direction: column;
@@ -881,6 +886,8 @@
   .v-input__control {
     width: 100%;
     height: 3.63rem;
+    min-height: 60px;
+    max-height: 60px;
 
     .v-field__overlay {
       display: none;
@@ -897,7 +904,8 @@
     .v-field__field {
       .v-field__input {
         height: 3.63rem;
-        min-height: 3.63rem;
+        min-height: 60px;
+        max-height: 60px;
         padding: 0 1.25rem;
         border: 0.06rem solid #e0e0e0;
         background: #fff;
@@ -935,10 +943,13 @@
 
       .v-text-field__slot {
         height: 3.63rem;
+        min-height: 60px;
+        max-height: 60px;
 
         input {
           display: block;
-          max-height: 3.63rem;
+          min-height: 60px;
+          max-height: 60px;
           padding: 0 0.75rem;
           letter-spacing: -0.02rem;
           color: #000;
@@ -1039,7 +1050,7 @@ p.success-txt {
           height: auto;
           padding-left: 0.4rem;
           margin: 0;
-          font-size: 0.81rem;
+          font-size: 0.9rem;
           font-weight: 400;
           color: #333;
           opacity: 1;
@@ -1525,6 +1536,9 @@ p.success-txt {
     .v-btn__content {
       font-size: 0.75rem;
     }
+    &.h--60{
+      height: 60px;
+    }
   }
 
   &.mini2 {
@@ -2829,6 +2843,16 @@ p.success-txt {
 }
 
 .custom-select.v-input {
+  height: 3.63rem;
+  min-height: 60px;
+  max-height: 60px;
+  
+  .v-input__control {
+    height: 3.63rem;
+    min-height: 60px;
+    max-height: 60px;
+  }
+  
   &.not-detail {
     .v-input__details {
       display: none;
@@ -2870,7 +2894,6 @@ p.success-txt {
 
   .v-input__control {
     .v-field {
-      height: 2.25rem;
       padding-right: 0;
       background: #fff;
 
@@ -2885,8 +2908,8 @@ p.success-txt {
       }
 
       .v-field__field {
-        height: 2.25rem;
-        padding-left: 0.94rem;
+        //height: 2.25rem;
+        padding-left: 1.25rem;
         overflow: hidden;
 
         .v-label {
@@ -2894,9 +2917,10 @@ p.success-txt {
           align-items: center;
           position: static !important;
           top: 0 !important;
-          height: 2.25rem;
-          font-size: 0.75rem;
-          color: #444444;
+          // height: 2.25rem;
+          height: 60px;
+          font-size: 0.9rem;
+          color: #9ca3af;
           font-weight: 400;
           margin: 0;
           width: 100%;
@@ -2909,13 +2933,13 @@ p.success-txt {
 
         .v-field__input {
           padding: 0;
-          height: 2.25rem;
-          min-height: 2.25rem;
+          min-height: 60px;
+          max-height: 60px;
           opacity: 1;
 
           .v-select__selection {
-            font-size: 0.75rem;
-            color: #444;
+            font-size: 0.9rem;
+            color: #000;
             font-weight: 400;
           }
         }
@@ -2950,6 +2974,21 @@ p.success-txt {
   .v-input__details {
     display: none;
   }
+
+  &.border--type{
+    .v-input__control {
+      .v-field {
+        .v-field__outline {
+          border-radius: 12px;
+          border: 2px solid rgba(102, 126, 234, 0.2);
+
+          >div {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
 
 .custom-textarea.v-textarea {
@@ -3755,8 +3794,8 @@ p.success-txt {
       position: relative;
 
       .custom-input.v-text-field .v-input__control .v-field__field .v-field__input{
-        border: none;
-        background-color: transparent;
+        border: 2px solid rgba(102, 126, 234, 0.2);
+        border-radius: 12px;
       }
 
       .mk--title{
@@ -3799,20 +3838,20 @@ p.success-txt {
           .custom-input {
             .v-input__control {
               .v-field {
-                background: rgba(255,255,255,0.8);
-                backdrop-filter: blur(10px);
-                border: 2px solid rgba(102, 126, 234, 0.2);
-                border-radius: 12px;
-                transition: all 0.3s ease;
+               // background: rgba(255,255,255,0.8);
+                //backdrop-filter: blur(10px);
+                //border: 2px solid rgba(102, 126, 234, 0.2);
+                //border-radius: 12px;
+                //transition: all 0.3s ease;
                 
                 &:hover {
-                  border-color: rgba(102, 126, 234, 0.4);
-                  background: rgba(255,255,255,0.9);
+                  //border-color: rgba(102, 126, 234, 0.4);
+                  //background: rgba(255,255,255,0.9);
                 }
                 
                 &.v-field--focused {
-                  border-color: #667eea;
-                  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+                  //border-color: #667eea;
+                  //box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                 }
               }
             }
@@ -3854,7 +3893,7 @@ p.success-txt {
         
         .custom-btn {
           width: 100%;
-          height: 50px;
+          height: 60px;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           border: none;
           border-radius: 12px;
@@ -6442,4 +6481,8 @@ body:has(.darkmode) {
     font-weight: 700;
     color: #333;
   }
+}
+
+.v-combobox--single:not(.v-combobox--selection-slot).v-text-field input{
+  font-size: 0.9rem;
 }

components/common/header.vue

@@ -385,6 +385,14 @@
   /************************************************************************
 |    라이프사이클 : onMounted
 ************************************************************************/
+  // 외부 클릭 시 메뉴 닫기
+  const handleClickOutside = (event) => {
+    const proElement = event.target.closest('.pro--id');
+    if (!proElement && proOn.value) {
+      proOn.value = false;
+    }
+  };
+
   onMounted(() => {
     console.log(useStoreAuth.getSnsTempData.user);
     userId.value = localStorage.getItem("tempAccess");
@@ -393,6 +401,14 @@
     //   localStorage.getItem("authStore")
     // )?.auth.companyName;
     fnSetMenu();
+    
+    // 전역 클릭 이벤트 리스너 추가
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onUnmounted(() => {
+    // 컴포넌트 해제 시 이벤트 리스너 제거
+    document.removeEventListener('click', handleClickOutside);
   });
 </script>
 

pages/auth/join.vue

@@ -28,7 +28,7 @@
               class="custom-input"
               @blur="checkId"
             ></v-text-field>
-            <v-btn v-if="!useStore.getSnsTempData?.ID" class="ml-2 custom-btn mini btn-purple" @click="checkId"
+            <v-btn v-if="!useStore.getSnsTempData?.ID" class="ml-2 custom-btn mini btn-purple h--60" @click="checkId"
               >중복확인</v-btn
             >
           </div>
@@ -88,10 +88,12 @@
           <div class="txt-field-box">
             <v-select
               v-model="form.formValue6"
+              variant="outlined"
               :items="form.formValueItems6"
               item-title="text"
               item-value="value"
-              class="custom-select"
+              label="소셜 채널 선택"
+              class="custom-select border--type"
             ></v-select>
           </div>
           <div class="txt-field-box">
@@ -134,11 +136,12 @@
             ></v-text-field>
             <span>@</span>
             <v-combobox
+              variant="outlined"
               :disabled="useStore.getSnsTempData?.EMAIL ? true : false"
               v-model="form.formValue11"
               :items="['gmail.com', 'naver.com', 'daum.net', 'hotmail.com', 'yahoo.com']"
               placeholder="도메인 선택 또는 직접 입력"
-              class="custom-select"
+              class="custom-select border--type"
             ></v-combobox>
           </div>
 
@@ -165,12 +168,12 @@
           <div class="txt-field-box">
             <v-text-field
               v-model="formVendor.formValue1"
-              placeholder="아이디를 입력해주세요"
+              placeholder="아이디를 입력해주세요."
               class="custom-input"
             ></v-text-field>
             <v-btn
               v-if="!useStore.getSnsTempData?.ID"
-              class="ml-2 custom-btn mini btn-purple"
+              class="ml-2 custom-btn mini h--60 btn-purple"
               @click="checkIdVendor"
               >중복확인</v-btn
             >
@@ -196,7 +199,7 @@
             <v-text-field
               v-model="formVendor.formValue3"
               :type="visible ? 'text' : 'password'"
-              placeholder="패스워드 확인"
+              placeholder="패스워드를 한 번 더 입력해주세요."
               class="custom-input"
             ></v-text-field>
             <i
@@ -212,7 +215,7 @@
               v-model="formVendor.formValue4"
               :maxlength="20"
               :counter="20"
-              placeholder="회사명"
+              placeholder="회사명을 입력해주세요."
               class="custom-input"
             ></v-text-field>
           </div>
@@ -222,7 +225,7 @@
               v-model="formVendor.formValue5"
               :maxlength="20"
               :counter="20"
-              placeholder="담당자 명"
+              placeholder="담당자명을 입력해주세요."
               class="custom-input"
             ></v-text-field>
           </div>
@@ -258,18 +261,21 @@
             ></v-text-field>
             <span>@</span>
             <v-combobox
+              variant="outlined"
               v-model="formVendor.formValue11"
               :items="['gmail.com', 'naver.com', 'daum.net', 'hotmail.com', 'yahoo.com']"
               placeholder="도메인 선택 또는 직접 입력"
-              class="custom-select"
+              class="custom-select border--type"
             ></v-combobox>
           </div>
 
           <div class="mt-5 d-flex agree--box">
-            <v-checkbox class="custom-check type2" v-model="formVendor.formValue13" @click="handlePrivacyModal">
+            <v-checkbox class="custom-check type2" 
+            hide-details v-model="formVendor.formValue13" @click="handlePrivacyModal">
               <template v-slot:label>개인정보약관동의</template>
             </v-checkbox>
-            <v-checkbox class="custom-check type2" v-model="formVendor.formValue14" @click="handleThirdPartyModal">
+            <v-checkbox class="custom-check type2" 
+            hide-details v-model="formVendor.formValue14" @click="handleThirdPartyModal">
               <template v-slot:label>제3자 정보동의</template>
             </v-checkbox>
           </div>
@@ -423,11 +429,6 @@
     formValue5: useStore.getSnsTempData?.NAME || "", // 이름
     formValue6: null, // 소셜 채널
     formValueItems6: [
-      {
-        text: "소셜 채널 선택",
-        value: null,
-        disabled: true,
-      },
       {
         text: "유튜브",
         value: "youtube",

pages/index.vue

@@ -528,7 +528,7 @@
   const findIdForm = ref({
     name: '',
     emailLocal: '',
-    emailDomain: '',
+    emailDomain: null,  // 빈 문자열 대신 null로 설정
     memberType: ''
   });
   
@@ -555,7 +555,7 @@
     name: '',
     userId: '',
     emailLocal: '',
-    emailDomain: '',
+    emailDomain: null,  // 빈 문자열 대신 null로 설정
     memberType: ''
   });
   
@@ -908,7 +908,7 @@
     findIdForm.value = {
       name: '',
       emailLocal: '',
-      emailDomain: '',
+      emailDomain: null,  // 빈 문자열 대신 null로 설정
       memberType: defaultMemberType
     };
     findIdValidation.value = {
@@ -1056,7 +1056,7 @@
       name: '',
       userId: '',
       emailLocal: '',
-      emailDomain: '',
+      emailDomain: null,  // 빈 문자열 대신 null로 설정
       memberType: defaultMemberType
     };
     findPwValidation.value = {

pages/view/common/item/add.vue

@@ -1207,4 +1207,52 @@ watch(() => form.value.order_end_date, (newEndDate) => {
 .delete-btn.v-btn--variant-outlined {
   border-color: #f44336 !important;
 }
+
+/* 데이트피커 관련 스타일 */
+.form-section {
+  overflow: visible !important;
+}
+
+.date-picker-wrapper {
+  position: relative;
+  z-index: 10;
+}
+
+.date-picker-group {
+  position: relative;
+  z-index: 10;
+}
+
+.date-picker-item {
+  position: relative;
+  z-index: 10;
+}
+
+/* VueDatePicker 팝업이 form-section을 벗어나도 보이도록 */
+.modern-date-picker {
+  position: relative;
+  z-index: 1000;
+}
+
+/* VueDatePicker 오버레이 스타일 조정 */
+:deep(.dp__overlay) {
+  z-index: 1001 !important;
+}
+
+:deep(.dp__menu) {
+  z-index: 1001 !important;
+}
+
+:deep(.dp__calendar_wrap) {
+  z-index: 1001 !important;
+}
+
+/* form-container와 main-content도 overflow visible로 설정 */
+.form-container {
+  overflow: visible !important;
+}
+
+.main-content {
+  overflow: visible !important;
+}
 </style>