🐛fix(#93): 드래그앤드롭

src/app/mypage/page.tsx

@@ -27,6 +27,12 @@ const MyPage = () => {
     fetchGetCount();
   }, []);
 
+  useEffect(() => {
+    if (name.length > 0 && email.length > 0) {
+      setLoading(false);
+    }
+  }, [name, email]);
+
   const goToLetterType = () => {
     router.push("/mypage/lettertype");
   };
@@ -69,7 +75,6 @@ const MyPage = () => {
       const response = await getLetterCount();
       setLetterCount(response.data.letterCount);
       setPlanetCount(response.data.spaceCount);
-      setLoading(false);
     } catch (error) {
       console.error("편지수, 행성수 조회 실패:", error);
     }

src/app/planet/page.tsx

@@ -87,7 +87,7 @@ const PlanetPage = () => {
       console.log("모든 편지 수 조회 성공:", response.data);
       setCountLetter(response.data.letterCount);
       setCurrentOrbits(response.data.content);
-      setIsLoading(false);
+
       if (response.data.letterCount < 3 && getInitUserToast() !== "true") {
         setShowTooltip(true);
         setInitUserToast();
@@ -127,10 +127,8 @@ const PlanetPage = () => {
       //   });
       // }
       //setDroppedItem(null);
-      setIsLoading(false);
     } catch (error) {
       console.error("행성 편지 목록 조회 실패:", error);
-      setIsLoading(false);
     }
   };
 
@@ -151,7 +149,6 @@ const PlanetPage = () => {
     } catch (error) {
       console.error("메인 ID 조회 실패:", error);
       setSpaceInfo(null);
-      setIsLoading(false);
 
       /* 메인 ID 없을 경우 회원 탈퇴로 간주 */
       // router.push("/login");
@@ -166,6 +163,8 @@ const PlanetPage = () => {
     } catch (error) {
       console.error("궤도 편지 목록 조회 실패:", error);
       setOrbitMessages(null);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -695,4 +694,5 @@ const LoaderContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: ${theme.colors.bg};
 `;

src/components/common/Tag.tsx

@@ -54,10 +54,7 @@ const Tag = (props: TagProps) => {
   const [editedName, setEditedName] = useState(name);
   const [isHoldTriggered, setIsHoldTriggered] = useState<boolean>(false);
   const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [startPosition, setStartPosition] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
+  const startPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const [translate, setTranslate] = useState({ x: 0, y: 0 });
   const holdTimeout = useRef<NodeJS.Timeout | null>(null);
   const tagRef = useRef<HTMLDivElement | null>(null);
@@ -94,7 +91,7 @@ const Tag = (props: TagProps) => {
 
   const handleDragEnd = () => {
     setIsDragging(false);
-    setStartPosition(null);
+    startPositionRef.current = { x: 0, y: 0 };
   };
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -169,9 +166,13 @@ const Tag = (props: TagProps) => {
     }
     if (isDragable && tagType === "orbit") {
       e.stopPropagation();
-      console.log("터치 시작");
-      const touch = e.touches[0];
-      setStartPosition({ x: touch.clientX, y: touch.clientY });
+      console.log("터치 시작", e.touches?.[0]);
+
+      const touch = e.touches?.[0];
+      if (touch) {
+        const position = { x: touch.clientX, y: touch.clientY };
+        startPositionRef.current = position;
+      }
 
       e.currentTarget.addEventListener("touchmove", handleTouchMove, {
         passive: false,
@@ -183,12 +184,14 @@ const Tag = (props: TagProps) => {
   };
 
   const handleTouchMove = (e: TouchEvent) => {
-    console.log("터치 움직임");
+    const startPosition = startPositionRef.current;
+    console.log("터치 움직임", startPosition);
+
     if (startPosition) {
       const touch = e.touches[0];
-      console.log(startPosition.x);
       const deltaX = touch.clientX - 60;
       const deltaY = touch.clientY - startPosition.y;
+
       setTranslate({
         x: touch.clientX - startPosition.x,
         y: touch.clientY - startPosition.y,
@@ -377,25 +380,29 @@ const Box = styled.div<{
       background: ${theme.colors.gray800};
       ${(props) => props.theme.fonts.body08};
       display: flex;
-      ${$hasEditIcon &&
-      css`
+      ${
+        $hasEditIcon &&
+        css`
         height: 47px;
         padding: 9px 18px;
         border-radius: 200px;
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(2px);
         ${(props) => props.theme.fonts.title01};
         gap: 4px;
-      `}
-      ${$hasName === false &&
-      css`
+      `
+      }
+      ${
+        $hasName === false &&
+        css`
         padding: 7.5px 13px 7.5px 13px;
-      `}
+      `
+      }
     `}
   
     ${({ $tagType, $orbitType }) =>
-    $tagType === "letter" &&
-    css`
+      $tagType === "letter" &&
+      css`
       display: block;
       max-width: 90px;
       padding: ${$orbitType === "2" ? "7.5px 15px" : "11px 15px"};