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

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

@@ -3,7 +3,6 @@
 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 +12,11 @@
 import RightBracket from '~/assets/icons/right-bracket.svg';
 import Minus from '~/assets/icons/minus.svg';
 import Plus from '~/assets/icons/plus.svg';
+import { RestaurantData } from '~/@types/api.types';
+import getQuadrant from '~/utils/getQuadrant';
 
 interface MapProps {
-  clickMarker: ({ lat, lng }: Coordinate) => void;
-  markers: { position: Coordinate; celebs: Celeb[] }[];
+  data: RestaurantData[];
   setBoundary: React.Dispatch<React.SetStateAction<CoordinateBoundary>>;
   toggleMapExpand: () => void;
 }
@@ -27,20 +27,22 @@
   return <LoadingDots />;
 };
 
-function Map({ clickMarker, markers, setBoundary, toggleMapExpand }: MapProps) {
+function Map({ data, setBoundary, toggleMapExpand }: 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);
   const [isMapExpanded, setIsMapExpanded] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [mainPosition, setMainPosition] = useState({ lat: 37.5057482, lng: 127.050727 });
 
   const onClick = (e: google.maps.MapMouseEvent) => {
     setClicks([...clicks, e.latLng!]);
   };
 
   const onIdle = (m: google.maps.Map) => {
     setZoom(m.getZoom()!);
+    setMainPosition({ lat: m.getCenter().lat(), lng: m.getCenter().lng() });
 
     const lowLatitude = String(m.getBounds().getSouthWest().lat());
     const highLatitude = String(m.getBounds().getNorthEast().lat());
@@ -60,11 +62,6 @@
     });
   };
 
-  const clickOverlayMarker = (position: Coordinate) => {
-    clickMarker(position);
-    setCenter(position);
-  };
-
   const clickZoom =
     (number: number): React.MouseEventHandler<HTMLButtonElement> =>
     () => {
@@ -85,9 +82,16 @@
         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(mainPosition, { lat, lng })}
+            />
+          );
+        })}
         {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,82 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+import { useRef, useState } from 'react';
 import ProfileImage from '../ProfileImage';
 import Overlay from './Overlay/Overlay';
 import type { Celeb } from '~/@types/celeb.types';
-import type { Coordinate } from '~/@types/map.types';
+import { Restaurant } from '~/@types/restaurant.types';
+import RestaurantCard from '~/components/RestaurantCard';
+import type { Quadrant } from '~/utils/getQuadrant';
+import useOnClickOutside from '~/hooks/useOnClickOuside';
 
 interface OverlayMarkerProps {
   celeb: Celeb;
-  position: Coordinate;
-  onClick: ({ lat, lng }: Coordinate) => void;
   map?: google.maps.Map;
+  restaurant: Restaurant;
+  quadrant: Quadrant;
 }
 
-function OverlayMarker({ celeb, position, map, onClick }: OverlayMarkerProps) {
+function OverlayMarker({ celeb, restaurant, map, quadrant }: OverlayMarkerProps) {
+  const { lat, lng } = restaurant;
+  const [isClicked, setIsClicked] = useState(false);
+  const ref = useRef();
+  useOnClickOutside(ref, () => setIsClicked(false));
+
   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 ? 18 : 0}>
+        <StyledMarker onClick={() => setIsClicked(true)} isClicked={isClicked} ref={ref}>
+          <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} border />
         </StyledMarker>
+        {isClicked && (
+          <StyledModal quadrant={quadrant}>
+            <RestaurantCard restaurant={restaurant} onClick={() => {}} type="map" />
+          </StyledModal>
+        )}
       </Overlay>
     )
   );
 }
 
-const StyledMarker = styled.button`
-  border: none;
-  background-color: transparent;
+const StyledMarker = styled.div<{ isClicked: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 36px;
+  height: 36px;
+
+  border: ${({ isClicked }) => (isClicked ? '3px solid var(--orange-2)' : '3px solid transparent')};
+  border-radius: 50%;
 
-  transition: all 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transform: ${({ isClicked }) => (isClicked ? 'scale(1.5)' : 'scale(1)')};
 
   &:hover {
-    transform: scale(1.1);
+    transform: scale(1.5);
+  }
+`;
+
+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.tsx

