Frontend

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 SubwayTransferPAge from "./page/subwaypage/SubwayTransferPage.tsx";
+import SubwayTranferDetailPage from "./page/subwaypage/SubwayTransferDetailPage.tsx";
 import SignPage from "./page/SignPage.tsx";
 import SignDetailPage from "./page/SIgnDetailPage.tsx";
 
@@ -22,6 +23,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="/subway/transfer/:stCd/:stNm/:railCd/:lnCd" element={<SubwayTransferPAge/>}/>
+        <Route path="/subway/transfer/detail/:stCd/:stNm/:railCd/:lnCd/:prevStinCd/:chthTgtLn/:chtnNextStinCd" element={<SubwayTranferDetailPage/>}/>
         <Route path="/sign" element={<SignPage/>}/>
         <Route path="/sign/detail" element={<SignDetailPage/>}/>
       </Routes>

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

@@ -17,16 +17,15 @@ const Mapping = () => {
     const [map,setMap] = useState(null);
     const [start,setStart] = useState<any>(null);
     const [end,setEnd] = useState<any>(null);
-    const [prev,setPrev] = useState<any>(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 x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:127.07411251036736;
+        const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:37.55068403524657;
         const options = {
             center: new window.kakao.maps.LatLng(y, x),
             level: 3,

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

@@ -20,8 +20,8 @@ const Mapping = () => {
     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 x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:127.07411251036736;
+        const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:37.55068403524657;
         const options = {
             center: new window.kakao.maps.LatLng(y, x),
             level: 3,

Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx

@@ -0,0 +1,59 @@
+import React,{useEffect, useState} from "react";
+import styled from "styled-components";
+import { api } from "../../auth/Api.ts"
+
+const StyledSubwayTransferDetail = styled.main`
+    display:flex;
+    flex-direction:column;
+    align-items: start;
+    justify-content: space-evenly;
+    width: 98vw;
+    height: 40vh;
+    border: 4px solid #FFD12D;
+    overflow: auto;
+`
+const StyledTransferDetailLi = styled.span`
+     font-family: 'Pretendard-Regular';
+     font-weight: 600;
+     margin: 2%;
+     font-size: 1em;
+`
+
+const SubwayTranferDetail = ({param,setImage}:any) => {
+    const [tranferInfo,setTransferInfo] = useState<any>();
+    useEffect(() => {
+        const stCd = param.stCd;
+        const stNm = param.stNm;
+        const railCd = param.railCd;
+        const lnCd = param.lnCd;
+        const prevStinCd = param.prevStinCd;
+        const chthTgtLn = param.chthTgtLn;
+        const chtnNextStinCd = param.chtnNextStinCd;
+        const getDetail = async () => {
+            await api.get(`/subway/transferMove/transferInfo/${stCd}/${stNm}/${railCd}/${lnCd}/${prevStinCd}/${chthTgtLn}/${chtnNextStinCd}`)
+                .then(res => {
+                    const { data } = res;
+                    setTransferInfo(data)
+                    setImage(data[0].imgPath)
+                }).catch(error=>{
+                    console.log(error)
+                })
+        }
+        getDetail()
+    }, [param])
+    return(
+        <StyledSubwayTransferDetail>
+            {tranferInfo&&(
+                <StyledTransferDetailLi>
+                    {tranferInfo[0].stMovePath} {">>"} {tranferInfo[0].edMovePath}
+                </StyledTransferDetailLi>)}
+            {tranferInfo&&tranferInfo.map((ele:any,index:number)=>(
+                <StyledTransferDetailLi key={index}>
+                    {ele.mvContDtl}
+                </StyledTransferDetailLi>
+            ))}
+        </StyledSubwayTransferDetail>
+    )
+}
+
+export default SubwayTranferDetail

Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferLIst.tsx

@@ -0,0 +1,73 @@
+import React,{useEffect, useState} from "react";
+import styled from "styled-components";
+import { api } from "../../auth/Api.ts"
+import { Link } from "react-router-dom";
+
+const StyledSubwayTransferDetail = styled.main`
+    display:flex;
+    flex-direction:column;
+    align-items: start;
+    justify-content: space-evenly;
+    width: 98vw;
+    height: 40vh;
+    background-color:white;
+    border: 4px solid #FFD12D;
+    overflow: auto;
+    .TransferLink{
+        width: 100%;
+        text-decoration:none;
+        list-style:none;
+        color: #000000;
+    }
+`
+
+const StyledTransferDetailLi = styled.span`
+     font-family: 'Pretendard-Regular';
+     font-weight: 600;
+     margin-left: 5%;
+     border-bottom: 1px solid;
+     font-size: 1em;
+`
+/*
+/subway/transferMove/transferInfo/:stCd/:stNm/:railCd/:lnCd/:prevStinCd/:chthTgtLn/:chtnNextStinCd
+
+*/
+
+const SubwayTranferDetail = ({param}:any) => {
+    const [source,setSource] = useState<[]>()
+    const [transfer,setTransfer] = useState<[]>()
+    useEffect(() => {
+        const stCd = param.stCd;
+        const stNm = param.stNm;
+        const railCd = param.railCd;
+        const lnCd = param.lnCd;
+        const getDetail = async () => {
+            await api.get(`/subway/transferMove/transferList/${stCd}/${stNm}/${railCd}/${lnCd}`)
+                .then(res => {
+                    const { data } = res;
+                    const {sourceStation,transferStation} = data
+                    setSource(sourceStation);
+                    setTransfer(transferStation);
+                }).catch(error=>{
+                    alert("환승역이 아닙니다!")
+                    window.location.href = `/subway/detail/${stCd}/${stNm}`
+                })
+        }
+        getDetail()
+    }, [param])
+    return(
+        <StyledSubwayTransferDetail>
+            {source&&source.map((sor:any)=>(
+                (transfer&&transfer.map((tran:any)=>(
+                    <Link to={`/subway/transfer/detail/${param.stCd}/${param.stNm}/${param.railCd}/${param.lnCd}/${sor.stCd}/${tran.lnCd}/${tran.stCd}`} key={sor.stCd+tran.stCd} className="TransferLink">
+                        <StyledTransferDetailLi>
+                            {sor.stNm} - {tran.stNm}
+                        </StyledTransferDetailLi>
+                    </Link>
+                )))
+            ))}
+        </StyledSubwayTransferDetail>
+    )
+}
+
+export default SubwayTranferDetail

Backend/Frontend/creative/src/page/subwaypage/SubwayDetailPage.tsx

@@ -36,8 +36,8 @@ const SubwayDetailPage = () => {
         <div className={classes.subwaypage}>
             <Header />
             <div className={classes.main}>
-            <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
-            <SubwayDetail info={info} />
+                <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
+                <SubwayDetail info={info} />
             </div>
             <MenuBar/>
         </div>

Backend/Frontend/creative/src/page/subwaypage/SubwayTransferDetailPage.tsx

@@ -0,0 +1,31 @@
+import React,{useState} from "react"
+
+import classes from "./SubwayTransferPage.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 SubwayTransferDetail from "../../component/subway-component/subwaytransfer/SubwayTransferDetail.tsx"
+import MenuBar from "../../component/menu/MenuBar.tsx"
+
+import { useParams } from "react-router-dom"
+
+const SubwayTranferPage = () => {
+    const param = useParams();
+    const [image,setImage] = useState()
+    console.log(image)
+    return (
+        <div className={classes.subwaypage}>
+            <Header />
+            <div className={classes.main}>
+                <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
+                <SubwayTransferDetail param={param} setImage={setImage}/>
+            </div>
+            <img className={classes.detailImge} alt={image} src={image}></img>
+            <MenuBar/>
+        </div>
+    )
+}
+
+
+
+export default SubwayTranferPage 

Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.module.css

@@ -0,0 +1,15 @@
+.subwaypage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.main {
+    margin-top: 10vh;
+}
+
+.detailImge{
+    width: 100%;
+    height: auto;
+}

Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.tsx

@@ -1,48 +1,29 @@
-import React, { useEffect, useState } from "react"
 
-import classes from "./SubwayDetailPage.module.css"
+import React from "react"
+
+import classes from "./SubwayTransferPage.module.css"
 import Header from "../../component/header/Header.tsx"
 import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPanel.tsx"
-import SubwayDetail from "../../component/subway-component/subwaydetail/SubwayDetail.tsx"
 import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.tsx"
+import SubwayTranferList from "../../component/subway-component/subwaytransfer/SubwayTransferLIst.tsx"
 import MenuBar from "../../component/menu/MenuBar.tsx"
 
-import { useDispatch } from "react-redux"
-import { SubwayActions } from "../../store/Subway-slice.ts"
-import { api } from "../../component/auth/Api.ts"
 import { useParams } from "react-router-dom"
-import { error } from "console"
-
-const SubwayDetailPage = () => {
-    const params = useParams()
-    const dispatch = useDispatch()
-//
-    useEffect(() => {
-        const stCd = params.stCd;
-        const stNm = params.stNm;
-        const railCd = params.railCd;
-        const lnCd = params.lnCd;
-        const getDetail = async () => {
-            await api.get(`/subway/transferMove/transferList/${stCd}/${stNm}/${railCd}/${lnCd}`)
-                .then(res => {
-                    const { data } = res;
-                    console.log(data)
-                }).catch(error=>{
-                    console.log(error)
-                })
-        }
-        getDetail()
-    }, [])
 
+const SubwayTranferPage = () => {
+    const param = useParams();
     return (
         <div className={classes.subwaypage}>
             <Header />
-            <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
+            <div className={classes.main}>
+                <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
+                <SubwayTranferList param={param}/>
+            </div>
             <MenuBar/>
         </div>
     )
 }
 
 
 
-export default SubwayDetailPage 
+export default SubwayTranferPage