fix: 좋아요 장소 리스트 캐시 이슈 수정 및 css 수정

package.json

@@ -43,7 +43,7 @@
     "inko": "^1.1.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "next": "^14.2.1",
+    "next": "^14.2.2",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -57,7 +57,7 @@
     "@babel/core": "^7.21.4",
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
-    "@next/eslint-plugin-next": "^14.2.1",
+    "@next/eslint-plugin-next": "^14.2.2",
     "@nf-team/eslint-config": "^2.1.0",
     "@nf-team/stylelint-config": "^1.1.0",
     "@storybook/addon-essentials": "^7.5.2",

src/app/api/my/favorite-places/route.ts

@@ -35,6 +35,9 @@ export async function GET(request: NextRequest) {
       headers: {
         Authorization: `Bearer ${accessToken}`,
       },
+      config: {
+        cache: 'no-store',
+      },
     });
 
     const placeIds = response.items.map((item) => item.google_place_id);

src/components/common/PlaceItem/index.module.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  cursor: pointer;
 
   &:not(:last-of-type) {
     border-bottom: 1px solid color('gray/tertiary');

src/components/common/PlaceItem/index.tsx

@@ -3,9 +3,9 @@
 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';
@@ -28,13 +28,16 @@ type Props<T> = {
   address: T extends true ? string : undefined;
   distance: T extends true ? string : undefined;
   onRemove: (placeId: string) => void;
+  onClick?: (placeId: string) => void;
   wrapperRef?: ((node?: Element | null | undefined) => void);
 };
 
 function PlaceItem<T = boolean>({
   photoUrls, placeName, rating, userRatingsTotal, placeId,
-  searchBlogPost, isSavedPlace, nation, address, distance, wrapperRef, onRemove,
+  searchBlogPost, isSavedPlace, nation, address, distance, wrapperRef, onRemove, onClick,
 }: Props<T>) {
+  const onKeyDown = useActionKeyEvent<HTMLLIElement, [string]>(['Enter', 'NumpadEnter'], (_, id) => onClick?.(id));
+
   const removeFavoritePlace = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -43,11 +46,13 @@ function PlaceItem<T = boolean>({
   };
 
   return (
-    <Link
+    <li
       ref={wrapperRef}
-      href={`/place/${placeId}`}
-      role="listitem"
+      tabIndex={0}
+      onClick={() => onClick?.(placeId)}
+      onKeyDown={(e) => onKeyDown(e, placeId)}
       className={styles.placeItem}
+      role="menuitem"
     >
       <div className={styles.photos}>
         {photoUrls.map((photo, index) => (
@@ -79,7 +84,7 @@ function PlaceItem<T = boolean>({
           </div>
         )}
       </div>
-    </Link>
+    </li>
   );
 }
 

src/components/map/FavoritePlaces/index.module.scss

@@ -21,3 +21,12 @@
 .buttonWrapper {
   padding: 16px 24px 0;
 }
+
+.loadingWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 112px;
+  width: 100%;
+}