feat: 레스토랑 카드에 loading 상태 추가 및 skeleton 반영

frontend/src/@types/api.types.ts

@@ -1,3 +1,12 @@
+export interface RestaurantListData {
+  content: RestaurantData[];
+  currentElementsCount: number;
+  currentPage: number;
+  pageSize: number;
+  totalElementsCount: number;
+  totalPage: number;
+}
+
 export interface RestaurantData {
   id: number;
   name: string;

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

@@ -14,7 +14,7 @@ export default LoadingDots;
 
 const StyledLoadingDots = styled.div`
   display: flex;
-  gap: 0 0.6rem;
+  gap: 0 1.4rem;
 
   & > div:nth-child(2) {
     animation-delay: 0.14s;
@@ -30,13 +30,13 @@ const pulseAnimation = keyframes`
     transform: scale(0);
   }
   90%, 100% {
-    transform: scale(1);
+    transform: scale(10);
   }
 `;
 
 const StyledLoadingDot = styled.div`
-  width: 12px;
-  height: 12px;
+  width: 1.2px;
+  height: 1.2px;
 
   border-radius: 50%;
   background-color: var(--black);

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

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Wrapper, Status } from '@googlemaps/react-wrapper';
 import { styled } from 'styled-components';
-import OverlayMarker from './OverlayMarker';
 import MapContent from './MapContent';
 import OverlayMyLocation from './OverlayMyLocation';
 import LoadingDots from '../LoadingDots';
@@ -12,6 +11,7 @@
 import Minus from '~/assets/icons/minus.svg';
 import Plus from '~/assets/icons/plus.svg';
 import getQuadrant from '~/utils/getQuadrant';
+import OverlayMarker from './OverlayMarker';
 
 import type { Coordinate, CoordinateBoundary } from '~/@types/map.types';
 import type { RestaurantData } from '~/@types/api.types';
@@ -21,18 +21,33 @@
   hoveredId: number | null;
   setBoundary: React.Dispatch<React.SetStateAction<CoordinateBoundary>>;
   toggleMapExpand: () => void;
+  loadingData: boolean;
 }
 
 const render = (status: Status) => {
   if (status === Status.FAILURE)
     return <div>지도를 불러올 수 없습니다. 페이지를 새로고침 하거나 네트워크 연결을 다시 한 번 확인해주세요.</div>;
-  return <LoadingDots />;
+  return (
+    <StyledMapLoadingContainer>
+      <LoadingDots />
+    </StyledMapLoadingContainer>
+  );
 };
 
