[Fix] change marker content

Linkup-3mw · Jun 13, 2024 · 7b2af4a · 7b2af4a
1 parent 690650f
commit 7b2af4a
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 111 deletions.
diff --git a/public/images/office/office_image.png b/public/images/office/office_image.png
diff --git a/public/svg/reservation/check.svg b/public/svg/reservation/check.svg
diff --git a/public/svg/reservation/imageView/white_cancel.svg b/public/svg/reservation/imageView/white_cancel.svg
diff --git a/src/app/(search)/map/components/BuildingImageSlider.tsx b/src/app/(search)/map/components/BuildingImageSlider.tsx
@@ -1,4 +1,6 @@
 import Image from 'next/image';
+import { useSetRecoilState } from 'recoil';
+import { currentBuildingState } from '../../atom/search';
 interface ImageViewProps {
   // images: string;
   buildingId: number;
@@ -7,10 +9,20 @@ export default function BuildingImageSlider({
   // images,
   buildingId,
 }: ImageViewProps) {
+  const setCurrentBuilding = useSetRecoilState(currentBuildingState);
   // if (!images) return <div>이미지 준비중</div>;
   return (
     //h-[17.25rem]
-    <div className="overflow-hidden rounded-t-3xl ">
+    <div className="overflow-hidden rounded-t-3xl relative">
+      <Image
+        className="absolute top-7 right-7 z-10"
+        onClick={() => setCurrentBuilding(null)}
+        src="/svg/reservation/imageView/white_cancel.svg"
+        width={18}
+        height={18}
+        alt="취소"
+      />
+      <div className="absolute inset-0 bg-black opacity-40 z-9"></div>
       <Image
         layout="responsive"
         width={491}

diff --git a/src/app/(search)/map/components/BuildingInfoServiceView.tsx b/src/app/(search)/map/components/BuildingInfoServiceView.tsx
@@ -25,21 +25,18 @@ export default function BuildingServiceView({
   const router = useRouter();
 
   const handleReservationClick = async () => {
-    console.log('우씌');
     const session = await getSession();
     if (!session) {
-      console.log('session이 없뗘어어', session);
       setModal(true);
     } else if (session) {
-      console.log('session', session);
       router.push(`/reservation/${id}`);
     }
   };
 
   return (
     <>
       <>
-        <div className="flex flex-col gap-y-3 my-6 md:w-[26.6875rem] max-md:w-[20.5rem]">
+        <div className="flex flex-col gap-y-6 my-6 md:w-[26.6875rem] max-md:w-[20.5rem]">
           <div className="flex justify-between items-center mx-2 ">
             <p className="text-black text-lg font-bold leading-[1.75rem]">
               {currentBuilding?.location}
@@ -55,7 +52,7 @@ export default function BuildingServiceView({
           </div>
           <div className="bg-white rounded-lg shadow-md p-4 ">
             <div className="text-gray-800">
-              {currentBuilding?.region} {currentBuilding?.city}{' '}
+              {currentBuilding?.region} {currentBuilding?.city}
               {currentBuilding?.address}
             </div>
             <div className="text-gray-500">
@@ -258,13 +255,13 @@ export default function BuildingServiceView({
                   우편함
                 </p>
               </div>
-              <div className="flex flex-col gap-4 justify-center items-center md:w-full mb:w-full ">
+              <div className="flex flex-col gap-8 justify-center items-center md:w-full mb:w-full ">
                 <div className="mt-5 w-full mb:p-4 md:py-6 md:px-8 bg-white flex flex-col justify-start mb:text-[0.75rem] md:text-[1rem]  rounded-2xl">
                   {rules}
                 </div>
                 <div
                   onClick={() => handleReservationClick()}
-                  className="w-[5.5rem]  mb-20  bg-blue-400 px-4 py-2 rounded-lg text-white font-bold text-md text-center cursor-pointer"
+                  className="w-[5.5rem]  mb-10 bg-blue-400 px-4 py-2 rounded-lg text-white font-bold text-md text-center cursor-pointer"
                 >
                   예약하기
                 </div>

diff --git a/src/app/(search)/map/components/BuildingItem.tsx b/src/app/(search)/map/components/BuildingItem.tsx
@@ -16,17 +16,24 @@ export default function BuildingItem() {
   const [currentBuilding, setCurrentBuilding] = useRecoilState<Building | null>(
     currentBuildingState,
   );
+  const [click, setClick] = useState(false);
   const [officeBuildings, setOfficeBuildings] =
     useRecoilState<Building[]>(buildingState);
   const [loading, setLoading] = useState(true);
+  const handleItemClick = (office: Building) => {
+    setClick(true);
+    setCurrentBuilding(office);
+    setShowInfo(true);
+  };
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setLoading(false);
     }, 3000);
 
     return () => clearTimeout(timer);
   }, []);
-
+  console.log('뭐뭐', officeBuildings);
   return (
     <>
       {loading &&
@@ -36,52 +43,54 @@ export default function BuildingItem() {
             <div
               key={index}
               className="flex justify-center p-2 md:rounded-lg mb:rounded-sm z-40 "
-              onClick={() => {
-                setCurrentBuilding(office);
-                setShowInfo(true);
-              }}
+              onClick={() => handleItemClick(office)}
             >
               <div
-                className="md:w-[26.6875rem] md:h-[8.5rem] max-md:w-full mb:h-[5.875rem]  
-              flex gap-5 p-4 items-center bg-white rounded-md active:bg-blue-500 active:rounded-md active:text-white"
+                className={`md:w-[26.6875rem] md:h-[8.5rem] mb:w-[20.5rem] mb:h-[5.875rem]  
+              flex gap-5 p-4 items-center rounded-md ${
+                currentBuilding && currentBuilding.location === office.location
+                  ? 'bg-blue-500 text-white '
+                  : 'bg-white'
+              }`}
               >
                 <div>
                   <Image
-                    src="/images/office/check.png"
+                    src="/images/office/office_image.png"
                     width={88}
                     height={88}
                     alt={`${office.location}`}
                   />
                 </div>
-                <div className="flex flex-col max-md:w-full  md:w-[16.6875rem] mb:h-[3.875rem] md:h-[5.125rem] justify-between">
+                <div className="flex flex-col  gap-2 max-md:w-full  md:w-[16.6875rem] mb:h-[3.875rem] md:h-[5.125rem] justify-between">
                   <div className="flex justify-between">
-                    <p className="font-bold mb:text-[1rem] md:text-lg">
+                    <p className="font-semibold mb:text-[1rem] md:text-lg">
                       {office.location}
                     </p>
-                    {/* {office.reviews &&
-                    office.reviews.avg_rating &&
-                    office.reviews.review_count && (
+
+                    {/* {office.rating.avg_rating && office.rating.count && (
                       <div className="flex items-center">
                         <Image
                           src="/svg/map/star.svg"
                           width={18}
                           height={18}
                           alt="별"
                         />
-                        {office.reviews.avg_rating}.0 (
-                        {office.reviews.review_count})
+                        {office.rating.avg_rating}.0 ({office.rating.count})
                       </div>
                     )} */}
                   </div>
-                  <p className="text-gray-300 mb:text-[0.625rem] md:text-sm">
-                    {office.traffic_info}
-                  </p>
+
                   <div className="flex gap-4 justify-between mb:text-[0.625rem] md:text-xs">
-                    <p>
-                      {office.street} {office.address}
-                    </p>
+                    <div className="flex flex-col gap-1">
+                      <span>{office.traffic_info}</span>
+                      <span>
+                        {office.city}구 {office.street} {office.address}
+                      </span>
+                    </div>
                     <div>
-                      <button className="bg-blue-400 rounded-lg mb:w-[3.375rem] mb:h-[1.4375rem] md:w-[3.8125rem] md:h-[1.6875rem] text-white p-1">
+                      <button
+                        className={`${currentBuilding && currentBuilding.location === office.location ? 'bg-white text-black' : 'bg-blue-400 text-white'} rounded-2xl mb:w-[3.375rem] mb:h-[1.4375rem] md:w-[3.8125rem] md:h-[1.6875rem]  p-1`}
+                      >
                         바로 예약
                       </button>
                     </div>
@@ -100,8 +109,8 @@ export default function BuildingItem() {
               }}
             >
               <div
-                className="md:w-[26.6875rem] md:h-[8.5rem] mb:w-[20.5rem] mb:h-[5.875rem]  
-              flex gap-5 p-4 items-center bg-white rounded-md active:bg-blue-500 active:rounded-md active:text-white"
+                className={`md:w-[26.6875rem] md:h-[8.5rem] mb:w-[20.5rem] mb:h-[5.875rem]  
+              flex gap-5 p-4 items-center bg-white rounded-md ${currentBuilding ? 'bg-blue-500' : ''} active:bg-blue-500 active:rounded-md active:text-white`}
               >
                 <div>
                   <Image
@@ -134,9 +143,15 @@ export default function BuildingItem() {
                   <p className="text-gray-300 mb:text-[0.625rem] md:text-sm">
                     {office.traffic_info}
                   </p>
+                  <p
+                    className={`mb:text-[0.625rem] md:text-xs
+                    ${currentBuilding && currentBuilding.location === office.location ? 'text-white' : 'text-gray-300 '}`}
+                  >
+                    {office.city}
+                  </p>
                   <div className="flex gap-4 justify-between mb:text-[0.625rem] md:text-xs">
                     <p>
-                      {office.street} {office.address}
+                      {office.city} {office.street} {office.address}
                     </p>
                     <div>
                       <button className="bg-blue-400 rounded-lg mb:w-[3.375rem] mb:h-[1.4375rem] md:w-[3.8125rem] md:h-[1.6875rem] text-white p-1">

diff --git a/src/app/(search)/map/components/Loader/ConfirmModal.tsx b/src/app/(search)/map/components/Loader/ConfirmModal.tsx
@@ -26,7 +26,7 @@ export default function ConfirmModal() {
   return (
     <>
       {loading && (
-        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-red-800  bg-opacity-50">
+        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-30">
           <FullPageLoader />
         </div>
       )}

diff --git a/src/app/(search)/map/components/Loader/Modal.tsx b/src/app/(search)/map/components/Loader/Modal.tsx
@@ -21,7 +21,7 @@ export default function Modal() {
   return (
     <>
       {loading && (
-        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-red-800  bg-opacity-50">
+        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-black  bg-opacity-30">
           <FullPageLoader />
         </div>
       )}
@@ -44,13 +44,13 @@ export default function Modal() {
 
             <div className="flex flex-col space-y-4">
               <Link
-                className="bg-[#688AF2] text-center  text-white px-6 py-3 rounded-md transition-colors duration-300 hover:bg-red-500"
-                href="register"
+                className="bg-[#688AF2] text-center  text-white px-6 py-3 rounded-md transition-colors duration-300 cursor-pointer"
+                href="signin"
               >
                 <button>로그인</button>
               </Link>
               <Link
-                className="bg-[#688AF2] text-center  text-white px-6 py-3 rounded-md transition-colors duration-300 hover:bg-red-500"
+                className="bg-[#688AF2] text-center  text-white px-6 py-3 rounded-md transition-colors duration-300 cursor-pointer"
                 href="register"
               >
                 <button>회원가입</button>

diff --git a/src/app/(search)/map/components/Loader/UpdateModal.tsx b/src/app/(search)/map/components/Loader/UpdateModal.tsx
@@ -24,7 +24,7 @@ export default function UpdateModal() {
   return (
     <>
       {loading && (
-        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-red-800  bg-opacity-50">
+        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-30">
           <FullPageLoader />
         </div>
       )}

diff --git a/src/app/(search)/map/components/Marker.tsx b/src/app/(search)/map/components/Marker.tsx
@@ -21,6 +21,7 @@ export default function Marker() {
       try {
         const response = await API.get('/office/search?page=0&size=44');
         const content = response.data.data.content;
+        console.log(response);
         setOfficeBuildings(content);
       } catch (error) {
         console.error('error :', error);
@@ -62,25 +63,15 @@ export default function Marker() {
       if (map) {
         buildingOverlayContent?.forEach((office) => {
           const customContent = `
-            <div id=${office.buildingId} class="overlay bg-white group absolute z-10 left-0 bottom-0 -translate-x-1/2 p-4 box-border text-nowrap rounded-[0.25rem] text-sm shadow-lg after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:w-[1.2625rem] after:h-[1.0625rem] after:bg-[url(/svg/map/tail.svg)] after:bg-no-repeat after:bg-center after:bg-[length:100%]">
+            <div id=${office.buildingId} class="overlay bg-white group absolute z-10 left-0 bottom-0 -translate-x-1/2 p-4 box-border text-nowrap rounded-[0.25rem] text-sm  after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:w-[1.2625rem] after:h-[1.0625rem] after:bg-[url(/svg/map/tail.svg)] after:bg-no-repeat after:bg-center after:bg-[length:100%]">
               <div class="flex gap-4 items-center">
                 <p class="font-bold text-sm">${office.location}</p>
-                <div class="bg-white text-black group-hover:block hidden items-center">
-                  <div class="flex gap-1 items-center">
-                    <Image src="/svg/map/star.svg" width={18} height={18} alt="별점이미지" />
-                    <b>별점 리뷰갯수</b>
-                  </div>
-                </div>
               </div>
               <div class="group-hover:h-[6rem] group-hover:w-[11.1875rem] group-hover:opacity-100 opacity-0 h-0 w-0 overflow-hidden flex flex-col gap-3 transition-all">
                 <span>
                   <p class="text-xs">${office.traffic}</p>
                 </span>
-                <span class="flex gap-2 items-center text-gray-400">
-                  <Image src="/svg/map/cow.svg" width={18} height={18} alt="소이미지" />
-                  <span>소모임  개</span>
-                </span>
-                <button class="absolute bottom-4 right-5 font-bold w-[4rem] h-[2rem] bg-[#688AF2] rounded-xl text-white">
+                <button class="text-xs absolute bottom-4 right-5 font-semibold w-[4rem] h-[2rem]  bg-[#688AF2] rounded-xl text-white">
                   바로 예약
                 </button>
               </div>
@@ -105,7 +96,6 @@ export default function Marker() {
           const overlays = document.querySelectorAll('.overlay');
           overlays.forEach((overlay) => {
             overlay.addEventListener('click', (e: Event) => {
-              console.log('마커눌렀다');
               const buildingId = Number((e.currentTarget as HTMLDivElement).id);
               const office = officeBuildings?.filter((office: Building) => {
                 return office.id === buildingId;
@@ -119,24 +109,14 @@ export default function Marker() {
       if (map && filterData.length > 0) {
         filterOverlayContent?.forEach((office) => {
           const customContent = `
-            <div id=${office.buildingId} class="overlay text-[1rem] text-white bg-[#688AF2]  group absolute z-10 left-0 bottom-0 -translate-x-1/2 p-4 box-border text-nowrap rounded-[0.25rem] text-sm shadow-lg after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:w-[1.2625rem] after:h-[1.0625rem] after:bg-[url(/svg/map/tailblue.svg)] after:bg-no-repeat after:bg-center after:bg-[length:100%]">
+            <div id=${office.buildingId} class="overlay text-[1rem] text-white bg-[#688AF2]  group absolute z-10 left-0 bottom-0 -translate-x-1/2 p-4 box-border text-nowrap rounded-[0.25rem] text-sm after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:w-[1.2625rem] after:h-[1.0625rem] after:bg-[url(/svg/map/tailblue.svg)] after:bg-no-repeat after:bg-center after:bg-[length:100%]">
               <div class="flex gap-4 items-center">
                 <p class="font-bold text-sm">${office.location}</p>
-                <div class="text-white group-hover:block hidden items-center">
-                  <div class="flex gap-1 items-center">
-                    <Image src="/svg/map/star.svg" width={18} height={18} alt="별점이미지" />
-                    <b>별점 리뷰갯수</b>
-                  </div>
-                </div>
               </div>
               <div class="group-hover:h-[6rem] group-hover:w-[11.1875rem] group-hover:opacity-100 opacity-0 h-0 w-0 overflow-hidden flex flex-col gap-3 transition-all">
                 <span>
                   <p class="text-xs">${office.traffic}</p>
                 </span>
-                <span class="flex gap-2 items-center ">
-                  <Image src="/svg/map/cow.svg" width={18} height={18} alt="소이미지" />
-                  <span>소모임  개</span>
-                </span>
                 <button class="absolute bottom-4 right-5 font-bold w-[4rem] h-[2rem] bg-white rounded-xl text-[#688AF2]">
                   바로 예약
                 </button>
@@ -163,7 +143,6 @@ export default function Marker() {
           const overlays = document.querySelectorAll('.overlay');
           overlays.forEach((overlay) => {
             overlay.addEventListener('click', (e: Event) => {
-              console.log('v파란색마커눌렀다');
               const buildingId = Number((e.currentTarget as HTMLDivElement).id);
               const office = officeBuildings?.filter((office: Building) => {
                 return office.id === buildingId;

diff --git a/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx b/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx
@@ -354,7 +354,9 @@ export default function MonthPassMembership({
                       </p>
                       <div>
                         <button
-                          onClick={() => setRTab('공간')}
+                          onClick={() =>
+                            selectedSeatAll?.start_date && setRTab('공간')
+                          }
                           className="w-[6.5625rem] h-[2rem] p-2 bg-[#688AF2] text-[0.625rem] text-white rounded-lg "
                         >
                           공간 예약 하러 가기
@@ -370,7 +372,9 @@ export default function MonthPassMembership({
                       </p>
                       <div>
                         <button
-                          onClick={() => setRTab('공간')}
+                          onClick={() =>
+                            selectedSeatAll?.start_date && setRTab('공간')
+                          }
                           className="w-[9.875rem] h-[2.5rem] leading-6 p-2 bg-[#688AF2] text-[0.875rem] text-white rounded-lg"
                         >
                           공간 예약 하러 가기