Frontend

Backend/Frontend/creative/src/App.tsx

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

Backend/Frontend/creative/src/component/auth/Api.ts

@@ -1,6 +1,10 @@
 import axios from "axios"
 
 export const api = axios.create({
+<<<<<<< HEAD
+    baseURL: "http://34.145.39.241:3005"
+=======
     baseURL: "http://34.168.80.42:3005"
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc
 })
 

Backend/Frontend/creative/src/component/bus-component/busform/BusForm.tsx

@@ -1,48 +1,31 @@
-import React, {useRef} from "react";
+import React from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { api } from "../../auth/Api.ts";
 import { MapActions } from "../../../store/Map-slice.ts";
 import { BusActions } from "../../../store/Bus-slice.ts";
 
 const StyledForm = styled.form`
-    display:flex;
-    width: 100%;
-    height: 140px;
-    border: 4px solid #CDD029;
+    display: flex;
+    position: fixed;
+    z-index: 100;
+    top: 15vh;
+    height: 1vh;
+    width: 80vw;
     .busFormInput{
-      width: 80%;
-      height: 80%;
-      padding: 15px;
-      font-size: 2.5vw;
-      border:0;
+      width: 100%;
+      padding: 1em;
+      font-size: 80%;
       font-family: 'Pretendard-Regular';
       font-weight: 700;
-    }
-    .busFormBtn{
-      width: 20%;
-      height: 100%;
-      background: #CDD029;
-      border: 1px solid #CDD029;
-      padding:0;
-    }
-    @media (max-width:500px){
-        width: 98vw;
-        height: 15vw;
-        .busFormInput{
-          font-family: 'Pretendard-Regular';
-          width: 80%;
-          height: 15vw;
-          font-size: 6vw;
-          padding: 1%;
-        }
+      border: 0;
+      border-radius: 30px;
     }
 `
 
-
 const BusForm:React.FC = () => {
   const dispatch = useDispatch();
-  const inputRef = useRef<HTMLInputElement>(null);
+
   const SubmitBusStation = (value: string|null) => {
     api
       .get(`/bus/stNm/${value}`)
@@ -59,14 +42,16 @@ const BusForm:React.FC = () => {
         alert("해당 정류장이 없습니다.");
       });
   };
+
   const BusStationData = (event:React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    SubmitBusStation(inputRef.current!.value);
+    let [station]:any  = (event.target as HTMLInputElement);
+    SubmitBusStation(station.value);
   };
+
   return (
     <StyledForm  onSubmit={BusStationData}>
-      <input className="busFormInput" ref={inputRef} placeholder="정류장을 입력해주세요." />
-      <button className="busFormBtn"><img className="GRASS" src="./image/GRASS.png" alt="GRASS" /></button>
+      <input className="busFormInput" name="station" placeholder="정류장을 입력해주세요." />
     </StyledForm>
   );
 };

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

@@ -6,14 +6,15 @@ const StyledBusItem = styled.li`
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  min-height: 10%;
   list-style: none;
   text-align: center;
   border-bottom: 1px solid #d2d2d2;
   font-family: "Pretendard-Regular";
   .mark {
-    width: 1.5vw;
-    height: 1.5vw;
-    margin-right: 0.8vw;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.5rem;
   }
   :hover {
     cursor: pointer;
@@ -38,44 +39,26 @@ const StyledBusItem = styled.li`
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 2vw;
+    font-size: 1em;
     line-height: 60px;
     margin-right: 10px;
   }
   .direction {
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 1.3vw;
+    font-size: 1em;
     line-height: 29px;
   }
   .id {
     padding-right: 20px;
     font-family: "Pretendard-Regular";
     font-style: normal;
     font-weight: 600;
-    font-size: 1.5vw;
+    font-size: 1em;
     line-height: 29px;
     color: #9c9c9c;
   }
-
-  @media (max-width: 500px) {
-    height: 28%;
-    .Name {
-      font-size: 5vw;
-    }
-    .direction {
-      font-size: 3vw;
-    }
-    .id {
-      font-size: 3vw;
-    }
-    .mark {
-      width: 100%;
-      height: 100%;
-      margin-right: 2vw;
-    }
-  }
 `;
 
 const BusItem = (props:any) => {

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

@@ -12,17 +12,11 @@ flex-direction:column;
 align-items: center;
 box-sizing: border-box;
 width: 100%;
-height: 640px;
-background: #FFFFFF;
-border: 4px solid #CDD029 ;
+max-height:50%;
+min-height:50%;
 padding:0;
 margin:0;
 overflow:auto;
-@media (max-width:500px) {
-    border: 4px solid #CDD029 ;
-    width:100%;
-    height:30vh;
-}
 `
 
 

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