+const StyledMapLoadingContainer = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 100%;
+
+  background-color: var(--gray-2);
+`;
+
 const JamsilCampus = { lat: 37.515271, lng: 127.1029949 };
 
-function Map({ data, setBoundary, toggleMapExpand, hoveredId }: MapProps) {
-  const [center, setCenter] = useState<Coordinate>(JamsilCampus);
+function Map({ data, setBoundary, toggleMapExpand, loadingData, hoveredId }: MapProps) {
+  const [center, setCenter] = useState<Coordinate>({ lat: 37.5057482, lng: 127.050727 });
   const [clicks, setClicks] = useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = useState(16);
   const [myPosition, setMyPosition] = useState<Coordinate | null>(null);
@@ -41,11 +56,11 @@
   const [currentCenter, setCurrentCenter] = useState<Coordinate>(JamsilCampus);
 
   const onClick = (e: google.maps.MapMouseEvent) => {
     setClicks([...clicks, e.latLng!]);
   };
 
   const onIdle = (m: google.maps.Map) => {
     setZoom(m.getZoom()!);
     setCurrentCenter({ lat: m.getCenter().lat(), lng: m.getCenter().lng() });
 
     const lowLatitude = String(m.getBounds().getSouthWest().lat());
@@ -86,7 +101,7 @@
         zoom={zoom}
         center={center}
       >
-        {data.map(({ celebs, ...restaurant }) => {
+        {data?.map(({ celebs, ...restaurant }) => {
           const { lat, lng } = restaurant;
           return (
             <OverlayMarker
@@ -98,7 +113,7 @@
           );
         })}
         {myPosition && <OverlayMyLocation position={myPosition} />}
-        {loading && (
+        {(loadingData || loading) && (
           <LoadingUI>
             <LoadingDots />
           </LoadingUI>
@@ -132,8 +147,7 @@
   right: calc(50% - 41px);
 
   width: 82px;
-
-  padding: 1.6rem 2.4rem;
+  height: 40px;
 `;
 
 const StyledMyPositionButtonUI = styled.button`

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

@@ -0,0 +1,21 @@
+import { styled } from 'styled-components';
+import { paintSkeleton } from '~/styles/common';
+
+interface ProfileImageSkeletonProps {
+  size: number;
+}
+
+function ProfileImageSkeleton({ size }: ProfileImageSkeletonProps) {
+  return <StyledProfileImageSkeleton size={size} />;
+}
+
+export default ProfileImageSkeleton;
+
+const StyledProfileImageSkeleton = styled.div<{ size: number }>`
+  ${paintSkeleton}
+  width: ${({ size }) => (size ? `${size}px` : '100%')};
+  height: ${({ size }) => (size ? `${size}px` : 'auto')};
+
+  border-radius: 50%;
+  background: none;
+`;

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { BORDER_RADIUS, FONT_SIZE, truncateText } from '~/styles/common';
+import { BORDER_RADIUS, FONT_SIZE, paintSkeleton, truncateText } from '~/styles/common';
 import ProfileImage from '../@common/ProfileImage';
 import { BASE_URL } from '~/App';
 
@@ -35,7 +35,7 @@ function RestaurantCard({
 
   return (
     <StyledContainer onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      <StyledImage alt={`${name} 대표 이미지`} src={`${BASE_URL}images-data/${images[0].name}`} type={type} />
+      <StyledImage alt={`${name} 대표 이미지`} src={`${BASE_URL}/images-data/${images[0].name}`} type={type} />
       <section>
         <StyledInfo>
           <StyledCategory>{category}</StyledCategory>
@@ -71,11 +71,12 @@ const StyledContainer = styled.div`
 `;
 
 const StyledImage = styled.img<{ type: 'list' | 'map' }>`
