Feat: Home Toggle 분리 적용

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 <Toggle isOn={isOn} toggle={toggle} />;
+}

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 (
  <>
- <PageLayout>
- <Styled.ButtonsWrapper>
- <FilterButton onClick={() => handleFilterModalOpen()} />
- <Toggle />
- </Styled.ButtonsWrapper>
- <LocationSearchBar />
- <Styled.ButtonContainer>
- <GoToMyLocationButton onClick={() => handleMyLocationButtonClicked()} />
- <Styled.CenteredButton>
- <GetCafeLocationButton />
- </Styled.CenteredButton>
- </Styled.ButtonContainer>
- <NaverMap />
- </PageLayout>
-
- {isOpen && (
- <FilterModal 
- isOpen={isOpen}
- onClose={closeModal}
+ <PageLayout>
+ <Styled.ButtonsWrapper>
+ <FilterButton onClick={() => handleFilterModalOpen()} />
+ <HomeToggle />
+ </Styled.ButtonsWrapper>
+ <LocationSearchBar />
+ <Styled.ButtonContainer>
+ <GoToMyLocationButton
+ onClick={() => handleMyLocationButtonClicked()}
  />
- )}
+ <Styled.CenteredButton>
+ <GetCafeLocationButton />
+ </Styled.CenteredButton>
+ </Styled.ButtonContainer>
+ <NaverMap />
+ </PageLayout>
+
+ {isOpen && <FilterModal isOpen={isOpen} onClose={closeModal} />}
  </>
  );
 }