Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend #184

Merged
merged 64 commits into from
Dec 3, 2023
Merged
Changes from 1 commit
Commits
Show all changes
64 commits
Select commit Hold shift + click to select a range
c1ce6d2
feat. 새로 고침 버튼 개발[#46]
KyuTae98 Nov 13, 2022
c00f8f6
Merge branch 'main' into Frontend
KyuTae98 Nov 13, 2022
9ee1d5e
feat. map component 리팩토링
KyuTae98 Nov 13, 2022
2d90ac3
Merge branch 'main' into Frontend
KyuTae98 Nov 16, 2022
e79dba3
Merge branch 'main' into Frontend
KyuTae98 Nov 16, 2022
997e0b3
feat. 버스페이지 css작업 완료
KyuTae98 Nov 21, 2022
dd7f880
Merge branch 'main' into Frontend
KyuTae98 Nov 21, 2022
b122d9d
Merge branch 'main' into Frontend
KyuTae98 Nov 21, 2022
3d9e5da
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Nov 21, 2022
d15e1a8
feat. 입력 폼 변경
KyuTae98 Nov 22, 2022
24bf7ec
Merge branch 'main' into Frontend
KyuTae98 Nov 23, 2022
7cafbbc
Merge branch 'main' into Frontend
KyuTae98 Nov 23, 2022
4f18ff3
feat. 지하철 page생성
KyuTae98 Nov 26, 2022
9763491
Merge branch 'main' into Frontend
KyuTae98 Nov 27, 2022
524fc29
feat. map-slice수정
KyuTae98 Nov 27, 2022
9e8bf92
feat. subway page개발(v1.1)
KyuTae98 Nov 27, 2022
33d4fb1
feat. main화면 bus화면 디자인 변경
KyuTae98 Dec 4, 2022
d2b5db6
feat. 디자인 폰트, 버스 페이지 어느 정도 완성
KyuTae98 Dec 5, 2022
6054379
feat. 지하철 페이지 디자인에 맞춰 개발
KyuTae98 Dec 7, 2022
a8cfae4
Merge branch 'main' into Frontend
KyuTae98 Dec 7, 2022
d88e685
Merge branch 'main' into Frontend
KyuTae98 Dec 7, 2022
7c8c545
feat. 지하철 메뉴
KyuTae98 Dec 7, 2022
b51eb61
feat. 모바일 반응형
KyuTae98 Dec 9, 2022
9f11d3d
Merge branch 'main' into Frontend
KyuTae98 Dec 9, 2022
67604d2
feat. 환승 page개발
KyuTae98 Dec 9, 2022
dfdb1b5
feat. HashRouter로 변경
KyuTae98 Dec 11, 2022
8dc6e8d
Merge branch 'main' into Frontend
KyuTae98 Dec 11, 2022
14d4571
feat. 이모지 + 서버
KyuTae98 Dec 13, 2022
09e4289
Merge branch 'main' into Frontend
KyuTae98 Dec 13, 2022
832f422
feat.지하철 수정
KyuTae98 Dec 13, 2022
671b97b
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Dec 13, 2022
e3c1cbf
Merge branch 'main' into Frontend
KyuTae98 Dec 13, 2022
2b106f4
feat. map focusing 수정
KyuTae98 Dec 13, 2022
2e0315f
feat. 휠체어 기능 하기 전 저장
KyuTae98 Dec 13, 2022
822104f
feat. 휠체어 수정 완료
KyuTae98 Dec 13, 2022
dff0ed6
feat. 디테일한 수정
KyuTae98 Dec 13, 2022
c336db0
Update Api.js
KyuTae98 Dec 13, 2022
f2067e2
feat. 약간의 수정
KyuTae98 Dec 13, 2022
d010ffb
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Dec 13, 2022
0408743
Merge branch 'main' into Frontend
KyuTae98 Dec 13, 2022
17413e3
feat.폰트, 맵 초기화 수정
KyuTae98 Dec 21, 2022
05c4a0a
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Dec 21, 2022
db7ff6d
feat. 최종 수정
KyuTae98 Dec 21, 2022
b5661a7
Merge branch 'main' into Frontend
KyuTae98 Dec 21, 2022
67a2f1c
Update StationItem.js
KyuTae98 Jan 5, 2023
963f24f
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Jan 5, 2023
85d55cc
refac: typescript로 Refectoring중
KyuTae98 Sep 13, 2023
19d1d07
feat(front): ts변경 오류 다수 발견
KyuTae98 Oct 11, 2023
5965578
feat(front): gps기반 지도 중심 개발
KyuTae98 Oct 11, 2023
76ce3da
fix(front): 프론트 정리
KyuTae98 Oct 11, 2023
b179900
fix(front): Api 수정
KyuTae98 Oct 12, 2023
732ba68
Merge branch 'main' into Frontend
KyuTae98 Oct 12, 2023
3bae8bf
fix(front): map 변경
KyuTae98 Oct 12, 2023
d8e1e7d
Merge branch 'Frontend' of https://github.com/2022-Sejong-Creative-Se…
KyuTae98 Oct 12, 2023
8e2d793
feat: 간단 퍼블리싱(1)
KyuTae98 Nov 6, 2023
c817b54
feat:menuBar 수정(SVG로 표현)
KyuTae98 Nov 7, 2023
bac7499
feat(front): 모바일 환경에 맞게 수정
KyuTae98 Nov 9, 2023
5d58f39
feat(): busmode 완성
KyuTae98 Nov 15, 2023
1cce4fb
feat: busmode 수정
KyuTae98 Nov 15, 2023
a53d224
feat: 지하철 수정
KyuTae98 Nov 24, 2023
62b9f63
feat: 지하철 마무리
KyuTae98 Nov 26, 2023
a5c9637
feat: map Marker 클릭이벤트 등록 완료
KyuTae98 Nov 28, 2023
e42a816
feat: 길찾기 솔루션 개발중
KyuTae98 Nov 30, 2023
9a3fa7a
feat: Frontend
KyuTae98 Dec 3, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(front): 모바일 환경에 맞게 수정
KyuTae98 committed Nov 9, 2023
commit bac749976ba4e4c234db66ae3c97383dc9b52544
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion Backend/Frontend/creative/src/component/auth/Api.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import axios from "axios"

export const api = axios.create({
baseURL: "http://34.168.80.42:3005"
baseURL: "http://34.145.39.241:3005"
})

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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";
@@ -7,42 +7,37 @@ import { BusActions } from "../../../store/Bus-slice.ts";

const StyledForm = styled.form`
display:flex;
width: 100%;
height: 140px;
border: 4px solid #CDD029;
position: fixed;
z-index: 100;
top: 15vh;
width: 80vw;
height: 1vh;
border-radius: 30px;
.busFormInput{
width: 80%;
height: 80%;
width: 100%;
padding: 15px;
font-size: 2.5vw;
border:0;
font-size: 80%;
font-family: 'Pretendard-Regular';
font-weight: 700;
border: 0;
border-radius: 30px;
}
.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%;
}
.GRASS{
width: 100%;
height: 100%;
}
`


const BusForm:React.FC = () => {
const dispatch = useDispatch();
const inputRef = useRef<HTMLInputElement>(null);

const SubmitBusStation = (value: string|null) => {
api
.get(`/bus/stNm/${value}`)
@@ -59,14 +54,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>
);
};
Original file line number Diff line number Diff line change
@@ -6,14 +6,14 @@ const StyledBusItem = styled.li`
justify-content: space-between;
align-items: center;
width: 100%;
height: 30%;
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;
}
:hover {
cursor: pointer;
@@ -38,44 +38,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) => {
Original file line number Diff line number Diff line change
@@ -12,17 +12,10 @@ flex-direction:column;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 640px;
background: #FFFFFF;
border: 4px solid #CDD029 ;
height: 30%;
padding:0;
margin:0;
overflow:auto;
@media (max-width:500px) {
border: 4px solid #CDD029 ;
width:100%;
height:30vh;
}
`


Original file line number Diff line number Diff line change
@@ -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 = () => {
Original file line number Diff line number Diff line change
@@ -63,7 +63,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 ? "#FFFFFF" : "#FFD12D")};
font-family: "Pretendard-Regular";
:hover {
cursor: pointer;
@@ -74,7 +74,7 @@ const StyledStationItem = styled.li<stItem>`
font-family: "Pretendard-Regular";
font-style: normal;
font-weight: ${props => (props.color ? "400" : "700")};
font-size: 2vw;
font-size: 1em;
line-height: 60px;
color: ${props => (props.color ? "#000000" : "#FFFFFF")};
}
@@ -84,24 +84,13 @@ const StyledStationItem = styled.li<stItem>`
font-family: "Pretendard-Regular";
font-style: normal;
font-weight: ${props => (props.color ? "500" : "700")};
font-size: 1.7vw;
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;
}
}
`;

export default StationItem;
Original file line number Diff line number Diff line change
@@ -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) => {
5 changes: 2 additions & 3 deletions Backend/Frontend/creative/src/component/header/Header.tsx
Original file line number Diff line number Diff line change
@@ -9,13 +9,12 @@ import { MapActions } from "../../store/Map-slice.ts";
const StyledHeader = styled.header`
display:flex;
justify-content:space-between;
background-color: #FFFFFF;
align-items:center;
position:fixed;
top: 0;
font-family: 'GmarketSansMedium';
border-bottom: 2px solid #EBEBEB;
width:100vw;
min-height:8vh;
min-height:10vh;
.header_home{
font-size:5vw;
color:#000000;
10 changes: 1 addition & 9 deletions Backend/Frontend/creative/src/component/map/Mapping.module.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
.map {
width: 35vw;
width: 100vw;
height: 80vh;

}

@media (max-width:500px) {
.map {
width: 99%;
height: 40vh;
}
}
3 changes: 1 addition & 2 deletions Backend/Frontend/creative/src/component/map/Mapping.tsx
Original file line number Diff line number Diff line change
@@ -25,7 +25,6 @@ const Mapping = () => {
const tmY = curPosition ? curPosition.tmY: position.tmY;
const tmX = curPosition ? curPosition.tmX: position.tmX;
useEffect(() => {
console.log(tmX,tmY);
const container = document.getElementById("map");
const options = {
center: new window.kakao.maps.LatLng(tmY, tmX),
@@ -36,7 +35,7 @@ const Mapping = () => {
busmapcoordinate(marker, map)
else if (subwaymode)
subwaymapcoordinate(marker, map)
},[tmX,tmY])
},[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))
46 changes: 22 additions & 24 deletions Backend/Frontend/creative/src/component/menu/MenuBar.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
import React from "react"
import styled from "styled-components"

import { NavLink } from "react-router-dom";
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;
position: fixed;
bottom: 0;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 8vh;
height: 10%;
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>
<NavLink end to="/" >
{({isActive}:{isActive:boolean})=>(
isActive?<HOME fill="orange" height="4vh"/>:<HOME fill="white" height="4vh"/>
)}
</NavLink>
<NavLink end to="/bus">
{({isActive}:{isActive:boolean})=>(
isActive?<BUS fill="orange" height="4vh"/>:<BUS fill="white" height="4vh"/>
)}
</NavLink>
<NavLink end to="/subway">
{({isActive}:{isActive:boolean})=>(
isActive?<SUBWAY fill="orange" height="4vh"/>:<SUBWAY fill="white" height="4vh"/>
)}
</NavLink>
<NavLink end to="/sign">
{({isActive}:{isActive:boolean})=>(
isActive?<SIGN fill="orange" height="4vh"/>:<SIGN fill="white" height="4vh"/>
)}
</NavLink>
</StyleMenuBar>
)
}
7 changes: 1 addition & 6 deletions Backend/Frontend/creative/src/page/BusPage.module.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
.main {
display: flex;
justify-content: start;
width: 100vw;
}

