diff --git a/src/components/Toggle/homeToggle/index.tsx b/src/components/Toggle/homeToggle/index.tsx new file mode 100644 index 0000000..6796124 --- /dev/null +++ b/src/components/Toggle/homeToggle/index.tsx @@ -0,0 +1,11 @@ +import {useRecoilState} from 'recoil'; +import {Toggle} from '../Toggle'; +import {toggleState} from '@/atoms/toggle'; +import {useLocation} from 'react-router-dom'; + +export default function HomeToggle() { + const nowUrl = useLocation(); + const [isOn, setIsOn] = useRecoilState(toggleState(nowUrl.pathname)); + const toggle = () => setIsOn(!isOn); + return ; +} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 6d8659c..e050473 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,59 +1,60 @@ -import { NaverMap } from '@/components/NaverMap'; +import {NaverMap} from '@/components/NaverMap'; import PageLayout from '@/components/PageLayout/PageLayout'; import GoToMyLocationButton from '@/components/Button/GoToMyLocationButton'; import GetCafeLocationButton from '@/components/Button/GetCafeLocationButton'; import * as Styled from './style'; -import { useRecoilState } from 'recoil'; -import { myLocationState, searchedLocationState } from '@/atoms/location'; +import {useRecoilState} from 'recoil'; +import {myLocationState, searchedLocationState} from '@/atoms/location'; import useGeolocation from '@/hooks/useGeolocation'; -import { Toggle } from '@/components/Toggle/Toggle'; +import {Toggle} from '@/components/Toggle/Toggle'; import FilterButton from '@/components/Button/FilterButton'; import useModal from '@/hooks/useModal'; import FilterModal from '@/components/Modal/FilterModal'; import useInput from '@/hooks/useInput'; import LocationSearchBar from '@/components/Search/LocationSearchBar'; +import HomeToggle from '@/components/Toggle/homeToggle'; export default function Home() { - const { coordinates } = useGeolocation(); + const {coordinates} = useGeolocation(); const {isOpen, openModal, closeModal} = useModal(); - const { setValue: setSearchTerm } = useInput(); - const [myLocation, ] = useRecoilState(myLocationState); + const {setValue: setSearchTerm} = useInput(); + const [myLocation] = useRecoilState(myLocationState); const [, setSearchedLocation] = useRecoilState(searchedLocationState); const handleMyLocationButtonClicked = () => { if (coordinates.lat && coordinates.lng) { - setSearchedLocation({ latitude: myLocation.latitude, longitude: myLocation.longitude }); + setSearchedLocation({ + latitude: myLocation.latitude, + longitude: myLocation.longitude, + }); setSearchTerm(''); } }; - - const handleFilterModalOpen= () => { + + const handleFilterModalOpen = () => { openModal(); }; return ( <> - - - handleFilterModalOpen()} /> - - - - - handleMyLocationButtonClicked()} /> - - - - - - - - {isOpen && ( - + + handleFilterModalOpen()} /> + + + + + handleMyLocationButtonClicked()} /> - )} + + + + + + + + {isOpen && } ); }