From e6f290684a094baf671938e603a9aa9476c78092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EA=B7=9C=ED=83=9C?= <79373803+KyuTae98@users.noreply.github.com> Date: Tue, 12 Dec 2023 00:49:45 +0900 Subject: [PATCH] Frontend (#210) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * feat: Sign loding 완 * fix: 길찾기 지하철 편의시설 완 --- .../component/sign-component/SignDetail.tsx | 7 +++--- .../sign-component/SignDetailGraph.tsx | 6 ++--- .../sign-component/SignDetailInfoLIst.tsx | 9 +++---- .../subwaytransfer/SubwayTransferDetail.tsx | 3 +-- .../creative/src/page/SIgnDetailPage.tsx | 14 +++++++++-- .../Frontend/creative/src/utils/getBusApi.ts | 24 +++++++++++++++++++ .../Frontend/creative/src/utils/getSignApi.ts | 20 ++++++++++++++++ 7 files changed, 69 insertions(+), 14 deletions(-) create mode 100644 Backend/Frontend/creative/src/utils/getBusApi.ts create mode 100644 Backend/Frontend/creative/src/utils/getSignApi.ts diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx index daa6ac6..7903f80 100644 --- a/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx +++ b/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx @@ -19,11 +19,12 @@ const StyledSignDetail = styled.main` } ` -const SignDetail = () => { - const arr = useSignForm(); +const SignDetail = (props:any) => { + const {sign} = props; + const {signArr} = sign.signBS.read(); return ( - {arr[0].length!==0&&arr[0].map((ele:any,index:number)=>{ + {signArr[0].map((ele:any,index:number)=>{ return (
{ele.info.totalTime}분 diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx index 29d7e23..146fd8f 100644 --- a/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx +++ b/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx @@ -45,9 +45,9 @@ const SignDetailGraph = ({graph}:any) => { color = busColor; } return ( - - {ele.sectionTime}분 - + + {ele.sectionTime}분 + ) } })} diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx index 42072d7..e988b8c 100644 --- a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx +++ b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx @@ -25,15 +25,16 @@ const StyledSignInfoSubway = styled.button` padding: 0; margin: 1em 0; ` +const StyledSingBusTimer = styled.div` + display: flex; +` const SignDetailInfoList = ({info}:any) => { - const timer = useBusTimer(info.startArsID,info.lane[0].busNo) if(info.trafficType===2){//버스 return ( {info.startName} - {info.passStopList.stations.map((ele:any)=>( {ele.stationName} ))} @@ -43,11 +44,11 @@ const SignDetailInfoList = ({info}:any) => { else if(info.trafficType===1){//지하철 return ( - moveSubway(info.passStopList.stations[0].stationID,info.passStopList.stations[0].stationName)}>{info.startName} 편의시설 + moveSubway(info.passStopList.stations[0].stCd,info.passStopList.stations[0].stationName)}>{info.startName} 편의시설 {info.passStopList.stations.map((ele:any)=>( {ele.stationName} ))} - moveSubway(info.passStopList.stations.at(-1).stationID,info.passStopList.stations.at(-1).stationName)}>{info.endName} 편의시설 + moveSubway(info.passStopList.stations.at(-1).stCd,info.passStopList.stations.at(-1).stationName)}>{info.endName} 편의시설 ) } diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx index 89682ab..1da55a4 100644 --- a/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx +++ b/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx @@ -1,6 +1,5 @@ -import React,{useEffect, useState} from "react"; +import React from "react"; import styled from "styled-components"; -import { api } from "../../auth/Api.ts" const StyledSubwayTransferDetail = styled.main` display:flex; diff --git a/Backend/Frontend/creative/src/page/SIgnDetailPage.tsx b/Backend/Frontend/creative/src/page/SIgnDetailPage.tsx index e84514c..c5200e1 100644 --- a/Backend/Frontend/creative/src/page/SIgnDetailPage.tsx +++ b/Backend/Frontend/creative/src/page/SIgnDetailPage.tsx @@ -1,15 +1,25 @@ -import React from "react"; +import React,{Suspense} from "react"; import classes from "./SignDetailPage.module.css" import Header from "../component/header/Header.tsx" import MenuBar from "../component/menu/MenuBar.tsx"; import SignDetail from "../component/sign-component/SignDetail.tsx"; +import Loding from "../component/loding/Loding.tsx"; +import {getSignBusNSub} from "../utils/getSignApi.ts" +import { useParams } from "react-router-dom"; const SignDetailPage = () => { + const param = useParams(); + const sTmX = param.sTmX; + const sTmY = param.sTmY; + const eTmX = param.eTmX; + const eTmY = param.eTmY; return (
- + }> + +
) diff --git a/Backend/Frontend/creative/src/utils/getBusApi.ts b/Backend/Frontend/creative/src/utils/getBusApi.ts new file mode 100644 index 0000000..50bebb4 --- /dev/null +++ b/Backend/Frontend/creative/src/utils/getBusApi.ts @@ -0,0 +1,24 @@ +import { wrapPromise } from "../promise/warmPromise.ts"; + +import { api } from "../component/auth/Api.ts"; + +export const getBusTime = (BusArsID:string,BusNo:number) => { + const getBusTimeAPI = async () => { + let arsId = BusArsID.split("-").join(""); + const getTimer = await api(`/bus/arsId/${arsId}`).then((res)=>{ + const {data} = res; + let time = [0,0] + data.forEach((ele:any)=>{ + if(ele.busrouteAbrv===BusNo) + time = [Number(ele.min),Number(ele.sec)] + }) + return time; + }).catch((error)=>{ + return [5,10] + }) + return getTimer; + } + return { + busTimer:wrapPromise(getBusTimeAPI()) + } +} \ No newline at end of file diff --git a/Backend/Frontend/creative/src/utils/getSignApi.ts b/Backend/Frontend/creative/src/utils/getSignApi.ts new file mode 100644 index 0000000..d00e2de --- /dev/null +++ b/Backend/Frontend/creative/src/utils/getSignApi.ts @@ -0,0 +1,20 @@ +import { wrapPromise } from "../promise/warmPromise.ts"; + +import { api } from "../component/auth/Api.ts"; + + +export const getSignBusNSub = (sTmY: any, sTmX: any, eTmY: any, eTmX: any) => { + const getBusNSub = async () => { + try { + const res = await api.get(`/navigation/${sTmY}/${sTmX}/${eTmY}/${eTmX}/busNsub`); + const { data } = res; + return { signArr: [data] }; + } catch (error) { + console.log(error); + throw error; + } + }; + return { + signBS:wrapPromise(getBusNSub()) + } +} \ No newline at end of file