diff --git a/public/map/OfficeInActive.svg b/public/map/OfficeInActive.svg index 7df7270..e2a5f4d 100644 --- a/public/map/OfficeInActive.svg +++ b/public/map/OfficeInActive.svg @@ -1,3 +1,30 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/api/map/getOffice.ts b/src/api/map/getOffice.ts index 6240261..76113bc 100644 --- a/src/api/map/getOffice.ts +++ b/src/api/map/getOffice.ts @@ -3,7 +3,7 @@ const backendUrl = process.env.NEXT_PUBLIC_BASE_URL; export const getBranchInfo = async () => { try { const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1"); - const response = await fetch(`${backendUrl}/branches`, { + const response = await fetch(`${backendUrl}branches`, { method: 'GET', headers: { 'Authorization': `Bearer ${token}`, diff --git a/src/components/community/shared/PostDetail.tsx b/src/components/community/shared/PostDetail.tsx index 216982b..2ace12b 100644 --- a/src/components/community/shared/PostDetail.tsx +++ b/src/components/community/shared/PostDetail.tsx @@ -95,7 +95,7 @@ const PostDetail = ({ postData }: PostDetailType) => {
{postData.images?.map((image, i) => (
- +
))}
diff --git a/src/components/community/shared/PostItemImageItem.tsx b/src/components/community/shared/PostItemImageItem.tsx index 9ac8c72..2cad06a 100644 --- a/src/components/community/shared/PostItemImageItem.tsx +++ b/src/components/community/shared/PostItemImageItem.tsx @@ -3,7 +3,7 @@ import React from 'react'; const PostItemImageItem = ({ image, count }: { image: string; count: number }) => { return (
1 ? 'w-[260px] h-[180px] ' : 'w-[360px] h-[180px] z-1'}`}> - +
); }; diff --git a/src/components/map/MapSearchBar.tsx b/src/components/map/MapSearchBar.tsx index 6e39516..9d8d172 100644 --- a/src/components/map/MapSearchBar.tsx +++ b/src/components/map/MapSearchBar.tsx @@ -1,10 +1,5 @@ import React from 'react'; - -interface MapSearchBarProps { - onFocus: () => void; - // eslint-disable-next-line no-unused-vars - onChange: (value: string) => void -} +import { MapSearchBarProps } from '@/api/types/branch'; const MapSearchBar: React.FC = ({ onFocus, onChange }) => { const handleInputChange = (event: React.ChangeEvent) => { @@ -20,6 +15,7 @@ const MapSearchBar: React.FC = ({ onFocus, onChange }) => { className="w-full p-3 shadow-lg rounded-lg pl-10" onFocus={onFocus} onChange={handleInputChange} + readOnly /> = ({ onClose, results, onMarkerClick, currentLatitude, currentLongitude }) => { const [searchTerm, setSearchTerm] = useState(''); + const inputRef = useRef(null); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, []); + const filteredResults = results .filter(branch => branch.branchName.includes(searchTerm)) .sort((a, b) => { @@ -29,6 +37,7 @@ const MapSearchResult: React.FC = ({ onClose, results, onM style={{ backgroundColor: '#F0F0F0' }} value={searchTerm} onChange={e => setSearchTerm(e.target.value)} + ref={inputRef} /> = ({ onClose, results, onM {filteredResults.map(branch => (
  • handleItemClick(branch)}> Location - {branch.branchName} + {branch.branchName} {formatDistance(calculateDistance(currentLatitude, currentLongitude, branch.branchLatitude, branch.branchLongitude))}
    • ))} diff --git a/src/components/map/OfficeInfo.tsx b/src/components/map/OfficeInfo.tsx index e8dce25..ea7e983 100644 --- a/src/components/map/OfficeInfo.tsx +++ b/src/components/map/OfficeInfo.tsx @@ -26,6 +26,7 @@ const OfficeInfo: React.FC = ({ branchName, branchAddress }) => @@ -53,7 +54,7 @@ const OfficeInfo: React.FC = ({ branchName, branchAddress }) =>
    OfficeParkImg -

    {branchAddress}

    +

    출차 전 2층 데스크에서 1시간 무료 적용,
    이후 10분당 800원 비용 발생

    diff --git a/src/components/map/OfficeModal.tsx b/src/components/map/OfficeModal.tsx index 34fa792..1afca2e 100644 --- a/src/components/map/OfficeModal.tsx +++ b/src/components/map/OfficeModal.tsx @@ -9,21 +9,31 @@ const OfficeModal: React.FC = ({ isOpen, onClose, branchName, branch useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (modalRef.current && !modalRef.current.contains(event.target as Node)) { + const currentLocationButton = document.getElementById('current-location-button'); + const currentLocationText = document.getElementById('current-location-text'); + if ( + modalRef.current && + !modalRef.current.contains(event.target as Node) && + currentLocationButton && + !currentLocationButton.contains(event.target as Node) && + currentLocationText && + !currentLocationText.contains(event.target as Node) + ) { onClose(); } }; - + if (isOpen) { document.addEventListener('mousedown', handleClickOutside); } else { document.removeEventListener('mousedown', handleClickOutside); } - + return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isOpen, onClose]); + if (!isOpen) return null; diff --git a/src/components/map/UseMap.tsx b/src/components/map/UseMap.tsx index ef89f4b..cf0e166 100644 --- a/src/components/map/UseMap.tsx +++ b/src/components/map/UseMap.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import MapSearchBar from './MapSearchBar'; @@ -34,8 +35,15 @@ const UseMap: React.FC = () => { }; const mapInstance = new naver.maps.Map(mapRef.current, mapOptions); setMap(mapInstance); + + naver.maps.Event.addListener(mapInstance, 'click', () => { + setSelectedMarker(null); + setIsModalOpen(false); + }); + setMarkers(mapInstance); } }; + if (typeof window !== 'undefined' && window.naver) { initMap(); @@ -60,14 +68,12 @@ const UseMap: React.FC = () => { if (map && branches.length > 0) { setMarkers(map); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [branches, map]); useEffect(() => { if (map) { setMarkers(map); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedMarker]); useEffect(() => { @@ -85,7 +91,7 @@ const UseMap: React.FC = () => { position: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude), map: map, icon: { - url: '/map/OfficeActive.svg', + url: isSelected || selectedMarker === null ? '/map/OfficeActive.svg' : '/map/OfficeInActive.svg', size: new naver.maps.Size(48, 48), scaledSize: new naver.maps.Size(isSelected ? 60 : 48, isSelected ? 60 : 48), origin: new naver.maps.Point(0, 0), @@ -151,10 +157,6 @@ const UseMap: React.FC = () => { }; }, [map]); - const handleDismissMessage = () => { - setShowMessage(false); - }; - const handleMarkerClick = (branch: Branch) => { const position = new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude); map?.panTo(position); @@ -168,16 +170,34 @@ const UseMap: React.FC = () => { setSearchQuery(query); }; + const handleCurrentLocationClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsModalOpen(false); + const button = document.getElementById('current-location-button'); + if (button) { + button.click(); + } + }; + + const handleCurrentLocationTextClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setShowMessage(false); + const button = document.getElementById('current-location-text'); + if (button) { + button.click(); + } + }; + return ( -
    +
    {showMessage && ( <> -
    +
    더 정확한 접속위치를 확인해보세요! - +
    - Current Location + Current Location )} setShowSearchResults(true)} onChange={handleSearchQueryChange} /> @@ -198,10 +218,10 @@ const UseMap: React.FC = () => { />