Design: 다크 모드 location 아이콘 변경

eunji-0623 · Jul 22, 2024 · 2bc81b0 · 2bc81b0
1 parent 9e54f1c
commit 2bc81b0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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