diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/components/PincheckInput.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/components/PincheckInput.tsx new file mode 100644 index 0000000..27029d9 --- /dev/null +++ b/fe/src/app/event-maps/[id]/[nonMemberId]/components/PincheckInput.tsx @@ -0,0 +1,182 @@ +"use client"; + +import React, { useRef, useState, useEffect } from "react"; +import { useRouter, useParams } from "next/navigation"; + +export default function PasswordInput() { + const [password, setPassword] = useState(["", "", "", ""]); + const [currentIndex, setCurrentIndex] = useState(0); + const [hasError, setHasError] = useState(false); // 변수명 변경 + const inputRefs = useRef<(HTMLInputElement | null)[]>([]); + const router = useRouter(); + const { id, nonMemberId } = useParams(); + + const submitPassword = async () => { + const fullPassword = password.join(""); + console.log(password); + console.log("Password submitted:", fullPassword); + + try { + const response = await fetch( + "http://110.165.17.236:8081/api/v1/nonmembers/login", + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + nonMemberId, + password: fullPassword, + }), + } + ); + + if (response.ok) { + router.push(`/event-maps/${id}/${nonMemberId}/load-mappin-edit`); + } else { + setHasError(true); // hasError로 변경 + setPassword(["", "", "", ""]); + setCurrentIndex(0); + } + } catch (error) { + console.error("서버 오류:", error); + setHasError(true); // hasError로 변경 + } + }; + + const handleInputChange = ( + e: React.ChangeEvent, + index: number + ) => { + const inputValue = e.target.value; + + if (/^\d$/.test(inputValue)) { + const newPass = [...password]; + newPass[index] = inputValue; + setPassword(newPass); + + if (index < password.length - 1) { + setCurrentIndex(index + 1); + } + } + }; + + const handleKeyDown = ( + e: React.KeyboardEvent, + index: number + ) => { + if (e.key === "Backspace") { + const newPass = [...password]; + newPass[index] = ""; + + if (index > 0) { + setCurrentIndex(index - 1); + } + + setPassword(newPass); + setHasError(false); // hasError로 변경 + } + }; + + useEffect(() => { + inputRefs.current[currentIndex]?.focus(); + }, [currentIndex]); + + return ( +
+
+
+ { + inputRefs.current[0] = el; + }} + type="text" + inputMode="numeric" + pattern="[0-9]*" + className="grow text-center w-full h-full bg-transparent outline-none text-2xl" + maxLength={1} + value={password[0]} + onChange={(e) => handleInputChange(e, 0)} + onKeyDown={(e) => handleKeyDown(e, 0)} + /> +
+
+ { + inputRefs.current[1] = el; + }} + type="text" + inputMode="numeric" + pattern="[0-9]*" + className="grow text-center w-full h-full bg-transparent outline-none text-2xl" + maxLength={1} + value={password[1]} + onChange={(e) => handleInputChange(e, 1)} + onKeyDown={(e) => handleKeyDown(e, 1)} + /> +
+
+ { + inputRefs.current[2] = el; + }} + type="text" + inputMode="numeric" + pattern="[0-9]*" + className="grow text-center w-full h-full bg-transparent outline-none text-2xl" + maxLength={1} + value={password[2]} + onChange={(e) => handleInputChange(e, 2)} + onKeyDown={(e) => handleKeyDown(e, 2)} + /> +
+
+ { + inputRefs.current[3] = el; + }} + type="text" + inputMode="numeric" + pattern="[0-9]*" + className="grow text-center w-full h-full bg-transparent outline-none text-2xl" + maxLength={1} + value={password[3]} + onChange={(e) => handleInputChange(e, 3)} + onKeyDown={(e) => handleKeyDown(e, 3)} + /> +
+
+ + {hasError && ( +

+ 비밀번호가 일치하지 않아요 +

+ )} + + +
+ ); +} diff --git a/fe/src/app/load-mappin-edit/components/Form.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/Form.tsx similarity index 100% rename from fe/src/app/load-mappin-edit/components/Form.tsx rename to fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/Form.tsx diff --git a/fe/src/app/load-mappin-edit/components/LinkField.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/LinkField.tsx similarity index 100% rename from fe/src/app/load-mappin-edit/components/LinkField.tsx rename to fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/LinkField.tsx diff --git a/fe/src/app/load-mappin-edit/page.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx similarity index 92% rename from fe/src/app/load-mappin-edit/page.tsx rename to fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx index daf4ba4..7e8a052 100644 --- a/fe/src/app/load-mappin-edit/page.tsx +++ b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import Image from "next/image"; -import { useRouter } from "next/navigation"; +import { useRouter, useParams } from "next/navigation"; import ExitModal from "@/app/components/common/ExitModal"; import Form from "./components/Form"; @@ -10,6 +10,7 @@ export default function Page() { const [userName] = useState("규리"); const [isModalOpen, setIsModalOpen] = useState(false); const router = useRouter(); + const { id } = useParams(); const handleBackClick = () => { setIsModalOpen(true); @@ -20,7 +21,7 @@ export default function Page() { }; const handleExit = () => { - router.push("/map-page"); + router.push(`/event-maps/${id}`); }; return ( diff --git a/fe/src/app/pincheck-page/page.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/page.tsx similarity index 89% rename from fe/src/app/pincheck-page/page.tsx rename to fe/src/app/event-maps/[id]/[nonMemberId]/page.tsx index 30b1127..f6ac537 100644 --- a/fe/src/app/pincheck-page/page.tsx +++ b/fe/src/app/event-maps/[id]/[nonMemberId]/page.tsx @@ -1,8 +1,8 @@ "use client"; import Image from "next/image"; -import PasswordInput from "@/app/pincheck-page/components/PincheckInput"; import NavBar from "@/app/components/common/Navigation"; +import PasswordInput from "./components/PincheckInput"; export default function PasswordPage() { return ( diff --git a/fe/src/app/event-maps/[id]/components/BottomDrawer.tsx b/fe/src/app/event-maps/[id]/components/BottomDrawer.tsx index 9478857..cea2095 100644 --- a/fe/src/app/event-maps/[id]/components/BottomDrawer.tsx +++ b/fe/src/app/event-maps/[id]/components/BottomDrawer.tsx @@ -127,6 +127,12 @@ export default function BottomDrawer({ router.push(`/event-maps/${id}/load-mappin`); }; + const handleEditBtn = () => { + if (selectedButton !== null) { + router.push(`/event-maps/${id}/${selectedButton}`); + } + }; + const handleShare = () => { if (navigator.share) { navigator.share({ url: window.location.href }).then().catch(); @@ -170,7 +176,11 @@ export default function BottomDrawer({
{eventName}
-
diff --git a/fe/src/app/eventcreate-page/page.tsx b/fe/src/app/eventcreate-page/page.tsx index 9b3f80b..7e3ad06 100644 --- a/fe/src/app/eventcreate-page/page.tsx +++ b/fe/src/app/eventcreate-page/page.tsx @@ -71,7 +71,7 @@ function EventCreatePage() { useEffect(() => { if (uuid && !isRedirecting) { setIsRedirecting(true); // 이동 시작 시 상태 설정 - router.push(`/map-page?uuid=${uuid}`); + router.push(`/event-maps/${uuid}`); } }, [uuid, isRedirecting, router]); diff --git a/fe/src/app/pincheck-page/components/PincheckInput.tsx b/fe/src/app/pincheck-page/components/PincheckInput.tsx deleted file mode 100644 index 423e649..0000000 --- a/fe/src/app/pincheck-page/components/PincheckInput.tsx +++ /dev/null @@ -1,114 +0,0 @@ -"use client"; - -import React, { - useRef, - useState, - useEffect, - useCallback, - useMemo, -} from "react"; -import { useRouter } from "next/navigation"; -import { v4 as uuidv4 } from "uuid"; - -export default function PasswordInput() { - const [password, setPassword] = useState(["", "", "", ""]); - const [currentIndex, setCurrentIndex] = useState(0); - const [error, setError] = useState(false); - const inputRefs = useRef<(HTMLInputElement | null)[]>([]); - const router = useRouter(); - - const correctPassword = useMemo(() => ["1", "2", "3", "4"], []); - - const checkPassword = useCallback( - (inputPassword: string[]) => { - if (inputPassword.every((char) => char !== "")) { - if (JSON.stringify(inputPassword) === JSON.stringify(correctPassword)) { - setError(false); - router.push("/editmappin-page"); - } else { - setError(true); - } - } - }, - [correctPassword, router] - ); - - const handleInputChange = ( - e: React.ChangeEvent, - index: number - ) => { - const inputValue = e.target.value; - - // 숫자만 허용 - if (/^\d$/.test(inputValue)) { - const newPass = [...password]; - newPass[index] = inputValue; - setPassword(newPass); - - if (index < password.length - 1) { - setCurrentIndex(index + 1); - } - - checkPassword(newPass); - } - }; - - const handleKeyDown = ( - e: React.KeyboardEvent, - index: number - ) => { - if (e.key === "Backspace") { - const newPass = [...password]; - newPass[index] = ""; - - if (index > 0) { - setCurrentIndex(index - 1); - } - - setPassword(newPass); - setError(false); - } - }; - - // 현재 인덱스의 입력 칸에 포커스 설정 - useEffect(() => { - inputRefs.current[currentIndex]?.focus(); - }, [currentIndex]); - - const inputKeys = useMemo(() => password.map(() => uuidv4()), [password]); - - return ( -
-
- {password.map((char, index) => ( -
- { - inputRefs.current[index] = el; - }} - type="text" - inputMode="numeric" - pattern="[0-9]*" - className="grow shrink basis-0 text-center w-full h-full bg-transparent outline-none text-2xl text-text-default" - maxLength={1} - value={char} - onChange={(e) => handleInputChange(e, index)} - onKeyDown={(e) => handleKeyDown(e, index)} - /> -
- ))} -
- - {error && ( -

- 비밀번호가 일치하지 않아요 -

- )} -
- ); -}