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(front): ts변경 오류 다수 발견
KyuTae98 committed Oct 11, 2023
commit 19d1d07d01dda7a54052c18cc8057b2e9c796bf7
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from "react"
import { HashRouter, Routes, Route } from "react-router-dom";
import MainPage from "./page/MainPage.js"
import BusPage from "./page/BusPage.js"
import SubwayPage from "./page/subwaypage/SubwayPage.js"
import SubwayTransferPage from "./page/subwaypage/SubwayTransfer.js";
import SubwayDetailPage from "./page/subwaypage/SubwayDetailPage.js"
import SubwayElevatorPage from "./page/subwaypage/SubwayElevator.js";
import SubwayBathChairPage from "./page/subwaypage/SubwayBathchair.js";
import MainPage from "./page/MainPage.tsx"
import BusPage from "./page/BusPage.tsx"
import SubwayPage from "./page/subwaypage/SubwayPage.tsx"
import SubwayTransferPage from "./page/subwaypage/SubwayTransfer.tsx";
import SubwayDetailPage from "./page/subwaypage/SubwayDetailPage.tsx"
import SubwayElevatorPage from "./page/subwaypage/SubwayElevator.tsx";
import SubwayBathChairPage from "./page/subwaypage/SubwayBathchair.tsx";

//page마다 url을 따로 지정, 페이지에서 api를 호출할 때 필요한 파라미터를 제공
function App() {
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from "react"
import axios from "axios"

export const api = axios.create({

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import React from "react";
import BusButton from "./BusButton";
import BusInput from "./BusInput";
import React, {useRef} from "react";
import { useDispatch } from "react-redux";
import styled from "styled-components";
import { api } from "../../auth/Api.";
import { api } from "../../auth/Api";
import { MapActions } from "../../../store/Map-slice";
import { BusActions } from "../../../store/Bus-slice";
import { useDispatch } from "react-redux";

const StyledForm = styled.form`
display: flex;
width: 34.6vw;
height: 11vh;
border: 4px solid #cdd029;
@media (max-width: 500px) {
width: 98vw;
height: 15vw;
}
`;
display:flex;
width: 34.6vw;
height: 11vh;
border: 4px solid #CDD029;
@media (max-width:500px){
width: 98vw;
height: 15vw;
}
`


const BusForm:React.FC = () => {
const dispatch = useDispatch();
const SubmitBusStation = (value) => {
const inputRef = useRef<HTMLInputElement>(null);
const SubmitBusStation = (value: string|null) => {
api
.get(`/bus/stNm/${value}`)
.then((res) => {
@@ -36,19 +36,14 @@ const BusForm:React.FC = () => {
alert("해당 정류장이 없습니다.");
});
};
const BusStationData = (event) => {
const BusStationData = (event:React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const {
target: [input],
} = event;
const { value } = input;
input.value = "";
SubmitBusStation(value);
SubmitBusStation(inputRef.current!.value);
};
return (
<StyledForm onSubmit={BusStationData}>
<BusInput />
<BusButton />
<StyledForm onSubmit={BusStationData}>
<input ref={inputRef} placeholder="정류장을 입력해주세요." />
<button><img className="GRASS" src="./image/GRASS.png" alt="GRASS" /></button>
</StyledForm>
);
};

This file was deleted.

Original file line number Diff line number Diff line change
@@ -78,18 +78,19 @@ const StyledBusItem = styled.li`
}
`;

const BusItem = (props) => {
const BusItem = (props:any) => {
const { busrouteid, busrouteAbrv, adirection, arrmsg1 } = props.items;

return (
<StyledBusItem>
<a
href={`https://map.naver.com/v5/search/${busrouteAbrv}번버스/bus-route/${busrouteid}?c=0,0`}
target="_blank"
rel="noreferrer"
>
<div>
<p className="Name">
<img prop="mark" className="mark" src="./image/MARK.png" />
<img alt="mark" className="mark" src="./image/MARK.png" />
{busrouteAbrv}
</p>
<p className="direction">{adirection}방면</p>
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";
import BusItem from "./BusItem";
import StationItem from "./StationItem"
import { useSelector } from "react-redux";
import BusNumber from "../busnumber/BusNumber";
import { RootState } from "../../../store/index";

const StyledList = styled.ul`
display:flex;
@@ -24,21 +25,22 @@ overflow:auto;
}
`


const BusList = () => {
const stationInfo = useSelector(state => state.bus.station)
const stationCheck = useSelector(state => state.bus.stationCheck)
const busInfo = useSelector(state => state.bus.buslist)
const busCheck = useSelector(state => state.bus.busCheck)
const stationInfo = useSelector((state:RootState )=> state.bus.station)
const stationCheck = useSelector((state:RootState) => state.bus.stationCheck)
const busInfo = useSelector((state:RootState) => state.bus.buslist)
const busCheck = useSelector((state:RootState) => state.bus.busCheck)
return (
<StyledList>
{(busCheck || stationCheck) && <BusNumber text={stationCheck ? "검색결과" : "버스"} count={stationCheck ? stationInfo.length : busInfo.length} />}
{stationCheck && stationInfo.map(element => (
{stationCheck && stationInfo.map((element:any) => (
<StationItem
key={element.stId}
items={element}
/>
))}
{busCheck && busInfo.map(element => (
{busCheck && busInfo.map((element:any) => (
<BusItem
key={element.busrouteAbrv}
items={element}
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import styled from "styled-components";

const StyledBusTimer = styled.div``;

const BusTimer = (props) => {
const BusTimer = (props:any) => {
const [Timer] = useState(props.timer);
setInterval(() => {}, 1000);
return <StyledBusTimer>{Timer}</StyledBusTimer>;
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from "react";
import styled from "styled-components";
import { api } from "../../auth/Api..js";
import { api } from "../../auth/Api.js";
import { useSelector, useDispatch } from "react-redux";
import { BusActions } from "../../../store/Bus-slice.js";
import { RootState } from "../../../store/index";

const StyledRefreshButton = styled.button`
width: 3vw;
@@ -30,7 +31,7 @@ const StyledRefreshButton = styled.button`

const RefreshButton = () => {
const dispatch = useDispatch();
const busId = useSelector((state) => state.bus.busId);
const busId = useSelector((state:RootState) => state.bus.busId);
const clickCheck = {
check: false,
};
@@ -46,7 +47,6 @@ const RefreshButton = () => {
alert(error);
});
};
console.log(Node.classList);
return (
<StyledRefreshButton className="fresh" onClick={Refresh}>
<img src="./image/refresh.png" alt="새로고침" />
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
import React from "react";
import styled from "styled-components";
import { api } from "../../auth/Api.";
import { api } from "../../auth/Api";
import { useDispatch, useSelector } from "react-redux";
import { BusActions } from "../../../store/Bus-slice";
import { MapActions } from "../../../store/Map-slice";
import { useEffect, useState } from "react";
import { RootState } from "../../../store/index";

const StationItem = (props) => {
const [color, setColor] = useState(false);
interface stItem {
color:any;
}

const StationItem = (props:any) => {
const [color, setColor] = useState<boolean>(false);
const { stNm, arsId, tmX, tmY } = props.items;

const dispatch = useDispatch();
const station = useSelector((state) => state.bus.currentStation);
const station = useSelector((state:RootState) => state.bus.currentStation);
useEffect(() => {
if (station === arsId) {
setColor(false);
@@ -51,14 +56,14 @@ const StationItem = (props) => {
);
};

const StyledStationItem = styled.li`
const StyledStationItem = styled.li<stItem>`
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
list-style: none;
border-bottom: 1px solid #d2d2d2;
background-color: ${(props) => (props.color ? "#FFFFFF" : "#CDD029")};
background-color: ${props => (props.color ? "#FFFFFF" : "#CDD029")};
font-family: "Pretendard-Regular";
:hover {
cursor: pointer;
@@ -68,23 +73,23 @@ const StyledStationItem = styled.li`
padding-left: 20px;
font-family: "Pretendard-Regular";
font-style: normal;
font-weight: ${(props) => (props.color ? "400" : "700")};
font-weight: ${props => (props.color ? "400" : "700")};
font-size: 2vw;
line-height: 60px;
color: ${(props) => (props.color ? "#000000" : "#FFFFFF")};
color: ${props => (props.color ? "#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 ? "500" : "700")};
font-size: 1.7vw;
line-height: 29px;
display: flex;
align-items: center;
text-align: center;
color: ${(props) => (props.color ? "#000000" : "#FFFFFF")};
color: ${props => (props.color ? "#000000" : "#FFFFFF")};
}
@media (max-width: 500px) {
height: 35%;
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import React from "react";
import styled from "styled-components";
import RefreshButton from "../buslist/RefreshButton";
import { useSelector } from "react-redux";
import { RootState } from "../../../store/index";

const StyledBusNumber = styled.header`
display:flex;
@@ -24,8 +25,8 @@ p{
}
`

const BusNumber = (props) => {
const busCheck = useSelector(state => state.bus.busCheck)
const BusNumber = (props:any) => {
const busCheck = useSelector((state:RootState) => state.bus.busCheck)
return (
<StyledBusNumber>
<p>{props.text}{props.count}</p>
Loading