feat: Frontend

2022-Sejong-Creative-Semester · Dec 3, 2023 · 9a3fa7a · 9a3fa7a
2 parents e42a816 + a456455
commit 9a3fa7a
Show file tree

Hide file tree

Showing 53 changed files with 8,524 additions and 1,254 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,44 +1,42 @@
 name: GCP CI/CD
 on:
-  push:
-      branches: [ main ]
+  pull_request:
+    types:
+      - closed
 
 jobs:
-  build:
+  if_merged:
     runs-on: ubuntu-latest
     steps:
-    - name: executing remote ssh commands using ssh key
+    - if: github.event.pull_request.merged == true && github.head_ref == 'feature/Backend'
       uses: appleboy/ssh-action@master
       with:
         host: ${{ secrets.HOST }} 
         username: ${{ secrets.USERNAME }}
         key: ${{ secrets.SSH_KEY }} 
-        #passphrase: ${{ secrets.PASSPHRASE }} 
+        passphrase: ${{ secrets.PASSPHRASE }} 
         port: 22
         script: |
-
-            cd ${{ secrets.PWD }}
-            
-            git pull https://${{ secrets.GIT_TOKEN }}:[email protected]/2022-Sejong-Creative-Semester/Traffic-Information-Service-for-the-Disabled.git main
-
-            PR_BRANCH="${{ github.head_ref }}"
-
-            #Frontend에서 보낸 PR의 경우
-            if [[ $PR_BRANCH == "Frontend"* ]]; then
-
-              cd ${{ secrets.PWD }}/Frontend/creative
-
-              #메모리 오버 방지를 위해 기존 서버 동작 중지
-              pm2 stop Traffic
-
-              #의존성 설치
-              npm install
-
-              #npm run build 까지 추가로 진행
-              npm run build
-            
-            cd ${{ secrets.PWD }}
-
-            npm install
-
-            pm2 restart Traffic
+          cd ${{ secrets.PWD }}
+          git pull origin main
+          cd ${{ secrets.PWD }}/BackendJS/BackendTS
+          npm install
+          pm2 restart Traffic
+    - if: github.event.pull_request.merged == true && github.head_ref == 'Frontend'
+      uses: appleboy/ssh-action@master
+      with:
+        host: ${{ secrets.HOST }} 
+        username: ${{ secrets.USERNAME }}
+        key: ${{ secrets.SSH_KEY }} 
+        passphrase: ${{ secrets.PASSPHRASE }} 
+        port: 22
+        script: |
+          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
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,8 @@
 
 # ServiceKey
 /Backend/Key
+/Backend/KEY
+KEY
 창의학기제 창립제 발표자료 - 박상욱.pptx
 
 

diff --git a/Backend/Frontend/creative/public/image/refresh.png b/Backend/Frontend/creative/public/image/refresh.png
diff --git a/Backend/Frontend/creative/src/component/auth/Api.ts b/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
 })
 
diff --git a/Backend/Frontend/creative/src/component/bus-component/buslist/BusList.tsx b/Backend/Frontend/creative/src/component/bus-component/buslist/BusList.tsx
@@ -12,8 +12,8 @@ flex-direction:column;
 align-items: center;
 box-sizing: border-box;
 width: 100%;
-max-height:40%;
-min-height:40%;
+max-height:50%;
+min-height:50%;
 padding:0;
 margin:0;
 overflow:auto;

diff --git a/Backend/Frontend/creative/src/component/header/Header.tsx b/Backend/Frontend/creative/src/component/header/Header.tsx
@@ -14,10 +14,16 @@ 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;

