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 #185

Merged
merged 66 commits into from
Dec 4, 2023
Merged
Changes from 1 commit
Commits
Show all changes
66 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
0a5aa86
feat: 수정
KyuTae98 Dec 4, 2023
be9b5a8
Merge branch 'main' into Frontend
KyuTae98 Dec 4, 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(): busmode 완성
KyuTae98 committed Nov 15, 2023
commit 5d58f391244eff8c7ccaad971c73cf9e761dc1fe
Original file line number Diff line number Diff line change
@@ -6,14 +6,15 @@ const StyledBusItem = styled.li`
justify-content: space-between;
align-items: center;
width: 100%;
height: 30%;
min-height: 10%;
list-style: none;
text-align: center;
border-bottom: 1px solid #d2d2d2;
font-family: "Pretendard-Regular";
.mark {
width: 1em;
height: 1em;
margin-right: 0.5rem;
}
:hover {
cursor: pointer;
Original file line number Diff line number Diff line change
@@ -12,7 +12,8 @@ flex-direction:column;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 30%;
max-height:32%;
min-height:32%;
padding:0;
margin:0;
overflow:auto;
Original file line number Diff line number Diff line change
@@ -12,24 +12,23 @@ interface stItem {
}

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" : "#FFD12D")};
background-color: ${props => (props.color==="true" ? "#FFFFFF" : "#FFD12D")};
font-family: "Pretendard-Regular";
:hover {
cursor: pointer;
@@ -73,23 +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-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-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")};
color: ${props => (props.color==="true" ? "#000000" : "#FFFFFF")};
}
`;

2 changes: 1 addition & 1 deletion Backend/Frontend/creative/src/component/header/Header.tsx
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ align-items:center;
font-family: 'GmarketSansMedium';
border-bottom: 2px solid #EBEBEB;
width:100vw;
min-height:10vh;
min-height:10%;
.header_home{
font-size:5vw;
color:#000000;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.map {
width: 100vw;
height: 80vh;
height: 80%;
}
26 changes: 12 additions & 14 deletions Backend/Frontend/creative/src/component/map/Mapping.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React,{ useEffect } from "react";
import { useSelector, useDispatch } from 'react-redux';

import usePosition from "../../hook/usePosition.tsx";

import { geolocationOptions } from "../../contents/geolocationOptions.tsx";
import classes from "./Mapping.module.css"
import { api } from "../auth/Api.ts";
import { BusActions } from "../../store/Bus-slice.ts";
@@ -13,29 +13,34 @@ declare global {
kakao: any;
}
}

/*
37.55068403524657
127.07411251036736
*/
const Mapping = () => {
const dispatch = useDispatch()
const marker = useSelector((state:RootState) => state.map.marker)
const position = useSelector((state:RootState) => state.map.position)
const arsid = useSelector((state:RootState) => state.bus.currentStation)
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 {curPosition} = usePosition(geolocationOptions);
const tmY = curPosition ? curPosition.tmY: position.tmY;
const tmX = curPosition ? curPosition.tmX: position.tmX;
useEffect(() => {
const container = document.getElementById("map");
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 options = {
center: new window.kakao.maps.LatLng(tmY, tmX),
center: new window.kakao.maps.LatLng(y, x),
level: 3,
};
const map = new window.kakao.maps.Map(container, options);
if (busmode)
busmapcoordinate(marker, map)
else if (subwaymode)
subwaymapcoordinate(marker, map)
},[tmX, tmY])
},[tmX,tmY,busmode,subwaymode,arsid])

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))
@@ -44,27 +49,20 @@ const Mapping = () => {
clickable: true,
})
new_marker.setMap(map)
}
}//마커 찍는 함수

const busmapcoordinate = (marker:any, map:any) => {

const currentArsid = marker.filter((id:any) => id.arsId === arsid)
marker.forEach((element:any) => {
const imageSrc = './image/busImage.png' // 마커이미지의 주소입니다
const imageSize = new window.kakao.maps.Size(64, 69)
const imageOption = { offset: new window.kakao.maps.Point(27, 69) };
let markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)

const markerPosition = new window.kakao.maps.LatLng(parseFloat(String(element.tmY - 0.0000005)).toFixed(6), parseFloat(String(element.tmX - 0.0000005)).toFixed(6))
if (element.arsId !== currentArsid[0].arsId) {
markerImage = undefined;
}
const new_marker = new window.kakao.maps.Marker({
position: markerPosition,
clickable: true,
image: markerImage
})

window.kakao.maps.event.addListener(new_marker, 'click', () => {
submitStationId(element.arsId)
})
3 changes: 2 additions & 1 deletion Backend/Frontend/creative/src/component/menu/MenuBar.tsx
Original file line number Diff line number Diff line change
@@ -6,12 +6,13 @@ 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-evenly;
align-items: center;
width: 100%;
height: 10%;
min-height: 10%;
background-color: #FFD12D;
text-decoration:none;
`
3 changes: 1 addition & 2 deletions Backend/Frontend/creative/src/page/BusPage.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from "react";

import Mapping from "../component/map/Mapping.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"

10 changes: 5 additions & 5 deletions Backend/Frontend/creative/src/store/Map-slice.ts
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ const MapSlice = createSlice({
name: "Map",
initialState: {
position: {
tmY: 37.55068403524657,
tmX: 127.07411251036736
tmY: 0,
tmX: 0
},
marker: [],
busmode: false,
@@ -21,8 +21,8 @@ const MapSlice = createSlice({
},
initialization(state) {
state.position = {
tmY: 37.55068403524657,
tmX: 127.07411251036736
tmY: 0,
tmX: 0
};
state.marker = [];
state.busmode = false;
@@ -35,7 +35,7 @@ const MapSlice = createSlice({
Onsubwaymode(state) {
state.busmode = false;
state.subwaymode = true;
}
},
}
})