From 2bc81b0aa6e64f6623db6a9acfd2f4c27254bd6e Mon Sep 17 00:00:00 2001
From: MEGUMMY1 <cys10902@nate.com>
Date: Mon, 22 Jul 2024 13:49:17 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EB=8B=A4=ED=81=AC=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20location=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ActivityDetails/ActivityDetails.tsx | 8 +++++++-
 components/ActivityDetails/Map/Map.tsx         | 2 +-
 public/icon/location_gray.svg                  | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 public/icon/location_gray.svg

diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
index 43d4437..ad7d5e1 100644
--- a/components/ActivityDetails/ActivityDetails.tsx
+++ b/components/ActivityDetails/ActivityDetails.tsx
@@ -27,10 +27,12 @@ import { ShareButton } from '../ ShareButton/ShareButton';
 import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
+import { darkModeState } from '@/states/themeState';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
+  const isDarkMode = useRecoilValue(darkModeState);
   const [currentPage, setCurrentPage] = useState<number>(
     router.query.page ? parseInt(router.query.page as string, 10) : 1
   );
@@ -147,7 +149,11 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
               <div className="flex gap-1 items-center justify-center m:items-start">
                 <Image
-                  src="/icon/location.svg"
+                  src={
+                    isDarkMode
+                      ? '/icon/location_gray.svg'
+                      : '/icon/location.svg'
+                  }
                   alt="위치 아이콘"
                   width={18}
                   height={18}
diff --git a/components/ActivityDetails/Map/Map.tsx b/components/ActivityDetails/Map/Map.tsx
index 57e8996..49dad38 100644
--- a/components/ActivityDetails/Map/Map.tsx
+++ b/components/ActivityDetails/Map/Map.tsx
@@ -163,7 +163,7 @@ export default function Map({ address }: MapProps) {
       />
       <div className="flex gap-1 mt-2 items-center">
         <Image
-          src="/icon/location.svg"
+          src={isDarkMode ? '/icon/location_gray.svg' : '/icon/location.svg'}
           alt="위치 아이콘"
           width={18}
           height={18}
diff --git a/public/icon/location_gray.svg b/public/icon/location_gray.svg
new file mode 100644
index 0000000..35db4dc
--- /dev/null
+++ b/public/icon/location_gray.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 7.875C9.62132 7.875 10.125 7.37132 10.125 6.75C10.125 6.12868 9.62132 5.625 9 5.625C8.37868 5.625 7.875 6.12868 7.875 6.75C7.875 7.37132 8.37868 7.875 9 7.875Z" fill="#CED8D5"/>
+<path d="M9 1.125C5.89852 1.125 3.375 3.53848 3.375 6.50391C3.375 7.91613 4.01871 9.79418 5.2882 12.086C6.30773 13.9261 7.48723 15.59 8.1007 16.418C8.20437 16.5594 8.33991 16.6745 8.49633 16.7538C8.65276 16.8331 8.82567 16.8744 9.00105 16.8744C9.17644 16.8744 9.34935 16.8331 9.50578 16.7538C9.6622 16.6745 9.79774 16.5594 9.90141 16.418C10.5138 15.59 11.6944 13.9261 12.7139 12.086C13.9813 9.79488 14.625 7.91684 14.625 6.50391C14.625 3.53848 12.1015 1.125 9 1.125ZM9 9C8.55499 9 8.11998 8.86804 7.74997 8.62081C7.37996 8.37357 7.09157 8.02217 6.92127 7.61104C6.75097 7.1999 6.70642 6.7475 6.79323 6.31105C6.88005 5.87459 7.09434 5.47368 7.40901 5.15901C7.72368 4.84434 8.12459 4.63005 8.56105 4.54323C8.9975 4.45642 9.4499 4.50097 9.86104 4.67127C10.2722 4.84157 10.6236 5.12996 10.8708 5.49997C11.118 5.86998 11.25 6.30499 11.25 6.75C11.2493 7.34654 11.0121 7.91846 10.5903 8.34027C10.1685 8.76209 9.59654 8.99935 9 9Z" fill="#CED8D5"/>
+</svg>