diff --git a/Backend/Frontend/creative/src/component/map/BusMapping.tsx b/Backend/Frontend/creative/src/component/map/BusMapping.tsx
@@ -17,6 +17,7 @@ const Mapping = () => {
     const dispatch = useDispatch()
     const marker = useSelector((state:RootState) => state.map.marker)
     const position = useSelector((state:RootState) => state.map.position)
+<<<<<<< HEAD:Backend/Frontend/creative/src/component/map/BusMapping.tsx
     const arsid = useSelector((state:RootState)=> state.bus.currentStation);
     const busmode = useSelector((state:RootState) => state.map.busmode);
     const {curPosition} = usePosition(geolocationOptions);
@@ -26,15 +27,42 @@ const Mapping = () => {
         const container = document.getElementById("busmap");
         const x = position.tmX!==0?Number(position.tmX):tmX!==0?tmX:37.55068403524657;
         const y = position.tmY!==0?Number(position.tmY):tmY!==0?tmY:127.07411251036736;
+=======
+    const arsid = useSelector((state:RootState) => state.bus.currentStation)
+    const busmode = useSelector((state:RootState) => state.map.busmode)
+    const subwaymode = useSelector((state:RootState) => state.map.subwaymode)
+    const {curPosition} = usePosition();
+    const tmY = curPosition ? curPosition.tmY: position.tmY;
+    const tmX = curPosition ? curPosition.tmX: position.tmX;
+    useEffect(() => {
+        console.log(tmX,tmY);
+        const container = document.getElementById("map");
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc:Backend/Frontend/creative/src/component/map/Mapping.tsx
         const options = {
             center: new window.kakao.maps.LatLng(y, x),
             level: 3,
         };
         const map = new window.kakao.maps.Map(container, options);
         if (busmode)
             busmapcoordinate(marker, map)
+<<<<<<< HEAD:Backend/Frontend/creative/src/component/map/BusMapping.tsx
     },[tmX,tmY,busmode,arsid,position])
 
+=======
+        else if (subwaymode)
+            subwaymapcoordinate(marker, map)
+    },[tmX,tmY])
+
+    const subwaymapcoordinate = (marker:any, map:any) => {
+        const markerPosition = new window.kakao.maps.LatLng(parseFloat(String(marker.tmY - 0.0000005)).toFixed(6), parseFloat(String(marker.tmX - 0.0000005)).toFixed(6))
+        const new_marker = new window.kakao.maps.Marker({
+            position: markerPosition,
+            clickable: true,
+        })
+        new_marker.setMap(map)
+    }
+
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc:Backend/Frontend/creative/src/component/map/Mapping.tsx
     const busmapcoordinate = (marker:any, map:any) => {
         marker.forEach((element:any) => {
             const imageSrc = './image/busImage.png' // 마커이미지의 주소입니다    

diff --git a/Backend/Frontend/creative/src/component/map/SignMapping.tsx b/Backend/Frontend/creative/src/component/map/SignMapping.tsx
@@ -17,8 +17,8 @@ const Mapping = () => {
     const [map,setMap] = useState(null);
     const [start,setStart] = useState<any>(null);
     const [end,setEnd] = useState<any>(null);
+    const [prev,setPrev] = useState<any>(start);
     const position = useSelector((state:RootState) => state.map.position)
-    const arsid = useSelector((state:RootState)=> state.bus.currentStation);
     const {curPosition} = usePosition(geolocationOptions);
     const state = useSelector((state:RootState)=>state.sign.State);
     const tmY = curPosition ? curPosition.tmY: position.tmY;
@@ -43,7 +43,7 @@ const Mapping = () => {
         Endmarker.setMap(map);
         setStart(Startmarker)
         setEnd(Endmarker);
-    },[tmX,tmY,arsid,position])
+    },[tmX,tmY,position])
 
     const moveMarker = (mouseEvent:any) => {
         let latlng = mouseEvent!.latLng;
@@ -63,6 +63,7 @@ const Mapping = () => {
     }
     if(map&&state!=="")
         changeStateMarker();
+
     return (
         <div className={classes.signmap} id="signmap">
         </div>

diff --git a/Backend/Frontend/creative/src/component/menu/MenuBar.tsx b/Backend/Frontend/creative/src/component/menu/MenuBar.tsx
@@ -1,11 +1,16 @@
 import React from "react"
 import styled from "styled-components"
+<<<<<<< HEAD
 import { NavLink } from "react-router-dom";
+=======
+
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc
 import {ReactComponent as HOME} from "./menuSvg/HOME.svg";
 import {ReactComponent as BUS} from "./menuSvg/BUS.svg";
 import {ReactComponent as SUBWAY} from "./menuSvg/SUBWAY.svg";
 import {ReactComponent as SIGN} from "./menuSvg/SIGN.svg";
 
+<<<<<<< HEAD
 
 const StyleMenuBar = styled.div`
 display:flex;
@@ -42,6 +47,43 @@ const MenuBar = () => {
                     isActive?<SIGN fill="orange"  height="4vh"/>:<SIGN fill="white"  height="4vh"/>
                 )}
             </NavLink>
+=======
+
+
+
+const StyleMenuBar = styled.div`
+display:flex;
+position: fixed;
+bottom: 0;
+justify-content: space-evenly;
+align-items: center;
+width: 100%;
+height: 8vh;
+background-color: #FFD12D;
+text-decoration:none;
+@media (max-width:500px){
+    justify-content:  space-evenly;
+}
+`
+
+const StyleButton = styled.button`
+    background-color: transparent;
+    border: 0;
+    .menu_img{
+        fill: white;
+        min-height: 4vh;
+    }
+`
+
+
+const MenuBar = () => {
+    return (
+        <StyleMenuBar>
+            <StyleButton><HOME fill="white"  height="4vh"/></StyleButton>
+            <StyleButton><BUS fill="white"  height="4vh"/></StyleButton>
+            <StyleButton><SUBWAY fill="white"  height="4vh"/></StyleButton>
+            <StyleButton><SIGN fill="white"  height="4vh"/></StyleButton>
+>>>>>>> a4564550bd27da525e96b6fc9b5b02b8210532dc
         </StyleMenuBar>
     )
 }

diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetail.tsx
@@ -11,6 +11,7 @@ const StyledSignDetail = styled.main`
     flex-direction: column;
     font-family: "Pretendard-Regular";
     font-style: normal;
+    overflow: auto;
     .detail{
         margin-top: 1.2em;
         padding-bottom: 1em;
@@ -24,9 +25,9 @@ const SignDetail = () => {
     const arr = useSignForm();
     return (
         <StyledSignDetail>
-            {arr[0].length!==0&&arr[0].map((ele:any)=>{
+            {arr[0].length!==0&&arr[0].map((ele:any,index:number)=>{
                 return (
-                    <div className="detail">
+                    <div className="detail" key={index}>
                         <span>{ele.info.totalTime}분</span>
                         <SignDetailGraph graph={ele}/>
                         <SignDetailInfo graph={ele}/>

diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailGraph.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 
-
 interface graphItem {
     label:string,
     portion:number,
@@ -39,23 +38,21 @@ const SignDetailGraph = ({graph}:any) => {
             {graph.subPath.map((ele:any,index:number)=>{
                 if(ele.sectionTime!==0){
                     let color="#D9D9D9";
-                    if(ele.trafficType===1)
+                    if(ele.trafficType===1){
                         color = idColor[ele.lane[0].subwayCode-1]
-                    else if(ele.trafficType===2)
+                    }
+                    else if(ele.trafficType===2){
                         color = busColor;
-                    return <StyleSignDetailGraphLi key={index} label={color} sum={graph.info.totalTime} portion={ele.sectionTime}>
+                    } 
+                    return (
+                    <StyleSignDetailGraphLi key={index} label={color} sum={graph.info.totalTime} portion={ele.sectionTime}>
                         {ele.sectionTime}분
                     </StyleSignDetailGraphLi>
+                    )
                 }
             })}
         </StyleSignDetailGraph>
     )
 }
 
-export default SignDetailGraph;
-
-/*
- time:ele.info.totalTime,
-type:ele.pathType,
-
-*/
+export default SignDetailGraph;
diff --git a/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx b/Backend/Frontend/creative/src/component/sign-component/SignDetailInfo.tsx
@@ -8,21 +8,24 @@ const StyledSignDetailInfo = styled.div`
 
 const StyledSignDetailInfoLi = styled.div`
     display: flex;
+    flex-direction: column;
     margin:1em 0;
+    font-family: "Pretendard-Regular";
+    font-style: normal;
     .SignDetail{
-        margin-left: 1em;
+        margin-top: 1px;
     }
 `
 
 const SignDetailInfo = ({graph}:any) => {
 
     return (
         <StyledSignDetailInfo>
-            {graph.subPath.map((ele:any)=>{
+            {graph.subPath.map((ele:any,index:number)=>{
                 if(ele.trafficType!==3){
                     let name = ele.lane[0].busNo?ele.lane[0].busNo:ele.lane[0].name
                     return (
-                            <StyledSignDetailInfoLi>
+                            <StyledSignDetailInfoLi key={index}>
                                 <span>{name}</span>
                                 <div className="SignDetail">
                                     <span>{ele.endName} - </span>

diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/BUS.svg
diff --git a/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg b/Backend/Frontend/creative/src/component/sign-component/signSvg/SUBWAY.svg
diff --git a/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayForm.tsx b/Backend/Frontend/creative/src/component/subway-component/subwayform/SubwayForm.tsx
@@ -23,7 +23,7 @@ const SubwayForm = () => {
         await api.get(`/subway/stNm/${value}`)
             .then(res => {
                 const { data } = res;
-                console.log(data)
+
                 dispatch(SubwayActions.addSubwayInfo(data))
                 dispatch(MapActions.Onsubwaymode())
             }).catch(error => {

diff --git a/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx b/Backend/Frontend/creative/src/component/subway-component/subwaylist/SubwayItems.tsx
@@ -25,12 +25,10 @@ const SubwayItems = (props:any) => {
     const idColor = ["#0052A4", "#00A84D", "#EF7C1C", "#00A5DE", "#996CAC", "#CD7C2F", "#747F00", "#E6186C"];
 
     useEffect(() => {
-        if (currentSubway === stCd) {
+        if (currentSubway === stCd)
             setColor("false")
-        }
-        else {
+        else 
             setColor("true")
-        }
         const locationRecive = async () => {
             await api.get(`/subway/stationInfo/${stCd}/${stNm}`)
                 .then(res => {
@@ -42,12 +40,10 @@ const SubwayItems = (props:any) => {
     }, [currentSubway,stCd,stNm])
 
     const ClickSubway = () => {
-        if (currentSubway === stCd) {
+        if (currentSubway === stCd)
             window.location.href = `/#/subway/detail/${stCd}/${stNm}`;
-        }
         else if (currentSubway !== stCd) {
             setColor("false")
-            console.log(position)
             dispatch(MapActions.positioning(position))
             dispatch(MapActions.makerchacking(position))
             dispatch(SubwayActions.clickSubway(stCd))