From 3d612b770ea122146f4d49755d2c5f4075309ad5 Mon Sep 17 00:00:00 2001
From: kurtyoon <akakertcobain@naver.com>
Date: Fri, 9 Feb 2024 20:50:11 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20Home=20Toggle=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Toggle/homeToggle/index.tsx | 11 ++++
 src/pages/Home/index.tsx                   | 61 +++++++++++-----------
 2 files changed, 42 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Toggle/homeToggle/index.tsx

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