sticker 수정

src/MakeSticker/Select.js

@@ -260,7 +260,7 @@ const Select = ({ handleCaptureImg }) => {
         dispatch(setNext(true));
 
         // 응답을 받은 후에 navigate 실행
-        await navigate("/stickername", { state: { test: test2 } }); // 목표 화면 이름으로 변경
+        // await navigate("/stickername", { state: { test: test2 } }); // 목표 화면 이름으로 변경
       }
     } catch (error) {
       console.error("PATCH request failed:", error);
@@ -301,6 +301,12 @@ const Select = ({ handleCaptureImg }) => {
     }
   }, [setting, next]);
 
+  useEffect(() => {
+    if (test2) {
+      navigate("/stickername", { state: { test: test2 } });
+    }
+  }, [test2]);
+
   return (
     <div className={styles.background}>
       <div className={styles.line}></div>

src/Nickname/StickerLetter.js

@@ -229,9 +229,11 @@ export function StickerLetter() {
   const { state } = useLocation();
   console.log("State", state.visitor);
   const VID = state.visitor;
+  const test2 = VID;
 
   //방문자 스티커
   const imageUrl = useSelector((state) => state.capture.visitorimageUrl);
+  console.log("letter", imageUrl);
   //방문자 스티커 id
   const visitorId = useSelector((state) => state.visitorId);
   //입력 누르면 변하는 것들
@@ -241,7 +243,7 @@ export function StickerLetter() {
   };
   //첫 번째 이전 버튼
   const handleFirstBack = () => {
-    navigate(-1); //nickname으로 페이지 전환
+    navigate("/stickername", { state: { test: test2 } }); //nickname으로 페이지 전환
   };
 
   //두 번째 이전버튼
@@ -277,7 +279,7 @@ export function StickerLetter() {
         console.error("실패", error);
       });
 
-    navigate("/put", { state: { visitor: VID } });
+    navigate("/put");
   };
 
   //서버에서 방문록 받아오기

src/Stickers/TestBottom.js

@@ -29,8 +29,8 @@ const HostImg = styled.img`
   max-height: 150px;
   display: flex;
   position: absolute;
-  transform: translate(-40%, 50%);
-  top: 40%;
+  transform: translate(-50%, 50%);
+  top: 30%;
   left: 50%;
 `;
 
@@ -58,8 +58,8 @@ const Bottoms = styled.div`
 `;
 
 const Bottom = styled.div`
-  width: 200%;
-  height: 200%;
+  width: 100%;
+  height: 145%;
   position: relative;
   justify-content: center;
   align-items: center;
@@ -101,16 +101,11 @@ export function TestBottom(props) {
   const hostid = useSelector((state) => state.login.hostid);
 
   const ID = hostid;
+  const VisitorId = useSelector((state) => state.capture.visitorId);
 
   const headers = {
     "Content-Type": "application/json",
   };
-  const VID = props.VID2;
-  console.log("final", VID);
-
-  const { state } = useLocation();
-  console.log("State", state.visitor);
-  const VID2 = state.visitor;
 
   //이미지들 불러오기
   useEffect(() => {
@@ -211,14 +206,12 @@ export function TestBottom(props) {
   const positionState = useSelector((state) => state.position);
   const finalPosition = {
     x: positionState.x,
-    y: positionState.y - 40,
+    y: positionState.y,
   };
   console.log("finalposition", finalPosition);
 
   console.log("완료", imagePosition);
 
-  const VisitorId = useSelector((state) => state.capture.visitorId);
-
   //이미지 PATCH
   useEffect(() => {
     if (isImageFixed) {
@@ -318,7 +311,7 @@ export function TestBottom(props) {
               src={item.final_image_url}
               style={{
                 position: "absolute",
-                top: `${(item.location_y * componentHeight) / 100 + 110}px`,
+                top: `${(item.location_y * componentHeight) / 100 + 100}px`,
                 left: `${(item.location_x * componentWidth) / 100}px`,
                 zIndex: 9999,
                 maxWidth: "100px",

src/Stickers/VisitPut.js

@@ -156,6 +156,7 @@ export function VisitPut(props) {
   //방문자가 가지고 온  호스트Id 가져오기
   const hostid = useSelector((state) => state.login.hostid);
   const ID = hostid;
+  const VID = useSelector((state) => state.capture.visitorId);
 
   const handleButtonClick = () => {
     dispatch(setIsImageFixed(true)); // "Check" 버튼 클릭 시, 스티커 고정
@@ -170,7 +171,7 @@ export function VisitPut(props) {
 
   //처음 이전 아이콘
   const handlefirstBack = () => {
-    navigate(-1);
+    navigate("/stickerletter", { state: { visitor: VID } });
   };
 
   //두 번째 이전 아이콘
@@ -186,7 +187,7 @@ export function VisitPut(props) {
     navigate("/");
   };
 
-  useEffect(() => {
+  /*  useEffect(() => {
     if (change) {
       const timer = setTimeout(() => {
         // 5초 후에 페이지 이동
@@ -195,7 +196,7 @@ export function VisitPut(props) {
 
       return () => clearTimeout(timer); // 컴포넌트가 언마운트될 때 타이머 제거
     }
-  }, [change]);
+  }, [change]); */
 
   //호스트 닉네임 불러오기
   useEffect(() => {

src/Stickers/VisitorSticker.js

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { setSelectedImage } from "./imageSlice";
 import Idtoken from "./Idtoken";
+import { setHostId } from "../login/LoginSlice";
 
 //방문자 기록 컴포넌트
 
@@ -79,8 +80,13 @@ export function VisitorSticker() {
 
   const dispatch = useDispatch();
 
-  // userId, 토큰, 방문자가 가지고 온  호스트Id 가져오기
-  const hostid = useSelector((state) => state.login.hostid);
+  const currentURL = window.location.href;
+  const parts = currentURL.split("/");
+  const hostid = parts[parts.length - 1]; //방문자가 가지고 온 호스트 ID
+  console.log(hostid);
+  //호스트 아이디 저장
+  dispatch(setHostId(hostid)); // userId, 토큰, 방문자가 가지고 온  호스트Id 가져오기
+
   const jwt = Idtoken()[1]; //호스트 토큰
   const userId = Idtoken()[0]; //호스트 아이디
 

src/page/PutPage.js

@@ -33,13 +33,10 @@ const Background = styled.div`
 `;
 
 export function PutPage() {
-  const { state } = useLocation();
-  console.log("State", state.visitor);
-  const VID = state.visitor;
   return (
     <BackgroundWrap>
       <Background>
-        <VisitPut id={VID} />
+        <VisitPut />
       </Background>
     </BackgroundWrap>
   );