Merge branch 'develop-frontend' into 503-bug-잘못된-api-명세로-인한-코드-수정

frontend/src/api/restaurant.ts

@@ -4,10 +4,14 @@ import type { RestaurantListData } from '~/@types/api.types';
 import type { RestaurantsQueryParams } from '~/@types/restaurant.types';
 
 export const getRestaurants = async (queryParams: RestaurantsQueryParams) => {
-  const queryString = getQueryString(queryParams);
-  const response = await apiUserClient.get<RestaurantListData>(`/restaurants?${queryString}`);
+  if (queryParams.boundary) {
+    const queryString = getQueryString(queryParams);
+    const response = await apiClient.get<RestaurantListData>(`/restaurants?${queryString}`);
 
-  return response.data;
+
+    return response.data;
+  }
+  return null;
 };
 
 export const getRestaurantDetail = async (restaurantId: string, celebId: string) => {

frontend/src/components/@common/Map/Map.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Wrapper, Status } from '@googlemaps/react-wrapper';
-import { styled } from 'styled-components';
+import { styled, keyframes } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 import MapContent from './MapContent';
 import OverlayMyLocation from './OverlayMyLocation';
@@ -101,6 +101,8 @@ function Map({ toggleMapExpand }: MapProps) {
     toggleMapExpand();
   };
 
+  const setMapLoadingState = (state: boolean) => setLoading(state);
+
   return (
     <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} render={render} language="ko" libraries={['places']}>
       <MapContent
