Frontend

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

@@ -1,6 +1,6 @@
 import axios from "axios"
 
 export const api = axios.create({
-    baseURL: "http://34.168.80.42:3000"
+    baseURL: "http://34.168.80.42:3005"
 })
 

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

@@ -10,33 +10,26 @@ const StyledHeader = styled.header`
 display:flex;
 justify-content:space-between;
 align-items:center;
+position:fixed;
+top: 0;
 font-family: 'GmarketSansMedium';
-font-weight: 700;
-font-size: 4vw;
-background-color:#FFFFFF;
 border-bottom: 2px solid #EBEBEB;
-width:95%;
-height:15vh;
-a{  
+width:100vw;
+min-height:8vh;
+.header_home{  
+    font-size:5vw;
     color:#000000;
     text-decoration:none;
+    padding-left: 5vw;
 }
-.sejong{
+.header_sejong{
     font-family: 'Pretendard-Regular';
     font-style: normal;
-    font-weight: 700;
-    font-size: 1.8vw;
+    font-size: 2vw;
+    padding-right: 5vw;
     line-height: 48px;
-    text-align: center;
     color: #5C5454;
 }
-@media (max-width:500px) {
-    font-size:8vw;
-    height:8vh;
-    .sejong{
-        font-size: 4vw;
-    }
-}
 `
 
 const Header = () => {
@@ -49,10 +42,10 @@ const Header = () => {
     }
     return (
         <StyledHeader>
-            <Link onClick={reduxReset} to="/">
+            <Link className="header_home" onClick={reduxReset} to="/">
                 타자
             </Link>
-            <p className="sejong">Sejong University</p>
+            <p className="header_sejong">Sejong University</p>
         </StyledHeader>
     )
 }

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

@@ -22,10 +22,10 @@ const Mapping = () => {
     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(() => {
-        const tmY = curPosition ? curPosition.tmY: position.tmY;
-        const tmX = curPosition ? curPosition.tmX: position.tmX;
+        console.log(tmX,tmY);
         const container = document.getElementById("map");
         const options = {
             center: new window.kakao.maps.LatLng(tmY, tmX),
@@ -36,7 +36,7 @@ const Mapping = () => {
             busmapcoordinate(marker, map)
         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))

Backend/Frontend/creative/src/component/menu/MenuBar.tsx

@@ -1,29 +1,46 @@
 import React from "react"
-import MenuBusButton from "./MenuBusButton.tsx"
-import MenuSubwayButton from "./MenuSubwayButton.tsx"
 import styled from "styled-components"
-import MenuExplan from "./MenuExplan.tsx"
+
+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";
+
+
+
 
 const StyleMenuBar = styled.div`
 display:flex;
-justify-content: space-between;
+position: fixed;
+bottom: 0;
+justify-content: space-evenly;
+align-items: center;
 width: 100%;
-padding-top:5vw;
-height: 633px;
+height: 8vh;
+background-color: #FFD12D;
 text-decoration:none;
 @media (max-width:500px){
-    flex-direction: column; 
     justify-content:  space-evenly;
 }
 `
 
+const StyleButton = styled.button`
+    background-color: transparent;
+    border: 0;
+    .menu_img{
+        fill: white;
+        min-height: 4vh;
+    }
+`
+
 
 const MenuBar = () => {
     return (
         <StyleMenuBar>
-            <MenuBusButton />
-            <MenuExplan />
-            <MenuSubwayButton />
+            <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>
         </StyleMenuBar>
     )
 }

Backend/Frontend/creative/src/component/menu/MenuBusButton.tsx

@@ -80,7 +80,6 @@ a{
 
 const MenuBusButton = () => {
     const dispatch = useDispatch();
-
     const initialization = () => {
         dispatch(MapActions.initialization())
         dispatch(BusActions.initialState())

Backend/Frontend/creative/src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+    import React = require('react')
+    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+    const src: string
+    export default src
+  }

Backend/Frontend/creative/src/page/MainPage.module.css

@@ -3,20 +3,17 @@ body {
     margin: 0px;
     padding: 0px;
 }
-
-.main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
 .bottom {
     width: 100%;
     height: 100vh;
-    background: rgba(40, 40, 40, 0.8);
 }
 
 .main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
     animation: fadein 2s;
     -moz-animation: fadein 2s;
     /* Firefox */
@@ -25,6 +22,23 @@ body {
     -o-animation: fadein 2s;
     /* Opera */
 }
+.main_detail{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 30vh;
+}
+.main_title{
+    font-family: 'GmarketSansMedium';
+    font-weight: 700;
+    font-size: 2em;
+}
+.main_explan{
+    display:flex;
+    text-align:center;
+    font-family: 'Pretendard-Regular';
+    font-size: 1em;
+}
 
 @keyframes fadein {
     from {

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

@@ -7,9 +7,11 @@ const Mainpage = () => {
     return (
         <div className={classes.main}>
             <Header />
-            <div className={classes.bottom}>
-                <MenuBar />
-            </div>
+            <main className={classes.main_detail}>
+                <h1 className={classes.main_title}>편리하고 쉽게, 타자.</h1>
+                <p className={classes.main_explan}>교통약자도 대중교통을 쉽게 탈 수 있을때까지.<br />교통약자에게 필요한 서비스를 제공합니다.</p>
+            </main>
+            <MenuBar />
         </div>
     )
 }

Backend/Frontend/creative/src/tsconfig.json

@@ -7,9 +7,10 @@
       "skipLibCheck": true,
       "moduleResolution": "node",
       "forceConsistentCasingInFileNames": true,
-      "jsx": "react",
       "allowImportingTsExtensions": true,
       "paths":["**/*"],
+      "jsx": "react",
+      "include": ["src/custom.d.ts" ]
     }
 }