Ver.2.0 배포 2차

app/(route)/artist/[artistId]/_components/ArtistMap.tsx

@@ -0,0 +1,81 @@
+import { useEffect } from "react";
+import { EventCardType } from "@/types/index";
+
+interface Props {
+  scheduleData: EventCardType[];
+  setLocationInfo: (data: EventCardType) => void;
+  setSelectedCardId: (id: string | null) => void;
+}
+
+const ArtistMap = ({ scheduleData, setLocationInfo, setSelectedCardId }: Props) => {
+  useEffect(() => {
+    if (window.kakao) {
+      window.kakao.maps.load(() => {
+        const mapContainer = document.getElementById("map");
+        const mapOption = {
+          center: new window.kakao.maps.LatLng(37.566826, 126.9786567),
+          level: 9,
+        };
+        const map = new window.kakao.maps.Map(mapContainer, mapOption);
+        const geocoder = new window.kakao.maps.services.Geocoder();
+
+        const myMarker = (data: EventCardType) => {
+          const { address, placeName } = data;
+
+          geocoder.addressSearch(address, (result: any, status: any) => {
+            if (status === window.kakao.maps.services.Status.OK) {
+              const coords = new window.kakao.maps.LatLng(result[0].y, result[0].x);
+
+              const imageSrc = "/icon/marker.svg";
+              const imageSize = new window.kakao.maps.Size(20, 20);
+              const markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize);
+
+              const marker = new window.kakao.maps.Marker({
+                map: map,
+                position: coords,
+                image: markerImage,
+              });
+              marker.setMap(map);
+
+              const content =
+                '<div class="relative w-fit rounded-full bg-gray-900 px-12 py-8 text-center text-14 font-600 text-white-black">' +
+                placeName +
+                '<div class="absolute -bottom-12 right-1/2 translate-x-1/2">' +
+                '<img src="/icon/marker-bottom.svg" />' +
+                "</div>" +
+                "</div>";
+
+              const customOverlay = new window.kakao.maps.CustomOverlay({
+                position: coords,
+                content: content,
+                yAnchor: 1.9,
+              });
+
+              window.kakao.maps.event.addListener(marker, "mouseover", () => {
+                customOverlay.setMap(map);
+              });
+              window.kakao.maps.event.addListener(marker, "mouseout", () => {
+                customOverlay.setMap(null);
+              });
+
+              window.kakao.maps.event.addListener(marker, "click", () => {
+                setLocationInfo(data);
+                setSelectedCardId(data.id);
+              });
+
+              map.setCenter(coords);
+            }
+          });
+        };
+
+        for (let i = 0; i < scheduleData.length; i++) {
+          myMarker(scheduleData[i]);
+        }
+      });
+    }
+  }, [scheduleData]);
+
+  return <div id="map" className="h-full w-full pc:rounded-lg" />;
+};
+
+export default ArtistMap;

app/(route)/artist/[artistId]/_components/EventCard.tsx

