From ff0849a3f34d51a140b229ae9b17a109efbcf4e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8B=A4=EC=9D=B8?= Date: Wed, 18 Oct 2023 20:22:53 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#879] --- .../ui/StationInfoWindow/SummaryButtons.tsx | 66 ------------------- .../StationSearchWindow/StationSearchBar.tsx | 1 - 2 files changed, 67 deletions(-) delete mode 100644 frontend/src/components/ui/StationInfoWindow/SummaryButtons.tsx diff --git a/frontend/src/components/ui/StationInfoWindow/SummaryButtons.tsx b/frontend/src/components/ui/StationInfoWindow/SummaryButtons.tsx deleted file mode 100644 index bc12f9544..000000000 --- a/frontend/src/components/ui/StationInfoWindow/SummaryButtons.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { css } from 'styled-components'; - -import type { MouseEvent } from 'react'; - -import useMediaQueries from '@hooks/useMediaQueries'; - -import ButtonNext from '@common/ButtonNext'; -import FlexBox from '@common/FlexBox'; - -import { MOBILE_BREAKPOINT } from '@constants'; - -export interface SummaryButtonsProps { - handleCloseStationWindow: (event: MouseEvent) => void; - handleOpenStationDetail: () => void; -} - -const SummaryButtons = ({ - handleCloseStationWindow, - handleOpenStationDetail, -}: SummaryButtonsProps) => { - const screen = useMediaQueries(); - - return ( - - - 닫기 - - {screen.get('isMobile') && ( - - 상세보기 - - )} - - ); -}; - -const closeButtonCss = css` - width: 20%; - margin-left: auto; - border-color: #4d5053bf; - - @media screen and (max-width: ${MOBILE_BREAKPOINT}px) { - width: 28%; - margin-left: 0; - } -`; - -export default SummaryButtons; diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx index 46dfc859e..9d0983e10 100644 --- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx +++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx @@ -5,7 +5,6 @@ import { useState } from 'react'; import { useSearchStations } from '@hooks/tanstack-query/useSearchStations'; import { useDebounce } from '@hooks/useDebounce'; -import Box from '@common/Box'; import FlexBox from '@common/FlexBox'; import Loader from '@common/Loader'; From 1089a24cd20feef5b7aca2b38cffdedbbf0f7321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8B=A4=EC=9D=B8?= Date: Wed, 18 Oct 2023 20:23:33 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EA=B8=B8=EC=B0=BE=EA=B8=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#879] --- .../ui/StationInfoWindow/PathFinding.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 frontend/src/components/ui/StationInfoWindow/PathFinding.tsx diff --git a/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx b/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx new file mode 100644 index 000000000..667746454 --- /dev/null +++ b/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx @@ -0,0 +1,21 @@ +import { BiSolidCar } from 'react-icons/bi'; + +import FlexBox from '@common/FlexBox'; +import Text from '@common/Text'; + +import type { Station } from '@type'; + +type PathFindingProps = Pick; + +const PathFinding = ({ address, latitude, longitude }: PathFindingProps) => { + const KAKAO_MAP_LINK = `https://map.kakao.com/link/to/${address},${latitude},${longitude}`; + + return ( + + 길찾기 + + + ); +}; + +export default PathFinding; From 1598fdc9369063d5c3e03c762d90ead59b8a920a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8B=A4=EC=9D=B8?= Date: Wed, 18 Oct 2023 20:24:01 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EA=B8=B8=EC=B0=BE=EA=B8=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B8=ED=8F=AC=20?= =?UTF-8?q?=EC=9C=88=EB=8F=84=EC=9A=B0=20=EC=95=88=EC=97=90=20=EB=84=A3?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#879] --- .../ui/StationInfoWindow/StationInfo.tsx | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx b/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx index c024fbc5f..123a0fe00 100644 --- a/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx +++ b/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx @@ -13,6 +13,8 @@ import Text from '@common/Text'; import type { StationDetails } from '@type'; +import PathFinding from './PathFinding'; + export interface StationInfoProps { stationDetails: StationDetails; handleOpenStationDetail: () => void; @@ -24,8 +26,17 @@ const StationInfo = ({ handleOpenStationDetail, handleCloseStationWindow, }: StationInfoProps) => { - const { address, chargers, companyName, isParkingFree, isPrivate, stationId, stationName } = - stationDetails; + const { + address, + chargers, + companyName, + isParkingFree, + isPrivate, + stationId, + stationName, + longitude, + latitude, + } = stationDetails; const { isAvailable, @@ -91,14 +102,17 @@ const StationInfo = ({ - + + + + ); }; From feba61a2dd26df10db1909e7af535f2cb34e58e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8B=A4=EC=9D=B8?= Date: Wed, 18 Oct 2023 21:08:12 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EA=B8=B8=EC=B0=BE=EA=B8=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#879] --- .../ui/StationInfoWindow/PathFinding.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx b/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx index 667746454..897f0fbee 100644 --- a/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx +++ b/frontend/src/components/ui/StationInfoWindow/PathFinding.tsx @@ -1,18 +1,28 @@ import { BiSolidCar } from 'react-icons/bi'; import FlexBox from '@common/FlexBox'; +import type { FlexBoxProps } from '@common/FlexBox/FlexBox'; import Text from '@common/Text'; import type { Station } from '@type'; -type PathFindingProps = Pick; +interface PathFindingProps + extends Pick, + FlexBoxProps {} -const PathFinding = ({ address, latitude, longitude }: PathFindingProps) => { +const PathFinding = ({ address, latitude, longitude, ...props }: PathFindingProps) => { const KAKAO_MAP_LINK = `https://map.kakao.com/link/to/${address},${latitude},${longitude}`; return ( - - 길찾기 + + 길찾기 );