.buspage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
}

.busmain {
20 changes: 8 additions & 12 deletions Backend/Frontend/creative/src/page/BusPage.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import React from "react";
import Mapping from "../component/map/Mapping.tsx"
import BusForm from "../component/bus-component/busform/BusForm.tsx"
import BusList from "../component/bus-component/buslist/BusList.tsx"
import classes from "./BusPage.module.css"
import Header from "../component/header/Header.tsx"
import MenuBar from "../component/menu/MenuBar.tsx";

import BusPanel from "../component/bus-component/buspanel/BusPanel.tsx"
import BusForm from "../component/bus-component/busform/BusForm.tsx"
import BusList from "../component/bus-component/buslist/BusList.tsx"

const BusPage = () => {
return (
<div className={classes.buspage}>
<Header />
<div className={classes.main}>
<BusPanel />
<div className={classes.busmain}>
<div className={classes.buslist}>
<BusForm />
<BusList />
</div>
<Mapping />
</div>
</div>
<Mapping />
<BusForm />
<BusList/>
<MenuBar/>
</div>
)
}
14 changes: 7 additions & 7 deletions Backend/Frontend/creative/src/page/MainPage.module.css
Original file line number Diff line number Diff line change
@@ -12,8 +12,14 @@ body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: space-between;
height: 100vh;
}
.main_detail{
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30vh;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
@@ -22,12 +28,6 @@ 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;
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
.main {
display: flex;
justify-content: start;
width: 100vw;
}

.subwaypage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
}

.subwaylist {
12 changes: 3 additions & 9 deletions Backend/Frontend/creative/src/page/subwaypage/SubwayPage.tsx
Original file line number Diff line number Diff line change
@@ -5,21 +5,15 @@ import SubwayList from "../../component/subway-component/subwaylist/SubwayList.t
import classes from "./SubwayPage.module.css"
import Header from "../../component/header/Header.tsx"
import SubwayPanel from "../../component/subway-component/subwaypanel/SubwayPanel.tsx"
import MenuBar from "../../component/menu/MenuBar.tsx";

const SubwayPage = () => {
return (
<div className={classes.subwaypage}>
<Header />
<div className={classes.main}>
<SubwayPanel key="panel" text={["지하철편의시설"]} menu={null} />
<div className={classes.subwaymain}>
<div className={classes.subwaylist}>
<SubwayForm />
<SubwayList />
</div>

<Mapping />
</div>
</div>
<MenuBar/>
</div>
)
}