@@ -35,7 +35,7 @@ const EventCard = ({ data, isSelected, onCardClick, scrollRef }: Props) => {
   return (
     <div ref={scrollRef} onClick={onCardClick} className={`relative flex w-full cursor-pointer items-center gap-12 border-b border-gray-50 bg-white-black py-12`}>
       <div className="flex-center absolute right-0 top-[1.3rem] z-heart flex-col text-12 font-500 text-gray-500" onClick={(e: SyntheticEvent) => e.stopPropagation()}>
-        <HeartButton isSmall isSelected={liked} onClick={handleClick} />
+        <HeartButton isSmall isSelected={liked} onClick={handleClick} isLined />
         <div className="relative bottom-4">{likeCount}</div>
       </div>
       {isSelected && (

app/(route)/artist/[artistId]/page.tsx

@@ -71,10 +71,6 @@ const ArtistIdPage = () => {
 
   const handleButtonClick = () => {
     setToggleTab((prev) => !prev);
-
-    if (toggleTab) {
-      setSelectedCard(null);
-    }
   };
 
   const [selectedCard, setSelectedCard] = useState<EventCardType | null>(null);
@@ -86,7 +82,7 @@ const ArtistIdPage = () => {
 
   useEffect(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }, [selectedCard?.id, toggleTab]);
+  }, [selectedCard?.id]);
 
   const handleCardClick = (select: EventCardType) => {
     setSelectedCard(select.id === selectedCard?.id ? null : select);
@@ -103,7 +99,7 @@ const ArtistIdPage = () => {
         <div
           className={`absolute left-0 top-0 z-zero h-full w-full ${toggleTab ? "tablet:pl-360 pc:pl-400" : ""} pb-344 tablet:pb-0 pc:h-[84rem] pc:rounded-lg pc:border pc:border-gray-100`}
         >
-          <KakaoMap scheduleData={mapData} toggleTab={toggleTab} setToggleTab={setToggleTab} selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+          <KakaoMap scheduleData={mapData} selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
         </div>
         <button
           onClick={handleButtonClick}

app/(route)/event/[eventId]/edit/page.tsx

@@ -12,6 +12,7 @@ import PinkLayout from "@/components/layout/PinkLayout";
 import { useStore } from "@/store/index";
 import { META_TAG } from "@/constants/metaTag";
 import EditContent from "./_components/EditContent";
+import DottedLayout from "@/components/layout/DottedLayout";
 
 let INITIAL_DATA: PostType;
 
@@ -57,19 +58,19 @@ const Edit = () => {
   return (
     <>
       <MetaTag title={META_TAG.edit["title"]} description={META_TAG.edit["description"]} />
-      <PinkLayout size="narrow">
-        <div className="p-20 pb-120 text-16 pc:p-0">
-          {init ? (
-            <GenericFormProvider formOptions={{ mode: "onChange", defaultValues: INITIAL_DATA, shouldFocusError: true }}>
-              <EditContent />
-            </GenericFormProvider>
-          ) : (
-            <div className="flex h-[10vh] w-full items-center justify-center">
-              <LoadingDot />
-            </div>
-          )}
-        </div>
-      </PinkLayout>
+      <DottedLayout size="narrow">
+      <div className="p-20 pb-120 text-16 pc:p-0">
+        {init ? (
+          <GenericFormProvider formOptions={{ mode: "onChange", defaultValues: INITIAL_DATA, shouldFocusError: true }}>
+            <EditContent />
+          </GenericFormProvider>
+        ) : (
+          <div className="flex h-[10vh] w-full items-center justify-center">
+            <LoadingDot />
+          </div>
+        )}
+      </div>
+      </DottedLayout>
     </>
   );
 };

app/(route)/mypage/_components/NoContent.tsx

@@ -0,0 +1,39 @@
+import { useRouter } from "next/navigation";
+
+const TAB = {
+  MyCalendar: {
+    title: "관심있는 행사에 좋아요를 눌러보세요!",
+    path: "/search",
+    sub: "행사 둘러보기",
+  },
+  MyReview: {
+    title: "아직 작성하신 후기가 없습니다😶",
+  },
+  MyPost: {
+    title: "작성하신 행사가 없습니다.",
+    path: "/post",
+    sub: "새 행사 등록하러 가기",
+  },
+};
+
+interface Props {
+  type: keyof typeof TAB;
+}
+
+const NoContent = ({ type }: Props) => {
+  const route = useRouter();
+  const tabType = TAB[type];
+
+  return (
+    <div className="flex-center flex-col gap-8 p-40">
+      <h1 className="text-16 font-500 ">{tabType.title}</h1>
+      {"path" in tabType && (
+        <button onClick={() => route.push(tabType.path)} className="text-14 text-sub-pink hover:underline">
+          {tabType.sub}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default NoContent;

app/(route)/mypage/_components/UserProfile.tsx

@@ -13,7 +13,7 @@ const UserProfile = () => {
   const { session } = useAuth();
 
   return (
-    <div className="flex items-center justify-between px-20 pt-44 pc:h-fit pc:w-[26.2rem] pc:flex-col pc:gap-28">
+    <div className="flex items-center justify-between px-20 pt-44 pc:sticky pc:top-40 pc:h-fit pc:w-[26.2rem] pc:flex-col pc:gap-28">
       <div className="flex items-center justify-center gap-12 pc:flex-col">
         <div className="relative h-56 w-56 pc:h-80 pc:w-80">
           <Image

app/(route)/mypage/_components/tab/MyArtistTab/MyArtistEvent.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import SortButton from "@/(route)/search/_components/SortButton";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import HorizontalEventCard from "@/components/card/HorizontalEventCard";
+import DeferredSuspense from "@/components/skeleton/DeferredSuspense";
+import HorizontalEventCardSkeleton from "@/components/skeleton/HorizontalEventCardSkeleton";
+import { instance } from "@/api/api";
+import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { Res_Get_Type } from "@/types/getResType";
+import SortIcon from "@/public/icon/sort.svg";
+import NoContent from "../../NoContent";
+
+const SIZE = 20;
+
+const SORT = ["최신순", "인기순"] as const;
+
+interface Props {
+  userId: string;
+}
+
+const MyArtistEvent = ({ userId }: Props) => {
+  const [sort, setSort] = useState<(typeof SORT)[number]>(SORT[0]);
+
+  const getArtistEvents = async ({ pageParam = 1 }) => {
+    const data: Res_Get_Type["artistEvent"] = await instance.get(`/event/${userId}/artist`, {
+      sort,
+      size: SIZE,
+      page: pageParam,
+      userId: userId,
+    });
+    return data;
+  };
+
+  const {
+    data: artistEvents,
+    fetchNextPage,
+    refetch,
+    isFetching,
+  } = useInfiniteQuery({
+    initialPageParam: 1,
+    queryKey: ["artistEvent"],
+    queryFn: getArtistEvents,
+    getNextPageParam: (lastPage) => lastPage && (lastPage.page * SIZE < lastPage.totalCount ? lastPage.page + 1 : null),
+  });
+
+  const containerRef = useInfiniteScroll({
+    handleScroll: fetchNextPage,
+    deps: [artistEvents],
+  });
+
+  useEffect(() => {
+    refetch();
+  }, [sort]);
+
+  return (
+    <>
+      <div className="flex-center w-full flex-col">
+        <div className="flex w-full flex-col items-start gap-16">
+          <h1 className="text-20 font-700 text-gray-900">내 아티스트 이벤트</h1>
+          <div className="flex w-fit items-center gap-8">
+            <SortIcon />
+            <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
+              최신순
+            </SortButton>
+            <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
+              인기순
+            </SortButton>
+          </div>
+        </div>
+        {artistEvents?.pages[0].totalCount ? (
+          <div className="flex w-full flex-wrap items-center gap-x-24">
+            {artistEvents?.pages.map((page) => page?.eventList.map((event) => <HorizontalEventCard key={event.id} data={event} isGrow />))}
+            <DeferredSuspense fallback={<HorizontalEventCardSkeleton />} isFetching={isFetching} />
+            <div ref={containerRef} className="h-16 w-full" />
+          </div>
+        ) : (
+          <NoContent type="MyPost" />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default MyArtistEvent;

app/(route)/mypage/_components/tab/MyArtistTab/MyArtists.tsx

@@ -0,0 +1,40 @@
+import { useRouter } from "next/navigation";
+import ArtistCard from "@/components/ArtistCard";
+import { ArtistType } from "@/types/index";
+
+const MyArtists = ({ data }: { data: ArtistType[] }) => {
+  const router = useRouter();
+
+  return (
+    <div className="flex w-full flex-col gap-16">
+      <div className="flex w-full items-center justify-between">
+        <h1 className="text-20 font-700 text-gray-900">내 아티스트</h1>
+        <button className="pl- text-14 font-500 text-blue" onClick={() => router.push("/setting/my-artist")}>
+          팔로우 아티스트 수정하기
+        </button>
+      </div>
+      <div className="flex w-full flex-col items-center">
+        <div className="flex w-full flex-wrap justify-center gap-20 tablet:justify-start pc:gap-32">
+          {data.map((artist) => {
+            if (!artist) {
+              return null;
+            }
+            return (
+              <ArtistCard
+                key={artist.id}
+                profileImage={artist.image}
+                onClick={() => {
+                  router.push(`/artist/${artist.id}`);
+                }}
+              >
+                {artist.name}
+              </ArtistCard>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyArtists;