Merge pull request #116 from th-D138/feat/#113

[FEATURE]  주변 장소 찾기 api 연결 및 주변 기업 찾기 수정

Author: minwoo1119

locales/en/common.json

@@ -5,6 +5,7 @@
   "recruitmentInfo": "recruitment",
   "companiesInfo": "Companies",
   "nearBy": "Surrounding",
+  "nearByPlaces": "Nearby Places",
   "community": "Community",
   "communityPage": {
     "writePost": "Write Post",

locales/ko/common.json

@@ -5,6 +5,7 @@
   "recruitmentInfo": "채용정보",
   "companiesInfo": "기업정보",
   "nearBy": "주변기업찾기",
+  "nearByPlaces": "주변 장소 찾기",
   "community": "커뮤니티",
   "communityPage": {
     "writePost": "글쓰기",

src/components/nearby-companies/controlBar/ControlBar.tsx

@@ -1,8 +1,6 @@
 import { Dispatch, SetStateAction, useState } from 'react';
-import {
-  selectIndustryOptions,
-  selectRegionOptions,
-} from '@/components/jobs/DetailSearchForm';
+import { Option } from '@/components/common/select/Select';
+import { selectIndustryOptions } from '@/components/jobs/DetailSearchForm';
 
 import { ActivateButton } from '@/components/common/activateButton/ActivateButton';
 import Select from '@/components/common/select/Select';
@@ -21,6 +19,7 @@ interface Props {
   setMode: Dispatch<SetStateAction<string>>;
   onlyOnRecruitMode: boolean;
   setOnlyOnRecruitMode: Dispatch<SetStateAction<boolean>>;
+  regionOptions: Option[];
 }
 
 export const ControlBar = ({
@@ -34,6 +33,7 @@ export const ControlBar = ({
   setMode,
   setOnlyOnRecruitMode,
   setRegion,
+  regionOptions,
 }: Props) => {
   void useState;
   return (
@@ -45,7 +45,7 @@ export const ControlBar = ({
             name='region'
             icon='map-pin'
             width='300px'
-            options={selectRegionOptions}
+            options={regionOptions}
             value={region}
             onChange={setRegion}
           />

src/components/nearby-companies/mapComponent/MapComponent.tsx

@@ -1,16 +1,68 @@
 import { useEffect, useState } from 'react';
 
-import { Map } from 'react-kakao-maps-sdk';
+import { LocateFixed, Minus, Plus } from 'lucide-react';
+import { CustomOverlayMap, Map } from 'react-kakao-maps-sdk';
 import styles from './mapComponent.module.scss';
 
 interface Props {
   level: number;
+  clusters?: {
+    regionCode: string;
+    regionName: string;
+    lat: number;
+    lng: number;
+    jobPostCount: number;
+  }[];
+  selectedRegionCode?: string;
+  onSelectRegion?: (regionCode: string) => void;
 }
 
-export const MapComponent = ({ level }: Props) => {
+export const MapComponent = ({
+  level,
+  clusters = [],
+  selectedRegionCode,
+  onSelectRegion,
+}: Props) => {
   const [position, setPosition] = useState<{ lat: number; lng: number } | null>(
     null,
   );
+  const [map, setMap] = useState<kakao.maps.Map | null>(null);
+  const [currentLevel, setCurrentLevel] = useState(level);
+
+  const fallbackPosition = { lat: 37.5665, lng: 126.978 };
+
+  const moveToCurrentPosition = () => {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(
+      pos => {
+        const nextPosition = {
+          lat: pos.coords.latitude,
+          lng: pos.coords.longitude,
+        };
+        setPosition(nextPosition);
+        if (map) {
+          map.panTo(new kakao.maps.LatLng(nextPosition.lat, nextPosition.lng));
+        }
+      },
+      err => {
+        console.error('위치 정보를 가져오지 못했습니다.', err);
+      },
+    );
+  };
+
+  const handleZoomIn = () => {
+    if (!map) return;
+    const nextLevel = Math.max(1, map.getLevel() - 1);
+    map.setLevel(nextLevel);
+    setCurrentLevel(nextLevel);
+  };
+
+  const handleZoomOut = () => {
+    if (!map) return;
+    const nextLevel = Math.min(14, map.getLevel() + 1);
+    map.setLevel(nextLevel);
+    setCurrentLevel(nextLevel);
+  };
 
   useEffect(() => {
     if (navigator.geolocation) {
@@ -23,31 +75,94 @@ export const MapComponent = ({ level }: Props) => {
         },
         err => {
           console.error('위치 정보를 가져오지 못했습니다.', err);
-          setPosition({ lat: 37.5665, lng: 126.978 });
+          setPosition(fallbackPosition);
         },
       );
     } else {
-      alert('브라우저가 위치 정보를 지원하지 않습니다.');
-      setPosition({ lat: 37.5665, lng: 126.978 });
+      setPosition(fallbackPosition);
     }
   }, []);
 
+  useEffect(() => {
+    setCurrentLevel(level);
+  }, [level]);
+
+  const handleSelectCluster = (cluster: {
+    regionCode: string;
+    lat: number;
+    lng: number;
+  }) => {
+    onSelectRegion?.(cluster.regionCode);
+    if (map) {
+      map.panTo(new kakao.maps.LatLng(cluster.lat, cluster.lng));
+    }
+  };
+
   return (
     <div className={styles.container}>
+      <div className={styles.mapControls}>
+        <button
+          type='button'
+          className={styles.controlButton}
+          onClick={moveToCurrentPosition}
+          aria-label='현재 위치로 이동'
+          title='현재 위치로 이동'
+        >
+          <LocateFixed size={18} />
+        </button>
+        <button
+          type='button'
+          className={styles.controlButton}
+          onClick={handleZoomIn}
+          aria-label='지도 확대'
+          title='지도 확대'
+        >
+          <Plus size={18} />
+        </button>
+        <button
+          type='button'
+          className={styles.controlButton}
+          onClick={handleZoomOut}
+          aria-label='지도 축소'
+          title='지도 축소'
+        >
+          <Minus size={18} />
+        </button>
+      </div>
       <Map
         id='map'
-        center={
-          position || {
-            lat: 37.5665,
-            lng: 126.978,
-          }
-        }
+        center={position || fallbackPosition}
         style={{
           width: '100%',
           height: '600px',
         }}
-        level={level}
-      />
+        level={currentLevel}
+        onCreate={setMap}
+      >
+        <CustomOverlayMap position={position || fallbackPosition}>
+          <div className={styles.currentPin} />
+        </CustomOverlayMap>
+        {clusters.map(cluster => (
+          <CustomOverlayMap
+            key={cluster.regionCode}
+            position={{ lat: cluster.lat, lng: cluster.lng }}
+          >
+            <button
+              type='button'
+              className={`${styles.clusterBadge} ${
+                selectedRegionCode === cluster.regionCode ? styles.activeCluster : ''
+              }`}
+              onClick={() => handleSelectCluster(cluster)}
+              title={`${cluster.regionName} ${cluster.jobPostCount}건`}
+            >
+              <span className={styles.clusterRegion}>{cluster.regionName}</span>
+              <strong className={styles.clusterCount}>
+                {cluster.jobPostCount}건
+              </strong>
+            </button>
+          </CustomOverlayMap>
+        ))}
+      </Map>
     </div>
   );
 };

src/components/nearby-companies/mapComponent/mapComponent.module.scss

@@ -1,9 +1,84 @@
 .container {
+  position: relative;
   width: 100%;
   background-color: #fff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--color-gray-200);
   padding: 10px;
-  margin: 10px;
   border-radius: 4px;
+  overflow: hidden;
+}
+
+.mapControls {
+  position: absolute;
+  bottom: 18px;
+  right: 18px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.controlButton {
+  width: 42px;
+  height: 42px;
+  border: 1px solid #c9d8e6;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.95);
+  color: #12344e;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 3px 10px rgba(20, 52, 79, 0.16);
+}
+
+.controlButton:hover {
+  background: #f0f8ff;
+}
+
+.controlButton:active {
+  transform: translateY(1px);
+}
+
+.currentPin {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: #0c4a6e;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 5px rgba(12, 74, 110, 0.2);
+}
+
+.clusterBadge {
+  border: 1px solid #bcd4e6;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 4px 12px rgba(17, 52, 77, 0.2);
+  padding: 0.35rem 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.clusterRegion {
+  font-size: 0.75rem;
+  color: #34566f;
+}
+
+.clusterCount {
+  font-size: 0.78rem;
+  color: #0c4a6e;
+}
+
+.activeCluster {
+  border-color: #0c4a6e;
+  background: #0c4a6e;
+}
+
+.activeCluster .clusterRegion,
+.activeCluster .clusterCount {
+  color: #fff;
 }

src/lib/apis/mutations/useDeleteFavoritePlace.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { fetcher } from '@/lib/fetcher';
+
+interface DeleteFavoritePlaceResponse {
+  success: string;
+  data: null;
+}
+
+const deleteFavoritePlace = async (placeId: number) => {
+  return fetcher.delete<DeleteFavoritePlaceResponse>(
+    `/api/v1/map/favorites/places/${placeId}`,
+  );
+};
+
+const useDeleteFavoritePlace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['useDeleteFavoritePlace'],
+    mutationFn: deleteFavoritePlace,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['useGetMapFavorites'] });
+    },
+  });
+};
+
+export default useDeleteFavoritePlace;

src/lib/apis/mutations/useDeleteFavoriteRegion.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { fetcher } from '@/lib/fetcher';
+
+interface DeleteFavoriteRegionResponse {
+  success: string;
+  data: null;
+}
+
+const deleteFavoriteRegion = async (regionCode: string) => {
+  return fetcher.delete<DeleteFavoriteRegionResponse>(
+    `/api/v1/map/favorites/regions/${regionCode}`,
+  );
+};
+
+const useDeleteFavoriteRegion = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['useDeleteFavoriteRegion'],
+    mutationFn: deleteFavoriteRegion,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['useGetMapFavorites'] });
+    },
+  });
+};
+
+export default useDeleteFavoriteRegion;