@@ -110,7 +112,7 @@ function Map({ toggleMapExpand }: MapProps) {
         zoom={zoom}
         center={center}
       >
-        <OverlayMarkerList center={currentCenter} />
+        <OverlayMarkerList center={currentCenter} setMapLoadingState={setMapLoadingState} />
         {myPosition && <OverlayMyLocation position={myPosition} />}
         {loading && (
           <StyledLoadingUI>
@@ -141,6 +143,17 @@ function Map({ toggleMapExpand }: MapProps) {
 
 export default Map;
 
+const fadeIn = keyframes`
+  from {
+    scale: 0.8;
+    opacity: 0;
+  }
+  to {
+    scale:1;
+    opacity: 1;
+  }
+`;
+
 const StyledLoadingUI = styled.div`
   ${mapUIBase}
   position: absolute;
@@ -149,6 +162,8 @@ const StyledLoadingUI = styled.div`
 
   width: 82px;
   height: 40px;
+
+  animation: ${fadeIn} 0.4s ease-in;
 `;
 
 const StyledMyPositionButtonUI = styled.button`

frontend/src/components/@common/Map/OverlayMarker.tsx

@@ -1,5 +1,5 @@
 import styled, { css, keyframes } from 'styled-components';
-import { MouseEvent, useRef, useState } from 'react';
+import { MouseEvent, memo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ProfileImage from '../ProfileImage';
 import Overlay from './Overlay/Overlay';
@@ -86,7 +86,14 @@ function OverlayMarker({ celeb, restaurant, map, quadrant }: OverlayMarkerProps)
   );
 }
 
-export default OverlayMarker;
+function areEqual(prevProps: OverlayMarkerProps, nextProps: OverlayMarkerProps) {
+  const { restaurant: prevRestaurant, celeb: prevCeleb } = prevProps;
+  const { restaurant: nextRestaurant, celeb: nextCeleb } = nextProps;
+
+  return prevRestaurant.id === nextRestaurant.id && prevCeleb.id === nextCeleb.id;
+}
+
+export default memo(OverlayMarker, areEqual);
 
 const StyledMarkerContainer = styled.div`
   position: relative;

frontend/src/components/@common/Map/OverlayMarkerList.tsx

@@ -1,5 +1,6 @@
 import { shallow } from 'zustand/shallow';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import getQuadrant from '~/utils/getQuadrant';
 import OverlayMarker from './OverlayMarker';
 import useRestaurantsQueryStringState from '~/hooks/store/useRestaurantsQueryStringState';
@@ -10,25 +11,34 @@ import type { Coordinate } from '~/@types/map.types';
 interface OverlayMarkerListProps {
   center: Coordinate;
   map?: google.maps.Map;
+  setMapLoadingState: (state: boolean) => void;
 }
 
-function OverlayMarkerList({ center, map }: OverlayMarkerListProps) {
+function OverlayMarkerList({ center, map, setMapLoadingState }: OverlayMarkerListProps) {
   const [boundary, celebId, currentPage, restaurantCategory, sort] = useRestaurantsQueryStringState(
     state => [state.boundary, state.celebId, state.currentPage, state.restaurantCategory, state.sort],
     shallow,
   );
 
-  const { data, isLoading } = useQuery<RestaurantListData>({
+  const { data, isFetching } = useQuery<RestaurantListData>({
     queryKey: ['restaurants', boundary, celebId, restaurantCategory, currentPage, sort],
     queryFn: () => getRestaurants({ boundary, celebId, category: restaurantCategory, page: currentPage, sort }),
+    keepPreviousData: true,
   });
 
-  if (isLoading) return <div>로딩중입니다...</div>;
+  useEffect(() => {
+    if (isFetching) {
+      setMapLoadingState(true);
+      return;
+    }
+    setMapLoadingState(false);
+  }, [isFetching]);
 
   return (
     map &&
-    data.content?.map(({ celebs, ...restaurant }) => (
+    data?.content?.map(({ celebs, ...restaurant }) => (
       <OverlayMarker
+        key={restaurant.id}
         map={map}
         restaurant={restaurant}
         celeb={celebs[0]}

frontend/src/components/@common/ProfileImage/ProfileImage.tsx

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { paintSkeleton } from '~/styles/common';
 
 interface ProfileImageProps extends React.HTMLAttributes<HTMLImageElement> {
   name: string;
@@ -13,6 +14,7 @@ function ProfileImage({ name = '셀럽', imageUrl, size, ...props }: ProfileImag
 export default ProfileImage;
 
 const StyledProfile = styled.img<{ size: string }>`
+  ${paintSkeleton}
   width: ${({ size }) => size || 'auto'};
   height: ${({ size }) => size || 'auto'};
 

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ImageCarousel from '../@common/ImageCarousel';
 import Love from '~/assets/icons/love.svg';
@@ -27,9 +27,7 @@ function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId
 
   const onMouseEnter = () => setHoveredId(restaurant.id);
   const onMouseLeave = () => setHoveredId(null);
-  const onClick = () => {
-    navigate(`/restaurants/${id}?celebId=${celebs[0].id}`);
-  };
+  const onClick = () => navigate(`/restaurants/${id}?celebId=${celebs[0].id}`);
 
   const toggle: MouseEventHandler<HTMLButtonElement> = e => {
     e.stopPropagation();
@@ -71,7 +69,14 @@ function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId
   );
 }
 
-export default RestaurantCard;
+function areEqual(prevProps: RestaurantCardProps, nextProps: RestaurantCardProps) {
+  const { restaurant: prevRestaurant, celebs: prevCelebs } = prevProps;
+  const { restaurant: nextRestaurant, celebs: nextCelebs } = nextProps;
+
+  return prevRestaurant.id === nextRestaurant.id && prevCelebs[0].id === nextCelebs[0].id;
+}
+
+export default memo(RestaurantCard, areEqual);
 
 const StyledContainer = styled.li`
   display: flex;

frontend/src/components/RestaurantCardList/RestaurantCardList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { styled, css } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 import { useQuery } from '@tanstack/react-query';
@@ -17,7 +17,6 @@ import { getRestaurants } from '~/api/restaurant';
 
 function RestaurantCardList() {
   const { isMobile } = useMediaQuery();
-  const [prevCardNumber, setPrevCardNumber] = useState(18);
   const [boundary, celebId, currentPage, restaurantCategory, setCurrentPage, sort, setSort] =
     useRestaurantsQueryStringState(
       state => [
@@ -32,9 +31,10 @@ function RestaurantCardList() {
       shallow,
     );
 
-  const { data: restaurantDataList, isLoading } = useQuery<RestaurantListData>({
+  const { data: restaurantDataList } = useQuery<RestaurantListData>({
     queryKey: ['restaurants', boundary, celebId, restaurantCategory, currentPage, sort],
     queryFn: () => getRestaurants({ boundary, celebId, category: restaurantCategory, page: currentPage, sort }),
+    keepPreviousData: true,
   });
 
   const [setHoveredId] = useHoveredRestaurantState(state => [state.setId]);
@@ -53,14 +53,10 @@ function RestaurantCardList() {
     if (isMobile) setSort('distance');
   }, []);
 
-  useEffect(() => {
-    if (restaurantDataList) setPrevCardNumber(restaurantDataList.currentElementsCount);
-  }, [restaurantDataList?.currentElementsCount]);
-
-  if (isLoading)
+  if (!restaurantDataList)
     return (
       <StyledSkeleton>
-        <RestaurantCardListSkeleton cardNumber={prevCardNumber} />
+        <RestaurantCardListSkeleton cardNumber={restaurantDataList?.content?.length || 18} />
       </StyledSkeleton>
     );
 
@@ -76,7 +72,13 @@ function RestaurantCardList() {
           )}
           <StyledRestaurantCardList isMobile={isMobile}>
             {restaurantDataList.content?.map(({ celebs, ...restaurant }: RestaurantData) => (
-              <RestaurantCard restaurant={restaurant} celebs={celebs} size="42px" setHoveredId={setHoveredId} />
+              <RestaurantCard
+                key={`${restaurant.id}${celebs[0].id}`}
+                restaurant={restaurant}
+                celebs={celebs}
+                size="42px"
+                setHoveredId={setHoveredId}
+              />
             ))}
           </StyledRestaurantCardList>
           <PageNationBar

frontend/src/index.tsx

@@ -10,7 +10,14 @@ import '~/assets/fonts/font.css';
 if (process.env.NODE_ENV === 'development') worker.start();
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
 
 root.render(
   <>