feat: 동시편집 update 구현완료

Wiz-trip · Jan 25, 2024 · 2355c7d · 2355c7d
1 parent e42692f
commit 2355c7d
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 156 deletions.
diff --git a/src/components/Plan/PlanDetailCard.js b/src/components/Plan/PlanDetailCard.js
@@ -1,13 +1,13 @@
-import styled from 'styled-components';
-import { category_palette, categoryToKo } from '../../assets/category-palette';
-import { useMutation, useQuery } from 'react-query';
-import { getUserProfile } from '../../apis/api/plan-userinfo';
-import ModifyDetailIcon from '../../assets/plan-modi-detail-icon';
-import DefaultProfileIcon from '../../assets/default-profile-icon';
-import { useState, useRef, useEffect } from 'react';
-import { checkLockStatus, deletePlan, lockPlan } from '../../apis/api/plan';
-import { getUser } from '../../apis/api/user';
-import { useQueryClient } from 'react-query';
+import styled from 'styled-components'
+import { category_palette, categoryToKo } from '../../assets/category-palette'
+import { useMutation, useQuery } from 'react-query'
+import { getUserProfile } from '../../apis/api/plan-userinfo'
+import ModifyDetailIcon from '../../assets/plan-modi-detail-icon'
+import DefaultProfileIcon from '../../assets/default-profile-icon'
+import { useState, useRef, useEffect } from 'react'
+import { checkLockStatus, deletePlan, lockPlan } from '../../apis/api/plan'
+import { getUser } from '../../apis/api/user'
+import { useQueryClient } from 'react-query'
 function PlanDetailCard({
   address,
   content,
@@ -21,51 +21,52 @@ function PlanDetailCard({
   setMyLayout,
   setIsDraggable,
 }) {
-  const Color = category_palette[category];
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const cardRef = useRef(null);
-  const contentRef = useRef(null);
+  const Color = category_palette[category]
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const cardRef = useRef(null)
+  const contentRef = useRef(null)
 
-  const queryClient = useQueryClient();
-  const handleDelete = (e) => {
-    e.preventDefault();
-    deletePlanMutation.mutate();
-    setIsModalOpen(false);
-  };
+  const queryClient = useQueryClient()
+  const handleDelete = e => {
+    e.preventDefault()
+    deletePlanMutation.mutate()
+    setIsModalOpen(false)
+  }
   const deletePlanMutation = useMutation({
     mutationFn: () => deletePlan(tripId, planId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['getAllPlan'] });
+      queryClient.invalidateQueries({ queryKey: ['getAllPlan'] })
     },
-  });
+  })
   const onUpdateClick = async () => {
-    console.log('수정하기cliked');
-    const response = await checkLockStatus(tripId, planId);
+    console.log('수정하기cliked')
+    const response = await checkLockStatus(tripId, planId)
     if (response === true) {
       //lock인 상태
-      alert('다른 사용자가 해당 스케쥴을 편집중입니다.');
+      alert('다른 사용자가 해당 스케쥴을 편집중입니다.')
     } else {
       //unlock인상태
-      const lockRes = await lockPlan(tripId, planId);
-      setIsOpenFormModal(planId);
+      const lockRes = await lockPlan(tripId, planId)
+      setIsOpenFormModal(planId)
+      setIsModalOpen(false)
     }
-  };
+  }
 
   useEffect(() => {
-    const parentHeight = cardRef.current.clientHeight;
-    const childHeight = parentHeight - 40;
-    contentRef.current.style.maxHeight = `${childHeight}px`;
+    const parentHeight = cardRef.current.clientHeight
+    const childHeight = parentHeight - 40
+    contentRef.current.style.maxHeight = `${childHeight}px`
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   return (
     <DetailCard
       background={Color.background}
       stroke={Color.stroke}
       tag={Color.tag}
       ref={cardRef}
-      onMouseDown={(e) => setCurrentSpot(address)}
+      onMouseDown={e => setCurrentSpot(address)}
     >
       <div className="horizental ">
         <div className="category-tag">{categoryToKo[category]}</div>
@@ -80,8 +81,8 @@ function PlanDetailCard({
         <button
           className="modi-button"
           onClick={() => {
-            setIsModalOpen((prev) => !prev);
-            console.log('onclick 이벤트 발생');
+            setIsModalOpen(prev => !prev)
+            console.log('onclick 이벤트 발생')
           }}
         >
           <ModifyDetailIcon width="19" height="19" />
@@ -94,16 +95,16 @@ function PlanDetailCard({
         </button>
       </ModiModal>
     </DetailCard>
-  );
+  )
 }
 
-export default PlanDetailCard;
+export default PlanDetailCard
 
 const DetailCard = styled.div`
   position: relative;
-  background-color: ${(props) => props.background};
+  background-color: ${props => props.background};
   border: none;
-  border-left: 3px solid ${(props) => props.stroke};
+  border-left: 3px solid ${props => props.stroke};
   z-index: 3;
   width: inherit;
   height: inherit;
@@ -124,10 +125,10 @@ const DetailCard = styled.div`
     width: 33px;
     height: 19px;
     border-radius: 10px;
-    background-color: ${(props) => props.tag};
+    background-color: ${props => props.tag};
     font-size: 12px;
     font-weight: 700;
-    color: ${(props) => props.stroke};
+    color: ${props => props.stroke};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -157,13 +158,13 @@ const DetailCard = styled.div`
     padding: 0;
     z-index: 4;
   }
-`;
+`
 
 const ModiModal = styled.div`
   width: 71px;
   height: 47px;
   position: absolute;
-  display: ${(props) => (props.isOpen === true ? 'flex' : 'none')};
+  display: ${props => (props.isOpen === true ? 'flex' : 'none')};
   flex-direction: column;
   right: 0;
   bottom: -40px;
@@ -182,4 +183,4 @@ const ModiModal = styled.div`
     color: ${({ theme }) => theme.red600};
     border-top: none;
   }
-`;
+`