Merge pull request #81 from ASAP-Lettering/fix/#72

[Fix] 편지 이동 시 유저명이 아닌 senderName 적용되게 수정

Author: yyypearl

src/app/planet/move/page.tsx

@@ -16,16 +16,14 @@ import {
 import Image from "next/image";
 import { getSpaceList } from "@/api/planet/space/space";
 import { useToast } from "@/hooks/useToast";
-import { userState } from "@/recoil/userStore";
-import { useRecoilValue } from "recoil";
 
 const PlanetMovePage = () => {
   const router = useRouter();
   const { showToast } = useToast();
   const searchParams = useSearchParams();
   const letterId = searchParams.get("letter");
+  const senderName = searchParams.get("senderName");
 
-  const { name } = useRecoilValue(userState);
   const [planets, setPlanets] = useState<Planet[]>();
   const [checkedPlanet, setCheckedPlanet] = useState<string>("");
   const [checkedIndep, setCheckedIndep] = useState<boolean>(false);
@@ -69,7 +67,7 @@ const PlanetMovePage = () => {
           console.log("편지 다른 행성 이동 성공");
 
           showToast(
-            `${name} 님의 편지가 ${checkePlanetName} 행성으로 이동했어요`,
+            `${senderName} 님의 편지가 ${checkePlanetName} 행성으로 이동했어요`,
             {
               icon: true,
               iconType: "info",
@@ -79,7 +77,7 @@ const PlanetMovePage = () => {
           );
         } else {
           showToast(
-            `${name} 님의 편지가 ${checkePlanetName} 궤도로 이동했어요`,
+            `${senderName} 님의 편지가 ${checkePlanetName} 궤도로 이동했어요`,
             {
               icon: true,
               iconType: "info",
@@ -109,7 +107,7 @@ const PlanetMovePage = () => {
     <Layout>
       <NavigatorBar title="편지 이동하기" cancel={false} />
       <Container>
-        <Label>{name}의 편지를 어디로 이동할까요?</Label>
+        <Label>{senderName}의 편지를 어디로 이동할까요?</Label>
         <Divider />
         <PlanetBoxList>
           {planets?.map((item, index) => (

src/app/planet/page.tsx

@@ -684,7 +684,7 @@ const BottomWrapper = styled.div`
   bottom: 0px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1000;
+  z-index: 20;
 `;
 
 /* 로딩 */

src/components/common/Planet.tsx

@@ -47,6 +47,7 @@ const Planet = (props: PlanetProps) => {
   const [hold, setHold] = useState<boolean>(false);
   const [confirmDeleteModal, setConfirmDeleteModal] = useState<boolean>(false);
   const [orbitId, setOrbitId] = useState<string>("");
+  const [senderName, setSenderName] = useState<string>("");
   const type = getCookie("letter-tagtype"); // 편지 태그 - 이름(1) / 이름과날짜(2) 구분용
 
   const radius = 150; // Orbit들이 배치될 원의 반지름
@@ -59,8 +60,15 @@ const Planet = (props: PlanetProps) => {
     router.push(`/letter/${id}`);
   };
 
+  const findSenderName = (orbitId: string, orbits?: Orbit[]) => {
+    const orbit = orbits?.find((orbit) => orbit.letterId === orbitId);
+    return orbit ? orbit.senderName : undefined;
+  };
+
   const handleShowHold = (orbitId: string) => {
+    const senderName = findSenderName(orbitId, orbits);
     setOrbitId(orbitId);
+    setSenderName(senderName ?? "");
     setHold(!hold);
   };
 
@@ -70,7 +78,7 @@ const Planet = (props: PlanetProps) => {
 
   const handleMoveButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    router.push(`/planet/move?letter=${orbitId}`);
+    router.push(`/planet/move?letter=${orbitId}&senderName=${senderName}`);
   };
 
   const handleDeleteButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -287,5 +295,5 @@ const Overlay = styled.div`
   align-items: center;
   justify-content: center;
   gap: 15px;
-  z-index: 20;
+  z-index: 100;
 `;