feat: 레스토랑 카드 및 마커 클릭 이벤트 변경

frontend/src/App.tsx

@@ -1,5 +1,7 @@
 import MainPage from './pages/MainPage';
 
+export const { BASE_URL } = process.env;
+
 function App() {
   return <MainPage />;
 }

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

@@ -2,8 +2,6 @@
 import { Wrapper, Status } from '@googlemaps/react-wrapper';
 import { styled } from 'styled-components';
 import OverlayMarker from './OverlayMarker';
-import type { Coordinate, CoordinateBoundary } from '~/@types/map.types';
-import type { Celeb } from '~/@types/celeb.types';
 import MapContent from './MapContent';
 import OverlayMyLocation from './OverlayMyLocation';
 import LoadingDots from '../LoadingDots';
@@ -13,10 +11,14 @@
 import RightBracket from '~/assets/icons/right-bracket.svg';
 import Minus from '~/assets/icons/minus.svg';
 import Plus from '~/assets/icons/plus.svg';
+import getQuadrant from '~/utils/getQuadrant';
+
+import type { Coordinate, CoordinateBoundary } from '~/@types/map.types';
+import type { RestaurantData } from '~/@types/api.types';
 
 interface MapProps {
-  clickMarker: ({ lat, lng }: Coordinate) => void;
-  markers: { position: Coordinate; celebs: Celeb[] }[];
+  data: RestaurantData[];
+  hoveredId: number | null;
   setBoundary: React.Dispatch<React.SetStateAction<CoordinateBoundary>>;
   toggleMapExpand: () => void;
 }
@@ -27,20 +29,24 @@
   return <LoadingDots />;
 };
 
-function Map({ clickMarker, markers, setBoundary, toggleMapExpand }: MapProps) {
-  const [center, setCenter] = useState<Coordinate>({ lat: 37.5057482, lng: 127.050727 });
+const JamsilCampus = { lat: 37.515271, lng: 127.1029949 };
+
+function Map({ data, setBoundary, toggleMapExpand, hoveredId }: MapProps) {
+  const [center, setCenter] = useState<Coordinate>(JamsilCampus);
   const [clicks, setClicks] = useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = useState(16);
   const [myPosition, setMyPosition] = useState<Coordinate | null>(null);
   const [isMapExpanded, setIsMapExpanded] = useState(false);
   const [loading, setLoading] = useState(false);
+  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());
     const highLatitude = String(m.getBounds().getNorthEast().lat());
@@ -60,11 +66,6 @@
     });
   };
 
