feat: 사용자 등록 위치 확인 페이지 추가

Author: 2YH02

app/pullup/[id]/pullup-client.tsx

@@ -191,9 +191,15 @@ const PullupClient = ({
               <span className="mr-1 mb-[3px]">
                 <StarIcon />
               </span>
-              <Text typography="t7" className="">
-                정보 제공자: {marker.username}
-              </Text>
+              <button
+                onClick={() => {
+                  router.push(`/user-info/${marker.username}`);
+                }}
+              >
+                <Text typography="t7" className="">
+                  정보 제공자: {marker.username}
+                </Text>
+              </button>
             </div>
           )}
         </div>

app/user-info/[user]/page-client.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import Section from "@/components/common/section";
+import userMarkers, {
+  type UserMarker,
+  type UserMarkerRes,
+} from "@api/marker/user-marker";
+import GrowBox from "@common/grow-box";
+import Skeleton from "@common/skeleton";
+import Text from "@common/text";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BsPinMapFill } from "react-icons/bs";
+
+interface Props {
+  data: UserMarkerRes;
+  userName: string;
+}
+
+const PageClient = ({ data, userName }: Props) => {
+  const router = useRouter();
+
+  const [markers, setMarkers] = useState<UserMarker[]>(data.markers);
+  const [currentPage, setCurrentPage] = useState(data.currentPage);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+
+  const loadMoreMarkers = useCallback(async () => {
+    if (isLoading || currentPage >= data.totalPages) return;
+
+    setIsLoading(true);
+    const newData = await userMarkers({
+      userName: userName,
+      page: currentPage + 1,
+    });
+
+    setMarkers((prevMarkers) => [...prevMarkers, ...newData.markers]);
+    setCurrentPage(newData.currentPage);
+
+    setIsLoading(false);
+  }, [currentPage, isLoading, data.totalPages]);
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          loadMoreMarkers();
+        }
+      },
+      {
+        rootMargin: "100px",
+      }
+    );
+
+    if (loadMoreRef.current) {
+      observerRef.current.observe(loadMoreRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [loadMoreMarkers]);
+
+  if (!markers || markers.length === 0) {
+    return (
+      <Section>
+        <p>{userName}님이 등록한 위치가 없습니다.</p>
+      </Section>
+    );
+  }
+  return (
+    <div>
+      <ul>
+        {markers.map((marker) => {
+          return (
+            <li
+              key={marker.markerId}
+              className="border-b border-solid dark:border-grey-dark active:bg-grey-light dark:active:bg-grey-dark"
+            >
+              <button
+                className="flex items-center p-2 px-4 text-left w-full h-full"
+                onClick={() => {
+                  router.push(`/pullup/${marker.markerId}`);
+                }}
+              >
+                <div className="w-[90%] flex flex-col">
+                  <Text typography="t6" className="break-all">
+                    {marker.address}
+                  </Text>
+                  <Text
+                    typography="t7"
+                    className="break-all text-grey dark:text-grey"
+                  >
+                    {marker.description || "설명이 없습니다."}
+                  </Text>
+                </div>
+                <GrowBox />
+                <div className="shrink-0 w-[10%] flex items-center justify-center">
+                  <BsPinMapFill className="fill-primary" />
+                </div>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {isLoading && (
+        <div className="p-4">
+          <Skeleton className="w-full h-16 rounded-lg" />
+        </div>
+      )}
+      {data.totalPages > currentPage && (
+        <div ref={loadMoreRef} className="w-full h-20" />
+      )}
+    </div>
+  );
+};
+
+export default PageClient;

app/user-info/[user]/page.tsx

@@ -0,0 +1,40 @@
+import userMarkers from "@api/marker/user-marker";
+import Section from "@common/section";
+import SideMain from "@common/side-main";
+import Text from "@common/text";
+import { cookies } from "next/headers";
+import PageClient from "./page-client";
+
+type Params = {
+  user: string;
+};
+
+const UserInfoPage = async ({ params }: { params: Params }) => {
+  const { user } = params;
+
+  const cookieStore = cookies();
+  const decodeCookie = decodeURIComponent(cookieStore.toString());
+  const decodeUserName = decodeURIComponent(user);
+
+  const data = await userMarkers({
+    userName: decodeUserName,
+    cookie: decodeCookie,
+  });
+
+  return (
+    <SideMain hasBackButton headerTitle="대한민국 철봉 지도">
+      <Section>
+        <div>
+          <Text typography="t4" fontWeight="bold" className="mr-1">
+            {decodeUserName}
+          </Text>
+        </div>
+        <Text typography="t6">님이 등록한 위치</Text>
+      </Section>
+
+      <PageClient data={data} userName={decodeUserName} />
+    </SideMain>
+  );
+};
+
+export default UserInfoPage;

lib/api/marker/user-marker.ts

@@ -0,0 +1,49 @@
+import fetchData from "@lib/fetchData";
+
+export interface UserMarker {
+  latitude: number;
+  longitude: number;
+  markerId: number;
+  description: string;
+  address: string;
+}
+
+export interface UserMarkerRes {
+  markers: UserMarker[];
+  currentPage: number;
+  totalPages: number;
+  totalMarkers: number;
+}
+
+const userMarkers = async ({
+  userName,
+  page = 1,
+  pageSize = 10,
+  cookie,
+}: {
+  userName: string;
+  page?: number;
+  pageSize?: number;
+  cookie?: string;
+}): Promise<UserMarkerRes> => {
+  const isServer = typeof window === "undefined";
+
+  const url = isServer ? process.env.NEXT_PUBLIC_BASE_URL : "/api/v1";
+
+  const response = await fetchData(
+    `${url}/markers/user/${userName}?page=${page}&pageSize=${pageSize}`,
+    {
+      headers: {
+        Cookie: cookie || "",
+      },
+      cache: "no-store",
+      credentials: "include",
+    }
+  );
+
+  const data = response.json();
+
+  return data;
+};
+
+export default userMarkers;