feat: Implemented my_page logic

Author: KoJaem

package-lock.json

@@ -20,6 +20,7 @@
     "react-kakao-maps-sdk": "^1.1.26",
     "swiper": "^11.1.3",
     "swr": "^2.2.5",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "universal-cookie": "^7.1.4",
     "zustand": "^4.5.2"
   },

package.json

@@ -0,0 +1,10 @@
+import api from "./common";
+
+export const bookmarkAPIs = {
+  getBookmarks: async () => api.getWithAuth("bookmark"),
+
+  postBookmarks: async (id: number) =>
+    api.postWithAuth("bookmark", { eventId: id }),
+
+  deleteBookmark: async (id: number) => api.delete(`bookmark/${id}`),
+};

src/apis/bookmark.ts

@@ -28,4 +28,6 @@ export const eventApis = {
       distance: number;
     }
   ) => api.get(`event/${id}`, param),
+
+  getMyEvent: async () => api.getWithAuth(`event/my`),
 };

src/apis/event.ts

@@ -22,7 +22,7 @@ const Map_detailOverlay: FC<Props> = ({
   const formattedFinishAt = dayjs(finishAt).format("YYYY.MM.DD");
 
   return (
-    <div className="w-full h-[132px] max-w-[480px] flex rounded-[16px] ">
+    <div className="w-full h-[132px] max-w-[480px] flex rounded-[16px] shrink-0">
       <div className="min-w-[132px] min-h-[132px]">
         <Image
           width={132}

src/components/Map/Map_detailOverlay.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { eventApis } from "@/apis/event";
+import { useCallback, useEffect, useState } from "react";
 import Map_detailOverlay from "../Map/Map_detailOverlay";
 
 const events = [
@@ -24,9 +25,24 @@ const events = [
 ];
 
 const List_myEvent = () => {
+  const [myEvent, setMyEvent] = useState<any>();
+
+  const getMyEvent = useCallback(async () => {
+    try {
+      const { data } = await eventApis.getMyEvent();
+      setMyEvent(data.data);
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+
+  useEffect(() => {
+    getMyEvent();
+  }, [getMyEvent]);
+
   return (
-    <div className="flex flex-col gap-[16px]">
-      {events.map((event) => (
+    <div className="flex flex-col gap-[16px] w-full">
+      {myEvent?.map((event: any) => (
         <Map_detailOverlay
           key={event.id}
           title={event.title}

src/components/mypage/List_myEvent.tsx

@@ -1,58 +1,46 @@
-import React, { useEffect, useState } from "react";
+import { bookmarkAPIs } from "@/apis/bookmark";
+import { useCallback, useEffect, useState } from "react";
 import Map_detailOverlay from "../Map/Map_detailOverlay";
 
-const events = [
-  {
-    id: 1,
-    imageURL: "/images/잠수교.png",
-    title: "차 없는 잠수교 뚜벅뚜벅 축제",
-    description:
-      "2024 차 없는 잠수교 뚜벅뚜벅 축제의 오감으로 만나는 힐링 놀이터로 놀러와 힐링을 동시에 즐겨보세요.",
-    startAt: new Date("2022-01-01T00:00:00"),
-    finishAt: new Date("2022-01-01T01:00:00"),
-  },
-  {
-    id: 2,
-    imageURL: "/images/잠수교.png",
-    title: "차 없는 잠수교 뚜벅뚜벅 축제",
-    description:
-      "2024 차 없는 잠수교 뚜벅뚜벅 축제의 오감으로 만나는 힐링 놀이터로 놀러와 힐링을 동시에 즐겨보세요.",
-    startAt: new Date("2022-01-02T00:00:00"),
-    finishAt: new Date("2022-01-02T01:00:00"),
-  },
-  {
-    id: 3,
-    imageURL: "/images/잠수교.png",
-    title: "차 없는 잠수교 뚜벅뚜벅 축제",
-    description:
-      "2024 차 없는 잠수교 뚜벅뚜벅 축제의 오감으로 만나는 힐링 놀이터로 놀러와 힐링을 동시에 즐겨보세요.",
-    startAt: new Date("2022-01-03T00:00:00"),
-    finishAt: new Date("2022-01-03T01:00:00"),
-  },
-  {
-    id: 4,
-    imageURL: "/images/잠수교.png",
-    title: "차 없는 잠수교 뚜벅뚜벅 축제",
-    description:
-      "2024 차 없는 잠수교 뚜벅뚜벅 축제의 오감으로 만나는 힐링 놀이터로 놀러와 힐링을 동시에 즐겨보세요.",
-    startAt: new Date("2022-01-04T00:00:00"),
-    finishAt: new Date("2022-01-04T01:00:00"),
-  },
-  // Add more events as needed
-];
-
 const List_otherEvent = () => {
+  const [data, setData] = useState<any>();
+
+  const getBookmarks = useCallback(async () => {
+    const { data } = await bookmarkAPIs.getBookmarks();
+    setData(data.data);
+  }, []);
+
+  useEffect(() => {
+    getBookmarks();
+  }, [getBookmarks]);
+
+  const deleteBookmark = async (bookmarkId: number) => {
+    await bookmarkAPIs.deleteBookmark(bookmarkId);
+    const { data } = await bookmarkAPIs.getBookmarks();
+    setData(data.data);
+  };
+
   return (
-    <div className="flex flex-col gap-[16px]">
-      {events.map((event) => (
-        <Map_detailOverlay
-          key={event.id}
-          title={event.title}
-          description={event.description}
-          startAt={event.startAt}
-          finishAt={event.finishAt}
-          imageURL={event.imageURL}
-        />
+    <div className="flex flex-col gap-[16px] w-full">
+      {data?.map((event: any, index: number) => (
+        <div
+          key={`${event.bookmarkId}-${index}`}
+          className="flex w-full overflow-auto gap-[16px] scrollbar-hide"
+        >
+          <Map_detailOverlay
+            title={event.title}
+            description={event.description}
+            startAt={event.startAt}
+            finishAt={event.finishAt}
+            imageURL={event.imageURL}
+          />
+          <button
+            className="bg-[#FF5757] rounded-full text-white flex items-center justify-center w-[50px] h-[50px] flex-shrink-0 self-center"
+            onClick={() => deleteBookmark(event.bookmarkId)}
+          >
+            X
+          </button>
+        </div>
       ))}
     </div>
   );

src/components/mypage/List_otherEvent.tsx

@@ -19,8 +19,8 @@ const Mypage = () => {
 
   const getUser = useCallback(async () => {
     try {
-      const response = await memberApis.getMemberMe();
-      setUserData(response.data.data);
+      const { data } = await memberApis.getMemberMe();
+      setUserData(data.data);
     } catch (error) {
       console.log(error);
       router.replace("/login");

src/pages/mypage/index.tsx

@@ -103,7 +103,10 @@ const config: Config = {
     },
   },
   extend: {},
-  plugins: [require("@tailwindcss/line-clamp")],
+  plugins: [
+    require("@tailwindcss/line-clamp"),
+    require("tailwind-scrollbar-hide"),
+  ],
 } satisfies Config;
 
 export default config;