-  const clickOverlayMarker = (position: Coordinate) => {
-    clickMarker(position);
-    setCenter(position);
-  };
-
   const clickZoom =
     (number: number): React.MouseEventHandler<HTMLButtonElement> =>
     () => {
@@ -85,9 +86,17 @@
         zoom={zoom}
         center={center}
       >
-        {markers.map(({ position, celebs }) => (
-          <OverlayMarker position={position} onClick={clickOverlayMarker} celeb={celebs[0]} />
-        ))}
+        {data.map(({ celebs, ...restaurant }) => {
+          const { lat, lng } = restaurant;
+          return (
+            <OverlayMarker
+              restaurant={restaurant}
+              celeb={celebs[0]}
+              quadrant={getQuadrant(currentCenter, { lat, lng })}
+              isRestaurantHovered={restaurant.id === hoveredId}
+            />
+          );
+        })}
         {myPosition && <OverlayMyLocation position={myPosition} />}
         {loading && (
           <LoadingUI>

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

@@ -14,6 +14,7 @@ function Overlay({ position, pane = 'floatPane', map, zIndex, children }: Overla
   const container = useMemo(() => {
     const div = document.createElement('div');
     div.style.position = 'absolute';
+
     return div;
   }, []);
 

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

@@ -1,37 +1,102 @@
-import styled from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
+import { useRef, useState } from 'react';
 import ProfileImage from '../ProfileImage';
 import Overlay from './Overlay/Overlay';
+import RestaurantCard from '~/components/RestaurantCard';
+import useOnClickOutside from '~/hooks/useOnClickOutside';
+
+import type { Quadrant } from '~/utils/getQuadrant';
+import type { Restaurant } from '~/@types/restaurant.types';
 import type { Celeb } from '~/@types/celeb.types';
-import type { Coordinate } from '~/@types/map.types';
 
 interface OverlayMarkerProps {
   celeb: Celeb;
-  position: Coordinate;
-  onClick: ({ lat, lng }: Coordinate) => void;
   map?: google.maps.Map;
+  restaurant: Restaurant;
+  quadrant: Quadrant;
+  isRestaurantHovered: boolean;
 }
 
-function OverlayMarker({ celeb, position, map, onClick }: OverlayMarkerProps) {
+function OverlayMarker({ celeb, restaurant, map, quadrant, isRestaurantHovered }: OverlayMarkerProps) {
+  const { lat, lng } = restaurant;
+  const [isClicked, setIsClicked] = useState(false);
+  const ref = useRef();
+  useOnClickOutside(ref, () => setIsClicked(false));
+
+  const clickMarker = () => setIsClicked(true);
+
   return (
     map && (
-      <Overlay position={position} map={map}>
-        <StyledMarker type="button" onClick={() => onClick(position)}>
-          <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} size={32} border />
+      <Overlay position={{ lat, lng }} map={map} zIndex={isClicked || isRestaurantHovered ? 18 : 0}>
+        <StyledMarker onClick={clickMarker} isClicked={isClicked} isRestaurantHovered={isRestaurantHovered} ref={ref}>
+          <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} border size="100%" />
         </StyledMarker>
+        {isClicked && (
+          <StyledModal quadrant={quadrant}>
+            <RestaurantCard restaurant={restaurant} type="map" />
+          </StyledModal>
+        )}
       </Overlay>
     )
   );
 }
 
-const StyledMarker = styled.button`
-  border: none;
-  background-color: transparent;
+const scaleUp = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.5);
+  }
+`;
+
+const StyledMarker = styled.div<{ isClicked: boolean; isRestaurantHovered: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 36px;
+  height: 36px;
 
-  transition: all 0.2s ease-in-out;
+  border: ${({ isClicked, isRestaurantHovered }) =>
+    isClicked || isRestaurantHovered ? '3px solid var(--orange-2)' : '3px solid transparent'};
+  border-radius: 50%;
+
+  transition: transform 0.2s ease-in-out;
+  transform: ${({ isClicked }) => (isClicked ? 'scale(1.5)' : 'scale(1)')};
 
   &:hover {
-    transform: scale(1.1);
+    transform: scale(1.5);
   }
+
+  ${({ isRestaurantHovered }) =>
+    isRestaurantHovered &&
+    css`
+      animation: ${scaleUp} 0.2s ease-in-out forwards;
+    `}
+`;
+
+const fadeInAnimation = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const StyledModal = styled.div<{ quadrant: Quadrant }>`
+  position: absolute;
+  top: ${({ quadrant }) => (quadrant === 1 || quadrant === 2 ? '40px' : '-280px')};
+  right: ${({ quadrant }) => (quadrant === 1 || quadrant === 4 ? '45px' : '-210px')};
+
+  width: 200px;
+
+  border-radius: 12px;
+  background-color: #fff;
+
+  animation: ${fadeInAnimation} 100ms ease-in;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
 `;
 
 export default OverlayMarker;

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

@@ -14,6 +14,6 @@ export const Default: Story = {
   args: {
     name: '누군가',
     imageUrl: 'https://avatars.githubusercontent.com/u/51052049?v=4',
-    size: 64,
+    size: '64px',
   },
 };

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

@@ -4,7 +4,7 @@ interface ProfileImageProps extends React.HTMLAttributes<HTMLImageElement> {
   name: string;
   imageUrl: string;
   border?: boolean;
-  size: number;
+  size?: string;
 }
 
 function ProfileImage({ name = '셀럽', imageUrl, size, border = false, ...props }: ProfileImageProps) {
@@ -13,11 +13,10 @@ function ProfileImage({ name = '셀럽', imageUrl, size, border = false, ...prop
 
 export default ProfileImage;
 
-const StyledProfile = styled.img<{ size: number; border: boolean }>`
-  width: ${({ size }) => `${size}px`};
-  height: ${({ size }) => `${size}px`};
+const StyledProfile = styled.img<{ size: string; border: boolean }>`
+  width: ${({ size }) => size || 'auto'};
+  height: ${({ size }) => size || 'auto'};
 
-  border: ${({ border }) => (border ? `2px solid var(--primary-1)` : `none`)};
   border-radius: 50%;
   background: none;
 `;

frontend/src/components/CategoryNavbar/CategoryNavbar.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { RestaurantCategory } from '~/@types/restaurant.types';
 import NavItem from '~/components/@common/NavButton/NavButton';
-
 import isEqual from '~/utils/compare';
 
+import type { RestaurantCategory } from '~/@types/restaurant.types';
+
 interface Category {
   label: RestaurantCategory;
   icon: React.ReactNode;

frontend/src/components/CelebBanner/CelebBanner.tsx

@@ -27,7 +27,7 @@ function CelebBanner({
   return (
     <StyledContainer background={backgroundImageUrl}>
       <StyledCelebInfo>
-        <ProfileImage name={name} imageUrl={profileImageUrl} size={172} />
+        <ProfileImage name={name} imageUrl={profileImageUrl} size="172px" />
         <StyledName>{name}</StyledName>
         <StyledDetail>
           {youtubeChannelName} 구독자 {subscriberCount / 10_000}만명 ∙ 음식점 {restaurantCount}개

frontend/src/components/CelebDropDown/CelebDropDown.tsx

@@ -40,7 +40,7 @@ function CelebDropDown({ celebs, externalOnClick, isOpen = false }: DropDownProp
             {celebs.map(({ id, name, profileImageUrl }) => (
               <StyledDropDownOption data-id={id} onMouseDown={onSelection(name)}>
                 <div>
-                  <ProfileImage name={name} imageUrl={profileImageUrl} size={20} />
+                  <ProfileImage name={name} imageUrl={profileImageUrl} size="20px" />
                   {name}
                 </div>
                 {isEqual(selected, name) && <SearchIcon />}

frontend/src/components/MapModalContent/MapModalContent.tsx

@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 import { RestaurantModalInfo } from '~/@types/restaurant.types';
 import { BORDER_RADIUS, FONT_SIZE } from '~/styles/common';
 import TextButton from '../@common/Button';
+import { BASE_URL } from '~/App';
 
 interface MapModalContentProps {
   content: RestaurantModalInfo;
@@ -17,10 +18,7 @@ function MapModalContent({ content }: MapModalContentProps) {
           <div>{roadAddress}</div>
           <div>{phoneNumber}</div>
         </div>
-        <StyledRestaurantImage
-          src={`http://3.35.157.27:3000/images-data/${images[0].name}`}
-          alt={`${name} 식당 이미지`}
-        />
+        <StyledRestaurantImage src={`${BASE_URL}images-data/${images[0].name}`} alt={`${name} 식당 이미지`} />
       </StyledRestaurantInfo>
       <TextButton
         type="button"

frontend/src/components/RestaurantCard/RestaurantCard.stories.tsx

@@ -46,6 +46,6 @@ export const Default: Story = {
           'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
       },
     ],
-    size: 42,
+    size: '42px',
   },
 };

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -1,22 +1,41 @@
 import { styled } from 'styled-components';
 import { BORDER_RADIUS, FONT_SIZE, truncateText } from '~/styles/common';
 import ProfileImage from '../@common/ProfileImage';
-import { Restaurant } from '~/@types/restaurant.types';
-import { Celeb } from '~/@types/celeb.types';
+import { BASE_URL } from '~/App';
+
+import type { Celeb } from '~/@types/celeb.types';
+import type { Restaurant } from '~/@types/restaurant.types';
 
 interface RestaurantCardProps {
   restaurant: Restaurant;
-  celebs: Celeb[];
-  size: number;
-  onClick: React.MouseEventHandler;
+  celebs?: Celeb[];
+  size?: string;
+  type?: 'list' | 'map';
+  onClick?: React.MouseEventHandler;
+  setHoveredId?: React.Dispatch<React.SetStateAction<number>>;
 }
 
-function RestaurantCard({ restaurant, celebs, size, onClick }: RestaurantCardProps) {
+function RestaurantCard({
+  restaurant,
+  celebs,
+  size,
+  type = 'list',
+  onClick = () => {},
+  setHoveredId = () => {},
+}: RestaurantCardProps) {
   const { images, name, roadAddress, category } = restaurant;
 
+  const onMouseEnter = () => {
+    setHoveredId(restaurant.id);
+  };
+
+  const onMouseLeave = () => {
+    setHoveredId(null);
+  };
+
   return (
-    <StyledContainer onClick={onClick}>
-      <StyledImage alt={`${name} 대표 이미지`} src={`http://3.35.157.27:3000/images-data/${images[0].name}`} />
+    <StyledContainer onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <StyledImage alt={`${name} 대표 이미지`} src={`${BASE_URL}images-data/${images[0].name}`} type={type} />
       <section>
         <StyledInfo>
           <StyledCategory>{category}</StyledCategory>
@@ -25,7 +44,7 @@ function RestaurantCard({ restaurant, celebs, size, onClick }: RestaurantCardPro
           <StyledAddress>02-1234-5678</StyledAddress>
         </StyledInfo>
         <StyledProfileImageSection>
-          <ProfileImage name={celebs[0].name} imageUrl={celebs[0].profileImageUrl} size={size} />
+          {celebs && <ProfileImage name={celebs[0].name} imageUrl={celebs[0].profileImageUrl} size={size} />}
         </StyledProfileImageSection>
       </section>
     </StyledContainer>
@@ -51,11 +70,12 @@ const StyledContainer = styled.div`
   cursor: pointer;
 `;
 
-const StyledImage = styled.img`
+const StyledImage = styled.img<{ type: 'list' | 'map' }>`
   width: 100%;
   aspect-ratio: 1.05 / 1;
 
-  border-radius: ${BORDER_RADIUS.md};
+  border-radius: ${({ type }) =>
+    type === 'list' ? `${BORDER_RADIUS.md}` : `${BORDER_RADIUS.md} ${BORDER_RADIUS.md} 0 0`};
 
   object-fit: cover;
 `;

frontend/src/components/VideoPreview/VideoPreview.tsx

@@ -42,7 +42,7 @@ function VideoPreview({
         </StyledVideoCover>
       )}
       <StyledVideoInfo>
-        <ProfileImage name={celebName} imageUrl={profileImageUrl} size={38} />
+        <ProfileImage name={celebName} imageUrl={profileImageUrl} size="38px" />
         <StyledTitle>{title}</StyledTitle>
         <StyledViewAndDate>
           <div>{celebName}</div>