feat: 길찾기 솔루션 개발중

Backend/Frontend/creative/src/App.tsx

@@ -7,6 +7,7 @@ import SubwayDetailPage from "./page/subwaypage/SubwayDetailPage.tsx"
 import SubwayElevatorPage from "./page/subwaypage/SubwayElevator.tsx";
 import SubwayBathChairPage from "./page/subwaypage/SubwayBathchair.tsx";
 import SignPage from "./page/SignPage.tsx";
+import SignDetailPage from "./page/SIgnDetailPage.tsx";
 
 //page마다 url을 따로 지정, 페이지에서 api를 호출할 때 필요한 파라미터를 제공
 function App() {
@@ -20,6 +21,7 @@ function App() {
         <Route path="/subway/elevator/:stCd/:stNm/:railCd/:lnCd" element={<SubwayElevatorPage />} />
         <Route path="/subway/bathchair/:stCd/:stNm/:railCd/:lnCd" element={<SubwayBathChairPage />} />
         <Route path="/sign" element={<SignPage/>}/>
+        <Route path="/sign/detail" element={<SignDetailPage/>}/>
       </Routes>
     </HashRouter>
   );

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

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { RootState } from "../../../store/index.ts";
 
 interface stItem {
-  color:any;
+  color:string;
 }
 
 const StationItem = (props:any) => {

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

@@ -50,7 +50,6 @@ const Mapping = () => {
         if(state==="start"){
             start.setPosition(latlng);
             dispatch(SignActions.initializationStart(latlng))
-            console.log(latlng.La)
         }
         else if(state==="end"){
             end.setPosition(latlng);

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

@@ -0,0 +1,41 @@
+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;
+    .detail{
+        margin-top: 1.2em;
+        padding-bottom: 1em;
+        border-bottom: solid 1px;
+    }
+`
+
+
+//그래프에 필요한것 1. type 2. 시간을 준다. 
+const SignDetail = () => {
+    const arr = useSignForm();
+    return (
+        <StyledSignDetail>
+            {arr[0].length!==0&&arr[0].map((ele:any)=>{
+                return (
+                    <div className="detail">
+                        <span>{ele.info.totalTime}분</span>
+                        <SignDetailGraph graph={ele}/>
+                        <SignDetailInfo graph={ele}/>
+                    </div>
+                )
+            })}
+        </StyledSignDetail>
+    )
+}
+
+
+export default SignDetail;

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

@@ -0,0 +1,61 @@
+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<graphItem>`
+    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 (
+        <StyleSignDetailGraph>
+            {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 <StyleSignDetailGraphLi key={index} label={color} sum={graph.info.totalTime} portion={ele.sectionTime}>
+                        {ele.sectionTime}분
+                    </StyleSignDetailGraphLi>
+                }
+            })}
+        </StyleSignDetailGraph>
+    )
+}
+
+export default SignDetailGraph;
+
+/*
+ time:ele.info.totalTime,
+type:ele.pathType,
+
+*/

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

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledSignDetailInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+const StyledSignDetailInfoLi = styled.div`
+    display: flex;
+    margin:1em 0;
+    .SignDetail{
+        margin-left: 1em;
+    }
+`
+
+const SignDetailInfo = ({graph}:any) => {
+
+    return (
+        <StyledSignDetailInfo>
+            {graph.subPath.map((ele:any)=>{
+                if(ele.trafficType!==3){
+                    let name = ele.lane[0].busNo?ele.lane[0].busNo:ele.lane[0].name
+                    return (
+                            <StyledSignDetailInfoLi>
+                                <span>{name}</span>
+                                <div className="SignDetail">
+                                    <span>{ele.endName} - </span>
+                                    <span>{ele.startName}</span>
+                                </div>
+                            </StyledSignDetailInfoLi>
+                    )
+                }
+            })}
+        </StyledSignDetailInfo>
+    )
+}
+
+export default SignDetailInfo;

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

@@ -10,7 +10,7 @@ const StyledForm = styled.form`
     z-index: 100;
     top: 15vh;
     height: 1vh;
-    width: 80vw;
+    width: 85vw;
     .signFormInput{
       width: 100%;
       padding: 1em;
@@ -29,6 +29,7 @@ const SignForm = () =>{
             <input placeholder="장소를 입력해주세요." className="signFormInput"/>
             <SignFormButton value="start"/>
             <SignFormButton value="end"/>
+            <SignFormButton value="submit"/>
         </StyledForm>
     )
 }

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

@@ -1,9 +1,10 @@
 import React from "react"
 import styled from "styled-components"
-import { useDispatch } from "react-redux"
+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;
@@ -14,9 +15,16 @@ const StyleButton = styled.button`
 
 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<HTMLButtonElement>) => {
         event.preventDefault();
-        dispatch(SignActions.initialization(value))
+        if(value==="submit") submitPosition();
+        else dispatch(SignActions.initialization(value));
+    }
+    const submitPosition = () => {
+        if(start.tmX!==-1&&end.tmX!==-1)
+            submitStartAndEnd();
     }
     return (
         <StyleButton onClick={ClickBtn}>  

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`
+}

Backend/Frontend/creative/src/hook/useSignForm.tsx

@@ -0,0 +1,37 @@
+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<any[]>([""]);
+    let start = useSelector((state:RootState)=>state.sign.startPostion);
+    let end = useSelector((state:RootState)=>state.sign.endPostion);  
+    useEffect(() => {
+        const getArr = async () => {
+            await api.get(`/navigation/${start.tmY}/${start.tmX}/${end.tmY}/${end.tmX}/busNsub`)
+            .then(res=>{
+                const graphInfo = res.data.map((ele:any)=>{
+                    return {
+                        time:ele.info.totalTime,
+                        type:ele.pathType,
+                    }
+                })
+                const subwayLi = res.data.filter((ele:any)=>(
+                    ele.pathType===3
+                ))
+                console.log(res.data)
+                SetSignArr([res.data,subwayLi])
+                return res.data
+            })
+        }
+        getArr();
+    },[start,end])
+    return signArr;
+}
+
+
+
+export default useSignForm;

Backend/Frontend/creative/src/page/SIgnDetailPage.tsx

@@ -0,0 +1,18 @@
+import React 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";
+
+
+const SignDetailPage = () => {
+    return (
+        <div className={classes.signpage}>
+            <Header/>
+            <SignDetail/>
+            <MenuBar/>
+        </div>
+    )
+}
+
+export default SignDetailPage

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;
+}

Backend/Frontend/creative/src/promise/warmPromise.ts

@@ -0,0 +1,26 @@
+export const wrapPromise = (promise:Promise<any>) => {
+    //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;
+        }
+      },
+    };
+  };

Backend/Frontend/creative/src/store/index.ts

@@ -1,4 +1,4 @@
-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"
@@ -13,7 +13,11 @@ const reducer = combineReducers({
 })
 
 const store = configureStore({
-    reducer: reducer
+    reducer: reducer,
+    middleware: (getDefaultMiddleware) => 
+        getDefaultMiddleware({
+            serializableCheck:false,
+        })
 });