init dev-push code ui base design

components/common/Datepicker.vue

@@ -2,14 +2,14 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<v-col v-if="label" :cols="labelCols">
 			<label for="" class="search-box-label">
-				<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
-					>mdi-record-circle</v-icon
-				>
+				<v-icon v-if="iconShow" small color="primary" 
+				:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
+				>$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div class="datepicker-container">
+			<div class="datepicker-container" >
 				<v-text-field
 					id="startpicker"
 					ref="startpicker"
@@ -19,16 +19,18 @@
 					readonly
 					outlined
 				>
-					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+					<template #append >
+						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
 					</template>
 				</v-text-field>
-				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
+				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
+					<img :src="arrowIcon" alt="">
+				</div>
 				<v-text-field
-					v-show="isRange"
+					v-if="isRange"
 					id="endpicker"
 					ref="endpicker"
 					v-model="toDtValue"
@@ -45,6 +47,9 @@
 					</template>
 				</v-text-field>
 			</div>
+			<!-- test -->
+			<!-- <a-button @click="onOpenDatepicker()">Open</a-button> -->
+			<!-- end test -->
 		</v-col>
 	</v-row>
 </template>
@@ -70,18 +75,23 @@ export default {
 		labelCols: {
 			type: Number,
 			require: false,
-			default: 4,
+			default: 12,
 		},
 		textCols: {
 			type: Number,
 			require: false,
-			default: 8,
+			default: 12,
 		},
 		required: {
 			type: Boolean,
 			require: false,
 			default: false,
 		},
+		iconShow: {
+			type: Boolean,
+			require: false,
+			default: true,
+		},
 		isRangeOption:{
 			type:Boolean,
 			require:false,
@@ -103,6 +113,7 @@ export default {
 			searchParam(state) {
 				return state.pageData[this.parentPrgmId];
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		myCmCycle() {
 			return this.searchParam.cmCycle;
@@ -194,6 +205,12 @@ export default {
 				this.defaultRange === 'no limite'
 			);
 		},
+		arrowIcon() {
+			if(this.isDarkMode){
+				return require('@/assets/images/arrow_datepicker_dm.png');
+			}
+			return require('@/assets/images/arrow_datepicker.png');
+		}
 	},
 	watch: {
 		myCmCycle() {
@@ -259,8 +276,10 @@ export default {
 	},
 	mounted() {
 		const startContainer = document.getElementById('startpicker-container');
+		// const startContainer = document.getElementById('datepicker-container');
 		const startTarget = document.getElementById('startpicker');
 		const endContainer = document.getElementById('endpicker-container');
+		// const endContainer = document.getElementById('datepicker-container');
 		const endTarget = document.getElementById('endpicker');
 
 		// datepicker 생성
@@ -304,6 +323,10 @@ export default {
 	},
 	methods: {
 		...mapMutations({ setPageData: 'setPageData' }),
+		onOpenDatepicker() {
+			this.startDatepickerInstance.open();
+			this.endDatepickerInstance.open();
+		},
 		getStartDt() {
 			const dt = this.startDatepickerInstance.getDate();
 			this.setPageData({
@@ -401,34 +424,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.datepicker-container {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
+@import "@/assets/scss/datepicker.scss";
 
-	.v-input {
-		.v-input__append-outer {
-			margin-top: 0;
-			margin-left: 0;
-
-			#startpicker-container,
-			#endpicker-container {
-				width: 100%;
-				position: absolute;
-				top: 36px;
-				left: 0;
-			}
-		}
-	}
-}
-
-.v-input__custom {
-	flex: 0 0 auto;
-	&.half {
-		width: calc(50% - 20px);
-	}
-}
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;