[feat] #30 프로필 추가 api 연동 구현

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 }
+    );
+  }
+}

fe/src/app/load-mappin/components/Form.tsx → fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx

@@ -5,20 +5,54 @@ 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([""]);
   const [storeLinks, setStoreLinks] = useState([""]);
   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 (
     <div className="px-4">
-      <form>
+      <form onSubmit={handleSubmit}>
         <NameField value={name} onChange={setName} />
         <PinField value={pin} onChange={setPin} />
-
         <LinkField
           label="맵핀 모음 링크"
           placeholder="링크 붙여넣기"
@@ -50,14 +83,12 @@ export default function Form() {
           showTooltip={isTooltipVisible}
           onInfoClick={() => setIsTooltipVisible(true)}
         />
-
         <LinkField
           label="가게 정보 링크"
           placeholder="링크 붙여넣기"
           value={storeLinks}
           onChange={setStoreLinks}
         />
-
         <button
           className={`w-full flex items-center text-lg font-200 justify-center h-[60px] rounded-small ${
             isFormComplete

fe/src/app/load-mappin/components/LinkField.tsx → fe/src/app/event-maps/[id]/load-mappin/components/LinkField.tsx

@@ -22,7 +22,9 @@ export default function LinkField({
   const [inputFields, setInputFields] = useState(
     value.map((val) => ({ id: nanoid(), text: val }))
   );
-
+  const handleNaverMove = () => {
+    window.open("https://m.place.naver.com/my/place");
+  };
   const handleInputChange = (id: string, inputValue: string) => {
     const newInputs = inputFields.map((field) =>
       field.id === id ? { ...field, text: inputValue } : field
@@ -76,6 +78,19 @@ export default function LinkField({
             )}
           </div>
         )}
+        <button
+          type="button"
+          className="mr-0 ml-auto text-grayscale-50 flex items-center text-text-sm1"
+          onClick={handleNaverMove}
+        >
+          네이버 지도
+          <Image
+            src="/svg/rightArrow.svg"
+            alt="rightArrow"
+            width={12}
+            height={24}
+          />
+        </button>
       </label>
       <div className="flex flex-col items-center border-grayscale-10 border p-[16px] gap-[16px] rounded-medium">
         {inputFields.map((field) => (

fe/src/app/load-mappin/page.tsx → 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 (
     <>
       <div className="w-full h-[56px] p-[16px]">
@@ -17,7 +23,7 @@ export default function page() {
       <div className="mt-[24px] mb-[44px] ml-[16px] text-darkGray text-title-md">
         저장해둔 맵핀을 불러올게요
       </div>
-      <Form />
+      <Form uuid={uuid} />
       <div className="h-[20px]" />
     </>
   );

fe/src/app/map-page/page.tsx → 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() }) => {
       // 드래그가 일정 거리 이상 발생해야 드로워를 이동시킴