feat: 좋아요 장소 아이템 클릭시 상세 페이지 이동하도록 적용 (#315)

mbti-nf-team · Apr 21, 2024 · 31f0d3d · 31f0d3d
1 parent f6dfc95
commit 31f0d3d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/src/components/common/PlaceItem/index.tsx b/src/components/common/PlaceItem/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { memo } from 'react';
+import { memo, MouseEvent } from 'react';
 
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { checkNumber } from '@nf-team/core';
-import { useActionKeyEvent } from '@nf-team/react';
 
 import { ArchiveSolidIcon } from '@/lib/assets/icons';
 import { NaverSearchBlog } from '@/lib/types/blog';
@@ -27,26 +27,26 @@ type Props<T> = {
   nation: T extends true ? string : undefined;
   address: T extends true ? string : undefined;
   distance: T extends true ? string : undefined;
-  onClick?: (placeId: string) => void;
   onRemove: (placeId: string) => void;
   wrapperRef?: ((node?: Element | null | undefined) => void);
 };
 
 function PlaceItem<T = boolean>({
   photoUrls, placeName, rating, userRatingsTotal, placeId,
-  searchBlogPost, isSavedPlace, nation, address, distance, onClick, wrapperRef, onRemove,
+  searchBlogPost, isSavedPlace, nation, address, distance, wrapperRef, onRemove,
 }: Props<T>) {
-  const onKeyDown = useActionKeyEvent<HTMLLIElement, [string]>(['Enter', 'NumpadEnter'], (_, id) => onClick?.(id));
+  const removeFavoritePlace = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
 
-  const removeFavoritePlace = () => onRemove(placeId);
+    onRemove(placeId);
+  };
 
   return (
-    <li
+    <Link
       ref={wrapperRef}
-      tabIndex={0}
-      onClick={() => onClick?.(placeId)}
-      onKeyDown={(e) => onKeyDown(e, placeId)}
-      role="menuitem"
+      href={`/place/${placeId}`}
+      role="listitem"
       className={styles.placeItem}
     >
       <div className={styles.photos}>
@@ -79,7 +79,7 @@ function PlaceItem<T = boolean>({
           </div>
         )}
       </div>
-    </li>
+    </Link>
   );
 }
 

diff --git a/src/components/map/FavoritePlaces/index.tsx b/src/components/map/FavoritePlaces/index.tsx
@@ -32,7 +32,7 @@ function FavoritePlaces({ isMenu }: Props) {
 
   return (
     <div>
-      <ul className={styles.savedPlacesWrapper}>
+      <div role="list" className={styles.savedPlacesWrapper}>
         {favoritePlaces?.pages?.map(({ items }, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <Fragment key={index}>
@@ -55,7 +55,7 @@ function FavoritePlaces({ isMenu }: Props) {
             ))}
           </Fragment>
         ))}
-      </ul>
+      </div>
       {isMenu && checkNumber(favoritePlaces?.pages?.[0].total_count) > 5 && (
         <div className={styles.buttonWrapper}>
           <Button href="/my/favorite-places" size="small" color="highlight">