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 && }
>
);
}