Frontend (#210)

* 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: 길찾기 지하철 편의시설 완
2022-Sejong-Creative-Semester · Dec 11, 2023 · e6f2906 · e6f2906
1 parent 607c622
commit e6f2906
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 14 deletions.
diff --git 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 (
         <StyledSignDetail>
-            {arr[0].length!==0&&arr[0].map((ele:any,index:number)=>{
+            {signArr[0].map((ele:any,index:number)=>{
                 return (
                     <div className="detail" key={index}>
                         <span>{ele.info.totalTime}분</span>

diff --git 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 (
-                    <StyleSignDetailGraphLi key={index} label={color} sum={graph.info.totalTime} portion={ele.sectionTime}>
-                        {ele.sectionTime}분
-                    </StyleSignDetailGraphLi>
+                        <StyleSignDetailGraphLi key={index} label={color} sum={graph.info.totalTime} portion={ele.sectionTime}>
+                            {ele.sectionTime}분
+                        </StyleSignDetailGraphLi>
                     )
                 }
             })}

diff --git 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 (
             <StyledSignInfoList>
                 {info.startName}
-                <BusTimer timer={timer}/>
                 {info.passStopList.stations.map((ele:any)=>(
                     <StyledSignInfoListDetail key={ele.stationName}>{ele.stationName}</StyledSignInfoListDetail>
                 ))}
@@ -43,11 +44,11 @@ const SignDetailInfoList = ({info}:any) => {
     else if(info.trafficType===1){//지하철
         return (
             <StyledSignInfoList>
-                <StyledSignInfoSubway onClick={()=>moveSubway(info.passStopList.stations[0].stationID,info.passStopList.stations[0].stationName)}>{info.startName} 편의시설</StyledSignInfoSubway>
+                <StyledSignInfoSubway onClick={()=>moveSubway(info.passStopList.stations[0].stCd,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>
+                <StyledSignInfoSubway onClick={()=>moveSubway(info.passStopList.stations.at(-1).stCd,info.passStopList.stations.at(-1).stationName)}>{info.endName} 편의시설</StyledSignInfoSubway>
             </StyledSignInfoList>
         )
     }

diff --git a/.../Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx b/.../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
@@ -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 (
         <div className={classes.signpage}>
             <Header/>
-            <SignDetail/>
+            <Suspense fallback={<Loding/>}>
+                <SignDetail sign={getSignBusNSub(sTmY,sTmX,eTmY,eTmX)}/>
+            </Suspense>
             <MenuBar/>
         </div>
     )

diff --git a/Backend/Frontend/creative/src/utils/getBusApi.ts 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())
+    }
+}
diff --git a/Backend/Frontend/creative/src/utils/getSignApi.ts 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())
+    }
+}