Merge branch 'develop' of https://github.com/4bujak-4bujak/frontend i…

…nto develop
4bujak-4bujak · May 28, 2024 · 8b7a64e · 8b7a64e
2 parents 8567f5f + 66cb21f
commit 8b7a64e
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 30 deletions.
diff --git a/public/map/OfficeInActive.svg b/public/map/OfficeInActive.svg
diff --git 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
@@ -95,7 +95,7 @@ const PostDetail = ({ postData }: PostDetailType) => {
         <div className="flex flex-col gap-2 mt-5">
           {postData.images?.map((image, i) => (
             <div className="w-[360px] h-[280px]" key={i}>
-              <img src={image} className="object-cover w-full h-full " />
+              <img src={image} className="object-scale-down w-full h-full " />
             </div>
           ))}
         </div>

diff --git 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 (
     <div className={`${count > 1 ? 'w-[260px] h-[180px] ' : 'w-[360px] h-[180px] z-1'}`}>
-      <img src={image} alt="" className="rounded-sm object-cover w-full h-full" />
+      <img src={image} alt="" className="rounded-sm object-scale-down w-full h-full" />
     </div>
   );
 };

diff --git 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<MapSearchBarProps> = ({ onFocus, onChange }) => {
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,6 +15,7 @@ const MapSearchBar: React.FC<MapSearchBarProps> = ({ onFocus, onChange }) => {
           className="w-full p-3 shadow-lg rounded-lg pl-10"
           onFocus={onFocus}
           onChange={handleInputChange}
+          readOnly
         />
         <img
           src="/map/Search.png"

diff --git a/src/components/map/MapSearchResult.tsx b/src/components/map/MapSearchResult.tsx
@@ -1,11 +1,19 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Branch } from '@/api/types/branch';
 import Image from 'next/image';
 import { calculateDistance, formatDistance } from '@/utils/calculateDistance';
 import { MapSearchResultProps } from '@/api/types/branch';
 
 const MapSearchResult: React.FC<MapSearchResultProps> = ({ onClose, results, onMarkerClick, currentLatitude, currentLongitude }) => {
   const [searchTerm, setSearchTerm] = useState('');
+  const inputRef = useRef<HTMLInputElement>(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<MapSearchResultProps> = ({ onClose, results, onM
           style={{ backgroundColor: '#F0F0F0' }}
           value={searchTerm}
           onChange={e => setSearchTerm(e.target.value)}
+          ref={inputRef}
         />
         <img
           src="/map/Search.png"
@@ -48,7 +57,7 @@ const MapSearchResult: React.FC<MapSearchResultProps> = ({ onClose, results, onM
               {filteredResults.map(branch => (
                 <li key={branch.branchName} className="flex items-center p-4" onClick={() => handleItemClick(branch)}>
                   <Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} />
-                  <span className="ml-4">{branch.branchName}</span>
+                  <span className="ml-4 cursor-pointer">{branch.branchName}</span>
                   <span className="ml-auto">{formatDistance(calculateDistance(currentLatitude, currentLongitude, branch.branchLatitude, branch.branchLongitude))}</span> 
                 </li>
               ))}

diff --git a/src/components/map/OfficeInfo.tsx b/src/components/map/OfficeInfo.tsx
@@ -26,6 +26,7 @@ const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName, branchAddress }) =>
           <Swiper
             slidesPerView={1}
             loop={true}
+            spaceBetween={8}
             pagination={{ clickable: true }}
             modules={[Pagination]}
           >
@@ -53,7 +54,7 @@ const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName, branchAddress }) =>
         </div>
         <div className='flex py-[10px]'>
         <Image src="/map/OfficeParkImg.svg" className='mb-auto pt-[3px]' alt="OfficeParkImg" width={12} height={16} />
-        <p className="text-sm text-gray-600 ml-[8px]">{branchAddress}</p>
+        <p className="text-sm text-gray-600 ml-[8px]">출차 전 2층 데스크에서 1시간 무료 적용,<br/>이후 10분당 800원 비용 발생</p>
         </div> 
         </div>
         <div className="w-full h-1 bg-neutral-200" />

diff --git a/src/components/map/OfficeModal.tsx b/src/components/map/OfficeModal.tsx
@@ -9,21 +9,31 @@ const OfficeModal: React.FC<ModalProps> = ({ 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
@@ -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<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setIsModalOpen(false);
+    const button = document.getElementById('current-location-button');
+    if (button) {
+      button.click();
+    }
+  };
+
+  const handleCurrentLocationTextClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setShowMessage(false);
+    const button = document.getElementById('current-location-text');
+    if (button) {
+      button.click();
+    }
+  };
+
   return (
-    <section className="relative w-full h-full">
+    <section className="relative w-full h-screen">
       <div ref={mapRef} className="w-full h-full" />
       {showMessage && (
         <>
-          <div className="absolute bottom-[90px] left-4 bg-white px-3 py-3.5 shadow-lg flex items-center">
+          <div className={`absolute ${isModalOpen ? 'bottom-[285px]' : 'bottom-[110px]'} left-4 bg-white px-3 py-3.5 shadow-lg flex items-center`}>
             <span>더 정확한 접속위치를 확인해보세요!</span>
-            <button onClick={handleDismissMessage} className="ml-4">X</button>
+            <button id="current-location-text" onClick={handleCurrentLocationTextClick} className="ml-4">X</button>
           </div>
-          <Image src='/map/triangle.svg' alt="Current Location" className='absolute bottom-[80px] left-[40px]' width={18} height={10} />
+          <Image src='/map/triangle.svg' alt="Current Location" className={`absolute ${isModalOpen ? 'bottom-[275px]' : 'bottom-[100px]'} left-[40px]`} width={18} height={10} />
         </>
       )}
       <MapSearchBar onFocus={() => setShowSearchResults(true)} onChange={handleSearchQueryChange} />
@@ -198,10 +218,10 @@ const UseMap: React.FC = () => {
       />
       <button
         id="current-location-button"
-        className={`absolute ${isModalOpen ? 'bottom-[210px]' : 'bottom-4'} left-4 p-2 flex items-center justify-center`}
+        className={`absolute ${isModalOpen ? 'bottom-[210px]' : 'bottom-[35px]'} left-4 p-2 flex items-center justify-center`}
         onMouseEnter={() => setImageSrc('/map/MapLocationActive.png')}
         onMouseLeave={() => setImageSrc('/map/MapLocation.png')}
-        onClick={() => setImageSrc('/map/MapLocationActive.png')}
+        onClick={handleCurrentLocationClick}
       >
         <Image src={imageSrc} alt="Current Location" width={48} height={48} />
       </button>