<목차>
1. 목표
2. 구현 된 상황
3. 고쳐야 할 점
4. 전체 코드
1. 목표
1) 광역시 간에 고속도로를 이용하여 여행을 할 때 걸리는 시간을 계산한다. (다만 근처에 광역시 혹은 특별시가 있는 인천광역시와 울산 광역시는 제외한다.)
2) 출발지와 도착지 입력 값을 넣으면 자동으로 구간 내에 이동 시 걸리는 시간을 계산한다.
3) 도로교통공사 API 내에 있는 자료의 형식에 따라 최종 출력값은 출발지, 목적지, 최대 소요시간, 최소소요시간, 최대소요시간으로 한다.
2. 구현된 상황
1)경부선 라인 (서울 - 대전 - 대구 - 부산)
2) 출발지와 도착지 입력 시 시간 계산
3) 출발지,목적지,최대 소요시간, 최소소요시간,최대소요시간
3. 고쳐야 할 점
1)광주광역시는 아직 구간을 정확히 파악하지 못해 넣지 못했습니다.
2) 출발지와 도착지 입력 값을 넣으면 구간 내에 이동 시 걸리는 시간이 계산되기는 하나 한 번 더 값을 입력해야 값이 출력되는 현상이 발생하고 있습니다. 또한 실시간 데이터를 받다 보니 가끔 누락되는 데이터가 발생하여 올바른 예측 값이 나오지 않는 현상이 발생합니다.
4.전체코드
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import './App.css';
import { useState,useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Input} from './input';
import {GetMultiTraffic} from './multiTraffic';
function App() {
const [inputs,setInputs] = useState({
startCity:'',
endCity:''
})
const [start,setStart] = useState([]);
const [end,setEnd] = useState([])
const {startCity, endCity} = inputs;
const handleChange = (e) =>{
const {name, value} = e.target;
setInputs({
...inputs,
[name]: value
});
}
useEffect(() =>{
//경부 고속도로 하행선 시작
if (startCity ==='서울' && endCity ==='대전'){
setStart(['101'])
setEnd(['115'])
}
else if(startCity ==='서울' && endCity ==='대구'){
setStart(['101'])
setEnd(['129'])
}
else if(startCity ==='서울' && endCity ==='부산'){
setStart(['101','129','131','133'])
setEnd(['129','131','133','140'])
}else if(startCity ==='대전' && endCity ==='대구'){
setStart(['115'])
setEnd(['129'])
}
else if(startCity ==='대전' && endCity ==='부산'){
setStart(['115','129','131','133'])
setEnd(['129','131','133','140'])
}
else if(startCity ==='대구' && endCity ==='부산'){
setStart(['131','133'])
setEnd(['133','140'])
}
//경부 고속 도로 하행선 종료
//경부 고속도로 상행선 시작
else if (startCity ==='부산' && endCity ==='대구'){
setStart(['133','140'])
setEnd(['131','133'])
}
else if (startCity ==='부산' && endCity ==='대전'){
setStart(['123','131','133','140'])
setEnd(['115','123','131','133'])
}
else if (startCity ==='부산' && endCity ==='서울'){
setStart(['123','131','133','140'])
setEnd(['101','123','131','133'])
}
else if (startCity ==='대구' && endCity ==='대전'){
setStart(['123'])
setEnd(['115'])
}
else if (startCity ==='대구' && endCity ==='서울'){
setStart(['123'])
setEnd(['101'])
}
else if (startCity ==='대전' && endCity ==='서울'){
setStart(['115'])
setEnd(['101'])
}
//경부 고속도로 상행선 종료
//광주 관련 도로 시작
//광주 관련 도로 종료
},[startCity,endCity])
return(
<div>
<Input name = 'startCity' type = 'text' placeholder ='' onChange = {handleChange}></Input>
<Input name = 'endCity' type = 'text' placeholder ='' onChange = {handleChange}></Input>
<GetMultiTraffic startCity = {startCity} endCity = {endCity} start = {start} end = {end}></GetMultiTraffic>
</div>
)
}
export default App;
|
cs |
input.js
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from "react";
const Input = ({name,type,onChange}) =>{
return(
<div>
<input name = {name} type = {type} onChange = {onChange} ></input>
</div>
)
}
export {Input};
|
cs |
multiTraffic.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import React, { useState, useEffect } from 'react';
import axios from "axios";
const GetMultiTraffic = (props)=>{
const [dataSumList,setDataSumList] = useState([])
// let dataList = []
// let dataSumList = []
console.log(props)
function timeCal(t){
let minutes = 0;
let hour = 0;
if (3600 > t ){
minutes = parseInt(t/60)
return `${minutes}분`
}
else if (t>=3600){
hour = parseInt(t/3600)
minutes = parseInt((t - hour*3600)/60)
return `${hour}시간 ${minutes}분`
}
}
useEffect( () =>{
const { start, end } = props
let tempDataList = []
let sumTimeAvg = 0
let sumTimeMax = 0
let sumTimeMin = 0
try{
async function getTraffics(){
for (let i=0;i<start.length;i++){
const data = await axios.get(`http://data.ex.co.kr/openapi/odhour/trafficTimeByRoute?key=발급받은 API키입력8&type=json&startUnitCode=${start[i]}&endUnitCode=${end[i]}`)
const {list} = data.data
for (let j = 0; j<list.length; j++) {
if(list[j].startUnitCode ===`${start[i]} `&&list[j].endUnitCode ===`${end[i]} `&&list[j].carType ==='1'){
tempDataList.push({'carType':list[j].carType,'startUnitCode':list[j].startUnitCode,'endUnitCode':list[j].endUnitCode,'timeAvg':list[j].timeAvg,'timeMax':list[j].timeMax,'timeMin':list[j].timeMin,'sumTm':list[j].sumTm});
}
}
}
for (let j = 0; j < tempDataList.length;j++){
sumTimeAvg = sumTimeAvg + parseInt(tempDataList[j].timeAvg)
sumTimeMax = sumTimeMax + parseInt(tempDataList[j].timeMax)
sumTimeMin = sumTimeMin + parseInt(tempDataList[j].timeMin)
}
setDataSumList([sumTimeAvg,sumTimeMax,sumTimeMin])
}
getTraffics()
}
catch(e){
console.log('err')
}
},[props])
console.log(dataSumList)
return(
<div className = "col-md-12">
<div className = 'startCity'>출발 : {props.startCity}</div>
<div className = 'endCity'>도착 : {props.endCity}</div>
<div className = 'sumTimeAvg'>평균예상시간 : {timeCal(dataSumList[0])}</div>
<div className = 'sumTimeMax'>최대예상시간 : {timeCal(dataSumList[1])}</div>
<div className = 'sumTimeMin'>최소예상시간 : {timeCal(dataSumList[2])}</div>
</div>
)
}
export {GetMultiTraffic}
|
cs |
728x90