The-Fellowship-of-the-matzip · ashleysyheo · Jul 3, 2023 · Jun 25, 2023 · Jun 25, 2023 · Jun 25, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,10 +16,12 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
+    "react-kakao-maps-sdk": "^1.1.9",
     "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
     "styled-components": "^5.3.5",
+    "swiper": "^9.4.1",
     "typescript": "^4.7.2"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -33,5 +33,9 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c0befa1276a7e48d077a90cdc41d039b&libraries=services,clusterer"
+    ></script>
   </body>
 </html>
diff --git a/src/api/bookmark/fetchBookmarkList.ts b/src/api/bookmark/fetchBookmarkList.ts
@@ -0,0 +1,29 @@
+import type { BookmarkStore } from "types/common/bookmarkTypes";
+
+import { ACCESS_TOKEN, ENDPOINTS } from "constants/api";
+
+import axiosInstance from "api/axiosInstance";
+
+const fetchBookmarkList = async () => {
+  const accessToken = window.sessionStorage.getItem(ACCESS_TOKEN);
+
+  if (!accessToken) {
+    window.sessionStorage.removeItem(ACCESS_TOKEN);
+    window.alert("다시 로그인 해주세요");
+    window.location.href = "/";
+    return;
+  }
+
+  const { data } = await axiosInstance.get<BookmarkStore[]>(
+    ENDPOINTS.BOOKMARKS,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }
+  );
+
+  return data;
+};
+
+export default fetchBookmarkList;
diff --git a/src/asset/campus-pin-icon.svg b/src/asset/campus-pin-icon.svg
diff --git a/src/asset/clicked-pin-icon.svg b/src/asset/clicked-pin-icon.svg
diff --git a/src/asset/index.ts b/src/asset/index.ts
@@ -2,3 +2,7 @@ export { ReactComponent as CloseIcon } from "./close-icon.svg";
 export { ReactComponent as LogoLight } from "./logo-light.svg";
 export { ReactComponent as PlusIcon } from "./plus-icon.svg";
 export { ReactComponent as SearchIcon } from "./search-icon.svg";
+export { ReactComponent as LeftIcon } from "./left-icon.svg";
+export { ReactComponent as PinIcon } from "./pin-icon.svg";
+export { ReactComponent as ClickedPinIcon } from "./clicked-pin-icon.svg";
+export { ReactComponent as CampusPinIcon } from "./campus-pin-icon.svg";
diff --git a/src/asset/left-icon.svg b/src/asset/left-icon.svg
diff --git a/src/asset/pin-icon.svg b/src/asset/pin-icon.svg
diff --git a/src/components/common/EventMapMarker/EventMapMarker.tsx b/src/components/common/EventMapMarker/EventMapMarker.tsx
@@ -0,0 +1,32 @@
+import ClickedPinIcon from "../../../asset/clicked-pin-icon.svg";
+import PinIcon from "../../../asset/pin-icon.svg";
+import { MapMarker } from "react-kakao-maps-sdk";
+
+import { theme } from "style/Theme";
+
+interface EventMapMarkerProps {
+  position: { lat: number; lng: number };
+  isClicked: boolean;
+  onClick: () => void;
+}
+
+function EventMapMarker({ position, isClicked, onClick }: EventMapMarkerProps) {
+  const icon = isClicked ? ClickedPinIcon : PinIcon;
+
+  return (
+    <MapMarker
+      position={position}
+      onClick={onClick}
+      image={{
+        src: icon,
+        size: {
+          width: 36,
+          height: 36,
+        },
+      }}
+      zIndex={isClicked ? theme.zIndex.overlay : 1}
+    />
+  );
+}
+
+export default EventMapMarker;
diff --git a/src/components/common/SlideCarousel/SlideCarousel.tsx b/src/components/common/SlideCarousel/SlideCarousel.tsx
@@ -0,0 +1,44 @@
+import { MutableRefObject } from "react";
+import { Pagination, Navigation } from "swiper";
+import "swiper/css";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";
+
+interface SlideCarouselProps {
+  children: JSX.Element[];
+  spaceBetween?: number;
+  onSlideChange: (index: number) => void;
+  swiperRef: MutableRefObject<SwiperRef | null>;
+}
+
+function SlideCarousel({
+  children,
+  spaceBetween = 8,
+  onSlideChange,
+  swiperRef,
+}: SlideCarouselProps) {
+  const handleSlideChange = () => {
+    const activeSlideIndex = swiperRef.current?.swiper.realIndex ?? 0;
+    onSlideChange(activeSlideIndex);
+  };
+
+  return (
+    <Swiper
+      ref={swiperRef}
+      className="mySwiper"
+      slidesPerView={1}
+      spaceBetween={spaceBetween}
+      loop={true}
+      modules={[Pagination, Navigation]}
+      onSlideChangeTransitionEnd={handleSlideChange}
+    >
+      {children.map((child) => (
+        <SwiperSlide>{child}</SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}
+
+export default SlideCarousel;
diff --git a/src/components/common/Star/Star.style.tsx b/src/components/common/Star/Star.style.tsx
@@ -5,20 +5,20 @@ import styled, { css } from "styled-components";
 const getSizeStyling = (size: Required<StarProps>["size"]) => {
   const style = {
     lg: css`
-      width: "32px";
-      height: "32px";
+      width: 32px;
+      height: 32px;
     `,
     md: css`
-      width: "24px";
-      height: "24px";
+      width: 24px;
+      height: 24px;
     `,
     sm: css`
-      width: "20px";
-      height: "20px";
+      width: 20px;
+      height: 20px;
     `,
     xs: css`
-      width: "16px";
-      height: "16px";
+      width: 16px;
+      height: 16px;
     `,
   };
 

diff --git a/src/components/pages/MypagePage/BookmarkMapPage/BookmarkMapPage.style.ts b/src/components/pages/MypagePage/BookmarkMapPage/BookmarkMapPage.style.ts
@@ -0,0 +1,40 @@
+import styled, { css } from "styled-components";
+
+export const HeaderWrapper = styled.header`
+  display: flex;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacer.spacing3};
+  margin-bottom: ${({ theme }) => theme.spacer.spacing4};
+  background-color: white;
+`;
+
+export const headerStyle = css`
+  position: absolute;
+  left: 50%;
+  font-weight: bold;
+  transform: translateX(-50%);
+`;
+
+export const MapWrapper = styled.div`
+  height: calc(100vh - 208px);
+
+  & #react-kakao-maps-sdk-map-container {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const StoreListWrapper = styled.div`
+  position: absolute;
+  bottom: ${({ theme }) => theme.spacer.spacing3};
+  width: calc(100% - 16px);
+  z-index: ${({ theme }) => theme.zIndex.overlay};
+
+  & li {
+    width: calc(100% - 16px);
+    margin: ${({ theme }) => theme.spacer.spacing3};
+    padding: ${({ theme }) => theme.spacer.spacing3};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
+  }
+`;