@@ -6,8 +6,8 @@ import { BusActions } from "../../../store/Bus-slice.ts";
 import { RootState } from "../../../store/index.ts";
 
 const StyledRefreshButton = styled.button`
-  width: 3vw;
-  height: 3vw;
+  width: 2em;
+  height: 2em;
   border: 0;
   border-radius: 50px;
   background-color: transparent;
@@ -19,14 +19,6 @@ const StyledRefreshButton = styled.button`
   :hover {
     cursor: pointer;
   }
-  @media (max-width: 500px) {
-    width: 10vw;
-    height: 10vw;
-    img {
-      width: 70%;
-      height: 70%;
-    }
-  }
 `;
 
 const RefreshButton = () => {

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

@@ -8,28 +8,27 @@ import { useEffect, useState } from "react";
 import { RootState } from "../../../store/index.ts";
 
 interface stItem {
-  color:any;
+  color:string;
 }
 
 const StationItem = (props:any) => {
-  const [color, setColor] = useState<boolean>(false);
+  const [color, setColor] = useState<string>("false");
   const { stNm, arsId, tmX, tmY } = props.items;
-
   const dispatch = useDispatch();
   const station = useSelector((state:RootState) => state.bus.currentStation);
   useEffect(() => {
     if (station === arsId) {
-      setColor(false);
+      setColor("false");
     } else {
-      setColor(true);
+      setColor("true");
     }
   }, [arsId, station]);
 
   const ClickClass = () => {
     if (station === arsId) {
       SubmitStation();
     } else if (station !== arsId) {
-      setColor(false);
+      setColor("false");
       dispatch(BusActions.ClickStation(arsId));
       dispatch(MapActions.positioning({ tmX, tmY }));
     }
@@ -63,7 +62,7 @@ const StyledStationItem = styled.li<stItem>`
   width: 100%;
   list-style: none;
   border-bottom: 1px solid #d2d2d2;
-  background-color: ${props => (props.color ? "#FFFFFF" : "#CDD029")};
+  background-color: ${props => (props.color==="true" ? "#FFFFFF" : "#FFD12D")};
   font-family: "Pretendard-Regular";
   :hover {
     cursor: pointer;
@@ -73,34 +72,23 @@ const StyledStationItem = styled.li<stItem>`
     padding-left: 20px;
     font-family: "Pretendard-Regular";
     font-style: normal;
-    font-weight: ${props => (props.color ? "400" : "700")};
-    font-size: 2vw;
+    font-weight: ${props => (props.color==="true" ? "400" : "700")};
+    font-size: 1em;
     line-height: 60px;
-    color: ${props => (props.color ? "#000000" : "#FFFFFF")};
+    color: ${props => (props.color==="true" ? "#000000" : "#FFFFFF")};
   }
 
   .id {
     padding-right: 20px;
     font-family: "Pretendard-Regular";
     font-style: normal;
-    font-weight: ${props => (props.color ? "500" : "700")};
-    font-size: 1.7vw;
+    font-weight: ${props => (props.color==="true" ? "500" : "700")};
+    font-size: 1em;
     line-height: 29px;
     display: flex;
     align-items: center;
     text-align: center;
-    color: ${props => (props.color ? "#000000" : "#FFFFFF")};
-  }
-  @media (max-width: 500px) {
-    height: 35%;
-    .Name {
-      font-family: "Pretendard-Regular";
-      font-size: 5vw;
-    }
-    .id {
-      font-family: "Pretendard-Regular";
-      font-size: 3vw;
-    }
+    color: ${props => (props.color==="true" ? "#000000" : "#FFFFFF")};
   }
 `;
 

Backend/Frontend/creative/src/component/bus-component/busnumber/BusNumber.tsx

@@ -12,17 +12,13 @@ align-items:center;
 height:50px;
 width:90%;
 height:auto;
-font-size:1.9vw;
+font-size:1em;
 font-family: 'Pretendard-Regular';
 padding:0;
 p{
     font-weight:bold;
     margin:0;
 }
-@media (max-width:500px){
-    font-size:4.5vw;
-    height:20%;
-}
 `
 
 const BusNumber = (props:any) => {

Backend/Frontend/creative/src/component/header/Header.tsx

@@ -8,14 +8,22 @@ import { MapActions } from "../../store/Map-slice.ts";
 
 const StyledHeader = styled.header`
 display:flex;
+position: fixed;
+top: 0;
+z-index: 100;
 justify-content:space-between;
+background-color: #FFFFFF;
 align-items:center;
 position:fixed;
 top: 0;
 font-family: 'GmarketSansMedium';
 border-bottom: 2px solid #EBEBEB;
 width:100vw;
+<<<<<<< HEAD
+height:10vh;
+=======
 min-height:8vh;
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc
 .header_home{  
     font-size:5vw;
     color:#000000;

Backend/Frontend/creative/src/component/loding/Loding.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+
+
+
+const Loding = () => {
+    return (
+        <div>
+            Loding...
+        </div>
+    )
+}
+
+export default Loding