Frontend (#207)

* feat. 새로 고침 버튼 개발[#46]

* 새로 고침 버튼을 개발하여 클릭 시 다시 해당 정류장의 버스를 받는 기능을 개발하였다.
Resolves #46

* feat. map component 리팩토링

* 지하철 기능을 위해 map component 리팩토링 하였습니다.

* feat. 버스페이지 css작업 완료

* 버스페이지 css작업 완료

* feat. 입력 폼 변경

* 입력 부분에서 검색어 바뀔 때마다 서버에 요청

* feat. 지하철 page생성

지하철 page 뼈대를 만들었습니다.

* feat. map-slice수정

* feat. subway page개발(v1.1)

* feat. main화면 bus화면 디자인 변경

* 변경 했지만 반응형 추가 필요

* feat. 디자인 폰트, 버스 페이지 어느 정도 완성

* 디자인 폰트, 버스 페이지 80% 완성, 반응형으로 만들기 수정

* feat. 지하철 페이지 디자인에 맞춰 개발

* feat. 지하철 메뉴

* 지하철 메뉴에 해당하는 페이지 설정

* feat. 모바일 반응형

* 모바일 반응형 완료 아직 지하철 페이지는 개발 필요함

* feat. 환승 page개발

* feat. HashRouter로 변경

* BrowserRouter에서 HashRouter로 변경

* feat. 이모지 + 서버

* feat.지하철 수정

* feat. map focusing 수정

* feat. 휠체어 기능 하기 전 저장

* 휠체어 기능 하기 전 저장

* feat. 휠체어 수정 완료

* 휠체어 수정 완료

* feat. 디테일한 수정

* 디테일한 수정

* Update Api.js

* feat. 약간의 수정

* 약간의 수정

* feat.폰트, 맵 초기화 수정

* 폰트, 맵 초기화 수정

* feat. 최종 수정

* 최종 수정

* Update StationItem.js

* refac: typescript로 Refectoring중

* feat(front): ts변경 오류 다수 발견

* feat(front): gps기반 지도 중심 개발

* fix(front): Api 수정

* fix(front): map 변경

* feat: 간단 퍼블리싱(1)

* feat:menuBar 수정(SVG로 표현)

* feat(front): 모바일 환경에 맞게 수정

* feat(): busmode 완성

* feat: busmode 수정

* feat: 지하철 수정

* feat: 지하철 마무리

* feat: map Marker 클릭이벤트 등록 완료

* feat: 길찾기 솔루션 개발중

* feat: 수정

* fix: 위도 경도 수정

* fix: api 수정

* fix: api변경

* feat: 환승역 개발

* feat: 지하철 환승 페이지 완료

* fix: 지도 위치 변경

* fix: page 높이 수정

* feat: 길찾기 페이지 설명 자세히

* fix: refresh 버튼 이미지 추가

* fix: 로딩 환경 완료

* feat: loding component 구축

* feat: subway elevator loding 적용

* feat: Subway 휠체어 관련 위치 loding 완료

* feat: 환승 이동 경로 loding

Backend/Frontend/creative/src/App.tsx

@@ -4,7 +4,7 @@ import MainPage from "./page/MainPage.tsx"
 import BusPage from "./page/BusPage.tsx"
 import SubwayPage from "./page/subwaypage/SubwayPage.tsx"
 import SubwayDetailPage from "./page/subwaypage/SubwayDetailPage.tsx"
-import SubwayElevatorPage from "./page/subwaypage/SubwayElevator.tsx";
+import SubwayElevatorPage from "./page/subwaypage/SubwayElevatorPage.tsx"
 import SubwayBathChairPage from "./page/subwaypage/SubwayBathchair.tsx";
 import SubwayTransferPAge from "./page/subwaypage/SubwayTransferPage.tsx";
 import SubwayTranferDetailPage from "./page/subwaypage/SubwayTransferDetailPage.tsx";

Backend/Frontend/creative/src/component/bus-component/buslist/BusItem.tsx

@@ -47,15 +47,15 @@ const StyledBusItem = styled.li`
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 1em;
+    font-size: 0.8em;
     line-height: 29px;
   }
   .id {
     padding-right: 20px;
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 1em;
+    font-size: 0.8em;
     line-height: 29px;
     color: #9c9c9c;
   }

Backend/Frontend/creative/src/component/bus-component/buslist/BusTimer.tsx

@@ -5,9 +5,10 @@ import styled from "styled-components";
 const StyledBusTimer = styled.div``;
 
 const BusTimer = (props:any) => {
-  const [Timer] = useState(props.timer);
+  const [timer,setTimer] = useState(props.timer);
+  console.log(props.timer)
   setInterval(() => {}, 1000);
-  return <StyledBusTimer>{Timer}</StyledBusTimer>;
+  return <StyledBusTimer>{timer}</StyledBusTimer>;
 };
 
 export default BusTimer;

Backend/Frontend/creative/src/component/bus-component/busnumber/BusNumber.tsx

@@ -4,7 +4,7 @@ import RefreshButton from "../buslist/RefreshButton.tsx";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../store/index";
 
-const StyledBusNumber = styled.header`
+const StyledBusNumber = styled.div`
 display:flex;
 justify-content: space-between;
 line-height: 60px;

Backend/Frontend/creative/src/component/loding/Loding.css

@@ -0,0 +1,8 @@
+.loding{
+    animation: rotate_image 6s linear infinite;
+}
+@keyframes rotate_image{
+    100% {
+        transform: rotate(360deg);
+    }
+}

Backend/Frontend/creative/src/component/loding/Loding.tsx

@@ -1,13 +1,11 @@
 import React from "react";
-
-
+import {ReactComponent as LODING} from "./lodingSvg.svg";
+import "./Loding.css";
 
 
 const Loding = () => {
     return (
-        <div>
-            Loding...
-        </div>
+        <LODING/>
     )
 }
 

Backend/Frontend/creative/src/component/map/Mapping.module.css

@@ -1,4 +1,5 @@
 .busmap, .subwaymap, .signmap {
     width: 100vw;
-    height: 85vh;
+    height: 90%;
+
 }

Backend/Frontend/creative/src/component/map/SignMapping.tsx

@@ -34,11 +34,13 @@ const Mapping = () => {
         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()
-        })         
+        })
+        dispatch(SignActions.initializationStart(map.getCenter()))
+        dispatch(SignActions.initializationEnd(map.getCenter()))      
         Endmarker.setMap(map);
         setStart(Startmarker)
         setEnd(Endmarker);

Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import SignDetailInfoList from "./SignDetailInfoLIst.tsx";
 
 const StyledSignDetailInfo = styled.div`
     display: flex;
@@ -28,9 +29,10 @@ const SignDetailInfo = ({graph}:any) => {
                             <StyledSignDetailInfoLi key={index}>
                                 <span>{name}</span>
                                 <div className="SignDetail">
-                                    <span>{ele.endName} - </span>
-                                    <span>{ele.startName}</span>
+                                    <span>{ele.startName} - </span>
+                                    <span>{ele.endName}</span>
                                 </div>
+                                <SignDetailInfoList info={ele}/>
                             </StyledSignDetailInfoLi>
                     )
                 }

Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+import {moveSubway} from "./signUtil.tsx"
+import BusTimer from "../bus-component/buslist/BusTimer.tsx"
+import useBusTimer from "../../hook/useBusTImer.tsx";
+
+const StyledSignInfoList = styled.ul`
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+`
+
+const StyledSignInfoListDetail = styled.li`
+    font-size: 0.8em;
+`
+
+const StyledSignInfoSubway = styled.button`
+    display: flex;
+    border: none;
+    font-family: "Pretendard-Regular";
+    font-style: normal;
+    background-color: white;
+    font-size: 1em;
+    padding: 0;
+    margin: 1em 0;
+`
+
+
+const SignDetailInfoList = ({info}:any) => {
+    const timer = useBusTimer(info.startArsID,info.lane[0].busNo)
+    if(info.trafficType===2){//버스
+        return (
+            <StyledSignInfoList>
+                {info.startName}
+                <BusTimer timer={timer}/>
+                {info.passStopList.stations.map((ele:any)=>(
+                    <StyledSignInfoListDetail key={ele.stationName}>{ele.stationName}</StyledSignInfoListDetail>
+                ))}
+            </StyledSignInfoList>
+        )
+    }
+    else if(info.trafficType===1){//지하철
+        return (
+            <StyledSignInfoList>
+                <StyledSignInfoSubway onClick={()=>moveSubway(info.passStopList.stations[0].stationID,info.passStopList.stations[0].stationName)}>{info.startName} 편의시설</StyledSignInfoSubway>
+                {info.passStopList.stations.map((ele:any)=>(
+                    <StyledSignInfoListDetail key={ele.stationName}>{ele.stationName}</StyledSignInfoListDetail>
+                ))}
+                <StyledSignInfoSubway onClick={()=>moveSubway(info.passStopList.stations.at(-1).stationID,info.passStopList.stations.at(-1).stationName)}>{info.endName} 편의시설</StyledSignInfoSubway>
+            </StyledSignInfoList>
+        )
+    }
+}
+
+export default SignDetailInfoList

Backend/Frontend/creative/src/component/sign-component/signUtil.tsx

@@ -9,4 +9,9 @@ interface coordinate {
 
 export const submitStartAndEnd = (start:coordinate,end:coordinate) =>{
     window.location.href = `/#/sign/detail/${start.tmY}/${start.tmX}/${end.tmY}/${end.tmX}`
-}
+}
+
+
+export const moveSubway = (stationID:number,stationName:string) => {
+    window.location.href = `/#/subway/detail/${stationID}/${stationName}`
+}

Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetailMain.tsx

@@ -0,0 +1,34 @@
+import React,{Suspense} from "react";
+import styled from "styled-components";
+import SubwayMain from "./SubwayMain";
+import Loding from "../../loding/Loding.tsx";
+
+import {getSubwayDetail} from "../../../utils/getSubwayApi.ts"
+import { useParams } from "react-router-dom"
+
+const StyledDetailMain = styled.main`
+display:flex;
+flex-direction:column;
+justify-content: center;
+align-items: center;
+width: 98vw;
+height: 36vh;
+background-color:white;
+border: 4px solid #FFD12D;
+`
+
+const SubwayDetailMain = () => {
+    const params = useParams()
+    const stCd = params.stCd;
+    const stNm = params.stNm;
+    return (
+        <StyledDetailMain>
+            <Suspense fallback={<Loding/>}>
+                <SubwayMain info={getSubwayDetail(stCd,stNm)}/>
+            </Suspense>
+        </StyledDetailMain>
+    )
+}
+
+
+export default SubwayDetailMain;