diff --git a/fe/src/app/api/nonmembers/pings/route.ts b/fe/src/app/api/nonmembers/pings/route.ts new file mode 100644 index 0000000..8be465e --- /dev/null +++ b/fe/src/app/api/nonmembers/pings/route.ts @@ -0,0 +1,51 @@ +import { NextResponse } from "next/server"; +import type { NextRequest } from "next/server"; + +export async function POST(request: NextRequest) { + try { + // 요청 바디를 JSON 형식으로 파싱 + const { uuid, name, password, bookmarkUrls, storeUrls } = + await request.json(); + + // 유효성 검사 + if ( + !uuid || + !name || + !password || + !Array.isArray(bookmarkUrls) || + !Array.isArray(storeUrls) + ) { + return NextResponse.json( + { error: "필수 필드가 누락되었거나 형식이 잘못되었습니다." }, + { status: 400 } + ); + } + + // 비밀번호 길이 검사 + if (password.length !== 4 || !/^\d+$/.test(password)) { + return NextResponse.json( + { error: "비밀번호는 4자리 숫자여야 합니다." }, + { status: 400 } + ); + } + + // 요청이 성공적으로 처리된 경우 + const responseData = { + message: "성공적으로 처리되었습니다.", + data: { + uuid, + name, + bookmarkUrls, + storeUrls, + }, + }; + + return NextResponse.json(responseData, { status: 200 }); + } catch (error) { + // 오류 처리 + return NextResponse.json( + { error: "서버 오류가 발생했습니다." }, + { status: 500 } + ); + } +} diff --git a/fe/src/app/map-page/components/BottomDrawer.tsx b/fe/src/app/event-maps/[id]/components/BottomDrawer.tsx similarity index 100% rename from fe/src/app/map-page/components/BottomDrawer.tsx rename to fe/src/app/event-maps/[id]/components/BottomDrawer.tsx diff --git a/fe/src/app/map-page/components/MapComponent.tsx b/fe/src/app/event-maps/[id]/components/MapComponent.tsx similarity index 100% rename from fe/src/app/map-page/components/MapComponent.tsx rename to fe/src/app/event-maps/[id]/components/MapComponent.tsx diff --git a/fe/src/app/map-page/components/User.tsx b/fe/src/app/event-maps/[id]/components/User.tsx similarity index 100% rename from fe/src/app/map-page/components/User.tsx rename to fe/src/app/event-maps/[id]/components/User.tsx diff --git a/fe/src/app/map-page/hooks/useDrawer.ts b/fe/src/app/event-maps/[id]/hooks/useDrawer.ts similarity index 100% rename from fe/src/app/map-page/hooks/useDrawer.ts rename to fe/src/app/event-maps/[id]/hooks/useDrawer.ts diff --git a/fe/src/app/load-mappin/components/Form.tsx b/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx similarity index 64% rename from fe/src/app/load-mappin/components/Form.tsx rename to fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx index ea48807..228c626 100644 --- a/fe/src/app/load-mappin/components/Form.tsx +++ b/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx @@ -5,7 +5,11 @@ import NameField from "./NameField"; import PinField from "./PinField"; import LinkField from "./LinkField"; -export default function Form() { +interface FormProps { + uuid: string; +} + +export default function Form({ uuid }: FormProps) { const [name, setName] = useState(""); const [pin, setPin] = useState(["", "", "", ""]); const [mapLinks, setMapLinks] = useState([""]); @@ -13,12 +17,42 @@ export default function Form() { const [isFormComplete, setIsFormComplete] = useState(false); const [isTooltipVisible, setIsTooltipVisible] = useState(true); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + // API 호출 + try { + const response = await fetch("/api/nonmembers/pings", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + uuid: uuid, // UUID를 실제로 생성하거나 가져와야 합니다. + name, + password: pin.join(""), + bookmarkUrls: mapLinks, + storeUrls: storeLinks, + }), + }); + + const data = await response.json(); + + if (response.ok) { + console.log(data.message || "성공적으로 처리되었습니다."); + console.log(data); + } else { + console.log(data.error || "요청에 실패했습니다."); + } + } catch (error) { + console.log("서버 오류가 발생했습니다."); + } + }; + useEffect(() => { const isPinComplete = pin.every((digit) => digit !== ""); - const hasMapLink = mapLinks.some((link) => link !== ""); - const hasStoreLink = storeLinks.some((link) => link !== ""); - setIsFormComplete(!!(name && isPinComplete && hasMapLink && hasStoreLink)); - }, [name, pin, mapLinks, storeLinks]); + setIsFormComplete(!!(name && isPinComplete)); + }, [name, pin]); useEffect(() => { const hideTooltip = (e: MouseEvent) => { @@ -38,10 +72,9 @@ export default function Form() { return (
-
+ - setIsTooltipVisible(true)} /> - -
)} +
{inputFields.map((field) => ( diff --git a/fe/src/app/load-mappin/components/NameField.tsx b/fe/src/app/event-maps/[id]/load-mappin/components/NameField.tsx similarity index 100% rename from fe/src/app/load-mappin/components/NameField.tsx rename to fe/src/app/event-maps/[id]/load-mappin/components/NameField.tsx diff --git a/fe/src/app/load-mappin/components/PinField.tsx b/fe/src/app/event-maps/[id]/load-mappin/components/PinField.tsx similarity index 100% rename from fe/src/app/load-mappin/components/PinField.tsx rename to fe/src/app/event-maps/[id]/load-mappin/components/PinField.tsx diff --git a/fe/src/app/load-mappin/page.tsx b/fe/src/app/event-maps/[id]/load-mappin/page.tsx similarity index 74% rename from fe/src/app/load-mappin/page.tsx rename to fe/src/app/event-maps/[id]/load-mappin/page.tsx index 98ac438..9405f70 100644 --- a/fe/src/app/load-mappin/page.tsx +++ b/fe/src/app/event-maps/[id]/load-mappin/page.tsx @@ -1,7 +1,13 @@ +"use client"; + import Image from "next/image"; +import { useParams } from "next/navigation"; import Form from "./components/Form"; -export default function page() { +export default function Page() { + const { id } = useParams(); + const uuid = Array.isArray(id) ? id[0] : id; + return ( <>
@@ -17,7 +23,7 @@ export default function page() {
저장해둔 맵핀을 불러올게요
- +
); diff --git a/fe/src/app/map-page/page.tsx b/fe/src/app/event-maps/[id]/page.tsx similarity index 95% rename from fe/src/app/map-page/page.tsx rename to fe/src/app/event-maps/[id]/page.tsx index 8df5ef5..7abbb06 100644 --- a/fe/src/app/map-page/page.tsx +++ b/fe/src/app/event-maps/[id]/page.tsx @@ -2,6 +2,7 @@ import React from "react"; import Image from "next/image"; +import { useParams } from "next/navigation"; import { a } from "@react-spring/web"; import { useDrag } from "@use-gesture/react"; import BottomDrawer from "./components/BottomDrawer"; @@ -10,7 +11,7 @@ import useDrawer from "./hooks/useDrawer"; export default function Page() { const { y, openDrawer, closeDrawer, setPosition } = useDrawer(); - + const { id } = useParams(); const bind = useDrag( ({ last, movement: [, my], memo = y.get() }) => { // 드래그가 일정 거리 이상 발생해야 드로워를 이동시킴 diff --git a/fe/src/app/map-page/stores/useLocationStore.ts b/fe/src/app/event-maps/[id]/stores/useLocationStore.ts similarity index 100% rename from fe/src/app/map-page/stores/useLocationStore.ts rename to fe/src/app/event-maps/[id]/stores/useLocationStore.ts diff --git a/fe/src/app/map-page/types/types.ts b/fe/src/app/event-maps/[id]/types/types.ts similarity index 100% rename from fe/src/app/map-page/types/types.ts rename to fe/src/app/event-maps/[id]/types/types.ts