+  ${paintSkeleton}
   width: 100%;
   aspect-ratio: 1.05 / 1;
 
   border-radius: ${({ type }) =>
-    type === 'list' ? `${BORDER_RADIUS.md}` : `${BORDER_RADIUS.md} ${BORDER_RADIUS.md} 0 0`};
+    type === 'list' ? `${BORDER_RADIUS.md}` : `${BORDER_RADIUS.md} ${BORDER_RADIUS.md} 0 0 `};
 
   object-fit: cover;
 `;

frontend/src/components/RestaurantCard/RestaurantCardSkeleton.tsx

@@ -0,0 +1,92 @@
+import { styled } from 'styled-components';
+import ProfileImageSkeleton from '../@common/ProfileImage/ProfileImageSkeleton';
+import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
+
+function RestaurantCardSkeleton() {
+  return (
+    <StyledContainer>
+      <StyledImage />
+      <section>
+        <StyledInfo>
+          <StyledCategory />
+          <StyledName />
+          <StyledAddress />
+          <StyledAddress />
+        </StyledInfo>
+        <StyledProfileImageSection>
+          <ProfileImageSkeleton size={42} />
+        </StyledProfileImageSection>
+      </section>
+    </StyledContainer>
+  );
+}
+
+export default RestaurantCardSkeleton;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  gap: 0.8rem;
+
+  width: 100%;
+  height: 100%;
+
+  & > section {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  cursor: pointer;
+`;
+
+const StyledImage = styled.div`
+  ${paintSkeleton}
+  width: 100%;
+  aspect-ratio: 1.05 / 1;
+
+  object-fit: cover;
+
+  border-radius: ${BORDER_RADIUS.md};
+`;
+
+const StyledInfo = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  position: relative;
+
+  width: 100%;
+
+  padding: 0.4rem;
+`;
+
+const StyledName = styled.h5`
+  ${paintSkeleton}
+  width: 100%;
+  height: 20px;
+
+  border-radius: ${BORDER_RADIUS.xs};
+`;
+
+const StyledAddress = styled.span`
+  ${paintSkeleton}
+  width: 50%;
+  height: 12px;
+
+  border-radius: ${BORDER_RADIUS.xs};
+`;
+
+const StyledCategory = styled.span`
+  ${paintSkeleton}
+  width: 40%;
+  height: 12px;
+
+  border-radius: ${BORDER_RADIUS.xs};
+`;
+
+const StyledProfileImageSection = styled.div`
+  align-self: flex-end;
+`;

frontend/src/components/RestaurantCardList/RestaurantCardList.tsx

@@ -0,0 +1,56 @@
+import { styled } from 'styled-components';
+import { useEffect, useState } from 'react';
+import RestaurantCard from '../RestaurantCard/RestaurantCard';
+import { FONT_SIZE } from '~/styles/common';
+import RestaurantCardListSkeleton from './RestaurantCardListSkeleton';
+
+import type { RestaurantData, RestaurantListData } from '~/@types/api.types';
+
+interface RestaurantCardListProps {
+  restaurantDataList: RestaurantListData | null;
+  loading: boolean;
+  setHoveredId: React.Dispatch<React.SetStateAction<number>>;
+}
+
+function RestaurantCardList({ restaurantDataList, loading, setHoveredId }: RestaurantCardListProps) {
+  const [prevCardNumber, setPrevCardNumber] = useState(18);
+
+  useEffect(() => {
+    if (restaurantDataList) setPrevCardNumber(restaurantDataList.currentElementsCount);
+  }, [restaurantDataList?.currentElementsCount]);
+
+  if (!restaurantDataList || loading) return <RestaurantCardListSkeleton cardNumber={prevCardNumber} />;
+
+  return (
+    <div>
+      <StyledCardListHeader>음식점 수 {restaurantDataList.totalElementsCount} 개</StyledCardListHeader>
+      <StyledRestaurantCardList>
+        {restaurantDataList.content?.map(({ celebs, ...restaurant }: RestaurantData) => (
+          <RestaurantCard restaurant={restaurant} celebs={celebs} size="42px" setHoveredId={setHoveredId} />
+        ))}
+      </StyledRestaurantCardList>
+    </div>
+  );
+}
+
+export default RestaurantCardList;
+
+const StyledCardListHeader = styled.p`
+  margin: 3.2rem 2.4rem;
+
+  font-size: ${FONT_SIZE.md};
+`;
+
+const StyledRestaurantCardList = styled.div`
+  display: grid;
+  gap: 4rem 2.4rem;
+
+  height: 100%;
+
+  margin: 0 2.4rem;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  @media screen and (width <= 1240px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`;

frontend/src/components/RestaurantCardList/RestaurantCardListSkeleton.tsx

@@ -0,0 +1,46 @@
+import { styled } from 'styled-components';
+import RestaurantCardSkeleton from '../RestaurantCard/RestaurantCardSkeleton';
+import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
+
+interface RestaurantCardListSkeletonProps {
+  cardNumber: number;
+}
+
+function RestaurantCardListSkeleton({ cardNumber }: RestaurantCardListSkeletonProps) {
+  return (
+    <div>
+      <StyledCardListHeader />
+      <StyledRestaurantCardList>
+        {Array.from({ length: cardNumber }, () => (
+          <RestaurantCardSkeleton />
+        ))}
+      </StyledRestaurantCardList>
+    </div>
+  );
+}
+
+export default RestaurantCardListSkeleton;
+
+const StyledCardListHeader = styled.p`
+  ${paintSkeleton}
+  width: 35%;
+  height: 16px;
+
+  margin: 3.2rem 2.4rem;
+
+  border-radius: ${BORDER_RADIUS.xs};
+`;
+
+const StyledRestaurantCardList = styled.div`
+  display: grid;
+  gap: 4rem 2.4rem;
+
+  height: 100%;
+
+  margin: 0 2.4rem;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  @media screen and (width <= 1240px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`;

frontend/src/components/RestaurantCardList/index.tsx

@@ -0,0 +1,3 @@
+import RestaurantCardList from './RestaurantCardList';
+
+export default RestaurantCardList;

frontend/src/hooks/useOnClickOuside.ts

@@ -0,0 +1,19 @@
+import { useEffect, RefObject } from 'react';
+
+export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event?: Event | MouseEvent) => void,
+) {
+  useEffect(() => {
+    function onClickHandler(event: Event | MouseEvent) {
+      if (!ref?.current || ref?.current.contains(event?.target as Node)) {
+        return;
+      }
+      handler(event);
+    }
+    window.addEventListener('click', onClickHandler);
+    return () => {
+      window.removeEventListener('click', onClickHandler);
+    };
+  }, [ref, handler]);
+}