@@ -4,7 +4,7 @@ interface ProfileImageProps extends React.HTMLAttributes<HTMLImageElement> {
   name: string;
   imageUrl: string;
   border?: boolean;
-  size: number;
+  size?: number;
 }
 
 function ProfileImage({ name = '셀럽', imageUrl, size, border = false, ...props }: ProfileImageProps) {
@@ -14,10 +14,9 @@ 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`};
+  width: ${({ size }) => (size ? `${size}px` : '100%')};
+  height: ${({ size }) => (size ? `${size}px` : 'auto')};
 
-  border: ${({ border }) => (border ? `2px solid var(--primary-1)` : `none`)};
   border-radius: 50%;
   background: none;
 `;

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -6,17 +6,22 @@ import { Celeb } from '~/@types/celeb.types';
 
 interface RestaurantCardProps {
   restaurant: Restaurant;
-  celebs: Celeb[];
-  size: number;
+  celebs?: Celeb[];
+  size?: number;
+  type?: 'list' | 'map';
   onClick: React.MouseEventHandler;
 }
 
-function RestaurantCard({ restaurant, celebs, size, onClick }: RestaurantCardProps) {
+function RestaurantCard({ restaurant, celebs, size, type = 'list', onClick }: RestaurantCardProps) {
   const { images, name, roadAddress, category } = restaurant;
 
   return (
     <StyledContainer onClick={onClick}>
-      <StyledImage alt={`${name} 대표 이미지`} src={`http://3.35.157.27:3000/images-data/${images[0].name}`} />
+      <StyledImage
+        alt={`${name} 대표 이미지`}
+        src={`http://3.35.157.27:3000/images-data/${images[0].name}`}
+        type={type}
+      />
       <section>
         <StyledInfo>
           <StyledCategory>{category}</StyledCategory>
@@ -25,7 +30,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 +56,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/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]);
+}

frontend/src/pages/MainPage.tsx

@@ -5,22 +5,18 @@ import Header from '~/components/@common/Header';
 import Map from '~/components/@common/Map';
 import CategoryNavbar from '~/components/CategoryNavbar';
 import CelebDropDown from '~/components/CelebDropDown/CelebDropDown';
-import MapModal from '~/components/MapModal/MapModal';
 import RestaurantCard from '~/components/RestaurantCard';
 import RESTAURANT_CATEGORY from '~/constants/restaurantCategory';
 import { CELEBS_OPTIONS } from '~/constants/celebs';
 import useFetch from '~/hooks/useFetch';
-import useMapModal from '~/hooks/useMapModal';
 import getQueryString from '~/utils/getQueryString';
 import { FONT_SIZE } from '~/styles/common';
 import type { Celeb } from '~/@types/celeb.types';
 import type { RestaurantData } from '~/@types/api.types';
-import type { Coordinate, CoordinateBoundary } from '~/@types/map.types';
-import type { Restaurant, RestaurantCategory, RestaurantModalInfo } from '~/@types/restaurant.types';
+import type { CoordinateBoundary } from '~/@types/map.types';
+import type { RestaurantCategory } from '~/@types/restaurant.types';
 
 function MainPage() {
-  const [currentRestaurant, setCurrentRestaurant] = useState<RestaurantModalInfo | null>(null);
-  const { modalOpen, isVisible, closeModal, openModal } = useMapModal(true);
   const [isMapExpanded, setIsMapExpanded] = useState(false);
   const [data, setData] = useState<RestaurantData[]>([]);
   const [boundary, setBoundary] = useState<CoordinateBoundary>();
@@ -32,28 +28,12 @@ function MainPage() {
     async (queryObject: { boundary: CoordinateBoundary; celebId: number; category: RestaurantCategory }) => {
       const queryString = getQueryString(queryObject);
       const response = await handleFetch({ queryString });
-    
+
       setData(response.content);
     },
     [boundary, celebId, restaurantCategory],
   );
 
-  const clickCard = (restaurant: Restaurant) => {
-    const { lat, lng, ...restaurantModalInfo } = restaurant;
-
-    openModal();
-    setCurrentRestaurant(restaurantModalInfo);
-  };
-
-  const clickMarker = ({ lat, lng }: Coordinate) => {
-    const filteredRestaurant = data.find(restaurantData => lat === restaurantData.lat && lng === restaurantData.lng);
-
-    const { id, name, category, roadAddress, phoneNumber, naverMapUrl, images }: RestaurantModalInfo =
-      filteredRestaurant;
-
-    setCurrentRestaurant({ id, name, category, roadAddress, phoneNumber, naverMapUrl, images });
-  };
-
   const clickRestaurantCategory = (e: React.MouseEvent<HTMLElement>) => {
     const currentCategory = e.currentTarget.dataset.label as RestaurantCategory;
 
@@ -89,25 +69,12 @@ function MainPage() {
           <StyledCardListHeader>음식점 수 {data.length} 개</StyledCardListHeader>
           <StyledRestaurantCardList>
             {data?.map(({ celebs, ...restaurant }: RestaurantData) => (
-              <RestaurantCard restaurant={restaurant} celebs={celebs} size={42} onClick={() => clickCard(restaurant)} />
+              <RestaurantCard restaurant={restaurant} celebs={celebs} size={42} onClick={() => {}} />
             ))}
           </StyledRestaurantCardList>
         </StyledLeftSide>
         <StyledRightSide>
-          <Map
-            clickMarker={clickMarker}
-            setBoundary={setBoundary}
-            markers={data.map(({ lat, lng, celebs }) => ({ position: { lat, lng }, celebs }))}
-            toggleMapExpand={toggleMapExpand}
-          />
-          {currentRestaurant && (
-            <MapModal
-              modalOpen={modalOpen}
-              isVisible={isVisible}
-              onClickExit={closeModal}
-              modalRestaurantInfo={currentRestaurant}
-            />
-          )}
+          <Map setBoundary={setBoundary} data={data} toggleMapExpand={toggleMapExpand} />
         </StyledRightSide>
       </StyledLayout>
       <Footer />

frontend/src/styles/base.ts

@@ -24,7 +24,8 @@ const base = css`
     --gray-4: #393939;
     --gray-5: #2c2c2c;
     --gray-6: #161616;
-    --orange: #ffb26b;
+    --orange-1: #ffb26b;
+    --orange-2: #eb982d;
     --yellow: #ffd56f;
     --black: #424242;
     --white: #fff;

frontend/src/utils/getQuadrant.ts

@@ -0,0 +1,20 @@
+import type { Coordinate } from '~/@types/map.types';
+
+export type Quadrant = 1 | 2 | 3 | 4;
+
+const getQuadrant = (center: Coordinate, target: Coordinate): Quadrant => {
+  const dx = target.lng - center.lng;
+  const dy = target.lat - center.lat;
+
+  if (dx > 0 && dy > 0) return 1;
+
+  if (dx < 0 && dy > 0) return 2;
+
+  if (dx < 0 && dy < 0) return 3;
+
+  if (dx > 0 && dy < 0) return 4;
+
+  return 1;
+};
+
+export default getQuadrant;