+ Loding...
+
+ )
+}
+
+export default Loding
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/map/Mapping.tsx b/Backend/Frontend/creative/src/component/map/BusMapping.tsx
similarity index 73%
rename from Backend/Frontend/creative/src/component/map/Mapping.tsx
rename to Backend/Frontend/creative/src/component/map/BusMapping.tsx
index 4fcd2ac..387e29b 100644
--- a/Backend/Frontend/creative/src/component/map/Mapping.tsx
+++ b/Backend/Frontend/creative/src/component/map/BusMapping.tsx
@@ -2,7 +2,7 @@ import React,{ useEffect } from "react";
import { useSelector, useDispatch } from 'react-redux';
import usePosition from "../../hook/usePosition.tsx";
-
+import { geolocationOptions } from "../../contents/geolocationOptions.tsx";
import classes from "./Mapping.module.css"
import { api } from "../auth/Api.ts";
import { BusActions } from "../../store/Bus-slice.ts";
@@ -13,11 +13,21 @@ declare global {
kakao: any;
}
}
-
const Mapping = () => {
const dispatch = useDispatch()
const marker = useSelector((state:RootState) => state.map.marker)
const position = useSelector((state:RootState) => state.map.position)
+<<<<<<< HEAD:Backend/Frontend/creative/src/component/map/BusMapping.tsx
+ const arsid = useSelector((state:RootState)=> state.bus.currentStation);
+ const busmode = useSelector((state:RootState) => state.map.busmode);
+ const {curPosition} = usePosition(geolocationOptions);
+ const tmY = curPosition ? curPosition.tmY: position.tmY;
+ const tmX = curPosition ? curPosition.tmX: position.tmX;
+ useEffect(() => {
+ const container = document.getElementById("busmap");
+ const x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:37.55068403524657;
+ const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:127.07411251036736;
+=======
const arsid = useSelector((state:RootState) => state.bus.currentStation)
const busmode = useSelector((state:RootState) => state.map.busmode)
const subwaymode = useSelector((state:RootState) => state.map.subwaymode)
@@ -27,13 +37,18 @@ const Mapping = () => {
useEffect(() => {
console.log(tmX,tmY);
const container = document.getElementById("map");
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc:Backend/Frontend/creative/src/component/map/Mapping.tsx
const options = {
- center: new window.kakao.maps.LatLng(tmY, tmX),
+ center: new window.kakao.maps.LatLng(y, x),
level: 3,
};
const map = new window.kakao.maps.Map(container, options);
if (busmode)
busmapcoordinate(marker, map)
+<<<<<<< HEAD:Backend/Frontend/creative/src/component/map/BusMapping.tsx
+ },[tmX,tmY,busmode,arsid,position])
+
+=======
else if (subwaymode)
subwaymapcoordinate(marker, map)
},[tmX,tmY])
@@ -47,25 +62,19 @@ const Mapping = () => {
new_marker.setMap(map)
}
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc:Backend/Frontend/creative/src/component/map/Mapping.tsx
const busmapcoordinate = (marker:any, map:any) => {
-
- const currentArsid = marker.filter((id:any) => id.arsId === arsid)
marker.forEach((element:any) => {
const imageSrc = './image/busImage.png' // 마커이미지의 주소입니다
const imageSize = new window.kakao.maps.Size(64, 69)
const imageOption = { offset: new window.kakao.maps.Point(27, 69) };
let markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)
-
const markerPosition = new window.kakao.maps.LatLng(parseFloat(String(element.tmY - 0.0000005)).toFixed(6), parseFloat(String(element.tmX - 0.0000005)).toFixed(6))
- if (element.arsId !== currentArsid[0].arsId) {
- markerImage = undefined;
- }
const new_marker = new window.kakao.maps.Marker({
position: markerPosition,
clickable: true,
image: markerImage
})
-
window.kakao.maps.event.addListener(new_marker, 'click', () => {
submitStationId(element.arsId)
})
@@ -85,7 +94,7 @@ const Mapping = () => {
}
return (
-
+
)
}
diff --git a/Backend/Frontend/creative/src/component/map/Mapping.module.css b/Backend/Frontend/creative/src/component/map/Mapping.module.css
index 14f1bed..42d4e28 100644
--- a/Backend/Frontend/creative/src/component/map/Mapping.module.css
+++ b/Backend/Frontend/creative/src/component/map/Mapping.module.css
@@ -1,12 +1,4 @@
-.map {
- width: 35vw;
- height: 80vh;
-
+.busmap, .subwaymap, .signmap {
+ width: 100vw;
+ height: 80%;
}
-
-@media (max-width:500px) {
- .map {
- width: 99%;
- height: 40vh;
- }
-}
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/map/SignMapping.tsx b/Backend/Frontend/creative/src/component/map/SignMapping.tsx
new file mode 100644
index 0000000..808e8b4
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/map/SignMapping.tsx
@@ -0,0 +1,73 @@
+import React,{ useState, useEffect } from "react";
+import { useSelector, useDispatch } from 'react-redux';
+
+import usePosition from "../../hook/usePosition.tsx";
+import { geolocationOptions } from "../../contents/geolocationOptions.tsx";
+import classes from "./Mapping.module.css"
+import { RootState } from "../../store/index";
+import { SignActions } from "../../store/Sign-slice.ts";
+
+declare global {
+ interface Window {
+ kakao: any;
+ }
+ }
+const Mapping = () => {
+ const dispatch = useDispatch();
+ const [map,setMap] = useState(null);
+ const [start,setStart] = useState(null);
+ const [end,setEnd] = useState(null);
+ const [prev,setPrev] = useState(start);
+ const position = useSelector((state:RootState) => state.map.position)
+ const {curPosition} = usePosition(geolocationOptions);
+ const state = useSelector((state:RootState)=>state.sign.State);
+ const tmY = curPosition ? curPosition.tmY: position.tmY;
+ const tmX = curPosition ? curPosition.tmX: position.tmX;
+ useEffect(() => {
+ const container = document.getElementById("signmap");
+ const x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:37.55068403524657;
+ const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:127.07411251036736;
+ const options = {
+ center: new window.kakao.maps.LatLng(y, x),
+ level: 3,
+ };
+ const map = new window.kakao.maps.Map(container, options);
+ setMap(map);
+ const Startmarker = new window.kakao.maps.Marker({
+ position:map.getCenter()
+ })
+ Startmarker.setMap(map);
+ const Endmarker = new window.kakao.maps.Marker({
+ position:map.getCenter()
+ })
+ Endmarker.setMap(map);
+ setStart(Startmarker)
+ setEnd(Endmarker);
+ },[tmX,tmY,position])
+
+ const moveMarker = (mouseEvent:any) => {
+ let latlng = mouseEvent!.latLng;
+ if(state==="start"){
+ start.setPosition(latlng);
+ dispatch(SignActions.initializationStart(latlng))
+ }
+ else if(state==="end"){
+ end.setPosition(latlng);
+ dispatch(SignActions.initializationEnd(latlng))
+ }
+ window.kakao.maps.event.removeListener(map,"click", moveMarker)
+ }
+
+ const changeStateMarker = () => {
+ window.kakao.maps.event.addListener(map,"click", moveMarker)
+ }
+ if(map&&state!=="")
+ changeStateMarker();
+
+ return (
+
+
+ {({isActive}:{isActive:boolean})=>(
+ isActive?
+
+ {({isActive}:{isActive:boolean})=>(
+ isActive?
+
+ {({isActive}:{isActive:boolean})=>(
+ isActive?
+
+ {({isActive}:{isActive:boolean})=>(
+ isActive?
+=======
@@ -41,6 +83,7 @@ const MenuBar = () => {
)
}
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx
new file mode 100644
index 0000000..51fe51b
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+import styled from "styled-components"
+import useSignForm from "../../hook/useSignForm.tsx";
+import SignDetailGraph from "./SignDetailGraph.tsx";
+import SignDetailInfo from "./SignDetailInfo.tsx";
+
+const StyledSignDetail = styled.main`
+ width: 90%;
+ height: 80%;
+ display: flex;
+ flex-direction: column;
+ font-family: "Pretendard-Regular";
+ font-style: normal;
+ overflow: auto;
+ .detail{
+ margin-top: 1.2em;
+ padding-bottom: 1em;
+ border-bottom: solid 1px;
+ }
+`
+
+
+//그래프에 필요한것 1. type 2. 시간을 준다.
+const SignDetail = () => {
+ const arr = useSignForm();
+ return (
+
+ {arr[0].length!==0&&arr[0].map((ele:any,index:number)=>{
+ return (
+
+ )
+}
+
+
+export default SignDetail;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx
new file mode 100644
index 0000000..29d7e23
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import styled from "styled-components";
+
+
+interface graphItem {
+ label:string,
+ portion:number,
+ sum:number
+}
+
+const StyleSignDetailGraph = styled.div`
+ display: flex;
+ width:100%;
+ height: 3vh;
+ background-color: #D9D9D9;
+ justify-content: space-between;
+ border-radius: 10px;
+`
+const StyleSignDetailGraphLi = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-width: ${props => ((props.portion/props.sum)*100)}%;
+ background-color: ${props=>(props.label)};
+ border-radius: 10px;
+ margin-right: 1%;
+ color:#F0F0F0;
+ font-family: "Pretendard-Regular";
+ font-style: normal;
+`
+
+const SignDetailGraph = ({graph}:any) => {
+ const idColor = ["#0052A4", "#00A84D", "#EF7C1C", "#00A5DE", "#996CAC", "#CD7C2F", "#747F00", "#E6186C","#BDB092"];
+ const busColor = "#70EB37"
+ return (
+
+ {graph.subPath.map((ele:any,index:number)=>{
+ if(ele.sectionTime!==0){
+ let color="#D9D9D9";
+ if(ele.trafficType===1){
+ color = idColor[ele.lane[0].subwayCode-1]
+ }
+ else if(ele.trafficType===2){
+ color = busColor;
+ }
+ return (
+
+ {ele.sectionTime}분
+
+ )
+ }
+ })}
+
+ )
+}
+
+export default SignDetailGraph;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx
new file mode 100644
index 0000000..cc5a01a
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledSignDetailInfo = styled.div`
+ display: flex;
+ flex-direction: column;
+`
+
+const StyledSignDetailInfoLi = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin:1em 0;
+ font-family: "Pretendard-Regular";
+ font-style: normal;
+ .SignDetail{
+ margin-top: 1px;
+ }
+`
+
+const SignDetailInfo = ({graph}:any) => {
+
+ return (
+
+ {graph.subPath.map((ele:any,index:number)=>{
+ if(ele.trafficType!==3){
+ let name = ele.lane[0].busNo?ele.lane[0].busNo:ele.lane[0].name
+ return (
+
+ {name}
+
+ )
+ }
+ })}
+
+ )
+}
+
+export default SignDetailInfo;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignForm.tsx b/Backend/Frontend/creative/src/component/sign-component/SignForm.tsx
new file mode 100644
index 0000000..1b33581
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/SignForm.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import SignFormButton from "./SignFormButton.tsx";
+
+import styled from "styled-components";
+
+const StyledForm = styled.form`
+ display: flex;
+ position: fixed;
+ z-index: 100;
+ top: 15vh;
+ height: 1vh;
+ width: 85vw;
+ .signFormInput{
+ width: 100%;
+ padding: 1em;
+ font-size: 80%;
+ font-family: 'Pretendard-Regular';
+ font-weight: 700;
+ border: 0;
+ border-radius: 30px;
+ }
+`
+
+
+const SignForm = () =>{
+ return (
+
+
+
+ )
+}
+
+export default SignForm;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignFormButton.tsx b/Backend/Frontend/creative/src/component/sign-component/SignFormButton.tsx
new file mode 100644
index 0000000..e1b33b2
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/SignFormButton.tsx
@@ -0,0 +1,39 @@
+import React from "react"
+import styled from "styled-components"
+import { useDispatch,useSelector } from "react-redux"
+import { SignActions } from "../../store/Sign-slice.ts"
+import { RootState } from "../../store/index";
+
+import {submitStartAndEnd} from "./signUtil.tsx";
+const StyleButton = styled.button`
+ height: 4vh;
+ border-radius: 15px;
+ color: #FFFFFF;
+ background-color: #FFD12D;
+ border: none;
+`
+
+const SignFormButton = ({value}:{value:string}) => {
+ const dispatch = useDispatch();
+ let start = useSelector((state:RootState)=>state.sign.startPostion);
+ let end = useSelector((state:RootState)=>state.sign.endPostion);
+ const ClickBtn = (event:React.MouseEvent) => {
+ event.preventDefault();
+ if(value==="submit") submitPosition();
+ else dispatch(SignActions.initialization(value));
+ }
+ const submitPosition = () => {
+ if(start.tmX!==-1&&end.tmX!==-1)
+ submitStartAndEnd();
+ }
+ return (
+
+ {value}
+
+ )
+
+}
+
+
+
+export default SignFormButton
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
new file mode 100644
index 0000000..3866ca4
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
new file mode 100644
index 0000000..c2a2ec9
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx b/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx
new file mode 100644
index 0000000..c24a143
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx
@@ -0,0 +1,6 @@
+import React from "react"
+import { api } from "../auth/Api.ts"
+
+export const submitStartAndEnd = () =>{
+ window.location.href = `/#/sign/detail`
+}
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaybath/SubwayBathChairInfo.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaybath/SubwayBathChairInfo.tsx
index adacdfa..13b36a8 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaybath/SubwayBathChairInfo.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaybath/SubwayBathChairInfo.tsx
@@ -4,39 +4,20 @@ import styled from "styled-components";
const StyledBathChair = styled.div`
width: 90%;
display: flex;
- .title {
- font-size: 2vw;
- margin: 1.8vw;
- }
.body {
- font-size: 1.7vw;
+ font-size: 1em;
margin: 0;
margin-bottom: 1vw;
}
font-family: "Pretendard-Regular";
font-style: normal;
font-weight: 600;
- @media (max-width: 500px) {
- font-size: 4vw;
- width: 90%;
- height: 80vw;
- .title {
- font-size: 4vw;
- margin: 1.8vw;
- }
- .body {
- font-size: 3vw;
- margin: 0;
- margin-bottom: 2vw;
- }
- }
`;
const SubwayBathchairInfo = (props:any) => {
- const {mvContDtl,direction} = props;
+ const {mvContDtl} = props;
return (
-
);
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
index 4bb04f0..e78daa7 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
@@ -9,18 +9,17 @@ interface subDetail {
const SubwayDetail = (props:any) => {
const {info} = props;
const idColor = ["#0052A4", "#00A84D", "#EF7C1C", "#00A5DE", "#996CAC", "#CD7C2F", "#747F00", "#E6186C"];
- //
return (
)
@@ -29,27 +28,24 @@ const SubwayDetail = (props:any) => {
const StyledDetail = styled.div`
display:flex;
flex-direction:column;
-width: 35vw;
-height: 80vh;
+width: 98vw;
+height: 40vh;
background-color:white;
-margin:0;
-border: 4px solid #9255F5;
+border: 4px solid #FFD12D;
.info-image{
- width: 1.8vw;
- height: 1.8vw;
+ width: 1em;
+ height: 1em;
}
.name{
font-family: 'Pretendard-Regular';
display:flex;
align-items:center;
- width:100%;
- height:auto;
+ width:96%;
+ height:200%;
font-weight: 600;
- font-size: 2.1vw;
- border-bottom: 4px solid #9255F5;
-}
-.name p{
- margin-left:26px;
+ font-size: 1em;
+ padding-left:4%;
+ border-bottom: 4px solid #FFD12D;
}
.line{
display:flex;
@@ -57,54 +53,27 @@ border: 4px solid #9255F5;
align-items:center;
color:#FFFFFF;
font-style: normal;
+ font-size: 100%;
font-weight: 600;
- font-size: 1.5vw;
- width: 48px;
- height: 48px;
+ width: 1.4em;
+ height: 1.4em;
background-color:${props => (props.idColor[props.line - 1])};
- border-radius:200px;
+ border-radius:20px;
}
.info{
font-family: 'Pretendard-Regular';
- width:100%;
+ width:96%;
+ height: 800%;
display:flex;
flex-direction:column;
font-weight: 600;
- font-size: 1.5vw;
- padding-left:1vw;
+ font-size: 100%;
+ padding-left:4%;
+ padding-top:4%;
}
-p{
- display:flex;
- justify-content:start;
-}
-
-@media (max-width:500px) {
- border: 2px solid #9255F5;
- width:99%;
- height:80vw;
- .info p{
- margin-bottom:1vw;
- }
- .line{
- width: 8vw;
- height: 8vw;
- }
- .name{
- height:15vw;
- font-size:5vw;
- }
- .name p{
- margin-left:3vw;
- }
- .info{
- padding-left:3vw;
- font-size:5vw;
- width:90%;
- }
- .info-image{
- width: 7vw;
- height: 7vw;
- }
+.info span{
+ width:100%;
+ margin-bottom: 1em;
}
`
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayButton.tsx b/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayButton.tsx
deleted file mode 100644
index 3e9e7c0..0000000
--- a/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayButton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import styled from "styled-components"
-
-const StyledButton = styled.button`
-width: 16%;
-height: 100%;
-background: #9255F5;
-border: 1px solid #9255F5;
-.GRASS{
- width:80%;
- height:80%;
- background: transparent;
-}
-@media (max-width:500px){
- width:20%;
- height:100%;
-}
-
-`
-
-const SubwayButton = () => {
- return (
- 
)
}
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayInput.tsx b/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayInput.tsx
index 8f77731..20f6055 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayInput.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayInput.tsx
@@ -3,26 +3,16 @@ import styled from "styled-components"
const StyledInput = styled.input`
-width: 80%;
-height: 8.5vh;
-padding: 15px;
-font-size: 2.5vw;
-border:0;
-font-family: 'Pretendard-Regular';
-font-weight: 700;
-@media (max-width:500px){
- font-family: 'Pretendard-Regular';
- width: 80%;
- height: 15vw;
- font-size: 6vw;
- padding: 1%;
-}
+ width: 100%;
+ padding: 1em;
+ font-size: 80%;
+ font-family: 'Pretendard-Regular';
+ font-weight: 700;
+ border: 0;
+ border-radius: 30px;
`
const SubwayInput = () => {
-
-
-
return (
- {info.map((element:any) => (
- element.map((node:any) => (
+ {info.map((element:any) => {
+ let {direction,info} = element;
+ return (
)
}
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx
index 88a4157..bb662a4 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx
@@ -15,20 +15,20 @@ interface sbitem {
}
const SubwayItems = (props:any) => {
- const {items} = props;
- const { stNm, lnNm, stCd } = items
const [position, setPosition] = useState("");
- const [color, setColor] = useState(false);
+ const [color, setColor] = useState("false");
const dispatch = useDispatch()
const currentSubway = useSelector((state:RootState) => state.subway.currentSubway)
+
+ const {items} = props;
+ const { stNm, lnNm, stCd } = items
const idColor = ["#0052A4", "#00A84D", "#EF7C1C", "#00A5DE", "#996CAC", "#CD7C2F", "#747F00", "#E6186C"];
+
useEffect(() => {
- if (currentSubway === stCd) {
- setColor(false)
- }
- else {
- setColor(true)
- }
+ if (currentSubway === stCd)
+ setColor("false")
+ else
+ setColor("true")
const locationRecive = async () => {
await api.get(`/subway/stationInfo/${stCd}/${stNm}`)
.then(res => {
@@ -40,11 +40,10 @@ const SubwayItems = (props:any) => {
}, [currentSubway,stCd,stNm])
const ClickSubway = () => {
- if (currentSubway === stCd) {
+ if (currentSubway === stCd)
window.location.href = `/#/subway/detail/${stCd}/${stNm}`;
- }
else if (currentSubway !== stCd) {
- setColor(false)
+ setColor("false")
dispatch(MapActions.positioning(position))
dispatch(MapActions.makerchacking(position))
dispatch(SubwayActions.clickSubway(stCd))
@@ -66,7 +65,7 @@ width:100%;
align-items:center;
list-style:none;
border-bottom: 1px solid #D2D2D2;
-background-color:${props => (props.color ? "#FFFFFF" : "#9255F5")};
+background-color:${props => (props.color==="true" ? "#FFFFFF" : "#FFD12D")};
color:black;
font-family: 'Pretendard-Regular';
:hover{
@@ -84,10 +83,10 @@ a{
padding-left:20px;
font-family: 'Pretendard-Regular';
font-style: normal;
- font-weight: ${props => (props.color ? "400" : "700")};
- font-size: 40px;
+ font-weight: ${props => (props.color==="true" ? "400" : "700")};
+ font-size: 1em;
line-height: 60px;
- color:${props => (props.color ? "#000000" : "#FFFFFF")};
+ color:${props => (props.color==="true" ? "#000000" : "#FFFFFF")};
}
.line{
color:#FFFFFF;
@@ -98,24 +97,13 @@ a{
font-family: 'Pretendard-Regular';
font-style: normal;
font-weight: 600;
- font-size: 1.5vw;
- width: 48px;
- height: 48px;
+ font-size: 1em;
+ width: 2em;
+ height: 2em;
background-color:${(props:any) => (props.idColor[props.lnNm - 1])};
border-radius:200px;
}
-@media (max-width:500px){
- height:25%;
- .name{
- font-size: 5vw;
- }
- .line{
- font-size: 3vw;
- width: 10vw;
- height: 10vw;
- }
-}
`
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
index a537014..238a560 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
@@ -10,20 +10,15 @@ display:flex;
flex-direction:column;
align-items: center;
box-sizing: border-box;
-width: 35vw;
-height: 68vh;
-background: #FFFFFF;
-border: 4px solid #9255F5;
+width: 100%;
+max-height:50%;
+min-height:50%;
padding:0;
margin:0;
overflow:auto;
a{
text-decoration:none;
}
-@media (max-width:500px) {
- width:100%;
- height:30vh;
-}
`
const SubwayList = () => {
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
index c528a36..56c6753 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
@@ -29,7 +29,7 @@ a{
@media (max-width:500px){
flex-direction: row;
- justify-content:space-even;
+ justify-content:space-evenly;
font-size:4vw;
margin:0;
li{
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaypanel/SubwayPanel.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaypanel/SubwayPanel.tsx
index 3dc79dc..e603008 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaypanel/SubwayPanel.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaypanel/SubwayPanel.tsx
@@ -10,7 +10,7 @@ width: 19vw;
height: 85vh;
margin-right: 2vw;
font-family: 'GmarketSansMedium';
-background: linear-gradient(270deg, #7C34F3 -44.25%, rgba(146, 85, 245, 0) 222.13%);
+background: #FFD12D;
font-size: 2.5vw;
color: #FFFFFF;
@media (max-width:500px) {
diff --git a/Backend/Frontend/creative/src/hook/useSignForm.tsx b/Backend/Frontend/creative/src/hook/useSignForm.tsx
new file mode 100644
index 0000000..491c776
--- /dev/null
+++ b/Backend/Frontend/creative/src/hook/useSignForm.tsx
@@ -0,0 +1,27 @@
+import React,{useEffect,useState} from "react"
+import { useSelector } from "react-redux";
+import {wrapPromise} from "../promise/warmPromise.ts"
+import { api } from "../component/auth/Api.ts";
+import { RootState } from "../store/index";
+
+
+const useSignForm = () => {
+ const [signArr,SetSignArr] = useState([""]);
+ let start = useSelector((state:RootState)=>state.sign.startPostion);
+ let end = useSelector((state:RootState)=>state.sign.endPostion);
+ useEffect(() => {
+ const getbusNsub = async () => {
+ await api.get(`/navigation/${start.tmY}/${start.tmX}/${end.tmY}/${end.tmX}/busNsub`)
+ .then(res=>{
+ console.log(res.data,"busNsub")
+ SetSignArr([res.data])
+ })
+ }
+ getbusNsub();
+ },[start,end])
+ return signArr;
+}
+
+
+
+export default useSignForm;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/BusPage.module.css b/Backend/Frontend/creative/src/page/BusPage.module.css
index f2e9fe0..a2cfcdf 100644
--- a/Backend/Frontend/creative/src/page/BusPage.module.css
+++ b/Backend/Frontend/creative/src/page/BusPage.module.css
@@ -1,14 +1,9 @@
-.main {
- display: flex;
- justify-content: start;
- width: 100vw;
-}
-
.buspage {
display: flex;
flex-direction: column;
align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ height: 100vh;
}
.busmain {
@@ -20,21 +15,4 @@
display: flex;
flex-direction: column;
margin-right: 30px;
-}
-
-@media (max-width:500px) {
- .main {
- flex-direction: column;
- }
-
- .busmain {
- flex-direction: column;
- margin-top: 0;
- height: 100%;
- justify-content: space-between;
- }
-
- .buslist {
- margin-right: 0;
- }
}
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/BusPage.tsx b/Backend/Frontend/creative/src/page/BusPage.tsx
index 0915413..e9a778c 100644
--- a/Backend/Frontend/creative/src/page/BusPage.tsx
+++ b/Backend/Frontend/creative/src/page/BusPage.tsx
@@ -1,25 +1,22 @@
import React from "react";
-import Mapping from "../component/map/Mapping.tsx"
-import BusForm from "../component/bus-component/busform/BusForm.tsx"
-import BusList from "../component/bus-component/buslist/BusList.tsx"
+import { useSelector } from "react-redux";
+import Mapping from "../component/map/BusMapping.tsx"
import classes from "./BusPage.module.css"
import Header from "../component/header/Header.tsx"
-import BusPanel from "../component/bus-component/buspanel/BusPanel.tsx"
+import MenuBar from "../component/menu/MenuBar.tsx";
+import BusForm from "../component/bus-component/busform/BusForm.tsx"
+import BusList from "../component/bus-component/buslist/BusList.tsx"
+import { RootState } from "../store/index";
const BusPage = () => {
+ const busmode = useSelector((state:RootState) => state.map.busmode)
return (
("");
const dispatch = useDispatch()
useEffect(() => {
const stCd = params.stCd;
@@ -37,22 +39,18 @@ const SubwayBathchair = () => {
}
getBathChair()
}, [dispatch,params.lnCd,params.railCd,params.stCd,params.stNm])
+
return (
+ ([]);
+ const [ElePos, setElePos] = useState([{imgPath:""}]);
useEffect(() => {
const stCd = params.stCd;
const stNm = params.stNm;
@@ -32,17 +34,16 @@ const SubwayElevator = () => {
}
getBathChair()
}, [dispatch, params.lnCd,params.railCd,params.stCd,params.stNm])
+
return (
+ 
+ ) => {
+ //promise를 던지기 위한 함수
+ let status = "pending";
+ let result:any;
+ let suspend = promise.then(
+ (res) => {
+ status = "success";
+ result = res;
+ },
+ (err) => {
+ status = "error";
+ result = err;
+ }
+ );
+ return {
+ read() {
+ if (status === "pending") {
+ throw suspend;
+ } else if (status === "error") {
+ throw result;
+ } else if (status === "success") {
+ return result;
+ }
+ },
+ };
+ };
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/store/Map-slice.ts b/Backend/Frontend/creative/src/store/Map-slice.ts
index 6747c41..1768bf6 100644
--- a/Backend/Frontend/creative/src/store/Map-slice.ts
+++ b/Backend/Frontend/creative/src/store/Map-slice.ts
@@ -4,8 +4,8 @@ const MapSlice = createSlice({
name: "Map",
initialState: {
position: {
- tmY: 37.55068403524657,
- tmX: 127.07411251036736
+ tmY: 0,
+ tmX: 0
},
marker: [],
busmode: false,
@@ -21,8 +21,8 @@ const MapSlice = createSlice({
},
initialization(state) {
state.position = {
- tmY: 37.55068403524657,
- tmX: 127.07411251036736
+ tmY: 0,
+ tmX: 0
};
state.marker = [];
state.busmode = false;
@@ -35,7 +35,7 @@ const MapSlice = createSlice({
Onsubwaymode(state) {
state.busmode = false;
state.subwaymode = true;
- }
+ },
}
})
diff --git a/Backend/Frontend/creative/src/store/Sign-slice.ts b/Backend/Frontend/creative/src/store/Sign-slice.ts
new file mode 100644
index 0000000..79cb80c
--- /dev/null
+++ b/Backend/Frontend/creative/src/store/Sign-slice.ts
@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const SignSlice = createSlice({
+ name: "Sign",
+ initialState: {
+ State:"",
+ startPostion:{
+ tmX:-1,
+ tmY:-1
+ },
+ endPostion:{
+ tmX:-1,
+ tmY:-1
+ }
+ },
+ reducers: {
+ initialization(state,action){
+ state.State = action.payload
+ },
+
+ initializationStart(state,action){
+ state.startPostion.tmX = action.payload.Ma
+ state.startPostion.tmY = action.payload.La
+ },
+ initializationEnd(state,action){
+ state.endPostion.tmX = action.payload.Ma
+ state.endPostion.tmY = action.payload.La
+ }
+ }
+})
+
+export const SignActions = SignSlice.actions;
+export default SignSlice.reducer;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/store/index.ts b/Backend/Frontend/creative/src/store/index.ts
index 6811e06..0531ae8 100644
--- a/Backend/Frontend/creative/src/store/index.ts
+++ b/Backend/Frontend/creative/src/store/index.ts
@@ -1,17 +1,23 @@
-import { configureStore } from "@reduxjs/toolkit"
+import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit"
import BusReducer from "./Bus-slice.ts";
import MapReducer from "./Map-slice.ts"
import SubwayReducer from "./Subway-slice.ts"
+import SignReducer from "./Sign-slice.ts";
+
import { combineReducers } from "@reduxjs/toolkit";
const reducer = combineReducers({
- bus: BusReducer, map: MapReducer, subway: SubwayReducer
+ bus: BusReducer, map: MapReducer, subway: SubwayReducer, sign:SignReducer
})
const store = configureStore({
- reducer: reducer
+ reducer: reducer,
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware({
+ serializableCheck:false,
+ })
});
+
+ )
+}
+
+export default Mapping;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/map/SubwayMapping.tsx b/Backend/Frontend/creative/src/component/map/SubwayMapping.tsx
new file mode 100644
index 0000000..7480eb9
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/map/SubwayMapping.tsx
@@ -0,0 +1,49 @@
+import React,{ useEffect } from "react";
+import { useSelector } from 'react-redux';
+
+import usePosition from "../../hook/usePosition.tsx";
+import { geolocationOptions } from "../../contents/geolocationOptions.tsx";
+import classes from "./Mapping.module.css"
+import { RootState } from "../../store/index";
+
+declare global {
+ interface Window {
+ kakao: any;
+ }
+ }
+const Mapping = () => {
+ const marker = useSelector((state:RootState) => state.map.marker)
+ const position = useSelector((state:RootState) => state.map.position)
+ const subwaymode = useSelector((state:RootState) => state.map.subwaymode);
+ const {curPosition} = usePosition(geolocationOptions);
+ const tmY = curPosition ? curPosition.tmY: position.tmY;
+ const tmX = curPosition ? curPosition.tmX: position.tmX;
+ useEffect(() => {
+ const container = document.getElementById("subwaymap");
+ const x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:37.55068403524657;
+ const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:127.07411251036736;
+ const options = {
+ center: new window.kakao.maps.LatLng(y, x),
+ level: 3,
+ };
+ const map = new window.kakao.maps.Map(container, options);
+ if (subwaymode)
+ subwaymapcoordinate(marker, map)
+ },[tmX,tmY,subwaymode,position])
+
+ const subwaymapcoordinate = (marker:any, map:any) => {
+ const markerPosition = new window.kakao.maps.LatLng(parseFloat(String(marker.tmY - 0.0000005)).toFixed(6), parseFloat(String(marker.tmX - 0.0000005)).toFixed(6))
+ const new_marker = new window.kakao.maps.Marker({
+ position: markerPosition,
+ clickable: true,
+ })
+ new_marker.setMap(map)
+ }//마커 찍는 함수
+
+ return (
+
+
+ )
+}
+
+export default Mapping;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/menu/MenuBar.tsx b/Backend/Frontend/creative/src/component/menu/MenuBar.tsx
index 0cfa2fa..54a85ff 100644
--- a/Backend/Frontend/creative/src/component/menu/MenuBar.tsx
+++ b/Backend/Frontend/creative/src/component/menu/MenuBar.tsx
@@ -1,11 +1,53 @@
import React from "react"
import styled from "styled-components"
+<<<<<<< HEAD
+import { NavLink } from "react-router-dom";
+=======
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc
import {ReactComponent as HOME} from "./menuSvg/HOME.svg";
import {ReactComponent as BUS} from "./menuSvg/BUS.svg";
import {ReactComponent as SUBWAY} from "./menuSvg/SUBWAY.svg";
import {ReactComponent as SIGN} from "./menuSvg/SIGN.svg";
+<<<<<<< HEAD
+
+const StyleMenuBar = styled.div`
+display:flex;
+justify-content: space-evenly;
+position: fixed;
+bottom: 0;
+align-items: center;
+width: 100%;
+min-height: 10%;
+background-color: #FFD12D;
+text-decoration:none;
+`
+
+const MenuBar = () => {
+ return (
+
+ {ele.info.totalTime}분
+
+
+
+ )
+ })}
+
+ {ele.endName} -
+ {ele.startName}
+
+ {direction}
{mvContDtl}
return (
-
{info.lnCd}
-{info.stNm}
+ {info.lnCd} + {info.stNm}
- 
{info.roadNm}
+ 교통약자 도우미 전화번호
{info.wNum} + 지하철역 영문명: {info.eName} + 지하철역 FR_CODE: {info.fCode}
{info.roadNm}
교통약자 도우미 전화번호
{info.wNum}
지하철역 영문명: {info.eName}
-지하철역 FR_CODE: {info.fCode}
+{info.roadNm}
+ 교통약자 도우미 전화번호{info.wNum} + 지하철역 영문명: {info.eName} + 지하철역 FR_CODE: {info.fCode}
+
)
+ })}
{direction}
+ {info.map((node:any)=>(
-
+
-
-
-
-
+
+ )
+}
+
+export default SignDetailPage
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/SignDetailPage.module.css b/Backend/Frontend/creative/src/page/SignDetailPage.module.css
new file mode 100644
index 0000000..54daa87
--- /dev/null
+++ b/Backend/Frontend/creative/src/page/SignDetailPage.module.css
@@ -0,0 +1,7 @@
+.signpage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+}
diff --git a/Backend/Frontend/creative/src/page/SignPage.module.css b/Backend/Frontend/creative/src/page/SignPage.module.css
new file mode 100644
index 0000000..54daa87
--- /dev/null
+++ b/Backend/Frontend/creative/src/page/SignPage.module.css
@@ -0,0 +1,7 @@
+.signpage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+}
diff --git a/Backend/Frontend/creative/src/page/SignPage.tsx b/Backend/Frontend/creative/src/page/SignPage.tsx
new file mode 100644
index 0000000..0fee62f
--- /dev/null
+++ b/Backend/Frontend/creative/src/page/SignPage.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Mapping from "../component/map/SignMapping.tsx"
+import classes from "./SignPage.module.css"
+import Header from "../component/header/Header.tsx"
+import MenuBar from "../component/menu/MenuBar.tsx";
+import SignForm from "../component/sign-component/SignForm.tsx";
+
+
+const SignPage = () => {
+ return (
+
+
+ )
+}
+
+export default SignPage
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
index 6c17c2c..2f582c4 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
@@ -1,7 +1,6 @@
.main {
- display: flex;
- justify-content: start;
width: 100vw;
+ margin-top: 10vh;
}
.subwaypage {
@@ -12,8 +11,8 @@
}
.subwayImage {
- width: 40vw;
- height: 68vh;
+ width: 100vw;
+ height: 20vh;
}
.subwaylist {
@@ -23,26 +22,4 @@
.subwaymain {
display: flex;
margin-top: 20px;
-}
-
-@media (max-width:500px) {
- .main {
- flex-direction: column;
- }
-
- .subwaymain {
- flex-direction: column;
- margin-top: 0;
- height: 100%;
- justify-content: space-between;
- }
-
- .subwaylist {
- flex-direction: column;
- }
-
- .subwayImage {
- width: 100%;
- height: 30vh;
- }
}
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
index 9c7db47..61c32f2 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
@@ -2,19 +2,21 @@ import React from "react";
import classes from "./SubwayBathchair.module.css"
import Header from "../../component/header/Header.tsx"
import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPanel.tsx"
+import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.tsx"
+import SubwayInfo from "../../component/subway-component/subwayinfo/SubwayInfo.tsx"
+import MenuBar from "../../component/menu/MenuBar.tsx";
+
import { useParams } from "react-router-dom"
import { api } from "../../component/auth/Api.ts"
import { useEffect, useState } from "react"
import { useDispatch } from "react-redux"
import { SubwayActions } from "../../store/Subway-slice.ts"
-import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.tsx"
-import SubwayInfo from "../../component/subway-component/subwayinfo/SubwayInfo.tsx"
const SubwayBathchair = () => {
const params = useParams();
const [bath, setBath] = useState([]);
- const [image, setimage] = useState("");
+ const [image, setimage] = useState
-
+
-
-
-
+
-
+
-
-
-
+
-
-
-
-