init dev-push code ui base design

components/common/DatepickerTopView.vue

@@ -2,9 +2,15 @@
 	<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"
+				<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
 					>mdi-record-circle</v-icon
-				>
+				> -->
+				<v-icon
+					small
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
+					>
+					$icoBulletPoint
+				</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
@@ -19,14 +25,17 @@
 					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-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
+				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
+					<img :src="arrowIcon" alt="">
+				</div>
 				<v-text-field
 					v-show="isRange"
 					id="endpicker"
@@ -104,6 +113,7 @@ export default {
 				return state.pageData[this.parentPrgmId];
 			},
 		}),
+		isDarkMode: "isDarkMode",
 		myCmCycle() {
 			return this.searchParam.cmCycle;
 		},
@@ -194,6 +204,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() {
@@ -401,34 +417,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: -260px;
-				left: 0;
-			}
-		}
-	}
-}
-
-.v-input__custom {
-	flex: 0 0 auto;
-	&.half {
-		width: calc(50% - 20px);
-	}
-}
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;