From 7971695305e2975aae80d9f10b3e2a4b04a58ae8 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: Thu, 7 Dec 2023 01:27:08 +0900
Subject: [PATCH 1/8] Frontend (#202)
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 높이 수정
---
 Backend/Frontend/creative/src/page/BusPage.module.css          | 3 ++-
 Backend/Frontend/creative/src/page/SignPage.module.css         | 3 ++-
 .../creative/src/page/subwaypage/SubwayPage.module.css         | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/Backend/Frontend/creative/src/page/BusPage.module.css b/Backend/Frontend/creative/src/page/BusPage.module.css
index bdb3012..107da7d 100644
--- a/Backend/Frontend/creative/src/page/BusPage.module.css
+++ b/Backend/Frontend/creative/src/page/BusPage.module.css
@@ -1,6 +1,7 @@
 .buspage {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: start;
-    height: 100vh;
+    height: 85vh;
 }
diff --git a/Backend/Frontend/creative/src/page/SignPage.module.css b/Backend/Frontend/creative/src/page/SignPage.module.css
index af3af6f..77be4cd 100644
--- a/Backend/Frontend/creative/src/page/SignPage.module.css
+++ b/Backend/Frontend/creative/src/page/SignPage.module.css
@@ -1,6 +1,7 @@
 .signpage {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: start;
-    height: 100vh;
+    height: 85vh;
 }
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayPage.module.css b/Backend/Frontend/creative/src/page/subwaypage/SubwayPage.module.css
index 2267e12..d5d1ae1 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayPage.module.css
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayPage.module.css
@@ -1,6 +1,7 @@
 .subwaypage {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: start;
-    height: 100vh;
+    height: 85vh;
 }
\ No newline at end of file

From 9cd476ca0f5d66831fa432b8322ec1b5fa0252b0 Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Thu, 7 Dec 2023 02:05:23 +0900
Subject: [PATCH 2/8] Feature/backend (#203)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가
---
 BackendJS/BackendTS/routes/navigation.js | 22 +++++++++++++++-----
 BackendJS/BackendTS/server.js            |  2 +-
 BackendTS/routes/navigation.ts           | 26 ++++++++++++++++++------
 BackendTS/server.ts                      |  2 +-
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/BackendJS/BackendTS/routes/navigation.js b/BackendJS/BackendTS/routes/navigation.js
index 45f92ca..5fb7eea 100644
--- a/BackendJS/BackendTS/routes/navigation.js
+++ b/BackendJS/BackendTS/routes/navigation.js
@@ -427,18 +427,30 @@ router.get('/:startX/:startY/:endX/:endY/:type', (req, res) => __awaiter(void 0,
                 const NavigationList = JSON.parse(body).result;
                 //console.log(error);
                 //console.log(response);
+                //275 -> 10분
+                //10분 ->
+                //버스 환승 ->
+                //
                 //1. 도보 시간, 2. 환승 개수, 3. 총 이동 시간
                 NavigationList.path.sort((a, b) => {
-                    if (a.info.totalWalk === b.info.totalWalk) {
-                        if (a.info.busTransitCount + a.info.subwayTransitCount === b.info.busTransitCount + b.info.subwayTransitCount) {
-                            return a.info.totalTime - b.info.totalTime;
+                    //가중치 계산
+                    const weight_A = a.info.totalWalk / 300 * 30 + a.info.totalTime + a.info.busTransitCount * 10 + a.info.subwayTransitCount * 5;
+                    const weight_B = b.info.totalWalk / 300 * 30 + b.info.totalTime + b.info.busTransitCount * 10 + b.info.subwayTransitCount * 5;
+                    if (weight_A === weight_B) {
+                        if (a.info.totalWalkTime === b.info.totalWalkTime) {
+                            if (a.info.busTransitCount + a.info.subwayTransitCount === b.info.busTransitCount + b.info.busTransitCount) {
+                                return a.info.totalTime - b.info.totalTime;
+                            }
+                            else {
+                                return a.info.busTransitCount + a.info.subwayTransitCount - b.info.busTransitCount + b.info.busTransitCount;
+                            }
                         }
                         else {
-                            return a.info.busTransitCount + a.info.subwayTransitCount - b.info.busTransitCount + b.info.subwayTransitCount;
+                            return a.info.totalWalkTime - b.info.totalWalkTime;
                         }
                     }
                     else {
-                        return a.info.totalWalk - b.info.totalWalk;
+                        return weight_A - weight_B;
                     }
                 });
                 //상위 5개 경로만 반환
diff --git a/BackendJS/BackendTS/server.js b/BackendJS/BackendTS/server.js
index 5a569fb..d3b9eb2 100644
--- a/BackendJS/BackendTS/server.js
+++ b/BackendJS/BackendTS/server.js
@@ -42,7 +42,7 @@ const httpsOptions = {
     cert: fs_1.default.readFileSync('./KEY/rootca.crt')
 };
 let corsOptions = {
-    origin: ['http://localhost:3000/#/', 'http://localhost:3000', 'http://localhost:3005', 'http://34.168.80.42:3000', 'http://172.30.1.35:5000', 'http://localhost:5000', 'http://localhost:80', 'http://localhost:80/#/', 'https://www.easy-taza.site'],
+    origin: ['http://localhost:3000/#/', 'http://localhost:3000', 'http://localhost:3005', 'http://34.168.80.42:3000', 'http://172.30.1.35:5000', 'http://localhost:5000', 'http://localhost:80', 'http://localhost:80/#/', 'https://www.easy-taza.site', 'https://.easy-taza.site'],
     credentials: true
 };
 app.use((0, cors_1.default)(corsOptions));
diff --git a/BackendTS/routes/navigation.ts b/BackendTS/routes/navigation.ts
index 43ea2cd..25ccfb7 100644
--- a/BackendTS/routes/navigation.ts
+++ b/BackendTS/routes/navigation.ts
@@ -429,19 +429,33 @@ router.get('/:startX/:startY/:endX/:endY/:type',async(req:Request,res:Response)=
       //console.log(error);
       //console.log(response);
 
-
+      //275 -> 10분
+      //10분 ->
+      //버스 환승 ->
+      //
       //1. 도보 시간, 2. 환승 개수, 3. 총 이동 시간
       NavigationList.path.sort((a:NavigationPath, b:NavigationPath)=>{
-        if(a.info.totalWalk === b.info.totalWalk){
-          if(a.info.busTransitCount + a.info.subwayTransitCount === b.info.busTransitCount + b.info.subwayTransitCount){
-            return a.info.totalTime - b.info.totalTime;
+
+        //가중치 계산
+        const weight_A:number = a.info.totalWalk/300 * 30 + a.info.totalTime + a.info.busTransitCount*10 + a.info.subwayTransitCount*5;
+        const weight_B:number = b.info.totalWalk/300 * 30 + b.info.totalTime + b.info.busTransitCount*10 + b.info.subwayTransitCount*5;
+
+        if(weight_A === weight_B){
+          if(a.info.totalWalkTime === b.info.totalWalkTime){
+            if(a.info.busTransitCount + a.info.subwayTransitCount === b.info.busTransitCount + b.info.busTransitCount){
+              return a.info.totalTime - b.info.totalTime;
+            }
+            else{
+              return a.info.busTransitCount + a.info.subwayTransitCount - b.info.busTransitCount + b.info.busTransitCount;
+            }
+            
           }
           else{
-            return a.info.busTransitCount + a.info.subwayTransitCount - b.info.busTransitCount + b.info.subwayTransitCount;
+            return a.info.totalWalkTime - b.info.totalWalkTime;
           }
         }
         else {
-          return a.info.totalWalk - b.info.totalWalk;
+          return weight_A - weight_B;
         }
       })
 
diff --git a/BackendTS/server.ts b/BackendTS/server.ts
index 668d54e..24221b4 100644
--- a/BackendTS/server.ts
+++ b/BackendTS/server.ts
@@ -20,7 +20,7 @@ const httpsOptions = {
 };
 
 let corsOptions: cors.CorsOptions = {
-    origin: ['http://localhost:3000/#/', 'http://localhost:3000', 'http://localhost:3005', 'http://34.168.80.42:3000', 'http://172.30.1.35:5000', 'http://localhost:5000', 'http://localhost:80', 'http://localhost:80/#/', 'https://www.easy-taza.site'],
+    origin: ['http://localhost:3000/#/', 'http://localhost:3000', 'http://localhost:3005', 'http://34.168.80.42:3000', 'http://172.30.1.35:5000', 'http://localhost:5000', 'http://localhost:80', 'http://localhost:80/#/', 'https://www.easy-taza.site', 'https://.easy-taza.site'],
     credentials: true
 }
 

From d7a61c1d5b98ba30eca2ddc1700f40e1f76d317d Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:54:41 +0900
Subject: [PATCH 3/8] Feature/backend (#204)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가

* Feat: 길찾기 필요 정보 추가, 인터페이스 수정
---
 BackendJS/BackendTS/routes/navigation.js      | 70 +++++++++++++++++--
 BackendTS/routes/navigation.ts                | 48 ++++++++++++-
 BackendTS/routes/subwaydata.ts                |  1 -
 interfaces/Navigation/navigation.interface.ts |  6 +-
 4 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/BackendJS/BackendTS/routes/navigation.js b/BackendJS/BackendTS/routes/navigation.js
index 5fb7eea..73bf96d 100644
--- a/BackendJS/BackendTS/routes/navigation.js
+++ b/BackendJS/BackendTS/routes/navigation.js
@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -14,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 const express_1 = __importDefault(require("express"));
 const request_1 = __importDefault(require("request"));
 const serviceKey_json_1 = __importDefault(require("../KEY/serviceKey.json"));
+const db = __importStar(require("../db"));
 const router = express_1.default.Router();
 const velocity = 46.8;
 function deg2rad(deg) {
@@ -455,7 +479,7 @@ router.get('/:startX/:startY/:endX/:endY/:type', (req, res) => __awaiter(void 0,
                 });
                 //상위 5개 경로만 반환
                 NavigationList.path = NavigationList.path.slice(0, 5);
-                NavigationList.path.forEach(element => {
+                NavigationList.path.forEach((element) => __awaiter(this, void 0, void 0, function* () {
                     //일반인 기준 이동시간 저장
                     const t = element.info.totalWalkTime;
                     //도보 이동 시간 계산
@@ -471,7 +495,7 @@ router.get('/:startX/:startY/:endX/:endY/:type', (req, res) => __awaiter(void 0,
                     delete element.info.checkIntervalTime;
                     delete element.info.checkIntervalTimeOverYn;
                     //subPath 정리
-                    element.subPath.forEach(element => {
+                    yield element.subPath.forEach((element) => __awaiter(this, void 0, void 0, function* () {
                         //도보인 경우
                         if (element.trafficType === 3) {
                             //교통약자 평균 이동속도에 맞게 이동시간 조정
@@ -497,10 +521,46 @@ router.get('/:startX/:startY/:endX/:endY/:type', (req, res) => __awaiter(void 0,
                         //지하철인 경우
                         else if (element.trafficType === 1) {
                             delete element.lane[0].subwayCityCode;
+                            if (element.lane[0].name === "수도권 분당선(급행)") {
+                                element.lane[0].subwayCode = 10;
+                            }
+                            else if (element.lane[0].name === "수도권 신분당선") {
+                                element.lane[0].subwayCode = 11;
+                            }
+                            const getSationInfo = (name, subwayCode) => new Promise((res, rej) => {
+                                const SQL = "Select * from subcode_1 where STIN_NM LIKE ? and LN_CD = ?;";
+                                const connection = db.return_connection();
+                                connection.query(SQL, ['%' + name + '%', subwayCode], function (err, results, fields) {
+                                    if (err) {
+                                        console.log(err);
+                                        return rej(err);
+                                    }
+                                    else {
+                                        return res({
+                                            stCd: results[0].STIN_CD,
+                                            lnCd: results[0].LN_CD,
+                                            railCd: results[0].RAIL_OPR_ISTT_CD,
+                                            stNm: results[0].STIN_NM
+                                        });
+                                    }
+                                });
+                            });
+                            const startInfo = yield getSationInfo(element.passStopList.stations[0].stationName, element.lane[0].subwayCode);
+                            const endInfo = yield getSationInfo(element.passStopList.stations[element.passStopList.stations.length - 1].stationName, element.lane[0].subwayCode);
+                            element.passStopList.stations[0].stNm = startInfo.stNm;
+                            element.passStopList.stations[0].stCd = startInfo.stCd;
+                            element.passStopList.stations[0].lnCd = startInfo.lnCd;
+                            element.passStopList.stations[0].railCd = startInfo.railCd;
+                            element.passStopList.stations[element.passStopList.stations.length - 1].stNm = endInfo.stNm;
+                            element.passStopList.stations[element.passStopList.stations.length - 1].stCd = endInfo.stCd;
+                            element.passStopList.stations[element.passStopList.stations.length - 1].lnCd = endInfo.lnCd;
+                            element.passStopList.stations[element.passStopList.stations.length - 1].railCd = endInfo.railCd;
+                            console.log(element.passStopList.stations[0]);
+                            console.log(element.passStopList.stations[element.passStopList.stations.length - 1]);
                         }
-                    });
-                });
-                return res.status(200).json(NavigationList.path);
+                    }));
+                }));
+                return setTimeout(() => res.status(200).json(NavigationList.path), 1000);
             });
         });
     }
diff --git a/BackendTS/routes/navigation.ts b/BackendTS/routes/navigation.ts
index 25ccfb7..2b04511 100644
--- a/BackendTS/routes/navigation.ts
+++ b/BackendTS/routes/navigation.ts
@@ -3,6 +3,7 @@ import request from 'request'
 import convert from 'xml-js'
 import serviceKey from '../KEY/serviceKey.json'
 import { NavigationResult, NavigationPath, RecommendPathList } from '../../interfaces/Navigation/navigation.interface'
+import * as db from '../db'
 
 const router:Router = express.Router();
 
@@ -462,7 +463,7 @@ router.get('/:startX/:startY/:endX/:endY/:type',async(req:Request,res:Response)=
       //상위 5개 경로만 반환
       NavigationList.path = NavigationList.path.slice(0,5);
 
-      NavigationList.path.forEach(element => {
+      NavigationList.path.forEach(async (element) => {
         //일반인 기준 이동시간 저장
         const t = element.info.totalWalkTime;
         //도보 이동 시간 계산
@@ -480,7 +481,7 @@ router.get('/:startX/:startY/:endX/:endY/:type',async(req:Request,res:Response)=
         delete element.info.checkIntervalTimeOverYn;
 
         //subPath 정리
-        element.subPath.forEach(element=>{
+        await element.subPath.forEach(async(element)=>{
           //도보인 경우
           if(element.trafficType === 3){
             //교통약자 평균 이동속도에 맞게 이동시간 조정
@@ -507,11 +508,52 @@ router.get('/:startX/:startY/:endX/:endY/:type',async(req:Request,res:Response)=
           //지하철인 경우
           else if(element.trafficType === 1){
             delete element.lane[0].subwayCityCode;
+            if(element.lane[0].name === "수도권 분당선(급행)"){
+              element.lane[0].subwayCode = 10;
+            }
+            else if(element.lane[0].name === "수도권 신분당선"){
+              element.lane[0].subwayCode = 11;
+            }
+
+            const getSationInfo = (name:string, subwayCode:number) => new Promise((res,rej)=>{
+              const SQL:string = "Select * from subcode_1 where STIN_NM LIKE ? and LN_CD = ?;";
+              const connection:any = db.return_connection();
+              
+              connection.query(SQL, ['%' + name + '%',subwayCode],function(err:Error,results:any,fields:any){
+                if (err) {
+                  console.log(err);
+                  return rej(err);
+                }
+                else{
+                  return res({
+                    stCd: results[0].STIN_CD,
+                    lnCd: results[0].LN_CD,
+                    railCd: results[0].RAIL_OPR_ISTT_CD,
+                    stNm: results[0].STIN_NM
+                  })
+                }
+              })
+            })
+
+            const startInfo:any = await getSationInfo(element.passStopList.stations[0].stationName, element.lane[0].subwayCode);
+            const endInfo:any = await getSationInfo(element.passStopList.stations[element.passStopList.stations.length-1].stationName, element.lane[0].subwayCode);
+
+            element.passStopList.stations[0].stNm = startInfo.stNm;
+            element.passStopList.stations[0].stCd = startInfo.stCd;
+            element.passStopList.stations[0].lnCd = startInfo.lnCd;
+            element.passStopList.stations[0].railCd = startInfo.railCd;
+
+            element.passStopList.stations[element.passStopList.stations.length-1].stNm = endInfo.stNm;
+            element.passStopList.stations[element.passStopList.stations.length-1].stCd = endInfo.stCd;
+            element.passStopList.stations[element.passStopList.stations.length-1].lnCd = endInfo.lnCd;
+            element.passStopList.stations[element.passStopList.stations.length-1].railCd = endInfo.railCd;
+
           }
         })
       });
       
-      return res.status(200).json(NavigationList.path);
+      return setTimeout(() => res.status(200).json(NavigationList.path), 1000);
+
     });
     
   }
diff --git a/BackendTS/routes/subwaydata.ts b/BackendTS/routes/subwaydata.ts
index 7281ce6..c80962a 100644
--- a/BackendTS/routes/subwaydata.ts
+++ b/BackendTS/routes/subwaydata.ts
@@ -801,7 +801,6 @@ router.get('/convenience/:stCd/:stNm/:railCd/:lnCd', async (req:Request, res:Res
 			}
 		});
 
-		
 	}
 	catch (e) {
 		console.error(e);
diff --git a/interfaces/Navigation/navigation.interface.ts b/interfaces/Navigation/navigation.interface.ts
index 4399b00..6f2f47e 100644
--- a/interfaces/Navigation/navigation.interface.ts
+++ b/interfaces/Navigation/navigation.interface.ts
@@ -73,7 +73,11 @@ interface StationList{
     arsID?: string,
     x: string,
     y: string,
-    isNonStop?: string
+    isNonStop?: string,
+    stCd?: string,
+    lnCd?: string,
+    railCd?: string,
+    stNm?: string
 }
 
 interface NavigationPassStopList{

From edff6da03b21d2f973fa6afc21511ab3755f5673 Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:58:47 +0900
Subject: [PATCH 4/8] Feature/backend (#205)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가

* Feat: 길찾기 필요 정보 추가, 인터페이스 수정

* Feat: CI/CD 수정
---
 .github/workflows/main.yml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 5b01bad..bb5826f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -21,7 +21,7 @@ jobs:
           git pull origin main
           cd ${{ secrets.PWD }}/BackendJS/BackendTS
           npm install
-          pm2 restart Traffic
+          pm2 reload Traffic --time
     - if: github.event.pull_request.merged == true && github.head_ref == 'Frontend'
       uses: appleboy/ssh-action@master
       with:
@@ -34,9 +34,5 @@ jobs:
           cd ${{ secrets.PWD }}
           git pull origin main
           cd ${{ secrets.PWD }}/Backend/Frontend/creative
-          pm2 stop Traffic
           npm install
-          npm run build
-          cd ${{ secrets.PWD }}/BackendJS/BackendTS
-          npm install
-          pm2 restart Traffic
\ No newline at end of file
+          npm run build
\ No newline at end of file

From 634609f768b14ebd6072a0779d2d051ac5fb8d23 Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Thu, 7 Dec 2023 17:48:32 +0900
Subject: [PATCH 5/8] Feature/backend (#206)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가

* Feat: 길찾기 필요 정보 추가, 인터페이스 수정

* Feat: CI/CD 수정

* Modify: 교통약자 도우미번호 추가
---
 BackendJS/BackendTS/routes/navigation.js | 2 --
 BackendJS/BackendTS/routes/subwaydata.js | 5 +++--
 BackendTS/routes/subwaydata.ts           | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/BackendJS/BackendTS/routes/navigation.js b/BackendJS/BackendTS/routes/navigation.js
index 73bf96d..67b87f3 100644
--- a/BackendJS/BackendTS/routes/navigation.js
+++ b/BackendJS/BackendTS/routes/navigation.js
@@ -555,8 +555,6 @@ router.get('/:startX/:startY/:endX/:endY/:type', (req, res) => __awaiter(void 0,
                             element.passStopList.stations[element.passStopList.stations.length - 1].stCd = endInfo.stCd;
                             element.passStopList.stations[element.passStopList.stations.length - 1].lnCd = endInfo.lnCd;
                             element.passStopList.stations[element.passStopList.stations.length - 1].railCd = endInfo.railCd;
-                            console.log(element.passStopList.stations[0]);
-                            console.log(element.passStopList.stations[element.passStopList.stations.length - 1]);
                         }
                     }));
                 }));
diff --git a/BackendJS/BackendTS/routes/subwaydata.js b/BackendJS/BackendTS/routes/subwaydata.js
index b1205ad..6bf5b39 100644
--- a/BackendJS/BackendTS/routes/subwaydata.js
+++ b/BackendJS/BackendTS/routes/subwaydata.js
@@ -69,7 +69,7 @@ function getSubwayStationName(stNm, callback) {
 function getSubwayStationInfo(stCd, stNm, callback) {
     try {
         const connection = db.return_connection();
-        let sql = "Select * FROM subcode_1 a, 도우미번호 b WHERE (a.stin_nm = b.역명 and a.ln_cd = b.운영노선명) and a.stin_cd = ? and a.stin_nm = ?";
+        let sql = "Select RAIL_OPR_ISTT_CD, LN_CD, STIN_CD, STIN_NM, `교통약자도우미 전화번호` as wNum, en_name, f_code FROM subcode_1 a, 도우미번호 b WHERE (a.stin_nm = b.역명 and a.ln_cd = b.운영노선명) and a.stin_cd = ? and a.stin_nm = ?";
         connection.query(sql, [stCd, stNm], function (err, results, fields) {
             if (err) {
                 console.log(err);
@@ -99,6 +99,7 @@ function getSubwayStationInfo(stCd, stNm, callback) {
                 if (stationinfo === undefined) {
                     return callback(null);
                 }
+                console.log(results[0]);
                 callback({
                     railCd: stationinfo.railOprIsttCd,
                     lnCd: stationinfo.lnCd,
@@ -107,7 +108,7 @@ function getSubwayStationInfo(stCd, stNm, callback) {
                     roadNm: stationinfo.roadNmAdr,
                     tmX: stationinfo.stinLocLon,
                     tmY: stationinfo.stinLocLat,
-                    wNum: results[0].wnum,
+                    wNum: results[0].wNum,
                     eName: results[0].en_name,
                     fCode: results[0].f_code
                 });
diff --git a/BackendTS/routes/subwaydata.ts b/BackendTS/routes/subwaydata.ts
index c80962a..b23357c 100644
--- a/BackendTS/routes/subwaydata.ts
+++ b/BackendTS/routes/subwaydata.ts
@@ -50,7 +50,7 @@ function getSubwayStationInfo(stCd:string, stNm:string, callback:(stationInfo:Su
 
 		const connection:mysql.connection = db.return_connection();
 
-		let sql:string = "Select * FROM subcode_1 a, 도우미번호 b WHERE (a.stin_nm = b.역명 and a.ln_cd = b.운영노선명) and a.stin_cd = ? and a.stin_nm = ?";
+		let sql:string = "Select RAIL_OPR_ISTT_CD, LN_CD, STIN_CD, STIN_NM, `교통약자도우미 전화번호` as wNum, en_name, f_code FROM subcode_1 a, 도우미번호 b WHERE (a.stin_nm = b.역명 and a.ln_cd = b.운영노선명) and a.stin_cd = ? and a.stin_nm = ?";
 
 		connection.query(sql, [stCd, stNm], function (err:Error, results:any, fields:any) {
 			if (err) {
@@ -95,7 +95,7 @@ function getSubwayStationInfo(stCd:string, stNm:string, callback:(stationInfo:Su
 					roadNm: stationinfo.roadNmAdr,
 					tmX: stationinfo.stinLocLon,
 					tmY: stationinfo.stinLocLat,
-					wNum: results[0].wnum,
+					wNum: results[0].wNum,
 					eName: results[0].en_name,
 					fCode: results[0].f_code
 				});

From 299bfa520941905f4cbe20cd89a1de4346662bf6 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: Mon, 11 Dec 2023 23:54:42 +0900
Subject: [PATCH 6/8] Frontend (#207)
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
---
 .../creative/public/image/refresh.png         | Bin 0 -> 11336 bytes
 Backend/Frontend/creative/src/App.tsx         |   2 +-
 .../bus-component/buslist/BusItem.tsx         |   4 +-
 .../bus-component/buslist/BusTimer.tsx        |   5 +-
 .../bus-component/busnumber/BusNumber.tsx     |   2 +-
 .../creative/src/component/loding/Loding.css  |   8 ++
 .../creative/src/component/loding/Loding.tsx  |   8 +-
 .../src/component/loding/lodingSvg.svg        |   1 +
 .../src/component/map/Mapping.module.css      |   3 +-
 .../src/component/map/SignMapping.tsx         |   6 +-
 .../sign-component/SignDetailInfo.tsx         |   6 +-
 .../sign-component/SignDetailInfoLIst.tsx     |  56 +++++++++
 .../component/sign-component/signSvg/BUS.svg  |   1 -
 .../sign-component/signSvg/SUBWAY.svg         |   1 -
 .../src/component/sign-component/signUtil.tsx |   7 +-
 .../subwaydetail/SubwayDetail.tsx             |  81 -------------
 .../subwaydetail/SubwayDetailMain.tsx         |  34 ++++++
 .../subwaydetail/SubwayMain.tsx               | 114 ++++++++++++++++++
 .../subwayelebator/SubwayElebatorImg.tsx      |  15 +++
 .../subwayinfo/SubwayInfo.tsx                 |   3 +-
 .../subwaylist/SubwayList.tsx                 |   2 +-
 .../subwaymenubar/SubwayBar.tsx               |   2 +-
 .../subwaytransfer/SubwayTransferDetail.tsx   |  31 +----
 .../subwaytransfer/SubwayTransferLIst.tsx     |  39 ++----
 .../creative/src/hook/useBusTImer.tsx         |  27 +++++
 .../subwaypage/SubwayBathchair.module.css     |   3 +
 .../src/page/subwaypage/SubwayBathchair.tsx   |  42 ++-----
 .../src/page/subwaypage/SubwayDetailPage.tsx  |  37 +-----
 .../src/page/subwaypage/SubwayElevator.tsx    |  49 --------
 ...dule.css => SubwayElevatorPage.module.css} |   7 +-
 .../page/subwaypage/SubwayElevatorPage.tsx    |  37 ++++++
 .../subwaypage/SubwayTransferDetailPage.tsx   |  19 ++-
 .../subwaypage/SubwayTransferPage.module.css  |   4 +
 .../page/subwaypage/SubwayTransferPage.tsx    |  13 +-
 .../creative/src/utils/getSubwayApi.ts        |  82 +++++++++++++
 35 files changed, 472 insertions(+), 279 deletions(-)
 create mode 100644 Backend/Frontend/creative/public/image/refresh.png
 create mode 100644 Backend/Frontend/creative/src/component/loding/Loding.css
 create mode 100644 Backend/Frontend/creative/src/component/loding/lodingSvg.svg
 create mode 100644 Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx
 delete mode 100644 Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
 delete mode 100644 Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
 delete mode 100644 Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
 create mode 100644 Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetailMain.tsx
 create mode 100644 Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayMain.tsx
 create mode 100644 Backend/Frontend/creative/src/component/subway-component/subwayelebator/SubwayElebatorImg.tsx
 create mode 100644 Backend/Frontend/creative/src/hook/useBusTImer.tsx
 delete mode 100644 Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.tsx
 rename Backend/Frontend/creative/src/page/subwaypage/{SubwayElevator.module.css => SubwayElevatorPage.module.css} (79%)
 create mode 100644 Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.tsx
 create mode 100644 Backend/Frontend/creative/src/utils/getSubwayApi.ts

diff --git a/Backend/Frontend/creative/public/image/refresh.png b/Backend/Frontend/creative/public/image/refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..16de61d47f59d15a4253194ff5b1d20bf06a9899
GIT binary patch
literal 11336
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

literal 0
HcmV?d00001

diff --git a/Backend/Frontend/creative/src/App.tsx b/Backend/Frontend/creative/src/App.tsx
index abd64f7..8799d89 100644
--- a/Backend/Frontend/creative/src/App.tsx
+++ b/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";
diff --git a/Backend/Frontend/creative/src/component/bus-component/buslist/BusItem.tsx b/Backend/Frontend/creative/src/component/bus-component/buslist/BusItem.tsx
index ef13034..9bbb85d 100644
--- a/Backend/Frontend/creative/src/component/bus-component/buslist/BusItem.tsx
+++ b/Backend/Frontend/creative/src/component/bus-component/buslist/BusItem.tsx
@@ -47,7 +47,7 @@ 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 {
@@ -55,7 +55,7 @@ const StyledBusItem = styled.li`
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 1em;
+    font-size: 0.8em;
     line-height: 29px;
     color: #9c9c9c;
   }
diff --git a/Backend/Frontend/creative/src/component/bus-component/buslist/BusTimer.tsx b/Backend/Frontend/creative/src/component/bus-component/buslist/BusTimer.tsx
index be1913e..aa115b5 100644
--- a/Backend/Frontend/creative/src/component/bus-component/buslist/BusTimer.tsx
+++ b/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;
diff --git a/Backend/Frontend/creative/src/component/bus-component/busnumber/BusNumber.tsx b/Backend/Frontend/creative/src/component/bus-component/busnumber/BusNumber.tsx
index 2613da0..3d5ed8f 100644
--- a/Backend/Frontend/creative/src/component/bus-component/busnumber/BusNumber.tsx
+++ b/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;
diff --git a/Backend/Frontend/creative/src/component/loding/Loding.css b/Backend/Frontend/creative/src/component/loding/Loding.css
new file mode 100644
index 0000000..38132e5
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/loding/Loding.tsx b/Backend/Frontend/creative/src/component/loding/Loding.tsx
index fe2728f..7c5028d 100644
--- a/Backend/Frontend/creative/src/component/loding/Loding.tsx
+++ b/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/>
     )
 }
 
diff --git a/Backend/Frontend/creative/src/component/loding/lodingSvg.svg b/Backend/Frontend/creative/src/component/loding/lodingSvg.svg
new file mode 100644
index 0000000..48b44a7
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/loding/lodingSvg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="loding" height="20" width="20" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg>
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/map/Mapping.module.css b/Backend/Frontend/creative/src/component/map/Mapping.module.css
index 488641d..fff2669 100644
--- a/Backend/Frontend/creative/src/component/map/Mapping.module.css
+++ b/Backend/Frontend/creative/src/component/map/Mapping.module.css
@@ -1,4 +1,5 @@
 .busmap, .subwaymap, .signmap {
     width: 100vw;
-    height: 85vh;
+    height: 90%;
+
 }
diff --git a/Backend/Frontend/creative/src/component/map/SignMapping.tsx b/Backend/Frontend/creative/src/component/map/SignMapping.tsx
index 91537c1..822b747 100644
--- a/Backend/Frontend/creative/src/component/map/SignMapping.tsx
+++ b/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);
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx
index cc5a01a..8cc4360 100644
--- a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx
+++ b/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>
                     )
                 }
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfoLIst.tsx
new file mode 100644
index 0000000..42072d7
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
deleted file mode 100644
index 3866ca4..0000000
--- a/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="current" fill="current" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 0C422.4 0 512 35.2 512 80V96l0 32c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32l0 160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32V448H192v32c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32l0-32c-17.7 0-32-14.3-32-32l0-160c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h0V96h0V80C64 35.2 153.6 0 288 0zM128 160v96c0 17.7 14.3 32 32 32H272V128H160c-17.7 0-32 14.3-32 32zM304 288H416c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H304V288zM144 400a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm288 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM384 80c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16s7.2 16 16 16H368c8.8 0 16-7.2 16-16z"/></svg>
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
deleted file mode 100644
index c2a2ec9..0000000
--- a/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="current" fill="current" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 128c0-17.7 14.3-32 32-32h80c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM272 96h80c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H272c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32zM64 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm288-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx b/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx
index 701fd52..39c3530 100644
--- a/Backend/Frontend/creative/src/component/sign-component/signUtil.tsx
+++ b/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}`
-}
\ No newline at end of file
+}
+
+
+export const moveSubway = (stationID:number,stationName:string) => {
+    window.location.href = `/#/subway/detail/${stationID}/${stationName}`
+}
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
deleted file mode 100644
index e78daa7..0000000
--- a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetail.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface subDetail {
-    idColor:string[];
-    line:number;
-}
-
-const SubwayDetail = (props:any) => {
-    const {info} = props;
-    const idColor = ["#0052A4", "#00A84D", "#EF7C1C", "#00A5DE", "#996CAC", "#CD7C2F", "#747F00", "#E6186C"];
-    return (
-        <StyledDetail idColor={idColor} line={info.lnCd}>
-            <div className="name">
-                <span className="line">{info.lnCd}</span>
-                <span>{info.stNm}</span>
-            </div>
-            <div className="info">
-                <span><img alt="info-images" className="info-image" src="./image/phone.png" />{info.roadNm}</span>
-                <span> 교통약자 도우미 전화번호<br />{info.wNum}</span>
-                <span>지하철역 영문명: {info.eName}</span>
-                <span>지하철역 FR_CODE: {info.fCode}</span>
-            </div>
-        </StyledDetail>
-    )
-}
-
-const StyledDetail = styled.div<subDetail>`
-display:flex;
-flex-direction:column;
-width: 98vw;
-height: 40vh;
-background-color:white;
-border: 4px solid #FFD12D;
-.info-image{
-    width: 1em;
-    height: 1em;
-}
-.name{
-    font-family: 'Pretendard-Regular';
-    display:flex;
-    align-items:center;
-    width:96%;
-    height:200%;
-    font-weight: 600;
-    font-size: 1em;
-    padding-left:4%;
-    border-bottom: 4px solid #FFD12D;
-}
-.line{
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    color:#FFFFFF;
-    font-style: normal;
-    font-size: 100%;
-    font-weight: 600;
-    width: 1.4em;
-    height: 1.4em;
-    background-color:${props => (props.idColor[props.line - 1])};
-    border-radius:20px;   
-}
-.info{
-    font-family: 'Pretendard-Regular';
-    width:96%;
-    height: 800%;
-    display:flex;
-    flex-direction:column;
-    font-weight: 600;
-    font-size: 100%;
-    padding-left:4%;
-    padding-top:4%;
-}
-.info span{
-    width:100%;
-    margin-bottom: 1em;
-}
-`
-
-
-export default SubwayDetail;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetailMain.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayDetailMain.tsx
new file mode 100644
index 0000000..942986c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayMain.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayMain.tsx
new file mode 100644
index 0000000..f05841b
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaydetail/SubwayMain.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { SubwayActions } from "../../../store/Subway-slice.ts";
+
+interface subDetail {
+    idColor:string[];
+    line:number;
+}
+
+const SubwayMain = (props:any) => {
+    const dispatch = useDispatch();
+    const {info}:any = props;
+    const {
+        lnCd,
+        stNm,
+        roadNm,
+        wNum,
+        eName,
+        fCode,
+        railCd,
+        stCd
+      } = info.detail.read();
+      dispatch(SubwayActions.saveSubway({
+        lnCd,
+        stNm,
+        roadNm,
+        wNum,
+        eName,
+        fCode,
+        railCd,
+        stCd
+      }))
+    const idColor = [
+        "#0052A4",
+        "#00A84D",
+        "#EF7C1C",
+        "#00A5DE",
+        "#996CAC",
+        "#CD7C2F",
+        "#747F00",
+        "#E6186C",
+    ];
+  return (
+    <StyledSubwayDeatil line={lnCd} idColor={idColor}>
+      <div className="name">
+        <span className="line">{lnCd}</span>
+        <span>{stNm}</span>
+      </div>
+      <div className="info">
+        <span>
+          <img alt="info-images" className="info-image" src="./image/phone.png" />
+          {roadNm}
+        </span>
+        <span>
+          교통약자 도우미 전화번호
+          <br />
+          {wNum}
+        </span>
+        <span>지하철역 영문명: {eName}</span>
+        <span>지하철역 FR_CODE: {fCode}</span>
+      </div>
+    </StyledSubwayDeatil>
+  );
+};
+
+const StyledSubwayDeatil = styled.div<subDetail>`
+  width: 100%;
+  .info-image {
+    width: 1em;
+    height: 1em;
+  }
+  .name {
+    font-family: 'Pretendard-Regular';
+    display: flex;
+    align-items: center;
+    width: 96%;
+    min-height: 20%;
+    font-weight: 600;
+    font-size: 1em;
+    padding-left: 4%;
+    border-bottom: 4px solid #ffd12d;
+  }
+  .line {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    font-style: normal;
+    font-size: 100%;
+    font-weight: 600;
+    width: 1.4em;
+    height: 1.4em;
+    background-color: ${(props) => props.idColor[props.line - 1]};
+    border-radius: 20px;
+  }
+  .info {
+    font-family: 'Pretendard-Regular';
+    width: 96%;
+
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    font-size: 100%;
+    padding-left: 4%;
+    padding-top: 4%;
+  }
+  .info span {
+    width: 100%;
+    margin-bottom: 1em;
+  }
+`;
+
+export default SubwayMain;
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwayelebator/SubwayElebatorImg.tsx b/Backend/Frontend/creative/src/component/subway-component/subwayelebator/SubwayElebatorImg.tsx
new file mode 100644
index 0000000..a875826
--- /dev/null
+++ b/Backend/Frontend/creative/src/component/subway-component/subwayelebator/SubwayElebatorImg.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledElevatorImg = styled.img`
+  width: 100vw;
+`;
+
+const SubwayElebatorImg = (props:any) => {
+    const {elevator} = props;
+    return (
+        <StyledElevatorImg alt="elevator" src={elevator.ele.read()[0].imgPath} />
+    );
+};
+
+export default SubwayElebatorImg;
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwayinfo/SubwayInfo.tsx b/Backend/Frontend/creative/src/component/subway-component/subwayinfo/SubwayInfo.tsx
index 5231980..1dae08d 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwayinfo/SubwayInfo.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwayinfo/SubwayInfo.tsx
@@ -26,7 +26,8 @@ overflow:auto;
 `
 
 const SubwayInfo = (props:any) => {
-    const {info} = props;
+    const {bath} = props;
+    const info = bath.liftMove.read();
     return (
         <StyledInfo>
             {info.map((element:any) => {
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
index 4bcde16..794bc08 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayList.tsx
@@ -11,7 +11,7 @@ flex-direction:column;
 align-items: center;
 box-sizing: border-box;
 width: 100%;
-max-height:40%;
+max-height:40vh;
 padding: 0;
 margin:0;
 margin-bottom:18%;
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
index 56c6753..0b9dd7f 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaymenubar/SubwayBar.tsx
@@ -49,7 +49,7 @@ const SubwayBar = () => {
     const si:any = useSelector((state:RootState) => state.subway.subwayInfo)
     return (
         <StyleMenuBar>
-            <Link to={`/subway/elevator/${si.stCd}/${si.stNm}/${si.railCd}/${si.lnCd}`}><li>편의시설 위치</li></Link>
+            <Link to={`/subway/elevator/${si.stCd}/${si.stNm}/${si.railCd}/${si.lnCd}`}><li>엘리베이터 위치</li></Link>
             <Link to={`/subway/transfer/${si.stCd}/${si.stNm}/${si.railCd}/${si.lnCd}`}><li>환승 이동 경로</li></Link>
             <Link to={`/subway/bathchair/${si.stCd}/${si.stNm}/${si.railCd}/${si.lnCd}`} ><li>휠체어 관련 위치</li></Link>
         </StyleMenuBar>
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 d5ef0a6..89682ab 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferDetail.tsx
@@ -19,35 +19,16 @@ const StyledTransferDetailLi = styled.span`
      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])
+const SubwayTranferDetail = (props:any) => {
+    const {tranferdetail, setImage} = props;
+    const tranferInfo = tranferdetail.transferinfo.read();
+    setImage(tranferInfo[0].imgPath)
     return(
         <StyledSubwayTransferDetail>
-            {tranferInfo&&(
                 <StyledTransferDetailLi>
                     {tranferInfo[0].stMovePath} {">>"} {tranferInfo[0].edMovePath}
-                </StyledTransferDetailLi>)}
-            {tranferInfo&&tranferInfo.map((ele:any,index:number)=>(
+                </StyledTransferDetailLi>
+            {tranferInfo.map((ele:any,index:number)=>(
                 <StyledTransferDetailLi key={index}>
                     {ele.mvContDtl}
                 </StyledTransferDetailLi>
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferLIst.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferLIst.tsx
index a570acc..532cac2 100644
--- a/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferLIst.tsx
+++ b/Backend/Frontend/creative/src/component/subway-component/subwaytransfer/SubwayTransferLIst.tsx
@@ -1,8 +1,8 @@
-import React,{useEffect, useState} from "react";
+import React from "react";
 import styled from "styled-components";
-import { api } from "../../auth/Api.ts"
 import { Link } from "react-router-dom";
 
+import { useParams } from "react-router-dom";
 const StyledSubwayTransferDetail = styled.main`
     display:flex;
     flex-direction:column;
@@ -28,37 +28,14 @@ const StyledTransferDetailLi = styled.span`
      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])
+const SubwayTranferDetail = (props:any) => {
+    const param = useParams();
+    const {tranfer} = props;
+    const {sourceStation, transferStation} = tranfer.transferDetail.read();
     return(
         <StyledSubwayTransferDetail>
-            {source&&source.map((sor:any)=>(
-                (transfer&&transfer.map((tran:any)=>(
+            {sourceStation.map((sor:any)=>(
+                (transferStation.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}
diff --git a/Backend/Frontend/creative/src/hook/useBusTImer.tsx b/Backend/Frontend/creative/src/hook/useBusTImer.tsx
new file mode 100644
index 0000000..def0bea
--- /dev/null
+++ b/Backend/Frontend/creative/src/hook/useBusTImer.tsx
@@ -0,0 +1,27 @@
+import React, {useState,useEffect} from "react"
+import { api } from "../component/auth/Api.ts"
+
+
+
+const useBusTimer = (BusArsID:string,BusNo:number) => {
+    const [timer,setTimer] = useState(["0","0"])
+    useEffect(()=> {
+        const getBusTime = async () => {
+            let arsId = BusArsID.split("-").join("");
+            await api(`/bus/arsId/${arsId}`).then((res)=>{
+                const {data} = res;
+                data.forEach((ele:any)=>{
+                    if(ele.busrouteAbrv===BusNo)
+                        setTimer(()=>[ele.min,ele.sec]);
+                })
+            }).catch((error)=>{
+                setTimer(()=>["5","10"])
+            })
+        }
+        if(typeof BusArsID==="string")
+            getBusTime();
+    },[])
+    return timer
+}
+
+export default useBusTimer;
\ No newline at end of file
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
index 2f582c4..f18d7ce 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.module.css
@@ -1,4 +1,7 @@
 .main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 100vw;
     margin-top: 10vh;
 }
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
index 54c5f93..f157302 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayBathchair.tsx
@@ -1,51 +1,35 @@
-import React from "react";
+import React, {Suspense} from "react";
 import classes from "./SubwayBathchair.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 SubwayInfo from "../../component/subway-component/subwayinfo/SubwayInfo.tsx"
 import MenuBar from "../../component/menu/MenuBar.tsx";
+import SubwayElebatorImg from "../../component/subway-component/subwayelebator/SubwayElebatorImg.tsx";
+import Loding from "../../component/loding/Loding.tsx";
 
 import { useParams } from "react-router-dom"
-import { api } from "../../component/auth/Api.ts"
-import { useEffect, useState } from "react"
 import { useDispatch } from "react-redux"
 import { SubwayActions } from "../../store/Subway-slice.ts"
-
+import {getBathChair, getBathChairConvinence} from "../../utils/getSubwayApi.ts"
 
 const SubwayBathchair = () => {
     const params = useParams();
-    const [bath, setBath] = useState([]);
-    const [image, setimage] = useState<string>("");
     const dispatch = useDispatch()
-    useEffect(() => {
-        const stCd = params.stCd;
-        const stNm = params.stNm;
-        const railCd = params.railCd;
-        const lnCd = params.lnCd;
-        dispatch(SubwayActions.saveSubway({ stCd, stNm, railCd, lnCd }))
-        const getBathChair = async () => {
-            await api.get(`/subway/liftMove/${stCd}/${stNm}/${railCd}/${lnCd}`)
-                .then(res => {
-                    const { data } = res;
-                    setBath(data)
-                })
-            await api.get(`/subway/convenience/${stCd}/${stNm}/${railCd}/${lnCd}`)
-                .then(res => {
-                    const { data } = res;
-                    setimage(data[0].imgPath)
-                })
-        }
-        getBathChair()
-    }, [dispatch,params.lnCd,params.railCd,params.stCd,params.stNm])
-    
+    const stCd = params.stCd;
+    const stNm = params.stNm;
+    const railCd = params.railCd;
+    const lnCd = params.lnCd;
+    dispatch(SubwayActions.saveSubway({ stCd, stNm, railCd, lnCd }))    
     return (
         <div className={classes.subwaypage}>
             <Header />
             <div className={classes.main}>
                 <SubwayPanel text={["휠체어 관련위치"]} menu={<SubwayBar />} />
-                <SubwayInfo info={bath} />
-                <img alt="subwayImage" className={classes.subwayImage} src={`${image}`} />
+                <Suspense fallback={<Loding/>}>
+                    <SubwayInfo bath={getBathChairConvinence(stCd,stNm,railCd,lnCd)} />
+                   <SubwayElebatorImg elevator={getBathChair(stCd,stNm,railCd,lnCd)}/>
+                </Suspense>
             </div>
             <MenuBar/>
         </div>
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayDetailPage.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayDetailPage.tsx
index 348e896..2f0cbe5 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayDetailPage.tsx
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayDetailPage.tsx
@@ -1,44 +1,19 @@
-import React, { useEffect, useState } from "react"
-
+import React from "react"
 import classes from "./SubwayDetailPage.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 SubwayDetailMain from "../../component/subway-component/subwaydetail/SubwayDetailMain.tsx"
 import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.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"
-
 const SubwayDetailPage = () => {
-    const params = useParams()
-    const dispatch = useDispatch()
-    const [info, setInfo] = useState({})
-
-    useEffect(() => {
-        const stCd = params.stCd;
-        const stNm = params.stNm;
-        const getDetail = async () => {
-            await api.get(`/subway/stationInfo/${stCd}/${stNm}`)
-                .then(res => {
-                    const { data } = res;
-                    const { stationinfo } = data;
-                    setInfo(stationinfo);
-                    dispatch(SubwayActions.saveSubway(stationinfo))
-                })
-        }
-        getDetail()
-    }, [dispatch,params.stCd,params.stNm])
-
     return (
         <div className={classes.subwaypage}>
             <Header />
-            <div className={classes.main}>
-                <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
-                <SubwayDetail info={info} />
-            </div>
+                <div className={classes.main}>
+                    <SubwayPanel text={["지하철편의시설"]} menu={<SubwayBar />} />
+                    <SubwayDetailMain />
+                </div>
             <MenuBar/>
         </div>
     )
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.tsx
deleted file mode 100644
index 43f7837..0000000
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import classes from "./SubwayElevator.module.css"
-import Header from "../../component/header/Header.tsx"
-import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.tsx"
-import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPanel.tsx"
-import MenuBar from "../../component/menu/MenuBar.tsx";
-
-import { useParams } from "react-router-dom"
-import { api } from "../../component/auth/Api.ts"
-import { useEffect, useState } from "react"
-import { useDispatch } from "react-redux"
-import { SubwayActions } from "../../store/Subway-slice.ts"
-
-interface subEle {
-    imgPath:string;
-}
-
-const SubwayElevator = () => {
-    const params = useParams();
-    const dispatch = useDispatch();
-    const [ElePos, setElePos] = useState<subEle[]>([{imgPath:""}]);
-    useEffect(() => {
-        const stCd = params.stCd;
-        const stNm = params.stNm;
-        const railCd = params.railCd;
-        const lnCd = params.lnCd;
-        dispatch(SubwayActions.saveSubway({ stCd, stNm, railCd, lnCd }))
-        const getBathChair = async () => {
-            await api.get(`/subway/convenience/${stCd}/${stNm}/${railCd}/${lnCd}`)
-                .then(res => {
-                    const { data } = res;
-                    setElePos(()=>data);
-                })
-        }
-        getBathChair()
-    }, [dispatch, params.lnCd,params.railCd,params.stCd,params.stNm])
-    
-    return (
-        <div className={classes.subwaypage}>
-            <Header />
-            <div className={classes.main}>
-                <SubwayPanel text={["편의시설 위치"]} menu={<SubwayBar />} />
-                <img alt="elevator" className={classes.elevator} src={`${ElePos[0]!.imgPath}`} />
-            </div>
-            <MenuBar/>
-        </div>
-    )
-}
-export default SubwayElevator 
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.module.css b/Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.module.css
similarity index 79%
rename from Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.module.css
rename to Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.module.css
index 9a0f768..f41b88c 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayElevator.module.css
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.module.css
@@ -1,12 +1,11 @@
 .main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 100vw;
     margin: 10vh;
 }
 
-.elevator {
-    width: 100vw;
-}
-
 .subwaypage {
     display: flex;
     flex-direction: column;
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.tsx
new file mode 100644
index 0000000..b259dc8
--- /dev/null
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayElevatorPage.tsx
@@ -0,0 +1,37 @@
+import React, {Suspense} from "react";
+import classes from "./SubwayElevatorPage.module.css"
+import Header from "../../component/header/Header.tsx"
+import SubwayBar from "../../component/subway-component/subwaymenubar/SubwayBar.tsx"
+import SubwayElebatorImg from "../../component/subway-component/subwayelebator/SubwayElebatorImg.tsx"
+import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPanel.tsx"
+import MenuBar from "../../component/menu/MenuBar.tsx";
+import Loding from "../../component/loding/Loding.tsx";
+
+import { useParams } from "react-router-dom"
+import { getBathChair } from "../../utils/getSubwayApi.ts";
+import { useDispatch } from "react-redux"
+import { SubwayActions } from "../../store/Subway-slice.ts"
+
+
+const SubwayElevatorPage = () => {
+    const dispatch = useDispatch();
+    const params = useParams();
+    const stCd = params.stCd;
+    const stNm = params.stNm;
+    const railCd = params.railCd;
+    const lnCd = params.lnCd;
+    dispatch(SubwayActions.saveSubway({ stCd, stNm, railCd, lnCd }))
+    return (
+        <div className={classes.subwaypage}>
+            <Header />
+            <div className={classes.main}>
+                <SubwayPanel text={["엘리베이터 위치"]} menu={<SubwayBar />} />
+                <Suspense fallback={<Loding/>}>
+                    <SubwayElebatorImg elevator={getBathChair(stCd,stNm,railCd,lnCd)}/>
+                </Suspense>
+            </div>
+            <MenuBar/>
+        </div>
+    )
+}
+export default SubwayElevatorPage 
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferDetailPage.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferDetailPage.tsx
index 06a2c77..76a523a 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferDetailPage.tsx
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferDetailPage.tsx
@@ -1,4 +1,4 @@
-import React,{useState} from "react"
+import React,{useState,Suspense} from "react"
 
 import classes from "./SubwayTransferPage.module.css"
 import Header from "../../component/header/Header.tsx"
@@ -6,21 +6,32 @@ import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPane
 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 Loding from "../../component/loding/Loding.tsx"
 
+import {getTransferInfo} from "../../utils/getSubwayApi.ts"
 import { useParams } from "react-router-dom"
 
 const SubwayTranferPage = () => {
     const param = useParams();
+    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 [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}/>
+                <Suspense fallback={<Loding/>}>
+                    <SubwayTransferDetail tranferdetail={getTransferInfo(stCd,stNm,railCd,lnCd,prevStinCd,chthTgtLn,chtnNextStinCd)} setImage={setImage}/>
+                    <img className={classes.detailImge} alt={image} src={image}></img>
+                </Suspense>
             </div>
-            <img className={classes.detailImge} alt={image} src={image}></img>
+            
             <MenuBar/>
         </div>
     )
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.module.css b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.module.css
index 586a7e9..d91350d 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.module.css
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.module.css
@@ -6,6 +6,10 @@
 }
 
 .main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
     margin-top: 10vh;
 }
 
diff --git a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.tsx b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.tsx
index e8a341e..14798ea 100644
--- a/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.tsx
+++ b/Backend/Frontend/creative/src/page/subwaypage/SubwayTransferPage.tsx
@@ -1,5 +1,4 @@
-
-import React from "react"
+import React,{Suspense} from "react"
 
 import classes from "./SubwayTransferPage.module.css"
 import Header from "../../component/header/Header.tsx"
@@ -7,17 +6,25 @@ import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPane
 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 Loding from "../../component/loding/Loding.tsx"
+import {getTransferDetail} from "../../utils/getSubwayApi.ts"
 
 import { useParams } from "react-router-dom"
 
 const SubwayTranferPage = () => {
     const param = useParams();
+    const stCd = param.stCd;
+    const stNm = param.stNm;
+    const railCd = param.railCd;
+    const lnCd = param.lnCd;
     return (
         <div className={classes.subwaypage}>
             <Header />
             <div className={classes.main}>
                 <SubwayPanel text={["환승 이동 경로"]} menu={<SubwayBar />} />
-                <SubwayTranferList param={param}/>
+                <Suspense fallback={<Loding/>}>
+                    <SubwayTranferList tranfer={getTransferDetail(stCd,stNm,railCd,lnCd)}/>
+                </Suspense>
             </div>
             <MenuBar/>
         </div>
diff --git a/Backend/Frontend/creative/src/utils/getSubwayApi.ts b/Backend/Frontend/creative/src/utils/getSubwayApi.ts
new file mode 100644
index 0000000..f52ebb7
--- /dev/null
+++ b/Backend/Frontend/creative/src/utils/getSubwayApi.ts
@@ -0,0 +1,82 @@
+import { wrapPromise } from "../promise/warmPromise.ts";
+
+import { api } from "../component/auth/Api.ts";
+
+export const getSubwayDetail = (stCd:any,stNm:any) =>{
+    const getDetail = async () => {
+        const asyncDetail = await api.get(`/subway/stationInfo/${stCd}/${stNm}`)
+            .then(res => {
+                const { data } = res;
+                const { stationinfo } = data;
+                return stationinfo
+            })
+        return asyncDetail;
+    }
+    return {
+        detail:wrapPromise(getDetail())
+    }
+}
+
+export const getBathChair = (stCd: any, stNm: any, railCd: any, lnCd: any) => {
+    const getBathChairDetail = async () => {
+        const asyncBathChair = await api.get(`/subway/convenience/${stCd}/${stNm}/${railCd}/${lnCd}`)
+            .then(res => {
+                const { data } = res;
+                return data;
+            });
+        return asyncBathChair;
+    };
+
+    return {
+        ele: wrapPromise(getBathChairDetail())
+    };
+};
+
+
+export const getBathChairConvinence = (stCd: any, stNm: any, railCd: any, lnCd: any) => {
+    const getliftMoveData = async () => {
+        const liftMoveData = await api.get(`/subway/liftMove/${stCd}/${stNm}/${railCd}/${lnCd}`)
+            .then(res => res.data);
+        return liftMoveData
+    };
+
+    return {
+        liftMove: wrapPromise(getliftMoveData())
+    };
+};
+
+
+export const getTransferDetail = (stCd: any, stNm: any, railCd: any, lnCd: any) => {
+    const getTransferDetailData = async () => {
+            const subwaytransfer = await api.get(`/subway/transferMove/transferList/${stCd}/${stNm}/${railCd}/${lnCd}`)
+            .then(res=>{
+                const { data } = res;
+                const { sourceStation, transferStation } = data;
+                return { sourceStation, transferStation };  
+            }).catch (error => {
+                alert("환승역이 아닙니다!");
+                window.location.href = `/#/subway/detail/${stCd}/${stNm}`;
+            })
+            return subwaytransfer;
+    };
+
+    return {
+        transferDetail: wrapPromise(getTransferDetailData())
+    };
+};
+
+
+export const getTransferInfo = (stCd: any, stNm: any, railCd: any, lnCd: any, prevStinCd: any, chthTgtLn: any, chtnNextStinCd: any) => {
+    const getTransferInfoAPI  = async () => {
+        const transferDetail = await api.get(`/subway/transferMove/transferInfo/${stCd}/${stNm}/${railCd}/${lnCd}/${prevStinCd}/${chthTgtLn}/${chtnNextStinCd}`)
+            .then(res => res.data)
+            .catch(error=>{
+                console.log(error)
+            })
+        return transferDetail
+    }
+
+    return {
+        transferinfo : wrapPromise(getTransferInfoAPI())
+    };
+};

From 6fc5877fd4dc19fa90b00f6044b6b269177b57be Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Tue, 12 Dec 2023 00:22:38 +0900
Subject: [PATCH 7/8] Feature/backend (#208)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가

* Feat: 길찾기 필요 정보 추가, 인터페이스 수정

* Feat: CI/CD 수정

* Modify: 교통약자 도우미번호 추가

* Feat: 지하철 이름 검색 시 주소 같이 제공
---
 BackendJS/BackendTS/routes/subwaydata.js | 60 ++++++++++++++++++------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/BackendJS/BackendTS/routes/subwaydata.js b/BackendJS/BackendTS/routes/subwaydata.js
index 6bf5b39..8188481 100644
--- a/BackendJS/BackendTS/routes/subwaydata.js
+++ b/BackendJS/BackendTS/routes/subwaydata.js
@@ -45,20 +45,53 @@ function getSubwayStationName(stNm, callback) {
         const connection = db.return_connection();
         let SQL = "Select *  FROM subcode_1 a, 도우미번호 b WHERE (a.stin_nm = b.역명 and a.ln_cd = b.운영노선명) and a.STIN_NM like ?; ";
         let nameList = [];
-        connection.query(SQL, ["%" + stNm + "%"], function (err, results, fields) {
-            if (err) {
-                console.log(err);
-            }
-            for (let i = 0; i < results.length; i++) {
-                nameList.push({
-                    railCd: results[i].RAIL_OPR_ISTT_CD,
-                    lnCd: results[i].LN_CD,
-                    lnNm: results[i].LN_CD,
-                    stCd: results[i].STIN_CD,
-                    stNm: results[i].STIN_NM,
+        const getGPS = (STIN_NM, STIN_CD, LN_CD, RAIL_OPR_ISTT_CD) => new Promise((req, rej) => {
+            const url = 'https://openapi.kric.go.kr/openapi/convenientInfo/stationInfo';
+            let queryParams = '?' + encodeURI('serviceKey');
+            queryParams += '=' + serviceKey_json_1.default.subwayRailKey;
+            queryParams += '&' + encodeURI('format') + '=' + encodeURI('json');
+            queryParams += '&' + encodeURI('railOprIsttCd');
+            queryParams += '=' + encodeURI(RAIL_OPR_ISTT_CD);
+            queryParams += '&' + encodeURI('lnCd');
+            queryParams += '=' + encodeURI(LN_CD);
+            queryParams += '&' + encodeURI('stinCd');
+            queryParams += '=' + encodeURI(STIN_CD);
+            queryParams += '&' + encodeURI('stinNm');
+            queryParams += '=' + encodeURI(STIN_NM);
+            (0, request_1.default)({
+                url: url + queryParams,
+                method: 'GET'
+            }, function (error, response, body) {
+                const stationinfo = JSON.parse(body).body[0];
+                //NULL error
+                if (stationinfo === undefined) {
+                    return callback(null);
+                }
+                req({
+                    tmX: stationinfo.stinLocLon,
+                    tmY: stationinfo.stinLocLat,
                 });
-            }
-            callback(nameList);
+            });
+        });
+        connection.query(SQL, ["%" + stNm + "%"], function (err, results, fields) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (err) {
+                    console.log(err);
+                }
+                for (let i = 0; i < results.length; i++) {
+                    const tm = yield getGPS(results[0].STIN_NM, results[0].STIN_CD, results[0].LN_CD, results[0].RAIL_OPR_ISTT_CD);
+                    nameList.push({
+                        railCd: results[i].RAIL_OPR_ISTT_CD,
+                        lnCd: results[i].LN_CD,
+                        lnNm: results[i].LN_CD,
+                        stCd: results[i].STIN_CD,
+                        stNm: results[i].STIN_NM,
+                        tmX: tm.tmX,
+                        tmY: tm.tmY
+                    });
+                }
+                callback(nameList);
+            });
         });
     }
     catch (e) {
@@ -99,7 +132,6 @@ function getSubwayStationInfo(stCd, stNm, callback) {
                 if (stationinfo === undefined) {
                     return callback(null);
                 }
-                console.log(results[0]);
                 callback({
                     railCd: stationinfo.railOprIsttCd,
                     lnCd: stationinfo.lnCd,

From 607c622b31bf8e397b067c09eafb4c7e847b1422 Mon Sep 17 00:00:00 2001
From: Sangwook Park <41150708+sw0501@users.noreply.github.com>
Date: Tue, 12 Dec 2023 00:24:49 +0900
Subject: [PATCH 8/8] Feature/backend (#209)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modify: CI/CD 수정

* Feat: navigation API 개발 완료

* Modify: navigation API 수정

* Fix: navigation API 예외처리

* Feat: CORS http 포트 추가

* Modify: CORS 옵션 수정

* Modify: CORS 옵션 수정

* Feat: https 서버 업데이트

* HTTPS 적용

* Feat: COSR 옵션 https 추가

* Feat: 없는 지하철역 예외처리

* Feat: 없는 지하철역 예외처리

* Modify: 예외처리 진행

* Modify: https 서버 수정

* Feat: 길찾기 기능 가중치 추가

* Feat: 길찾기 필요 정보 추가, 인터페이스 수정

* Feat: CI/CD 수정

* Modify: 교통약자 도우미번호 추가

* Feat: 지하철 이름 검색 시 주소 같이 제공

* Feat: 지하철 이름 검색 시 주소 같이 제공
---
 BackendTS/routes/subwaydata.ts        | 42 +++++++++++++++++++++++++--
 interfaces/Subway/subway.interface.ts |  4 ++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/BackendTS/routes/subwaydata.ts b/BackendTS/routes/subwaydata.ts
index b23357c..874cc4b 100644
--- a/BackendTS/routes/subwaydata.ts
+++ b/BackendTS/routes/subwaydata.ts
@@ -19,19 +19,57 @@ function getSubwayStationName(stNm:string, callback:(nameList:Array<SubwayStatio
 
 		let nameList:Array<SubwayStationNameList> = [];
 
-		connection.query(SQL, ["%"+stNm+"%"], function (err:Error, results:any, fields:any) {
+		const getGPS = (STIN_NM:string, STIN_CD:string, LN_CD:string, RAIL_OPR_ISTT_CD:string) => new Promise((req:any,rej)=>{
+			const url:string = 'https://openapi.kric.go.kr/openapi/convenientInfo/stationInfo';
+			let queryParams:string = '?' + encodeURI('serviceKey');
+			queryParams += '=' + serviceKey.subwayRailKey;
+			queryParams += '&' + encodeURI('format') + '=' + encodeURI('json');
+			queryParams += '&' + encodeURI('railOprIsttCd');
+			queryParams += '=' + encodeURI(RAIL_OPR_ISTT_CD);
+			queryParams += '&' + encodeURI('lnCd');
+			queryParams += '=' + encodeURI(LN_CD);
+			queryParams += '&' + encodeURI('stinCd');
+			queryParams += '=' + encodeURI(STIN_CD);
+			queryParams += '&' + encodeURI('stinNm');
+			queryParams += '=' + encodeURI(STIN_NM);
+
+			request({
+				url: url + queryParams,
+				method: 'GET'
+			}, function (error:Error, response:any, body:string) {
+
+				const stationinfo:SubwayStationInfoRequest = JSON.parse(body).body[0];
+
+				//NULL error
+				if (stationinfo === undefined) {
+					return callback(null);
+				}
+
+				req({
+					tmX: stationinfo.stinLocLon,
+					tmY: stationinfo.stinLocLat,
+				});
+
+			});
+		})
+
+		connection.query(SQL, ["%"+stNm+"%"], async function (err:Error, results:any, fields:any) {
 			if (err) {
 				console.log(err);
 			}
 
 			for (let i = 0; i < results.length; i++) {
-				
+
+				const tm:any = await getGPS(results[0].STIN_NM,results[0].STIN_CD,results[0].LN_CD,results[0].RAIL_OPR_ISTT_CD);
+
 				nameList.push({
 					railCd: results[i].RAIL_OPR_ISTT_CD,
 					lnCd: results[i].LN_CD,
 					lnNm: results[i].LN_CD,
 					stCd: results[i].STIN_CD,
 					stNm: results[i].STIN_NM,
+					tmX: tm.tmX,
+					tmY: tm.tmY
 				})
 			}
 
diff --git a/interfaces/Subway/subway.interface.ts b/interfaces/Subway/subway.interface.ts
index 49839d3..0342394 100644
--- a/interfaces/Subway/subway.interface.ts
+++ b/interfaces/Subway/subway.interface.ts
@@ -3,7 +3,9 @@ export interface SubwayStationNameList {
     lnCd: string,
     lnNm?: string,
     stCd: string,
-    stNm: string
+    stNm: string,
+    tmX: string,
+    tmY: string
 }
 
 export interface SubwayStationInfo {