프론트 백엔드 코드 회사 래파지토리에서 가져오기

Signed-off-by: bsh <bsh01111@naver.com>

+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};

+# compiled output
+/dist
+/node_modules
+/output
+
+# config env
+.env
+.envrc
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+builds/*
+nohup.out
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+ormconfig.json
\ No newline at end of file

+cache:
+  untracked: true
+  key: '$CI_BUILD_REF_NAME'
+  paths:
+    - node_modules/
+
+build:
+  stage: build
+  script:
+    - npm install
+    - npm run build
+  only:
+    - master
+  tags:
+    - build
+
+deploy:
+  stage: deploy
+  script:
+    - source ./env/production.sh
+    - pm2 start --exp-backoff-restart-delay=200
+  only:
+    - master
+  tags:
+    - deploy

+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
\ No newline at end of file

+## Description
+
+드.론.
+
+## Installation
+
+```bash
+$ npm install
+```
+
+## Running the app
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+$ npm run start:prod
+```
+
+## Test
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```

+module.exports = {
+  apps: [
+    {
+      name: 'backend',
+      script: 'npm',
+      args: 'start',
+    },
+  ],
+};

+export DATABASE_USER=db
+export DATABASE_PASSWORD=1234
+export DATABASE_PORT=20208
+export DATABASE_HOST=14.33.35.148
+export DATABASE_NAME=dronedb
\ No newline at end of file

+{
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src"
+}

+{
+  "name": "web-api",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "typeorm": "ts-node ./node_modules/typeorm/cli.js"
+  },
+  "dependencies": {
+    "@nestjs/common": "^7.6.13",
+    "@nestjs/config": "^0.6.3",
+    "@nestjs/core": "^7.6.13",
+    "@nestjs/platform-express": "^7.6.13",
+    "@nestjs/platform-socket.io": "^7.6.15",
+    "@nestjs/platform-ws": "^7.6.15",
+    "@nestjs/typeorm": "^7.1.5",
+    "@nestjs/websockets": "^7.6.15",
+    "class-transformer": "^0.4.0",
+    "class-validator": "^0.13.1",
+    "pg": "^8.5.1",
+    "reflect-metadata": "^0.1.13",
+    "rimraf": "^3.0.2",
+    "rxjs": "^6.6.6",
+    "typeorm": "^0.2.32"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^7.5.6",
+    "@nestjs/schematics": "^7.2.7",
+    "@nestjs/testing": "^7.6.13",
+    "@types/express": "^4.17.11",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.31",
+    "@types/socket.io": "^2.1.13",
+    "@types/supertest": "^2.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
+    "supertest": "^6.1.3",
+    "ts-jest": "^26.5.2",
+    "ts-loader": "^8.0.17",
+    "ts-node": "^9.1.1",
+    "tsconfig-paths": "^3.9.0",
+    "typescript": "^4.1.5"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}

+import { Module } from '@nestjs/common';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import configuration from './config/configuration';
+import { DroneModule } from './drone/drone.module';
+import { DroneEntity } from './entities/drone.entity';
+import { DroneLogEntity } from './entities/drone.log.entity';
+import { ScheduleEntity } from './entities/schedule.entity';
+import { MemberEntity } from './entities/member.entity';
+import { CodeEntity } from './entities/code.entity';
+import { DroneScheduleMappingEntity } from './entities/drone.schedule.mapping.entity';
+
+@Module({
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+      load: [configuration],
+    }),
+    TypeOrmModule.forRootAsync({
+      imports: [ConfigModule],
+      inject: [ConfigService],
+      useFactory: (configService: ConfigService) => ({
+        type: 'postgres',
+        host: configService.get('database.host'),
+        username: configService.get('database.user'),
+        password: configService.get('database.password'),
+        database: configService.get('database.name'),
+        port: configService.get('database.port'),
+        entities: [`${__dirname}/**/*.entity.{ts,js}`],
+        synchronize: false,
+      }),
+    }),
+    DroneModule,
+  ],
+  controllers: [],
+  providers: [],
+})
+export class AppModule {}

+import 'dotenv/config';
+
+export default () => ({
+  database: {
+    host: process.env.DATABASE_HOST || '',
+    user: process.env.DATABASE_USER || '',
+    name: process.env.DATABASE_NAME || '',
+    password: process.env.DATABASE_PASSWORD || '',
+    port: process.env.DATABASE_PORT || '',
+  },
+});
\ No newline at end of file

+import {
+  Body,
+  Controller,
+  Post,
+  UsePipes,
+  ValidationPipe,
+} from '@nestjs/common';
+import { DroneDataService } from 'src/drone/drone.data.service';
+import { DroneApiDto } from 'src/drone/dto/drone.api.dto';
+
+@Controller()
+export class DroneDataController {
+  constructor(private droneDataService: DroneDataService) {
+    this.droneDataService = droneDataService;
+  }
+
+  @Post('/droneLog/list')
+  @UsePipes(new ValidationPipe({ transform: true }))
+  async saveDroneLogList(
+    @Body() saveDroneLogListDto: DroneApiDto.SaveDroneLogListDto,
+  ) {
+    await this.droneDataService.saveDroneLogList(
+      saveDroneLogListDto.droneLogList,
+    );
+    return {
+      statusCode: 200,
+      statusMsg: '완료',
+    };
+  }
+}

+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { DroneLogEntity } from 'src/entities/drone.log.entity';
+import { DroneGateway } from 'src/drone/drone.gateway';
+import { Repository } from 'typeorm/index';
+import { DroneApiDto } from 'src/drone/dto/drone.api.dto';
+
+@Injectable()
+export class DroneDataService {
+  constructor(
+    @InjectRepository(DroneLogEntity)
+    private dronelogRepository: Repository<DroneLogEntity>,
+    private droneGateway: DroneGateway,
+  ) {
+    this.dronelogRepository = dronelogRepository;
+    this.droneGateway = droneGateway;
+  }
+
+  async saveDroneLogList(droneLogList: DroneApiDto.SaveDroneLogDto[]) {
+    // 드론 데이터 전송
+    this.sendDroneLogList(droneLogList.map((log) => new DroneLogEntity(log)));
+
+    // 드론로그 생성
+    for (const droneLog of droneLogList) {
+      this.dronelogRepository.save({
+        droneId: droneLog.droneId,
+        scheduleId: droneLog.scheduleId,
+        latitude: droneLog.latitude,
+        longitude: droneLog.longitude,
+        verticalSpeed: droneLog.verticalSpeed,
+        horizontalSpeed: droneLog.horizontalSpeed,
+        aboveSeaLevel: droneLog.aboveSeaLevel,
+        aboveGroundLevel: droneLog.aboveGroundLevel,
+      });
+    }
+  }
+
+  sendDroneLogList(droneLogList) {
+    // 드론데이터 전송
+    this.droneGateway.sendToClientsDroneLogList(droneLogList);
+    for (const droneLog of droneLogList) {
+      let droneLogEntity = new DroneLogEntity(droneLog);
+      this.dronelogRepository.save(droneLogEntity);
+    }
+  }
+
+  async saveLog(droneLogEntity: DroneLogEntity): Promise<void> {
+    await this.dronelogRepository.save(droneLogEntity);
+  }
+}

+import {
+  SubscribeMessage,
+  WebSocketGateway,
+  WebSocketServer,
+} from '@nestjs/websockets';
+import { Server, Socket } from 'ws';
+import { DroneService } from './drone.service';
+import { DroneLogEntity } from 'src/entities/drone.log.entity';
+
+async function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+@WebSocketGateway(20206, { path: '/drone' })
+export class DroneGateway {
+  constructor(private readonly droneService: DroneService) {}
+
+  @WebSocketServer()
+  server: Server;
+
+  private wsClients = [];
+
+  async afterInit() {
+    let globalCircleStep = 0;
+    while (1) {
+      if (globalCircleStep === 3600) {
+        globalCircleStep = 0;
+      } else {
+        globalCircleStep += 1;
+      }
+      this.wsClients.forEach((client) => {
+        const droneTestData = this.droneService.getDroneTestData({
+          globalCircleStep,
+        });
+        client.send(
+          JSON.stringify(
+            Object.assign({
+              data: { droneLog: droneTestData },
+              statusCode: 200,
+            }),
+          ),
+        );
+      });
+      await sleep(1000);
+    }
+  }
+
+  async handleConnection(client: Socket) {
+    let clientId = this.wsClients.push(client);
+  }
+
+  handleDisconnect(client: Socket) {
+    let clientIndex = this.wsClients.find((wsClient) => wsClient === client);
+    if (clientIndex !== -1) {
+      this.wsClients.splice(clientIndex, 1);
+    }
+  }
+
+  @SubscribeMessage('')
+  handleMessages(client: Socket, payload: { name: string; text: string }) {
+    client.send(
+      JSON.stringify({
+        number: 10,
+        member: 'tony',
+      }),
+    );
+  }
+
+  sendToClientsDroneLogList(droneLogList: Array<DroneLogEntity>) {
+    this.wsClients.forEach((client) => {
+      client.send(
+        JSON.stringify(
+          Object.assign({
+            data: { droneLog: droneLogList },
+            statusCode: 200,
+          }),
+        ),
+      );
+    });
+  }
+}

+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { DroneController } from './drone.controller';
+import { DroneService } from './drone.service';
+import { DroneDataController } from 'src/drone/drone.data.controller';
+import { DroneDataService } from './drone.data.service';
+import { DroneGateway } from './drone.gateway';
+import { DroneEntity } from 'src/entities/drone.entity';
+import { ScheduleEntity } from 'src/entities/schedule.entity';
+import { DroneLogEntity } from 'src/entities/drone.log.entity';
+import { MemberEntity } from 'src/entities/member.entity';
+import { CodeEntity } from 'src/entities/code.entity';
+import { DroneScheduleMappingEntity } from 'src/entities/drone.schedule.mapping.entity';
+
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([
+      MemberEntity,
+      DroneEntity,
+      DroneLogEntity,
+      ScheduleEntity,
+      CodeEntity,
+      DroneScheduleMappingEntity,
+    ]),
+  ],
+  controllers: [DroneController, DroneDataController],
+  providers: [DroneGateway, DroneService, DroneDataService],
+})
+export class DroneModule {}

+import {
+  IsArray,
+  IsNotEmpty,
+  IsOptional,
+  IsNumber,
+  IsString,
+  ValidateNested,
+  IsDateString,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+import { DroneEntity } from 'src/entities/drone.entity';
+
+export namespace DroneApiDto {
+  export class SaveDroneListDto {
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => DroneEntity)
+    droneList: DroneEntity[];
+  }
+
+  export class UpdateDroneListDto {
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => UpdateDroneDto)
+    droneList: UpdateDroneDto[];
+  }
+
+  export class UpdateDroneDto {
+    @IsNotEmpty()
+    @IsNumber()
+    id: number;
+
+    @IsString()
+    @IsOptional()
+    maker: string;
+
+    @IsString()
+    @IsOptional()
+    usage: string;
+
+    @IsNumber()
+    @IsOptional()
+    specification: number;
+
+    @IsNumber()
+    @IsOptional()
+    weight: number;
+  }
+
+  export class SaveSchduleListDto {
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => SaveSchduleDto)
+    schduleList: SaveSchduleDto[];
+  }
+
+  export class SaveSchduleDto {
+    @IsNotEmpty()
+    @IsNumber()
+    droneId: number;
+
+    @IsDateString()
+    @IsNotEmpty()
+    startTime: string;
+
+    @IsDateString()
+    @IsNotEmpty()
+    terminateTime: string;
+
+    @IsNumber()
+    @IsNotEmpty()
+    startLatitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    startLongitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    terminateLatitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    terminateLongitude: number;
+  }
+
+  export class UpdateSchduleListDto {
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => UpdateSchduleDto)
+    schduleList: UpdateSchduleDto[];
+  }
+
+  export class UpdateSchduleDto {
+    @IsNotEmpty()
+    @IsNumber()
+    id: number;
+
+    @IsDateString()
+    @IsNotEmpty()
+    startTime: string;
+
+    @IsDateString()
+    @IsNotEmpty()
+    terminateTime: string;
+
+    @IsNumber()
+    @IsNotEmpty()
+    startLatitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    startLongitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    terminateLatitude: number;
+
+    @IsNumber()
+    @IsNotEmpty()
+    terminateLongitude: number;
+  }
+
+  export class SaveDroneLogListDto {
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => SaveDroneLogDto)
+    droneLogList: SaveDroneLogDto[];
+  }
+
+  export class SaveDroneLogDto {
+    @IsNotEmpty()
+    @IsNumber()
+    droneId: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    scheduleId: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    latitude: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    longitude: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    verticalSpeed: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    horizontalSpeed: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    aboveSeaLevel: number;
+
+    @IsNotEmpty()
+    @IsNumber()
+    aboveGroundLevel: number;
+  }
+}

+export class DroneDto {
+  private _id: number;
+  private _model_name: string;
+  private _maker: string;
+  private _usage: string;
+  private _picture: string;
+  private _specification: number;
+  private _weight: number;
+
+  constructor(
+    id: number,
+    model_name: string,
+    maker: string,
+    usage: string,
+    picture: string,
+    specification: number,
+    weight: number,
+  ) {
+    this._id = id;
+    this._model_name = model_name;
+    this._maker = maker;
+    this._usage = usage;
+    this._picture = picture;
+    this._specification = specification;
+    this._weight = weight;
+  }
+
+  get id(): number {
+    return this._id;
+  }
+  set id(value: number) {
+    this._id = value;
+  }
+
+  get model_name(): string {
+    return this._model_name;
+  }
+  set model_name(value: string) {
+    this._model_name = value;
+  }
+
+  get maker(): string {
+    return this._maker;
+  }
+  set maker(value: string) {
+    this._maker = value;
+  }
+
+  get usage(): string {
+    return this._usage;
+  }
+  set usage(value: string) {
+    this._usage = value;
+  }
+
+  get picture(): string {
+    return this._picture;
+  }
+  set picture(value: string) {
+    this._picture = value;
+  }
+
+  get specification(): number {
+    return this._specification;
+  }
+  set specification(value: number) {
+    this._specification = value;
+  }
+
+  get weight(): number {
+    return this._weight;
+  }
+  set weight(value: number) {
+    this._weight = value;
+  }
+}

+export class DroneLogDto {
+  constructor(props) {
+    // props.id = props.id ? parseInt(props.id) : props.id;
+    props.droneId = props.droneId ? parseInt(props.droneId) : props.droneId;
+    props.scheduleId = props.scheduleId
+      ? parseInt(props.scheduleId)
+      : props.scheduleId;
+    Object.assign(this, props);
+  }
+  id: number;
+  droneId: number;
+  scheduleId: number;
+  latitude: number;
+  longitude: number;
+  verticalSpeed: number;
+  horizontalSpeed: number;
+  aboveSeaLevel: number;
+  aboveGroundLevel: number;
+}

+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'code', schema: 'public' })
+export class CodeEntity {
+  @PrimaryGeneratedColumn({ name: 'id' })
+  id: number;
+
+  @Column({ length: 20, name: 'code_group' })
+  code_Group: string;
+
+  @Column({ length: 20, name: 'code_group_name' })
+  codeGroupName: string;
+
+  @Column({ length: 20, name: 'code_text' })
+  codeText: string;
+
+  @Column({ length: 20, name: 'code_value' })
+  codeValue: string;
+
+  @Column({ length: 20, name: 'code_value_name' })
+  codeValueName: string;
+}

+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'drone', schema: 'public' })
+export class DroneEntity {
+  @PrimaryGeneratedColumn({ name: 'id' })
+  id: number;
+
+  @Column({ length: 20, name: 'model_name' })
+  modelName: string;
+
+  @Column({ length: 20 })
+  maker: string;
+
+  @Column({ length: 20 })
+  usage: string;
+
+  @Column({ length: 20, name: 'usagename' })
+  usageName: string;
+
+  @Column({ length: 20 })
+  picture: string;
+
+  @Column()
+  specification: number;
+
+  @Column()
+  weight: number;
+}

+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'drone_log', schema: 'public' })
+export class DroneLogEntity {
+  @PrimaryGeneratedColumn({ name: 'id' })
+  id: number;
+
+  @Column({ name: 'drone_id' })
+  droneId: number;
+
+  @Column({ name: 'schedule_id' })
+  scheduleId: number;
+
+  @Column()
+  latitude: number;
+
+  @Column()
+  longitude: number;
+
+  @Column({ name: 'vertical_speed' })
+  verticalSpeed: number;
+
+  @Column({ name: 'horizontal_speed' })
+  horizontalSpeed: number;
+
+  @Column({ name: 'above_sea_level' })
+  aboveSeaLevel: number;
+
+  @Column({ name: 'above_ground_level' })
+  aboveGroundLevel: number;
+
+  @Column({ type: 'timestamp', name: 'created_at' })
+  createdAt: Date;
+
+  constructor(props) {
+    Object.assign(this, props);
+  }
+}

+import { Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'drone_schedule_mapping', schema: 'public' })
+export class DroneScheduleMappingEntity {
+  @PrimaryGeneratedColumn({ name: 'drone_id' })
+  droneId: number;
+
+  @PrimaryGeneratedColumn({ name: 'schedule_id' })
+  scheduleId: number;
+}

+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'member', schema: 'public' })
+export class MemberEntity {
+  @PrimaryGeneratedColumn({ name: 'id' })
+  id: number;
+
+  @Column({ length: 15 })
+  name: string;
+
+  @Column({ length: 20, name:'tel_number' })
+  telNumber: string;
+
+  @Column({ length: 20 })
+  affiliation: string;
+}

+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm/index';
+
+@Entity({ name: 'schedule', schema: 'public' })
+export class ScheduleEntity {
+  @PrimaryGeneratedColumn({ name: 'id' })
+  id: number;
+
+  @Column({ type: 'timestamp', name: 'start_time' })
+  startTime: Date;
+
+  @Column({ type: 'timestamp', name: 'terminate_time' })
+  terminateTime: Date;
+
+  @Column({ name: 'start_latitude' })
+  startLatitude: number;
+
+  @Column({ name: 'start_longitude' })
+  startLongitude: number;
+
+  @Column({ name: 'terminate_latitude' })
+  terminateLatitude: number;
+
+  @Column({ name: 'terminate_longitude' })
+  terminateLongitude: number;
+}

+import { NestFactory } from '@nestjs/core';
+import { WsAdapter } from '@nestjs/platform-ws';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  app.useWebSocketAdapter(new WsAdapter(app));
+  await app.listen(20205);
+}
+bootstrap();

+import { Test, TestingModule } from '@nestjs/testing';
+import { INestApplication } from '@nestjs/common';
+import * as request from 'supertest';
+import { AppModule } from './../src/app.module';
+
+describe('AppController (e2e)', () => {
+  let app: INestApplication;
+
+  beforeEach(async () => {
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+
+    app = moduleFixture.createNestApplication();
+    await app.init();
+  });
+
+  it('/ (GET)', () => {
+    return request(app.getHttpServer())
+      .get('/')
+      .expect(200)
+      .expect('Hello World!');
+  });
+});

+{
+  "moduleFileExtensions": ["js", "json", "ts"],
+  "rootDir": ".",
+  "testEnvironment": "node",
+  "testRegex": ".e2e-spec.ts$",
+  "transform": {
+    "^.+\\.(t|j)s$": "ts-jest"
+  }
+}

+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true
+  }
+}

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

+BASE_I18N_LOCALE=ko
+BASE_I18N_FALLBACK_LOCALE=ko
+BASE_API_URL=http://14.33.35.148:20205
+BASE_APP_URL=http://localhost:3000

+BASE_API_URL=http://14.33.35.148:20205
+BASE_APP_URL=http://14.33.35.148:20201
+

+node_modules
+lib/api-client
+**/*.ts

+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  plugins: [
+  ],
+  // add your custom rules here
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-vars': 'warn',
+    'comma-dangle': ['error', 'always-multiline'],
+    'linebreak-style': 0,
+    'import/no-extraneous-dependencies': 0,
+    'no-shadow': 0,
+    'import/prefer-default-export': 0,
+    'max-len': ['warn', { code: 200 }],
+    'import/extensions': ['error', 'always', {
+      js: 'never',
+      jsx: 'never',
+      vue: 'never',
+    }],
+    indent: [2, 2],
+  },
+  settings: {
+    'import/extensions': ['.js', '.jsx', '.vue'],
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@', './src'],
+        ],
+        extensions: ['.js', '.vue', '.jsx'],
+      },
+      node: {
+        extensions: ['.js', '.vue', '.jsx'],
+      },
+    },
+  },
+};

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+.DS_Store

+stages:
+  - others
+  - build
+  - deploy
+
+.build:
+  cache:
+    paths:
+      - node_modules/
+
+.deploy:
+  variables:
+    GIT_STRATEGY: none
+
+dev_build:
+  stage: build
+  extends: .build
+  script:
+    - yarn install
+    - yarn build
+  only:
+    - develop
+  tags:
+    - front
+
+dev_deploy:
+  stage: deploy
+  extends: .deploy
+  script:
+    - pm2 start --exp-backoff-restart-delay=100
+  only:
+    - develop
+  tags:
+    - front
+#(DEV) mockserver:
+#  stage: deploy
+#  extends: .deploy
+#  image: node:15
+#  script: yarn serve
+#  only:
+#    - develop
+#  artifacts:
+#    paths:
+#      - ./
+#  tags:
+#    - ws-server
+#
+#(DEV) websocket:
+#  stage: deploy
+#  extends: .deploy
+#  image: docker:latest
+#  script: yarn ws
+#  only:
+#    - develop
+#  artifacts:
+#    paths:
+#      - ./
+#  tags:
+#    - api-server

+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": false,
+  "arrowParens": "always"
+}

+# drone-web-nuxt
+
+## Build Setup
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

+#!/bin/bash
+
+echo "Running server in the background"
+sudo systemctl restart hello-react

+module.exports = {
+  apps: [
+    {
+      name: 'drone-front',
+      // package.json에 정의된 npm run start를 실행하게 해서 PM2로 관리하게 한다.
+      script: 'yarn',
+      args: 'run start',
+      instances: '1',
+      max_memory_restart: '1G',
+      error_file: 'err.log',
+      out_file: 'out.log',
+      log_file: 'combined.log',
+    },
+  ],
+};

+[Unit]
+Description=Drone front service
+After=network.target
+StartLimitIntervalSec=0
+
+[Service]
+Type=simple
+Restart=always
+RestartSec=1
+User=gitlab-runner
+ExecStart=/home/gitlab-runner/builds/4hhEfxWU/0/khu-oz-wizard/drone-monitoring-web-ui yarn start
+
+[Install]
+WantedBy=multi-user.target

+map $sent_http_content_type $expires {
+    "text/html"                 epoch;
+    "text/html; charset=utf-8"  epoch;
+    default                     off;
+}
+
+server {
+    listen          20205;
+    server_name     localhost;
+
+    gzip            on;
+    gzip_types      text/plain application/xml text/css application/javascript;
+    gzip_min_length 1000;
+
+    location / {
+        expires $expires;
+
+        proxy_redirect                      off;
+        proxy_set_header Host               $host;
+        proxy_set_header X-Real-IP          $remote_addr;
+        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto  $scheme;
+        proxy_read_timeout          1m;
+        proxy_connect_timeout       1m;
+        proxy_pass                          http://127.0.0.1:3000;
+    }
+}

+/* eslint-disable no-unused-vars */
+import api from './nuxtConfig/api';
+import build from './nuxtConfig/build';
+import theme from './nuxtConfig/theme';
+import nuxtConfigModule from './nuxtConfig/module';
+import io from './nuxtConfig/ioConfig';
+import extendRouter from './nuxtConfig/extendRouter';
+
+// 설정 내용이 짧은 것 및 구조화 하기 애매한 것은 별도 파일로 관리하지 않음.
+export default {
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: 'drone-web-nuxt',
+    htmlAttrs: {
+      lang: 'en',
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' },
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+    ],
+  },
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: false,
+  // source Directory
+  srcDir: 'src/',
+
+  /* middleware */
+  serverMiddleware: [
+    './serverMiddleWare/index',
+  ],
+  router: {
+    // router middleware
+    middleware: 'router',
+    // router extend
+    // extendRoutes: extendRouter,
+  },
+
+  // module, plugin, alias, robots
+  ...nuxtConfigModule,
+  // axios, proxy, auth
+  ...api,
+  // env, runtimeConfig, build
+  ...build,
+  // loading, transition, css
+  ...theme,
+
+  // vue Global Config
+  vue: {
+    config: {
+      productionTip: true,
+      devtools: process.env.NODE_ENV === 'development',
+      // silent: process.env.NODE_ENV !== 'development',
+      // performance: process.env.NODE_ENV === 'development',
+    },
+  },
+
+  // robots Setting
+  robots: {
+    UserAgent: '*',
+    Disallow: '/',
+  },
+  // socket io Setting
+  io,
+};

+import { version } from '../package.json';
+
+/**
+ * api 관련된 nuxt 옵션을 정리합니다.
+ * 해당 옵션은 아래와 같습니다.
+ * auth, axios, proxy,
+ */
+export default {
+  // Axios module configuration: https://go.nuxtjs.dev/config-axios
+  axios: {
+    proxy: true,
+    retry: { retries: 3 },
+    // baseUrl: 'http://localhost:5555',
+    headers: {
+      common: {
+        Accept: 'application/json, text/plain, */*',
+        AppVersion: version,
+      },
+      delete: {},
+      get: {},
+      head: {},
+      post: {},
+      put: {},
+      patch: {},
+    },
+  },
+  proxy: {
+    '/api': {
+      target: process.env.BASE_API_URL || 'http://14.33.35.148:20205',
+      pathRewrite: {
+        '^/api': '',
+      },
+      changeOrigin: true,
+    },
+  },
+  auth: {
+    // Options
+  },
+};

+/**
+ * 빌드에 관련된 nuxt 옵션을 정리합니다.
+ * 해당 옵션은 아래와 같습니다.
+ * env, build,
+ */
+export default {
+  // modern property https://ko.nuxtjs.org/docs/2.x/configuration-glossary/configuration-modern
+  modern: false,
+  /* env Setting */
+  env: {
+    BASE_API_URL: process.env.BASE_API_URL,
+    BASE_APP_URL: process.env.BASE_APP_URL,
+    BASE_I18N_LOCALE: process.env.BASE_I18N_LOCALE,
+    BASE_I18N_FALLBACK_LOCALE: process.env.BASE_I18N_FALLBACK_LOCALE,
+  },
+  // public nuxt.context config variables
+  publicRuntimeConfig: {
+    BASE_API_URL: process.env.BASE_API_URL,
+    BASE_APP_URL: process.env.BASE_APP_URL,
+    BASE_I18N_LOCALE: process.env.BASE_I18N_LOCALE,
+    BASE_I18N_FALLBACK_LOCALE: process.env.BASE_I18N_FALLBACK_LOCALE,
+  },
+  // private nuxt.context config variables
+  privateRuntimeConfig: {
+
+  },
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+    loaders: {
+      vue: {
+        transformAssetUrls: {
+          'vl-style-icon': 'src',
+        },
+      },
+      // for Antdv CustomTheme Setting
+      less: {
+        lessOptions: {
+          javascriptEnabled: true,
+          math: 'always',
+        },
+      },
+    },
+    devtool: true,
+    analyze: true,
+  },
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+    // https://go.nuxtjs.dev/eslint
+    '@nuxt/image',
+  ],
+  image: {
+    staticFilename: '[publicPath]/images/[name]-[hash][ext]',
+    presets: {
+      avatar: {
+        modifiers: {
+          format: 'jpg',
+          width: 50,
+          height: 50,
+        },
+      },
+    },
+  },
+};

+export default function extendRoutes(routes, resolve) {
+  routes.push({
+    name: '404Page',
+    path: '*',
+    redirect: '/auth/404',
+    component: resolve(__dirname, '../src/pages/auth/404.vue'),
+  });
+}

+export default {
+  sockets: [
+    {
+      name: 'main',
+      url: 'http://localhost:8888',
+      default: true,
+    },
+  ],
+};

+/**
+ * 모듈에 관련된 nuxt 옵션을 정리합니다.
+ * 해당 옵션은 아래와 같습니다.
+ * module, plugin, alias
+ */
+import { resolve } from 'path';
+
+export default {
+// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    resolve(__dirname, '../src/plugins/ApiClient/index'),
+    resolve(__dirname, '../src/plugins/antDesign'),
+    resolve(__dirname, '../src/plugins/Dayjs/index'),
+    { src: '@/plugins/client-only.client.js' },
+    { src: '@/plugins/globalMixins' },
+    { src: '@/plugins/vuelayers.js', ssr: false },
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    // https://go.nuxtjs.dev/axios
+    '@nuxtjs/axios',
+    '@nuxtjs/style-resources',
+    '@nuxtjs/auth-next',
+    '@nuxtjs/sitemap',
+    '@nuxtjs/robots',
+    'nuxt-socket-io',
+    'nuxt-leaflet',
+    resolve(__dirname, '../src/modules/vuelayers.js'),
+  ],
+  // alias
+  alias: {
+    '@': resolve(__dirname, '../src/'),
+    images: resolve(__dirname, '../src/assets/images'),
+    styles: resolve(__dirname, '../src/assets/styles'),
+  },
+};

+/**
+ * 테마에 관련된 nuxt 옵션을 정리합니다.
+ * 해당 옵션은 아래와 같습니다.
+ * trainsition, css, loading
+ */
+import { resolve } from 'path';
+
+export default {
+// Theme Animation
+  loading: {
+    color: '#1890ff',
+    height: '4px',
+  },
+  layoutTransition: {
+    name: 'default-layout',
+    mode: 'out-in',
+  },
+  pageTransition: {
+    name: 'default-page',
+    mode: 'out-in',
+  },
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    resolve(__dirname, '../src/assets/styles/less/index'),
+    resolve(__dirname, '../src/assets/styles/scss/index'),
+  ],
+};

+{
+  "name": "drone-web-nuxt",
+  "version": "1.0.3",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "analyze-dev": "nuxt --analyze",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "build-mo": "nuxt build --modern=server",
+    "analyze-build": "nuxt build --analyze",
+    "start-mo": "nuxt start --modern=server",
+    "generate": "nuxt generate",
+    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
+    "lint": "yarn lint:js",
+    "serve": "json-server --watch lib/db.json --port 5555",
+    "socket": "node ./serverMiddleWare/socket.js",
+    "ws": "node ./serverMiddleWare/ws.js",
+    "wsm": "node ./serverMiddleWare/multWs.js",
+    "wsmp": "node ./serverMiddleWare/multPWs.js",
+    "k6": "k6 run ./serverMiddleWare/k6.js",
+    "k6m": "k6 run ./serverMiddleWare/k6mult.js"
+  },
+  "dependencies": {
+    "@nuxtjs/auth-next": "5.0.0-1613647907.37b1156",
+    "@nuxtjs/axios": "^5.13.1",
+    "@nuxtjs/robots": "^2.5.0",
+    "@nuxtjs/sitemap": "^2.4.0",
+    "ant-design-vue": "^1.7.2",
+    "core-js": "^3.8.3",
+    "cors": "^2.8.5",
+    "dayjs": "^1.10.4",
+    "express": "^4.17.1",
+    "highcharts": "^9.0.1",
+    "highcharts-vue": "^1.3.5",
+    "nuxt": "^2.14.12",
+    "nuxt-leaflet": "^0.0.25",
+    "nuxt-socket-io": "^1.1.14",
+    "socket.io": "^4.0.0",
+    "store2": "^2.12.0",
+    "vuelayers": "^0.11.35",
+    "vuex": "^3.6.2",
+    "ws": "^7.4.4"
+  },
+  "devDependencies": {
+    "@nuxt/image": "^0.4.13",
+    "@nuxtjs/eslint-config": "^5.0.0",
+    "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/style-resources": "^1.0.0",
+    "@vue/cli-service": "^4.5.11",
+    "@vue/eslint-config-airbnb": "^5.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.18.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-nuxt": "^2.0.0",
+    "eslint-plugin-vue": "^7.5.0",
+    "fibers": "^5.0.0",
+    "json-server": "^0.16.3",
+    "less": "^4.1.1",
+    "less-loader": "7",
+    "sass": "^1.32.8",
+    "sass-loader": "10"
+  }
+}

+// <project root>/api/index.js
+// const express = require('express');
+const app = require('express')();
+const http = require('http').createServer(app);
+const io = require('socket.io')(http);
+
+// 실제로는 /api 라우트를 처리하는 메소드가 된다.
+app.get('/', (req, res) => {
+  console.log('hi');
+  io.emit('connection');
+  res.send('API root');
+});
+
+io.of('/analytics').on('connect', (socket) => {
+  console.log('클라이언트 접속');
+
+  socket.on('disconnect', () => {
+    console.log('클라이언트 접속 종료');
+  });
+  setInterval(() => {
+    socket.emit('message', '메세지');
+  }, 3000);
+});
+
+// 모듈로 사용할 수 있도록 export
+// 앱의 /api/* 라우트로 접근하는 모든 요청은 모두 app 인스턴스에게 전달된다.
+module.exports = {
+  path: '/socket',
+  handler: app,
+};

+import ws from 'k6/ws';
+import { check } from 'k6';
+
+export const options = {
+  // vus: 100,
+  // duration: '30s',
+  stages: [
+    { duration: '60s', target: 10 },
+  ],
+};
+
+export default function () {
+  const url = 'ws://localhost:8080';
+  const params = { tags: { my_tag: 'hello' } };
+
+  const res = ws.connect(url, params, (socket) => {
+    socket.on('open', () => console.log('connected'));
+    socket.on('message', (data) => console.log('Message received: '));
+    socket.on('close', () => console.log('disconnected'));
+    socket.setTimeout(() => {
+      console.log('60 seconds passed, closing the socket');
+      socket.close();
+    }, 30000);
+  });
+
+  check(res, { 'status is 101': (r) => r && r.status === 101 });
+}

+import ws from 'k6/ws';
+import { check } from 'k6';
+
+export const options = {
+  // vus: 100,
+  // duration: '30s',
+  stages: [
+    { duration: '60s', target: 10 },
+    // { duration: '10s', target: 30 },
+    // { duration: '20s', target: 50 },
+  ],
+};
+
+export default function () {
+  const url = 'ws://localhost:8080';
+  const params = { tags: { my_tag: 'hello' } };
+  const res = {};
+
+  for (let i = 0; i < 10; i += 1) {
+    res[i] = ws.connect(`${url}/${i + 1}`, params, (socket) => {
+      socket.on('open', () => console.log('connected', i));
+      socket.on('message', (data) => console.log('Message received: ', i));
+      socket.on('close', () => console.log('disconnected'));
+      socket.setTimeout(() => {
+        console.log('60 seconds passed, closing the socket');
+        socket.close();
+      }, 60000);
+    });
+  }
+  console.log(res);
+  check(res, {
+    'status1 is 101': (r) => r && r[0].status === 101,
+    'status2 is 101': (r) => r && r[1].status === 101,
+    'status3 is 101': (r) => r && r[2].status === 101,
+    'status4 is 101': (r) => r && r[3].status === 101,
+  });
+}
+//
+// const res1 = ws.connect(`${url}/${1}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 1'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res2 = ws.connect(`${url}/${2}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 2'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res3 = ws.connect(`${url}/${3}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 3'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res4 = ws.connect(`${url}/${4}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 4'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res5 = ws.connect(`${url}/${5}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 5'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res6 = ws.connect(`${url}/${6}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 6'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res7 = ws.connect(`${url}/${7}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 7'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res8 = ws.connect(`${url}/${8}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 8'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res9 = ws.connect(`${url}/${9}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 9'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+//
+// const res10 = ws.connect(`${url}/${10}`, params, (socket) => {
+//   socket.on('open', () => console.log('connected'));
+//   socket.on('message', (data) => console.log('Message received: 10'));
+//   socket.on('close', () => console.log('disconnected'));
+//   socket.setTimeout(() => {
+//     console.log('60 seconds passed, closing the socket');
+//     socket.close();
+//   }, 60000);
+// });
+// check([res1, res2, res3, res10], { 'status is 101': (r) => r && r.status === 101 });

+/* eslint-disable prefer-arrow-callback,consistent-return,no-param-reassign,no-mixed-operators,no-use-before-define */
+const http = require('http');
+const WebSocket = require('ws');
+const url = require('url');
+
+const server = http.createServer();
+const wss = {};
+
+const dataNum = process.argv[2];
+const wsServerCnt = process.argv[3];
+const port = process.argv[4];
+const dataPerWsServer = dataNum / wsServerCnt;
+
+console.log(process.argv);
+
+let pingInterval = null;
+let sendInterval = null;
+
+const logData = [];
+for (let i = 0; i < dataPerWsServer; i += 1) {
+  logData.push({
+    latitude: getRandomArbitrary(37200000000000, 37300000000000) / 1000000000000,
+    longitude: getRandomArbitrary(126900000000000, 127100000000000) / 1000000000000,
+    id: i,
+  });
+}
+
+function getRandomArbitrary(min, max) {
+  return parseInt((Math.random() * (max - min) + min), 10);
+}
+function circleMove(x, y, radius, max, circleStep) {
+  return {
+    latitude: x + radius * Math.cos(2 * Math.PI * circleStep / max),
+    longitude: y + radius * Math.sin(2 * Math.PI * circleStep / max),
+  };
+}
+function makeCoordData(log, circleStep) {
+  if (circleStep == null) {
+    circleStep = 0;
+  }
+  if (circleStep === 3600) {
+    circleStep = 0;
+  } else circleStep += 1;
+
+  // console.log('step', circleStep);
+
+  return Array.from(
+    { length: dataPerWsServer },
+    (v, i) => ({
+      id: i,
+      ...circleMove(log[i].latitude, log[i].longitude, 0.05, 3600, circleStep),
+      time: new Date(),
+    }),
+  );
+}
+function heartbeat() {
+  this.isAlive = true;
+  console.log('client Heartbeat');
+}
+function noop() {}
+
+for (let i = 0; i < wsServerCnt; i += 1) {
+  wss[i + 1] = new WebSocket.Server({ noServer: true });
+}
+
+Object.entries(wss).forEach(([key, wss]) => {
+  wss.on('connection', (ws) => {
+    console.log('connected', key);
+    ws.isAlive = true;
+    ws.on('pong', heartbeat);
+    ws.on('message', function incoming(message) {
+      console.log('received: %s', message);
+    });
+    let circleStep = 0;
+    sendInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const coordData = makeCoordData(logData, circleStep);
+        ws.send(JSON.stringify(coordData));
+      }
+      circleStep += 1;
+    }, 1000);
+
+    ws.on('close', function close() {
+      console.log('websocket Closed');
+      clearInterval(pingInterval);
+      clearInterval(sendInterval);
+      // sendInterval = null;
+    });
+
+    /* ping check */
+    pingInterval = setInterval(function ping() {
+      wss.clients.forEach(function each(ws) {
+        if (ws.isAlive === false) return ws.terminate();
+        ws.isAlive = false;
+        ws.ping(noop);
+      });
+    }, 30000);
+
+    wss.on('close', function close() {
+      console.log('server closed');
+      clearInterval(pingInterval);
+      clearInterval(sendInterval);
+    });
+  });
+});
+
+server.on('upgrade', (request, socket, head) => {
+  const { pathname } = url.parse(request.url);
+
+  Object.entries(wss).forEach(([key, wss]) => {
+    if (`/${key}` === pathname) {
+      wss.handleUpgrade(request, socket, head, (ws) => {
+        wss.emit('connection', ws, request);
+      });
+    }
+  });
+});
+
+server.listen(port);

+/* eslint-disable prefer-arrow-callback,consistent-return,no-param-reassign,no-mixed-operators,no-use-before-define */
+const http = require('http');
+const WebSocket = require('ws');
+const url = require('url');
+
+const server = http.createServer();
+const wss = {};
+
+const dataNum = 20000;
+const wsServerCnt = process.argv[2];
+console.log(wsServerCnt);
+const dataPerWsServer = dataNum / wsServerCnt;
+
+let pingInterval = null;
+let sendInterval = null;
+
+const logData = [];
+for (let i = 0; i < dataPerWsServer; i += 1) {
+  logData.push({
+    latitude: getRandomArbitrary(37200000000000, 37300000000000) / 1000000000000,
+    longitude: getRandomArbitrary(126900000000000, 127100000000000) / 1000000000000,
+    id: i,
+  });
+}
+
+function getRandomArbitrary(min, max) {
+  return parseInt((Math.random() * (max - min) + min), 10);
+}
+function circleMove(x, y, radius, max, circleStep) {
+  return {
+    latitude: x + radius * Math.cos(2 * Math.PI * circleStep / max),
+    longitude: y + radius * Math.sin(2 * Math.PI * circleStep / max),
+  };
+}
+function makeCoordData(log, circleStep) {
+  if (circleStep == null) {
+    circleStep = 0;
+  }
+  if (circleStep === 3600) {
+    circleStep = 0;
+  } else circleStep += 1;
+
+  // console.log('step', circleStep);
+
+  return Array.from(
+    { length: dataPerWsServer },
+    (v, i) => ({
+      id: i,
+      ...circleMove(log[i].latitude, log[i].longitude, 0.05, 3600, circleStep),
+      time: new Date(),
+    }),
+  );
+}
+function heartbeat() {
+  this.isAlive = true;
+  console.log('client Heartbeat');
+}
+function noop() {}
+
+for (let i = 0; i < wsServerCnt; i += 1) {
+  wss[i + 1] = new WebSocket.Server({ noServer: true });
+}
+
+Object.entries(wss).forEach(([key, wss]) => {
+  wss.on('connection', (ws) => {
+    console.log('connected', key);
+    ws.isAlive = true;
+    ws.on('pong', heartbeat);
+    ws.on('message', function incoming(message) {
+      console.log('received: %s', message);
+    });
+    let circleStep = 0;
+    sendInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const coordData = makeCoordData(logData, circleStep);
+        ws.send(JSON.stringify(coordData));
+      }
+      circleStep += 1;
+    }, 1000);
+
+    ws.on('close', function close() {
+      console.log('websocket Closed');
+      clearInterval(pingInterval);
+      clearInterval(sendInterval);
+      // sendInterval = null;
+    });
+
+    /* ping check */
+    pingInterval = setInterval(function ping() {
+      wss.clients.forEach(function each(ws) {
+        if (ws.isAlive === false) return ws.terminate();
+        ws.isAlive = false;
+        ws.ping(noop);
+      });
+    }, 30000);
+
+    wss.on('close', function close() {
+      console.log('server closed');
+      clearInterval(pingInterval);
+      clearInterval(sendInterval);
+    });
+  });
+});
+
+server.on('upgrade', (request, socket, head) => {
+  const { pathname } = url.parse(request.url);
+
+  Object.entries(wss).forEach(([key, wss]) => {
+    if (`/${key}` === pathname) {
+      wss.handleUpgrade(request, socket, head, (ws) => {
+        wss.emit('connection', ws, request);
+      });
+    }
+  });
+});
+
+server.listen(20203);

+/* eslint-disable prefer-arrow-callback */
+// <project root>/api/index.js
+// const express = require('express');
+
+function getRandomArbitrary(min, max) {
+  return parseInt((Math.random() * (max - min) + min), 10);
+}
+const app = require('express')();
+const http = require('http').createServer(app);
+const io = require('socket.io')(http, {
+  cors: true,
+  origins: ['http://127.0.0.1:3000', 'http://127.0.0.1:8888', 'http://localhost:3000'],
+});
+const cors = require('cors');
+
+app.use(cors());
+
+// 실제로는 /api 라우트를 처리하는 메소드가 된다.
+app.get('/', (req, res) => {
+  console.log('hi');
+  io.of('/testSoc').emit('connection', { data: '1234' });
+  res.send('API root');
+});
+
+io.of('/testSoc').on('connect', (socket) => {
+  console.log('클라이언트 접속');
+
+  socket.on('getMessage', (data) => {
+    console.log('fromClient', data);
+  });
+  socket.on('disconnect', () => {
+    console.log('클라이언트 접속 종료');
+  });
+  setInterval(() => {
+    socket.emit('receiveLog', { num: getRandomArbitrary(10, 100), time: new Date() });
+  }, 1000);
+});
+
+http.listen(8888, () => {
+  console.log('Socket IO server listening on port 8888');
+});

+import ws from 'k6/ws';
+import { check } from 'k6';
+
+export default function () {
+  const url = 'ws://echo.websocket.org';
+  const params = { tags: { my_tag: 'hello' } };
+
+  const res = ws.connect(url, params, (socket) => {
+    socket.on('open', () => {
+      console.log('connected');
+
+      socket.setInterval(() => {
+        socket.ping();
+        console.log('Pinging every 1sec (setInterval test)');
+      }, 1000);
+    });
+
+    socket.on('ping', () => {
+      console.log('PING!');
+    });
+
+    socket.on('pong', () => {
+      console.log('PONG!');
+    });
+
+    socket.on('close', () => {
+      console.log('disconnected');
+    });
+
+    socket.setTimeout(() => {
+      console.log('2 seconds passed, closing the socket');
+      socket.close();
+    }, 2000);
+  });
+
+  check(res, {
+    'status is 101': (r) => r && r.status === 101,
+    'Homepage body size is 11026 bytes': (r) => r.body && r.body.length === 11026,
+    test: (r) => r,
+  });
+}

+/* eslint-disable prefer-arrow-callback,consistent-return,no-param-reassign,no-mixed-operators,no-use-before-define */
+let pingInterval = null;
+let sendInterval = null;
+const logData = [];
+const dataNum = 20000;
+for (let i = 0; i < dataNum; i += 1) {
+  logData.push({
+    latitude: getRandomArbitrary(37200000000000, 37300000000000) / 1000000000000,
+    longitude: getRandomArbitrary(126900000000000, 127100000000000) / 1000000000000,
+    id: i,
+  });
+}
+
+function getRandomArbitrary(min, max) {
+  return parseInt((Math.random() * (max - min) + min), 10);
+}
+function circleMove(x, y, radius, max, circleStep) {
+  return {
+    latitude: x + radius * Math.cos(2 * Math.PI * circleStep / max),
+    longitude: y + radius * Math.sin(2 * Math.PI * circleStep / max),
+  };
+}
+function makeCoordData(log, circleStep) {
+  if (circleStep == null) {
+    circleStep = 0;
+  }
+  if (circleStep === 3600) {
+    circleStep = 0;
+  } else circleStep += 1;
+
+  console.log('step', circleStep);
+
+  return Array.from(
+    { length: dataNum },
+    (v, i) => ({
+      id: i,
+      ...circleMove(log[i].latitude, log[i].longitude, 0.05, 3600, circleStep),
+      time: new Date(),
+    }),
+  );
+}
+function heartbeat() {
+  this.isAlive = true;
+  console.log('client Heartbeat');
+}
+function noop() {}
+
+const WebSocket = require('ws');
+
+const wss = new WebSocket.Server({
+  port: 20202,
+  perMessageDeflate: {
+    zlibDeflateOptions: {
+      // See zlib defaults.
+      chunkSize: 1024,
+      memLevel: 7,
+      level: 3,
+    },
+    zlibInflateOptions: {
+      chunkSize: 10 * 1024,
+    },
+    // Other options settable:
+    clientNoContextTakeover: true, // Defaults to negotiated value.
+    serverNoContextTakeover: true, // Defaults to negotiated value.
+    serverMaxWindowBits: 10, // Defaults to negotiated value.
+    // Below options specified as default values.
+    concurrencyLimit: 10, // Limits zlib concurrency for perf.
+    threshold: 1024, // Size (in bytes) below which messages
+    // should not be compressed.
+  },
+});
+
+wss.on('connection', function connection(ws) {
+  ws.isAlive = true;
+  ws.on('pong', heartbeat);
+  ws.on('message', function incoming(message) {
+    console.log('received: %s', message);
+  });
+  let circleStep = 0;
+  sendInterval = setInterval(() => {
+    if (ws.readyState === WebSocket.OPEN) {
+      const coordData = makeCoordData(logData, circleStep);
+      ws.send(JSON.stringify(coordData));
+    }
+    circleStep += 1;
+  }, 1000);
+
+  ws.on('close', function close() {
+    console.log('websocket Closed');
+    clearInterval(pingInterval);
+    clearInterval(sendInterval);
+    // sendInterval = null;
+  });
+});
+
+/* ping check */
+pingInterval = setInterval(function ping() {
+  wss.clients.forEach(function each(ws) {
+    if (ws.isAlive === false) return ws.terminate();
+    ws.isAlive = false;
+    ws.ping(noop);
+  });
+}, 30000);
+
+wss.on('close', function close() {
+  console.log('server closed');
+  clearInterval(pingInterval);
+  clearInterval(sendInterval);
+});

+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

+@import 'node_modules/ant-design-vue/dist/antd.less';
+@import '@/assets/styles/less/partials/antdesignCustom.less';

+/* default Variable */
+@primary-color: #1890ff; // primary color for all components
+@link-color: #1890ff; // link color
+@success-color: #52c41a; // success state color
+@warning-color: #faad14; // warning state color
+@error-color: #f5222d; // error state color
+@font-size-base: 14px; // major text font size
+@heading-color: rgba(0, 0, 0, 0.85); // heading text color
+@text-color: rgba(0, 0, 0, 0.65); // major text color
+@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
+@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
+@border-radius-base: 4px; // major border radius
+@border-color-base: #d9d9d9; // major border color
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

+// Colors
+$white: #fff;
+$black: #001529;
+$blue: var(--kit-color-primary);
+$blue-light: #3d6ee7;
+$blue-dark: #103daf;
+$gray-1: #f2f4f8;
+$gray-2: #e4e9f0;
+$gray-3: #dde2ec;
+$gray-4: #c3bedc;
+$gray-5: #aca6cc;
+$gray-6: #786fa4;
+$yellow: #ff0;
+$orange: #f2a654;
+$red: #b52427;
+$pink: #fd3995;
+$purple: #652eff;
+$green: #41b883;
+$kdis-color: #0c7037;
+$antblue: #1890ff;
+
+$text: $gray-6;
+$border: $gray-2;
+
+// Accent colors
+$default: $gray-4;
+$primary: $kdis-color;
+$secondary: $gray-5;
+$success: $green;
+$info: $blue-light;
+$warning: $orange;
+$danger: $red;
+$light: $gray-1;
+$dark: $black;
+
+// dark theme
+$dark-gray-1: #aeaee0;
+$dark-gray-2: #7575a3;
+$dark-gray-3: #4f4f7a;
+$dark-gray-4: #2a274d;
+$dark-gray-5: #161537;
+$dark-gray-6: #100f28;
+
+// Font Family
+$base-font-family: 'Noto Sans KR', sans-serif;
+
+// Font Size
+$base-font-size: 15 !default;

+@import '@/assets/styles/scss/partials/transition.scss';
+@import '@/assets/styles/scss/partials/page.scss';
+@import '@/assets/styles/scss/partials/layouts.scss';
+@import '@/assets/styles/scss/partials/description.scss';
+@import '@/assets/styles/scss/partials/box.scss';
+@import '@/assets/styles/scss/partials/test.scss';
+@import '@/assets/styles/scss/partials/pagination.scss';
+@import '@/assets/styles/scss/partials/alert.scss';

+.filter-alert{
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-top: -10px;
+  .ant-alert-icon{
+    top: 9px;
+    left: 14px;
+  }
+}

+
+.mapBox {
+  ::-webkit-scrollbar {
+    width: 7px;
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: #47749E;
+    border: 2px solid transparent;
+    width: 5px;
+    border-radius: 2px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: rgb(236, 236, 236);
+    border-radius: 0px 2px 2px 0px;
+  }
+
+
+  .search-box {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+        
+    .searchBtn{
+      width: 50px;
+      height: 50px;
+      padding: 7px;
+      background: white;
+      border: 2px solid rgba(0,0,0,0.2);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ant-modal-content {
+      position: absolute;
+      right: 60px;
+      top: 0px;
+      width: 400px;
+      max-height: calc(100vh - 120px);
+
+      .ant-modal-header {
+        background: #47749e;
+        .ant-modal-title {
+          color: white;
+          text-align: center;
+        }
+      }
+
+      .ant-modal-body {
+        padding: 20px;
+      }
+
+      .ant-input:hover {
+        border-color: #47749e;
+        border-right-width: 1px !important;
+      }
+
+      .ant-input:focus {
+        border-color: #47749e;
+      }
+
+      .ant-btn-primary {
+        background-color: #47749e;
+        border-color: #47749e;
+      }
+
+      .ant-list-header {
+        color: white;
+        background: #47749e;
+      }
+
+      .ant-input-search {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+
+      .ant-list-items {
+        max-height: calc(100vh - 300px);
+        overflow-y: scroll;
+      }
+
+      .ant-list-item {
+        padding: 10px;
+        background: white;
+        width: 100%;
+      }
+
+      .ant-list-item:hover {
+        color: #47749e;
+        font-weight: 600;
+      }
+    }
+  }
+}
+.filter-feature-box {
+  .ant-modal-content {
+    position: absolute;
+    right: 70px;
+    top: 10px;
+    width: 300px;
+
+    .ant-modal-header {
+      background: #47749e;
+      .ant-modal-title {
+        color: white;
+        text-align: center;
+      }
+    }
+  }
+
+  .label {
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    margin-top: 20px;
+
+    span {
+      display: inline-block;
+      border: 2px solid #47749e;
+      border-radius: 3px;
+      padding: 2px 5px;
+    }
+
+  }
+}
+
+.boxBtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  padding: 7px;
+  background: white;
+  border: 2px solid rgba(0,0,0,0.2);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 30px;
+}
+
+.bottom-tool-box {
+  display: flex;
+  gap: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: calc(50% - 25px);
+  .filterBox {
+    .filterBtn {
+              width: 50px;
+              height: 50px;
+              padding: 7px;
+              background: white;
+              border: 2px solid rgba(0,0,0,0.2);
+              border-radius: 4px;
+              cursor: pointer;
+            }
+  }
+}
\ No newline at end of file

+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&family=Roboto:wght@500&display=swap');
+
+.ant-descriptions-bordered .ant-descriptions-item-label {
+  background-color: #47749e;
+  color: white;
+}
+
+.ant-descriptions-item {
+  display: inline-flex;
+  margin-right: 10px;
+}
+
+.ant-descriptions-row {
+  font-family: 'Noto Sans KR', sans-serif;
+  .ant-descriptions-item-content {
+    min-width: 150px;
+    font-size: 13px;
+    background: white;
+  }
+}
+
+.ant-descriptions-item > span {
+  align-self: center;
+}
+
+.ant-descriptions-bordered .ant-descriptions-item-label,
+.ant-descriptions-bordered .ant-descriptions-item-content {
+  padding: 10px 10px;
+}
+.description-box .ant-descriptions-item {
+  display: table-cell;
+}
+
+.drone-detail {
+  .ant-descriptions-view {
+    max-height: calc(100vh - 120px);
+    overflow: auto;
+  }
+
+  .ant-descriptions-item-label.ant-descriptions-item-colon {
+    font-size: 16px;
+  }
+}
+
+.ant-page-header-content {
+  .search-box .ant-descriptions-row .ant-descriptions-item-content {
+    min-width: 0;
+  }
+  .search-box .ant-descriptions-row {
+    font-family: none;
+  }
+}

+
+.mt-size-default{
+  margin-top: 8px;
+}
+.mt-size-sm {
+  margin-top: 4px;
+}
+.mt-size-md {
+  margin-top: 12px;
+}
+.mt-size-lg {
+  margin-top: 20px;
+}
+
+.ml-size-default{
+  margin-left: 8px;
+}
+.ml-size-sm {
+  margin-left: 4px;
+}
+.ml-size-md {
+  margin-left: 12px;
+}
+.ml-size-lg {
+  margin-left: 20px;
+}
+
+.mr-size-default{
+  margin-right: 8px;
+}
+.mr-size-sm {
+  margin-right: 4px;
+}
+.mr-size-md {
+  margin-right: 12px;
+}
+.mr-size-lg {
+  margin-right: 20px;
+}
+
+.mb-size-default{
+  margin-bottom: 8px;
+}
+.mb-size-sm {
+  margin-bottom: 4px;
+}
+.mb-size-md {
+  margin-bottom: 12px;
+}
+.mb-size-lg {
+  margin-bottom: 20px;
+}
+
+.margin-size-default{
+  margin: 8px;
+}
+.margin-size-sm {
+  margin: 4px;
+}
+.margin-size-md {
+  margin: 12px;
+}
+.margin-size-lg {
+  margin: 20px;
+}
+
+
+.pt-size-default{
+  padding-top: 8px;
+}
+.pt-size-sm {
+  padding-top: 4px;
+}
+.pt-size-md {
+  padding-top: 12px;
+}
+.pt-size-lg {
+  padding-top: 20px;
+}
+
+.pl-size-default{
+  padding-left: 8px;
+}
+.pl-size-sm {
+  padding-left: 4px;
+}
+.pl-size-md {
+  padding-left: 12px;
+}
+.pl-size-lg {
+  padding-left: 20px;
+}
+
+.pr-size-default{
+  padding-right: 8px;
+}
+.pr-size-sm {
+  padding-right: 4px;
+}
+.pr-size-md {
+  padding-right: 12px;
+}
+.pr-size-lg {
+  padding-right: 20px;
+}
+
+.pb-size-default{
+  padding-bottom: 8px;
+}
+.pb-size-sm {
+  padding-bottom: 4px;
+}
+.pb-size-md {
+  padding-bottom: 12px;
+}
+.pb-size-lg {
+  padding-bottom: 20px;
+}
+
+.padding-size-default{
+  padding: 8px;
+}
+.padding-size-sm {
+  padding: 4px;
+}
+.padding-size-md {
+  padding: 12px;
+}
+.padding-size-lg {
+  padding: 20px;
+}
+.r-flex{
+  display: flex;
+  &.center{
+    justify-content: center;
+    align-items: center;
+  }
+  &.space-between{
+    justify-content: space-between;
+    align-items: center;
+  }
+  &.space-around{
+    justify-content: space-around;
+    align-items: center;
+  }
+  &.space-evenly{
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  &.start{
+    justify-content: start;
+    align-items: center;
+  }
+  &.end{
+    justify-content: flex-end;
+    align-items: center;
+  }
+  &.gap-1 {
+    gap: 4px
+  }
+  &.gap-2 {
+    gap: 8px
+  }
+  &.gap-3 {
+    gap: 12px
+  }
+  &.gap-4 {
+    gap: 16px
+  }
+  &.gap-5 {
+    gap: 20px
+  }
+  &.gap-6 {
+    gap: 24px
+  }
+  &.gap-default{
+    gap: 8px
+  }
+  &.gap-sm {
+    gap: 6px
+  }
+  &.gap-md {
+    gap: 12px
+  }
+  &.gap-lg {
+    gap: 20px
+  }
+}

+@import '@/assets/styles/mixins.scss';
+
+.page-header {
+  background-color: white;
+  border: $gray-3 1px solid;
+  border-radius: 6px;
+}
+
+.search-input {
+  width: 50%;
+  min-width: 200px;
+}
+
+.page-main {
+  margin-top: 20px;
+  padding: 20px 20px 20px 20px;
+  background-color: white;
+  border-radius: 6px;
+  border: $gray-2 1px solid;
+}
+
+.page-main-without-header {
+  padding: 20px 20px 20px 20px;
+  background-color: white;
+  border-radius: 6px;
+  border: $gray-2 1px solid;
+}

+.ant-table-pagination.ant-pagination {
+  float: none;
+  text-align: center;
+}
+
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link,
+.ant-pagination-item {
+  border: none;
+  outline: none;
+}
+
+.ant-pagination-item {
+  font-size: 1rem;
+}
+
+.ant-pagination-item-active a {
+  font-weight: bolder;
+}

+@import '@/assets/styles/mixins.scss';

+.default-layout-enter-active,
+.default-layout-leave-active {
+  transition: opacity 0.5s;
+}
+.default-layout-enter,
+.default-layout-leave-active {
+  opacity: 0;
+}
+//
+.default-page-enter-active,
+.default-page-leave-active {
+  transition: opacity 0.3s;
+}
+.default-page-enter,
+.default-page-leave-active {
+  opacity: 0;
+}

+<template>
+  <pie-chart :chart-data="chartData"
+             :chart-settings="chartSettings"
+  />
+</template>
+
+<script>
+import PieChart from '@/components/_Common/Chart/pieChart';
+
+export default {
+  name: 'droneCategoryPieChart',
+  components: {
+    PieChart,
+  },
+  props: {
+    chartData: {
+      type: Array,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      chartSettings: {
+        chart: {
+          height: 400,
+        },
+        title: {
+          text: '카테고리별 드론 기체 수',
+          style: {
+            fontSize: '20px',
+          },
+        },
+        width: '50%',
+        plotOptions: {
+          pie: {
+            shadow: true,
+            allowPointSelect: true,
+            cursor: 'pointer',
+            dataLabels: {
+              useHTML: true,
+              distance: -50,
+              formatter() {
+                if (this.percentage.toFixed(0) < 6) return '';
+                return `<div style="padding: 6px 4px 4px 6px;
+                                    background-color: rgba(0, 0, 0, 0.5);
+                                    border: 2px solid #f2f4f8;
+                                    border-radius: 6px;
+                                    ">${this.percentage.toFixed(1)}%</div>`;
+              },
+              style: {
+                fontSize: '16px',
+                color: 'white',
+              },
+            },
+            showInLegend: true,
+          },
+        },
+        tooltip: {
+          formatter() {
+            return `
+            <span style="font-size:16px; color:${this.color}">${this.key}</span>
+            <table>
+              <tr>
+                <td style="padding:0">${this.series.name}</td>
+                <td style="padding:0">: <b>${this.y}</b></td>
+              </tr>
+              <tr>
+                <td style="padding:0">점유율</td>
+                <td style="color:{series.color};padding:0">: <b>${this.percentage.toFixed(1)}%</b></td>
+              </tr>
+            </table>
+            `;
+          },
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

+<template>
+  <live-line-chart :chart-data="chartData"
+                   :chart-settings="chartSettings"
+  />
+</template>
+
+<script>
+import LiveLineChart from '@/components/_Common/Chart/liveLineChart';
+import dayjs from 'dayjs';
+
+export default {
+  components: {
+    LiveLineChart,
+  },
+  props: {
+    chartData: {
+      type: Array,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      chartSettings: {
+        chart: {
+          height: 400,
+        },
+        title: {
+          text: '시간별 드론 기체 수',
+          style: {
+            fontSize: '20px',
+          },
+        },
+        width: '100%',
+        xAxis: {
+          type: 'datetime',
+        },
+        yAxis: {
+          title: {
+            text: null,
+          },
+          min: 0,
+        },
+        tooltip: {
+          formatter() {
+            const trList = this.points.map((elem) => `
+              <tr>
+                <td style="font-size: 16px; padding:0; color:${elem.color}">${elem.series.name}</td>
+                <td style="font-size: 16px; padding:0; color:${elem.color}">: <b>${elem.y}</b></td>
+              </tr>
+              `);
+            return `
+            <span style="font-size:12px; color:${this.color}">${dayjs(this.x).format('YYYY-MM-DD HH:mm:ss')}</span>
+            <table>
+             ${trList}
+            </table>
+            `;
+          },
+        },
+        data: {
+          enablePolling: true,
+          dataRefreshRate: 2,
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

+<template>
+  <pie-chart :chart-data="chartData"
+             :chart-settings="chartSettings"
+  />
+</template>
+
+<script>
+import PieChart from '@/components/_Common/Chart/pieChart';
+
+export default {
+  name: 'makerPieChart',
+  components: {
+    PieChart,
+  },
+  props: {
+    chartData: {
+      type: Array,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      chartSettings: {
+        chart: {
+          height: 400,
+        },
+        title: {
+          text: '제조사별 드론 기체 수',
+          style: {
+            fontSize: '20px',
+          },
+        },
+        width: '50%',
+        plotOptions: {
+          pie: {
+            shadow: true,
+            allowPointSelect: true,
+            cursor: 'pointer',
+            dataLabels: {
+              useHTML: true,
+              distance: -50,
+              formatter() {
+                if (this.percentage.toFixed(0) < 6) return '';
+                return `<div style="padding: 6px 4px 4px 6px;
+                                    background-color: rgba(0, 0, 0, 0.5);
+                                    border: 2px solid #f2f4f8;
+                                    border-radius: 6px;
+                                    ">${this.percentage.toFixed(1)}%</div>`;
+              },
+              style: {
+                fontSize: '16px',
+                color: 'white',
+              },
+            },
+            showInLegend: true,
+          },
+        },
+        tooltip: {
+          formatter() {
+            return `
+            <span style="font-size:16px; color:${this.color}">${this.key}</span>
+            <table>
+              <tr>
+                <td style="padding:0">${this.series.name}</td>
+                <td style="padding:0">: <b>${this.y}</b></td>
+              </tr>
+              <tr>
+                <td style="padding:0">점유율</td>
+                <td style="color:{series.color};padding:0">: <b>${this.percentage.toFixed(1)}%</b></td>
+              </tr>
+            </table>
+            `;
+          },
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

+<template>
+  <column-chart :chart-data="chartData"
+    :chart-settings="chartSettings"/>
+</template>
+
+<script>
+import ColumnChart from '@/components/_Common/Chart/columnChart';
+
+export default {
+  name: 'timeCategoryColumnChart',
+  components: {
+    ColumnChart,
+
+  },
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chartSettings: {
+        chart: {
+          height: 400,
+        },
+        title: {
+          text: '시간-드론 타입별 드론 기체 수',
+          style: {
+            fontSize: '20px',
+          },
+        },
+        width: '100%',
+        xAxis: {
+          categories: [
+            '00:00 ~ 04:00',
+            '04:00 ~ 08:00',
+            '08:00 ~ 12:00',
+            '12:00 ~ 16:00',
+            '16:00 ~ 20:00',
+            '20:00 ~ 24:00',
+          ],
+        },
+        yAxis: {
+          title: {
+            text: null,
+          },
+          min: 0,
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="Analytics"
+    sub-title="Chart for Realtime Drone Data"
+  >
+    <template slot="extra">
+      <a-button key="1" type="primary">
+        action
+      </a-button>
+    </template>
+  </a-page-header>
+</template>
+
+<script>
+
+export default {
+  name: 'AnalyticsHeader',
+  components: {},
+  data() {
+    return {
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="드론 정보"
+    sub-title="Drone-Schedule"
+    @back="$router.go(-1)"
+  >
+    <div :style="{display: 'flex'}">
+      <div :style="{width: '30%'}">
+        <img :src="droneInfo.picture" :style="{width: '90%'}" />
+      </div>
+
+      <div :style="{width: '70%', marginLeft: '20px'}">
+        <div class="label-modelName">{{ droneInfo.modelName }}</div>
+        <div :style="{display: 'flex', marginBottom: '15px'}">
+          <div class="label-info">info</div>
+
+          <a-descriptions
+            :column="{xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}"
+            class="description-box"
+          >
+            <a-descriptions-item label="모델명">
+              {{ droneInfo.modelName }}
+            </a-descriptions-item>
+            <a-descriptions-item label="제조사">
+              {{ droneInfo.maker == null ? 'None' : droneInfo.maker }}
+            </a-descriptions-item>
+            <a-descriptions-item label="종류">
+              {{ droneInfo.usage == null ? 'None' : droneInfo.usage }}
+            </a-descriptions-item>
+            <a-descriptions-item label="제원">
+              {{
+                droneInfo.specification == null
+                  ? 'None'
+                  : droneInfo.specification
+              }}
+            </a-descriptions-item>
+            <a-descriptions-item label="무게">
+              {{ droneInfo.weight == null ? '?' : droneInfo.weight }} kg
+            </a-descriptions-item>
+            <a-descriptions-item label="No">
+              {{ droneInfo.id }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+    </div>
+    <a-divider />
+  </a-page-header>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+
+export default {
+  name: 'DatabaseDetailHeader',
+  components: {},
+  data() {
+    return {
+      droneInfo: {},
+    };
+  },
+  computed: {
+    ...mapGetters('Drone/detail', {
+      getDetailData: 'getDetailData',
+    }),
+    ...mapGetters('Code', {
+      getCodes: 'getCodes',
+    }),
+    droneCategory() {
+      return (data) => {
+        switch (parseInt(data, 10)) {
+          case 1:
+            return '촬영용';
+          case 2:
+            return '레이싱용';
+          case 3:
+            return '완구용';
+          default:
+            return null;
+        }
+      };
+    },
+  },
+  created() {
+    console.log(this.getDetailData);
+    this.droneInfo = this.getDetailData;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+
+.label-modelName {
+  font-size: 30px;
+  color: $antblue;
+}
+.label-info {
+  padding: 0 10px;
+  border-right: 1px solid #777777;
+  min-width: 20%;
+}
+.description-box {
+  padding-left: 10px;
+}
+</style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="Database"
+    sub-title="Table - Drone list"
+  >
+    <template slot="extra">
+      <a-button key="1" type="primary" form="form" html-type="submit">
+        검색
+      </a-button>
+    </template>
+
+    <a-form id="form" @submit.prevent="searchData" class="form-wrapper">
+      <a-form-item label="모델명" class="form-item">
+        <a-input v-model="searchParams.modelName" class="search-input" />
+      </a-form-item>
+      <a-form-item label="제조사" class="form-item">
+        <a-input v-model="searchParams.maker" class="search-input" />
+      </a-form-item>
+      <a-form-item label="무게" class="form-item">
+        <a-button
+          v-if="searchOpenFlag"
+          class="search-input"
+          @click="searchOpenFlag = !searchOpenFlag"
+          >{{ sliderBegin }} - {{ sliderEnd == 50 ? '50+' : sliderEnd }} kg
+          <a-icon type="up" />
+        </a-button>
+        <a-button
+          v-else
+          class="search-input"
+          @click="searchOpenFlag = !searchOpenFlag"
+          >{{ sliderBegin }} - {{ sliderEnd == 50 ? '50+' : sliderEnd }} kg
+          <a-icon type="down" />
+        </a-button>
+        <div v-if="searchOpenFlag" class="slider-box">
+          <a-slider
+            range
+            :marks="marks"
+            :max="50"
+            :step="1"
+            :default-value="[sliderBegin, sliderEnd]"
+            class="search-input"
+            @change="onSliderChange"
+            @afterChange="onSliderAfterChange"
+          />
+        </div>
+      </a-form-item>
+      <a-form-item label="종류" has-feedback class="form-item">
+        <a-select
+          class="search-input"
+          default-value=""
+          @change="handleSelectChange"
+        >
+          <a-select-option value="">
+            선택 안 함
+          </a-select-option>
+          <a-select-option value="촬영용">
+            촬영용
+          </a-select-option>
+          <a-select-option value="산업용">
+            산업용
+          </a-select-option>
+          <a-select-option value="군사용">
+            군사용
+          </a-select-option>
+          <a-select-option value="레이싱용">
+            레이싱용
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+  </a-page-header>
+</template>
+
+<script>
+import {droneCategory} from '@/utils/CommonData/selectOptions';
+import {mapActions, mapGetters} from 'vuex';
+
+export default {
+  name: 'DatabaseSearchFilter',
+  components: {},
+  data() {
+    return {
+      searchOpenFlag: false,
+      categoryOptions: droneCategory,
+      searchParams: {},
+      marks: {
+        0: '0kg',
+        50: '50+kg',
+      },
+      sliderBegin: 0,
+      sliderEnd: 50,
+    };
+  },
+  computed: {
+    ...mapGetters('Drone/page', {
+      getPageParams: 'getPageParams',
+    }),
+  },
+  created() {
+    this.searchParams = JSON.parse(JSON.stringify(this.getPageParams));
+  },
+  methods: {
+    ...mapActions('Drone/page', {
+      setPageParams: 'setPageParams',
+    }),
+    searchData() {
+      console.log(this.searchParams);
+      this.setPageParams(this.searchParams);
+      this.$emit('loadData');
+    },
+    handleSelectChange(value) {
+      this.searchParams.usageName = value;
+      this.searchData();
+    },
+    onSliderChange(value) {
+      this.sliderBegin = value[0];
+      this.sliderEnd = value[1];
+    },
+    onSliderAfterChange(value) {
+      this.searchParams.minWeight = value[0];
+      this.searchParams.maxWeight = value[1];
+      if (value[1] == 50) {
+        this.searchParams.maxWeight = null;
+      }
+      this.searchOpenFlag = !this.searchOpenFlag;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+
+.form-wrapper {
+  height: 40px;
+}
+.form-wrapper,
+.form-item {
+  display: flex;
+  margin-left: 10px;
+  margin-bottom: 0;
+}
+
+.slider-box {
+  background: white;
+  padding: 10px 20px;
+  border-radius: 20px;
+  border: solid 1px $antblue;
+  position: fixed;
+  z-index: 10;
+}
+</style>

+<template>
+  <a-table
+    rowKey="id"
+    bordered
+    :loading="childLoading"
+    :columns="columns"
+    :data-source="getPageData"
+    :scroll="{x: 1000}"
+    :pagination="pagination"
+    @change="changePage"
+  >
+    <a slot="modelName" slot-scope="data, row" @click="goDetail(row)">
+      {{ data }}
+    </a>
+    <div slot="usageName" slot-scope="data">
+      {{ data == null ? '?' : data }}
+    </div>
+    <div slot="weight" slot-scope="data">
+      {{ data == null ? '?' : data + 'kg' }}
+    </div>
+    <div slot="specification" slot-scope="data">
+      {{ data == null ? '?' : data }}
+    </div>
+    <div slot="droneCategory" slot-scope="data">
+      {{ data }}
+    </div>
+  </a-table>
+</template>
+
+<script>
+import databaseColumn from '@/utils/ColumnData/databaseColumn';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'DatabaseTable',
+  props: {
+    childLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: databaseColumn,
+    };
+  },
+  computed: {
+    ...mapGetters('Drone/page', {
+      getPageData: 'getPageData',
+      getPagination: 'getPagination',
+      getPageParams: 'getPageParams',
+    }),
+    pagination: {
+      get() {
+        return this.getPagination;
+      },
+      set(e) {
+        this.setPagination({
+          size: e.size,
+          page: e.page,
+        });
+      },
+    },
+  },
+  methods: {
+    ...mapActions('Drone/page', {
+      setPagination: 'setPagination',
+      fetchPageData: 'fetchPageData',
+    }),
+    changePage(e) {
+      this.pagination = {
+        size: e.pageSize,
+        page: e.current,
+      };
+      this.fetchPageData(this.getPageParams);
+    },
+    goDetail(row) {
+      this.$router.push({
+        path: `/database/drone/${row.id}`,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="Database"
+    sub-title="Table - Drone Log"
+  >
+    <template slot="extra">
+      <a-button
+        key="1"
+        type="primary"
+        form="form"
+        html-type="submit"
+        :style="{padding: '0 15px'}"
+      >
+        검색
+      </a-button>
+    </template>
+
+    <a-form id="form" @submit.prevent="searchData" class="form-wrapper">
+      <a-descriptions
+        :column="{xs: 1, sm: 3, md: 3, lg: 6, xl: 7, xxl: 7}"
+        class="search-box"
+      >
+        <a-descriptions-item label="Schedule ID" class="form-item">
+          <a-input v-model="searchParams.scheduleId" class="search-input-log" />
+        </a-descriptions-item>
+        <a-descriptions-item label="수평 속도" class="form-item">
+          <a-button v-if="hsOpenFlag" @click="hsOpenFlag = !hsOpenFlag"
+            >{{ minHorizontalSpeed }} -
+            {{ maxHorizontalSpeed == 100 ? '100+' : maxHorizontalSpeed }} km/s
+            <a-icon type="up" />
+          </a-button>
+          <a-button v-else @click="hsOpenFlag = !hsOpenFlag"
+            >{{ minHorizontalSpeed }} -
+            {{ maxHorizontalSpeed == 100 ? '100+' : maxHorizontalSpeed }} km/s
+            <a-icon type="down" />
+          </a-button>
+          <div v-if="hsOpenFlag" class="slider-box">
+            <a-slider
+              range
+              :marks="speedMarks"
+              :max="100"
+              :step="1"
+              :default-value="[minHorizontalSpeed, maxHorizontalSpeed]"
+              class="search-input"
+              @change="onHorizontalSpeedChange"
+              @afterChange="onHorizontalSpeedAfterChange"
+            />
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="수직 속도" class="form-item">
+          <a-button v-if="vsOpenFlag" @click="vsOpenFlag = !vsOpenFlag"
+            >{{ minVerticalSpeed }} -
+            {{ maxVerticalSpeed == 100 ? '100+' : maxVerticalSpeed }} km/s
+            <a-icon type="up" />
+          </a-button>
+          <a-button v-else @click="vsOpenFlag = !vsOpenFlag"
+            >{{ minVerticalSpeed }} -
+            {{ maxVerticalSpeed == 100 ? '100+' : maxVerticalSpeed }} km/s
+            <a-icon type="down" />
+          </a-button>
+          <div v-if="vsOpenFlag" class="slider-box">
+            <a-slider
+              range
+              :marks="speedMarks"
+              :max="100"
+              :step="1"
+              :default-value="[minVerticalSpeed, maxVerticalSpeed]"
+              class="search-input"
+              @change="onVerticalSpeedChange"
+              @afterChange="onVerticalSpeedAfterChange"
+            />
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="지면 고도" class="form-item">
+          <a-button v-if="aglOpenFlag" @click="aglOpenFlag = !aglOpenFlag"
+            >{{ minAboveGroundLevel }} -
+            {{ maxAboveGroundLevel == 200 ? '200+' : maxAboveGroundLevel }} m
+            <a-icon type="up" />
+          </a-button>
+          <a-button v-else @click="aglOpenFlag = !aglOpenFlag"
+            >{{ minAboveGroundLevel }} -
+            {{ maxAboveGroundLevel == 200 ? '200+' : maxAboveGroundLevel }} m
+            <a-icon type="down" />
+          </a-button>
+          <div v-if="aglOpenFlag" class="slider-box">
+            <a-slider
+              range
+              :marks="levelMarks"
+              :max="200"
+              :step="1"
+              :default-value="[minAboveGroundLevel, maxAboveGroundLevel]"
+              class="search-input"
+              @change="onAboveGroundLevelChange"
+              @afterChange="onAboveGroundLevelAfterChange"
+            />
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="해발 고도" class="form-item">
+          <a-button v-if="aslOpenFlag" @click="aslOpenFlag = !aslOpenFlag"
+            >{{ minAboveSeaLevel }} -
+            {{ maxAboveSeaLevel == 200 ? '200+' : maxAboveSeaLevel }} m
+            <a-icon type="up" />
+          </a-button>
+          <a-button v-else @click="aslOpenFlag = !aslOpenFlag"
+            >{{ minAboveSeaLevel }} -
+            {{ maxAboveSeaLevel == 200 ? '200+' : maxAboveSeaLevel }} m
+            <a-icon type="down" />
+          </a-button>
+          <div v-if="aslOpenFlag" class="slider-box">
+            <a-slider
+              range
+              :marks="levelMarks"
+              :max="200"
+              :step="1"
+              :default-value="[minAboveSeaLevel, maxAboveSeaLevel]"
+              class="search-input"
+              @change="onAboveSeaLevelChange"
+              @afterChange="onAboveSeaLevelAfterChange"
+            />
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="위도" class="form-item">
+          <a-input v-model="searchParams.latitude" class="search-input-log" />
+        </a-descriptions-item>
+        <a-descriptions-item label="경도" class="form-item">
+          <a-input v-model="searchParams.longitude" class="search-input-log" />
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-form>
+  </a-page-header>
+</template>
+
+<script>
+/* eslint-disable prefer-destructuring */
+import {mapActions, mapGetters} from 'vuex';
+
+export default {
+  name: 'LogSearchFilter',
+  components: {},
+  data() {
+    return {
+      hsOpenFlag: false,
+      vsOpenFlag: false,
+      aslOpenFlag: false,
+      aglOpenFlag: false,
+      searchParams: {},
+      speedMarks: {
+        0: '0km/h',
+        100: '100+km/h',
+      },
+      levelMarks: {
+        0: '0m',
+        200: '200+m',
+      },
+      minVerticalSpeed: 0,
+      maxVerticalSpeed: 100,
+      minHorizontalSpeed: 0,
+      maxHorizontalSpeed: 100,
+      minAboveSeaLevel: 0,
+      maxAboveSeaLevel: 200,
+      minAboveGroundLevel: 0,
+      maxAboveGroundLevel: 200,
+    };
+  },
+  computed: {
+    ...mapGetters('Log/page', {
+      getPageParams: 'getPageParams',
+    }),
+  },
+  created() {
+    this.searchParams = JSON.parse(JSON.stringify(this.getPageParams));
+  },
+  methods: {
+    ...mapActions('Log/page', {
+      setPageParams: 'setPageParams',
+    }),
+    searchData() {
+      console.log(this.searchParams);
+      this.setPageParams(this.searchParams);
+      this.$emit('loadData');
+    },
+    onHorizontalSpeedChange(value) {
+      this.minHorizontalSpeed = value[0];
+      this.maxHorizontalSpeed = value[1];
+    },
+    onHorizontalSpeedAfterChange(value) {
+      this.hsOpenFlag = !this.hsOpenFlag;
+      this.searchParams.minHorizontalSpeed = this.minHorizontalSpeed;
+      this.searchParams.maxHorizontalSpeed = this.maxHorizontalSpeed;
+      if (this.maxHorizontalSpeed == 100) {
+        this.searchParams.maxHorizontalSpeed = null;
+      }
+    },
+    onVerticalSpeedChange(value) {
+      this.minVerticalSpeed = value[0];
+      this.maxVerticalSpeed = value[1];
+    },
+    onVerticalSpeedAfterChange(value) {
+      this.vsOpenFlag = !this.vsOpenFlag;
+      this.searchParams.minVerticalSpeed = this.minVerticalSpeed;
+      this.searchParams.maxVerticalSpeed = this.maxVerticalSpeed;
+      if (this.maxVerticalSpeed == 100) {
+        this.searchParams.maxVerticalSpeed = null;
+      }
+    },
+    onAboveSeaLevelChange(value) {
+      this.minAboveSeaLevel = value[0];
+      this.maxAboveSeaLevel = value[1];
+    },
+    onAboveSeaLevelAfterChange(value) {
+      this.aslOpenFlag = !this.aslOpenFlag;
+      this.searchParams.minAboveSeaLevel = this.minAboveSeaLevel;
+      this.searchParams.maxAboveSeaLevel = this.maxAboveSeaLevel;
+      if (this.maxAboveSeaLevel == 200) {
+        this.searchParams.maxAboveSeaLevel = null;
+      }
+    },
+    onAboveGroundLevelChange(value) {
+      this.minAboveGroundLevel = value[0];
+      this.maxAboveGroundLevel = value[1];
+    },
+    onAboveGroundLevelAfterChange(value) {
+      this.aglOpenFlag = !this.aglOpenFlag;
+      this.searchParams.minAboveGroundLevel = this.minAboveGroundLevel;
+      this.searchParams.maxAboveGroundLevel = this.maxAboveGroundLevel;
+      if (this.maxAboveGroundLevel == 200) {
+        this.searchParams.maxAboveGroundLevel = null;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+.form-wrapper {
+  //height: 40px;
+  justify-content: space-between;
+}
+.form-wrapper,
+.form-item {
+  display: flex;
+  margin-right: 10px;
+  margin-bottom: 0;
+}
+
+.slider-box {
+  background: white;
+  padding: 10px 23px;
+  border-radius: 20px;
+  border: solid 1px $antblue;
+  position: fixed;
+  z-index: 9;
+}
+
+.search-input-log {
+  width: 100px;
+}
+
+.ant-btn {
+  padding: 0 10px;
+}
+</style>

+<template>
+  <a-table
+    rowKey="id"
+    bordered
+    :loading="childLoading"
+    :columns="columns"
+    :data-source="getPageData"
+    :scroll="{x: 1000}"
+    :pagination="pagination"
+    @change="changePage"
+  >
+    <a slot="modelName" slot-scope="data, row" @click="goDetail(row)">
+      {{ data }}
+    </a>
+
+    <div slot="horizontalSpeed" slot-scope="data">{{ data }} km/h</div>
+    <div slot="verticalSpeed" slot-scope="data">{{ data }} km/h</div>
+    <div slot="aboveGroundLevel" slot-scope="data">{{ data }} m</div>
+    <div slot="aboveSeaLevel" slot-scope="data">{{ data }} m</div>
+  </a-table>
+</template>
+
+<script>
+import databaseLogColumn from '@/utils/ColumnData/databaseLogColumn';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'LogTable',
+  props: {
+    childLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: databaseLogColumn,
+    };
+  },
+  computed: {
+    ...mapGetters('Log/page', {
+      getPageData: 'getPageData',
+      getPagination: 'getPagination',
+      getPageParams: 'getPageParams',
+    }),
+    pagination: {
+      get() {
+        return this.getPagination;
+      },
+      set(e) {
+        this.setPagination({
+          size: e.size,
+          page: e.page,
+        });
+      },
+    },
+  },
+  methods: {
+    ...mapActions('Log/page', {
+      setPagination: 'setPagination',
+      fetchPageData: 'fetchPageData',
+    }),
+    ...mapActions('Drone/detail', {
+      fetchDroneDetailData: 'fetchDetailData',
+    }),
+    ...mapActions('Schedule/detail', {
+      fetchScheduleDetailData: 'fetchDetailData',
+    }),
+    changePage(e) {
+      this.pagination = {
+        size: e.pageSize,
+        page: e.current,
+      };
+      this.fetchPageData(this.getPageParams);
+    },
+    goDetail(row) {
+      this.fetchDroneDetailData(row.droneId);
+      this.fetchScheduleDetailData(row.scheduleId);
+      this.$router.push({
+        path: `/database/schedule/${row.scheduleId}`,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="드론 정보"
+    sub-title="Drone-Schedule-Log"
+    @back="$router.go(-1)"
+  >
+    <div :style="{display: 'flex'}">
+      <div :style="{width: '30%'}">
+        <img :src="droneInfo.picture" :style="{width: '90%'}" />
+      </div>
+
+      <div :style="{width: '70%', marginLeft: '20px'}">
+        <div class="label-modelName">{{ droneInfo.modelName }}</div>
+        <div :style="{display: 'flex', marginBottom: '15px'}">
+          <div class="label-info">info</div>
+
+          <a-descriptions
+            :column="{xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}"
+            class="description-box"
+          >
+            <a-descriptions-item label="모델명">
+              {{ droneInfo.modelName }}
+            </a-descriptions-item>
+            <a-descriptions-item label="제조사">
+              {{ droneInfo.maker == null ? 'None' : droneInfo.maker }}
+            </a-descriptions-item>
+            <a-descriptions-item label="종류">
+              {{ droneInfo.usage == null ? 'None' : droneInfo.usageName }}
+            </a-descriptions-item>
+            <a-descriptions-item label="제원">
+              {{
+                droneInfo.specification == null
+                  ? 'None'
+                  : droneInfo.specification
+              }}
+            </a-descriptions-item>
+            <a-descriptions-item label="무게">
+              {{ droneInfo.weight == null ? '?' : droneInfo.weight }} kg
+            </a-descriptions-item>
+            <a-descriptions-item label="No">
+              {{ droneInfo.id }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+        <div :style="{display: 'flex'}">
+          <div class="label-info">Schedule</div>
+
+          <a-descriptions
+            :column="{xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}"
+            class="description-box"
+          >
+            <a-descriptions-item label="시작 시간">
+              {{ mc_dateTime(ScheduleInfo.startTime) }}
+            </a-descriptions-item>
+            <a-descriptions-item label="시작 위도">
+              {{ ScheduleInfo.startLatitude }}
+            </a-descriptions-item>
+            <a-descriptions-item label="시작 경도">
+              {{ ScheduleInfo.startLongitude }}
+            </a-descriptions-item>
+            <a-descriptions-item label="종료 시간">
+              {{ mc_dateTime(ScheduleInfo.terminateTime) }}
+            </a-descriptions-item>
+            <a-descriptions-item label="종료 위도">
+              {{ ScheduleInfo.terminateLatitude }}
+            </a-descriptions-item>
+            <a-descriptions-item label="종료 경도">
+              {{ ScheduleInfo.terminateLongitude }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+    </div>
+    <a-divider />
+  </a-page-header>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+
+export default {
+  name: 'DatabaseDetailHeader',
+  components: {},
+  data() {
+    return {
+      droneInfo: {},
+      ScheduleInfo: {},
+    };
+  },
+  created() {
+    this.droneInfo = this.getDetailData;
+    this.ScheduleInfo = this.getScheduleDetailData;
+  },
+  computed: {
+    ...mapGetters('Drone/detail', {
+      getDetailData: 'getDetailData',
+    }),
+    ...mapGetters('Schedule/detail', {
+      getScheduleDetailData: 'getDetailData',
+    }),
+    ...mapGetters('Code', {
+      getCodes: 'getCodes',
+    }),
+    droneCategory() {
+      return (data) => {
+        switch (parseInt(data, 10)) {
+          case 1:
+            return '촬영용';
+          case 2:
+            return '레이싱용';
+          case 3:
+            return '완구용';
+          default:
+            return null;
+        }
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+
+.label-modelName {
+  font-size: 30px;
+  color: $antblue;
+}
+.label-info {
+  padding: 0 10px;
+  border-right: 1px solid #777777;
+  min-width: 20%;
+}
+.description-box {
+  padding-left: 10px;
+}
+</style>

+<template>
+  <a-page-header
+    class="page-header"
+    title="Database"
+    sub-title="Table - DroneSchedule"
+  >
+    <template slot="extra">
+      <a-button key="1" type="primary" form="form" html-type="submit">
+        검색
+      </a-button>
+    </template>
+
+    <a-form id="form" @submit.prevent="searchData" class="form-wrapper">
+      <a-form-item label="검색 범위" class="form-item">
+        <div>
+          <a-date-picker
+            v-model="startValue"
+            :disabled-date="disabledStartDate"
+            show-time
+            format="YYYY-MM-DD HH:mm:ss"
+            placeholder="Start Date"
+            @openChange="handleStartOpenChange"
+          />
+          <span :style="{padding: '0 10px'}">-</span>
+          <a-date-picker
+            v-model="endValue"
+            :disabled-date="disabledEndDate"
+            show-time
+            format="YYYY-MM-DD HH:mm:ss"
+            placeholder="End Date"
+            :open="endOpen"
+            @openChange="handleEndOpenChange"
+          />
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-page-header>
+</template>
+
+<script>
+import {mapActions, mapGetters} from 'vuex';
+
+export default {
+  name: 'DatabaseSearchFilter',
+  components: {},
+  data() {
+    return {
+      searchParams: {},
+      startValue: null,
+      endValue: null,
+      endOpen: false,
+    };
+  },
+  watch: {
+    startValue(val) {
+      if (val != null) {
+        this.searchParams.startTime = val.format('YYYY-MM-DD HH:mm:ss');
+      } else {
+        this.searchParams.startTime = null;
+      }
+    },
+    endValue(val) {
+      if (val !== null) {
+        this.searchParams.terminateTime = val.format('YYYY-MM-DD HH:mm:ss');
+      } else {
+        this.searchParams.terminateTime = null;
+      }
+    },
+  },
+  computed: {
+    ...mapGetters('Schedule/page', {
+      getPageParams: 'getPageParams',
+    }),
+  },
+  created() {
+    this.searchParams = JSON.parse(JSON.stringify(this.getPageParams));
+  },
+  methods: {
+    ...mapActions('Schedule/page', {
+      setPageParams: 'setPageParams',
+    }),
+    searchData() {
+      console.log(this.searchParams);
+      this.setPageParams(this.searchParams);
+      this.$emit('loadData');
+    },
+    disabledStartDate(startValue) {
+      const endValue = this.endValue;
+      if (!startValue || !endValue) {
+        return false;
+      }
+      return startValue.valueOf() > endValue.valueOf();
+    },
+    disabledEndDate(endValue) {
+      const startValue = this.startValue;
+      if (!endValue || !startValue) {
+        return false;
+      }
+      return startValue.valueOf() >= endValue.valueOf();
+    },
+    handleStartOpenChange(open) {
+      if (!open) {
+        this.endOpen = true;
+      }
+    },
+    handleEndOpenChange(open) {
+      this.endOpen = open;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+.form-wrapper {
+  height: 40px;
+}
+.form-wrapper,
+.form-item {
+  display: flex;
+  margin-left: 10px;
+  margin-bottom: 0;
+}
+.slider-box {
+  background: white;
+  padding: 10px 15px;
+  border-radius: 20px;
+  border: solid 1px $antblue;
+  position: fixed;
+  z-index: 9;
+}
+</style>

+<template>
+  <a-table
+    rowKey="id"
+    bordered
+    :loading="childLoading"
+    :columns="columns"
+    :data-source="getPageData"
+    :scroll="{x: 1000}"
+    :pagination="pagination"
+    @change="changePage"
+  >
+    <a slot="modelName" slot-scope="data, row" @click="goDetail(row)">
+      {{ data }}
+    </a>
+    <div slot="startTime" slot-scope="data">
+      {{ mc_dateTime(data) }}
+    </div>
+    <div slot="terminateTime" slot-scope="data">
+      {{ mc_dateTime(data) }}
+    </div>
+  </a-table>
+</template>
+
+<script>
+import databaseScheduleColumn from '@/utils/ColumnData/databaseScheduleColumn';
+import {mapActions, mapGetters} from 'vuex';
+
+export default {
+  name: 'DatabaseTable',
+  props: {
+    childLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: databaseScheduleColumn,
+    };
+  },
+  computed: {
+    ...mapGetters('Schedule/page', {
+      getPageData: 'getPageData',
+      getPagination: 'getPagination',
+      getPageParams: 'getPageParams',
+    }),
+    pagination: {
+      get() {
+        return this.getPagination;
+      },
+      set(e) {
+        this.setPagination({
+          size: e.size,
+          page: e.page,
+        });
+      },
+    },
+  },
+  methods: {
+    ...mapActions('Schedule/page', {
+      setPagination: 'setPagination',
+      fetchPageData: 'fetchPageData',
+    }),
+    ...mapActions('Drone/detail', {
+      fetchDetailData: 'fetchDetailData',
+    }),
+    changePage(e) {
+      this.pagination = {
+        size: e.pageSize,
+        page: e.current,
+      };
+      this.fetchPageData(this.getPageParams);
+    },
+    goDetail(row) {
+      this.fetchDetailData(row.droneId);
+      this.$router.push({
+        path: `/database/schedule/${row.id}`,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

+<template>
+  <div>
+    <h4 class="footer-font">
+      Drone Simulation Map
+    </h4>
+    <h5 class="footer-font">
+      @2021 TwentyOz & KHU
+    </h5>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LayoutFooter',
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  created() {
+
+  },
+  method: {
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/mixins.scss';
+
+.footer-font {
+  color: $gray-3
+}
+</style>

+<template>
+  <div>
+    <div class="bottom-tool-box">
+      <div class="boxBtn" @click="clickWeatherBtn">
+        <a-icon type="cloud"/>
+      </div>
+      <FilterBtnBox
+        class="filterBox"
+        @clickClose="clickFilterBoxClose"
+        @changeFilterMode="e => this.$emit('changeFilterMode', e)"
+        @changeSearchMode="e => this.$emit('changeSearchMode', e)"
+      />
+      <div class="boxBtn" @click="clickBookMarkBtn">
+        <a-icon type="star"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FilterBtnBox from '../FilterBox/filterBtnBox';
+
+export default {
+  head() {
+    return {
+      title: 'Drone',
+      meta: [
+        {
+          hid: 'database',
+          name: 'Descriptions',
+          content: 'DroneWeb-Content',
+        },
+      ],
+    };
+  },
+  components: {
+    FilterBtnBox
+  },
+  props: {
+  },
+  data() {
+    return {
+      searchMode: false,
+      filterMode: false,
+    };
+  },
+  computed: {
+  },
+  created() {
+  },
+  methods: {
+    clickWeatherBtn() {
+      console.log('click')
+      this.$notification['warning']({
+        message: '날씨 기능은 추후 추가될 예정입니다.',
+        duration: 3,
+      })
+    },
+    clickBookMarkBtn() {
+      this.$notification['warning']({
+        message: '즐겨찾기 기능은 추후 추가될 예정입니다.',
+        duration: 3,
+      })
+    },
+    toggleFilterMode() {
+      this.$emit('toggleFilterMode')  
+    },
+    toggleSearchMode() {
+      this.$emit('toggleSearchMode')  
+    },
+    clickSearchBoxClose() {
+      this.searchMode = false;
+    },
+    clickFilterBoxClose() {
+      this.filterMode = false;
+    },
+    clickSearchBtn() {
+      this.filterMode = false;
+      this.searchMode = true;
+    },
+    clickFilterBtn() {
+      this.searchMode = false;
+      this.filterMode = true;
+    },
+
+  },
+};
+</script>
+<style lang="scss">
+</style>

+<template>
+  <div>
+    <a-descriptions layout="vertical" bordered>
+      <a-descriptions-item :span="4">
+        <template v-slot:label>
+          <div>{{ foundDrone.modelName }}</div>
+        </template>
+        <img
+          :src="foundDrone.picture || require('@/assets/images/drone-image.jpg')"
+          :style="{width: '300px'}"
+        />
+      </a-descriptions-item>
+      <a-descriptions-item label="실시간 정보" :span="4">
+        <div class="des-sub-title">현재 위치</div>
+        <div class="des-sub-cont-grid-4" style="margin-bottom: 10px;">
+          <div>
+            <div>경도</div>
+            <div>{{ selectedLastLog.longitude ? selectedLastLog.longitude.toFixed(3) : '?' }}</div>
+          </div>
+          <div>
+            <div>위도</div>
+            <div>{{ selectedLastLog.latitude ? selectedLastLog.latitude.toFixed(3) : '?' }}</div>
+          </div>
+          <div>
+            <div>이동거리</div>
+            <div>{{ Math.floor(getDetailData.distance + selectedLastLog.distance) }}m</div>
+          </div>
+          <div>
+            <div>운용시간</div>
+            <div>{{ getTimeDiff(foundSchedule.startTime) }}</div>
+          </div>
+        </div>
+        <div class="des-sub-cont-grid-2" style="margin-bottom: 10px;">
+          <div>
+            <div class="des-sub-title">현재 속도</div>
+            <div class="des-sub-cont-grid-2">
+              <div>
+                <div>수평 속도</div>
+                <div>{{ selectedLastLog.horizontalSpeed }}km/h</div>
+              </div>
+              <div>
+                <div>수직 속도</div>
+                <div>{{ selectedLastLog.verticalSpeed }}km/h</div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div class="des-sub-title">현재 고도</div>
+            <div class="des-sub-cont-grid-2">
+              <div>
+                <div>지면고도</div>
+                <div>{{ selectedLastLog.aboveGroundLevel }}m</div>
+              </div>
+              <div>
+                <div>해발고도</div>
+                <div>{{ selectedLastLog.aboveSeaLevel }}m</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="스케쥴" :span="4" :style="{padding: '0px'}">
+        <div class="des-sub-cont-grid-2" style="margin-bottom: 10px;">
+          <div>
+            <div class="des-sub-title">시작 스케쥴</div>
+            <div>
+                <div>날짜/시간</div>
+                <div style="margin-bottom: 5px;">{{ mc_dateTime(foundSchedule.startTime) || '?'  }}</div>
+                <div>경도</div>
+                <div style="margin-bottom: 5px;">{{ foundSchedule.startLongitude || '?'  }}</div>
+                <div>위도</div>
+                <div style="margin-bottom: 5px;">{{ foundSchedule.startLatitude || '?'  }}</div>
+            </div>
+          </div>
+          <div>
+            <div class="des-sub-title">실제 시작</div>
+            <div>
+                <div>날짜/시간</div>
+                <div style="margin-bottom: 5px;">{{ droneLogs.length !== 0 ? mc_dateTime(droneLogs[0].createdAt) : "?" }}</div>
+                <div>경도</div>
+                <div style="margin-bottom: 5px;">{{ droneLogs.length !== 0 ? droneLogs[0].longitude : "?"  }}</div>
+                <div>위도</div>
+                <div style="margin-bottom: 5px;">{{ droneLogs.length !== 0 ? droneLogs[0].latitude : "?"  }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="des-sub-title">종료 스케쥴</div>
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr">
+          <div>
+            <div>날짜/시간</div>
+            <div>{{ mc_dateTime(foundSchedule.terminateTime) || '?'   }}</div>
+          </div>
+          <div>
+            <div>경도</div>
+            <div>{{ foundSchedule.terminateLongitude || '?'  }}</div>
+          </div>
+          <div>
+            <div>위도</div>
+            <div>{{ foundSchedule.terminateLatitude || '?'  }}</div>
+          </div>
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="드론 정보" :span="6">
+        <div class="des-sub-cont-grid-4">
+          <div>
+            <div class="des-sub-title">제조사</div>
+            <div>{{ foundDrone.maker || '?' }}</div>
+          </div>
+          <div>
+            <div class="des-sub-title">종류</div>
+            <div>{{ foundDrone.usageName || '?' }}</div>
+          </div>
+          <div>
+            <div class="des-sub-title">제원</div>
+            <div>{{ foundDrone.specification || '?' }}</div>
+          </div>
+          <div>
+            <div class="des-sub-title">무게</div>
+            <div>{{ foundDrone.weight }}g</div>
+          </div>
+        </div>
+      </a-descriptions-item>
+    </a-descriptions>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  head() {
+    return {
+      title: 'Drone',
+      meta: [
+        {
+          hid: 'database',
+          name: 'Descriptions',
+          content: 'DroneWeb-Content',
+        },
+      ],
+    };
+  },
+  watch: {
+    getSelectedLastLog: {
+      deep: true,
+      handler(newVal) {
+        this.selectedLastLog = newVal;
+      },
+    },
+  },
+  data() {
+    return {
+      selectedLastLog: {},
+    };
+  },
+  computed: {
+    ...mapGetters('Drone/drone', {
+      getDetailData: 'getDetailData',
+      getSelectedLastLog: 'getSelectedLastLog',
+    }),
+    foundSchedule() {
+      return this.getDetailData.foundSchedule || {};
+    },
+    foundDrone() {
+      return this.getDetailData.foundDrone || {};
+    },
+    droneLogs() {
+      return this.getDetailData.droneLogs || [];
+    },
+    selectedLastLog() {
+      return this.getSelectedLastLog || {};
+    },
+  },
+  methods: {
+    getTimeDiff(startTime) {
+      const totalSeconds = this.$dayjs().diff(this.$dayjs(startTime), 's');
+      const seconds = totalSeconds % 60;
+      const minutes = Math.floor(totalSeconds / 60) % 60;
+      const hours = Math.floor(totalSeconds / 3600);
+
+      return `${hours}:${minutes}:${seconds}`;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.des-sub-title {
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.des-sub-cont-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.des-sub-cont-grid-4 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.des-sub-cont {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+</style>

+<template>
+  <div>
+    <img
+      @click="clickFilterBtn"
+      class="filterBtn"
+      :src="require('@/static/img/filter.png')"/>
+  </div>
+</template>
+<script>
+
+import CloseBox from '@/components/_Common/CloseBox/closeBox';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  head() {
+    return {
+      title: 'Drone',
+      meta: [
+        {
+          hid: 'database',
+          name: 'Descriptions',
+          content: 'DroneWeb-Content',
+        },
+      ],
+    };
+  },
+  components: {
+    CloseBox,
+  },
+  props: {},
+  data() {
+    return {
+      filterMode: false,
+      filteredDroneList: [],
+      manufacturerValue: [],
+      weightValue: [0, 50],
+      weightMarks: {
+        0: '0kg',
+        50: '50kg+',
+      },
+      altitudeValue: [0, 200],
+      altitudeMarks: {
+        0: '0m',
+        200: '200m+',
+      },
+      speedValue: [0, 100],
+      speedMarks: {
+        0: '0km/h',
+        100: '100km/h+',
+      },
+      filmingOptions: ['True', 'False'],
+      filmingValue: 'True',
+    };
+  },
+  computed: {
+    ...mapGetters('Etc', {
+      getMakers: 'getMakers',
+    }),
+    ...mapGetters('Drone', {
+      getLogFilter: 'drone/getLogFilter',
+      getFixedDroneList: 'list/getFixedDroneList',
+    }),
+  },
+  created() {
+  },
+  methods: {
+    ...mapActions('Drone/drone', {
+      setLogFilter: 'setLogFilter',
+      clearLogFilter: 'clearLogFilter',
+    }),
+    clickFilterBtn() {
+        this.$emit('changeSearchMode', false)
+        this.$emit('changeFilterMode', true)
+    },
+    clickClose() {
+      this.$emit('clickClose');
+    },
+    changeManufacturer(value) {
+      this.manufacturerValue = value;
+      this.filteredDroneList = this.getFixedDroneList.filter((v) => !!this.manufacturerValue.find((e) => v.maker === e));
+    },
+    changeWeight(weight) {
+      this.weightValue = weight;
+    },
+    changeAltitude(altitude) {
+      this.altitudeValue = altitude;
+    },
+    changeSpeed(speed) {
+      this.speedValue = speed;
+    },
+    applyFilter() {
+      this.setLogFilter({
+        checkFilter: true,
+        maker: this.manufacturerValue,
+        filteredDroneList: this.filteredDroneList,
+        weight: this.weightValue,
+        altitude: this.altitudeValue,
+        speed: this.speedValue,
+        filming: this.filmingValue,
+      });
+    },
+    clickReset() {
+      this.clearLogFilter();
+      this.filteredDroneList = [];
+      this.manufacturerValue = [];
+      this.weightValue = [0, 50];
+      this.altitudeValue = [0, 200];
+      this.speedValue = [0, 100];
+      this.filmingValue = [];
+    },
+  },
+};
+</script>
+<style lang="scss">
+</style>

+<template>
+  <div>
+    <CloseBox
+      @clickClose="clickClose"
+    >
+      <template v-slot:header>
+        드론 필터
+      </template>
+      <template v-slot:body>
+        <a-alert
+          v-if="getLogFilter.checkFilter"
+          message="필터가 적용된 상태입니다."
+          type="info" show-icon
+          class="filter-alert"
+        />
+        <div :style="{padding: '0 10px 0 5px', marginTop: getLogFilter.checkFilter ? '-5px' : '-20px'}">
+          <div class="label">
+            <span>제조사</span>
+          </div>
+          <a-select
+            :value="manufacturerValue"
+            mode="tags"
+            style="width: 100%;"
+            placeholder="제조사"
+            @change="changeManufacturer">
+
+            <a-select-option v-for="(maker,index) in getMakers"
+                             :key="index"
+                             :value="maker"
+            >
+              {{ maker }}
+            </a-select-option>
+          </a-select>
+          <div class="label"><span>무게</span></div>
+          <a-slider
+            :value="weightValue"
+            range
+            :marks="weightMarks"
+            :max="50"
+            :min="0"
+            @change="changeWeight"
+          />
+          <div class="label"><span>고도</span></div>
+          <a-slider
+            :value="altitudeValue"
+            range
+            :marks="altitudeMarks"
+            :max="200"
+            :min="0"
+            @change="changeAltitude"/>
+          <div class="label"><span>속력</span></div>
+          <a-slider
+            :value="speedValue"
+            range
+            :marks="speedMarks"
+            :max="100"
+            :min="0"
+            @change="changeSpeed"/>
+
+          <div style="display: flex; justify-content: space-between; text-align: right; margin-top: 40px">
+            <a-button @click="applyFilter">
+              <a-icon type="check"/>
+              필터 적용
+            </a-button>
+            <a-button @click="clickReset">
+              <a-icon type="reload"/>
+              필터 리셋
+            </a-button>
+          </div>
+        </div>
+      </template>
+    </CloseBox>
+  </div>
+</template>
+<script>
+
+import CloseBox from '@/components/_Common/CloseBox/closeBox';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  head() {
+    return {
+      title: 'Drone',
+      meta: [
+        {
+          hid: 'database',
+          name: 'Descriptions',
+          content: 'DroneWeb-Content',
+        },
+      ],
+    };
+  },
+  components: {
+    CloseBox,
+  },
+  props: {},
+  data() {
+    return {
+      filteredDroneList: [],
+      manufacturerValue: [],
+      weightValue: [0, 50],
+      weightMarks: {
+        0: '0kg',
+        50: '50kg+',
+      },
+      altitudeValue: [0, 200],
+      altitudeMarks: {
+        0: '0m',
+        200: '200m+',
+      },
+      speedValue: [0, 100],
+      speedMarks: {
+        0: '0km/h',
+        100: '100km/h+',
+      },
+      filmingOptions: ['True', 'False'],
+      filmingValue: 'True',
+    };
+  },
+  computed: {
+    ...mapGetters('Etc', {
+      getMakers: 'getMakers',
+    }),
+    ...mapGetters('Drone', {
+      getLogFilter: 'drone/getLogFilter',
+      getFixedDroneList: 'list/getFixedDroneList',
+    }),
+  },
+  created() {
+  },
+  methods: {
+    ...mapActions('Drone/drone', {
+      setLogFilter: 'setLogFilter',
+      clearLogFilter: 'clearLogFilter',
+    }),
+    clickClose() {
+      this.$emit('clickClose');
+    },
+    changeManufacturer(value) {
+      this.manufacturerValue = value;
+      this.filteredDroneList = this.getFixedDroneList.filter((v) => !!this.manufacturerValue.find((e) => v.maker === e));
+    },
+    changeWeight(weight) {
+      this.weightValue = weight;
+    },
+    changeAltitude(altitude) {
+      this.altitudeValue = altitude;
+    },
+    changeSpeed(speed) {
+      this.speedValue = speed;
+    },
+    applyFilter() {
+      this.setLogFilter({
+        checkFilter: true,
+        maker: this.manufacturerValue,
+        filteredDroneList: this.filteredDroneList,
+        weight: this.weightValue,
+        altitude: this.altitudeValue,
+        speed: this.speedValue,
+        filming: this.filmingValue,
+      });
+    },
+    clickReset() {
+      this.clearLogFilter();
+      this.filteredDroneList = [];
+      this.manufacturerValue = [];
+      this.weightValue = [0, 50];
+      this.altitudeValue = [0, 200];
+      this.speedValue = [0, 100];
+      this.filmingValue = [];
+    },
+  },
+};
+</script>
+<style lang="scss">
+</style>