Merge pull request #49 from 9oormthon-univ/feature/#43

Feature/#43
9oormthon-univ · Aug 2, 2024 · f35ecaa · f35ecaa
2 parents 4eb1c71 + 3e29bf4
commit f35ecaa
Show file tree

Hide file tree

Showing 46 changed files with 1,468 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,10 @@
     <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=96604ec037f2dfedf241ad7e007d54c5&libraries=services,clusterer"
+    ></script>
     <title>Gieoghaebom</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-lottie": "^1.2.4",
     "react-router-dom": "^6.22.3",
     "react-slick": "^0.30.2",

diff --git a/src/apis/instance.ts b/src/apis/instance.ts
@@ -2,10 +2,15 @@ import axios, { AxiosInstance } from "axios";
 
 export const imgInstance: AxiosInstance = axios.create({
   baseURL: `https://picsum.photos/v2`,
-  timeout: 5000
+  timeout: 1000
 });
 
 export const instance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
   timeout: 50000
 });
+
+export const flaskInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_FLASK_BASE_URL,
+  timeout: 50000
+});
diff --git a/src/apis/postAroundSeniorCenter.ts b/src/apis/postAroundSeniorCenter.ts
@@ -0,0 +1,29 @@
+import { MapProps } from "@components/KakaoMap/KakaoMap.types";
+import { flaskInstance } from "./instance";
+
+const postAroundSeniorCenter = async (latitude: number, longitude: number): Promise<MapProps> => {
+  const postAroundSeniorCenterURL = "/locations";
+
+  try {
+    const accessToken = sessionStorage.getItem("accessToken");
+
+    const requestBody = {
+      latitude,
+      longitude
+    };
+
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    };
+
+    const response = await flaskInstance.post(postAroundSeniorCenterURL, requestBody, config);
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default postAroundSeniorCenter;
diff --git a/src/apis/postSeniorCenterList.ts b/src/apis/postSeniorCenterList.ts
@@ -0,0 +1,29 @@
+import { MapProps } from "@components/KakaoMap/KakaoMap.types";
+import { flaskInstance } from "./instance";
+
+const postSeniorCenterList = async (page: number, keyword: string): Promise<MapProps> => {
+  const postSeniorCenterListURL = "/search";
+
+  try {
+    const accessToken = sessionStorage.getItem("accessToken");
+
+    const requestBody = {
+      keyword,
+      page
+    };
+
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    };
+
+    const response = await flaskInstance.post(postSeniorCenterListURL, requestBody, config);
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default postSeniorCenterList;
diff --git a/src/assets/icons/backArrow.svg b/src/assets/icons/backArrow.svg
diff --git a/src/assets/icons/listIcon.svg b/src/assets/icons/listIcon.svg
diff --git a/src/assets/icons/mapIcon.svg b/src/assets/icons/mapIcon.svg
diff --git a/src/assets/icons/phoneIcon.svg b/src/assets/icons/phoneIcon.svg
diff --git a/src/assets/icons/positionIcon.svg b/src/assets/icons/positionIcon.svg
diff --git a/src/assets/icons/retryIcon.svg b/src/assets/icons/retryIcon.svg
diff --git a/src/assets/icons/sadIcon.svg b/src/assets/icons/sadIcon.svg
diff --git a/src/assets/icons/searchIcon.svg b/src/assets/icons/searchIcon.svg
diff --git a/src/assets/icons/smileIcon.svg b/src/assets/icons/smileIcon.svg
diff --git a/src/assets/icons/timerIcon.svg b/src/assets/icons/timerIcon.svg
diff --git a/src/assets/icons/whiteListIcon.svg b/src/assets/icons/whiteListIcon.svg
diff --git a/src/assets/icons/whiteMapIcon.svg b/src/assets/icons/whiteMapIcon.svg
diff --git a/src/components/KakaoMap/KakaoMap.styles.ts b/src/components/KakaoMap/KakaoMap.styles.ts
@@ -0,0 +1,90 @@
+import styled from "@emotion/styled";
+
+export const Pin = styled.button`
+  min-width: 70px;
+  max-width: 106px;
+  height: 38px;
+  flex-shrink: 0;
+
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 8px;
+  margin: 0 16px;
+
+  ${({ theme }) => theme.text.detail2_bold};
+  color: ${({ theme }) => theme.colors.gray[600]};
+
+  border-radius: 71px;
+  background-color: #fff;
+
+  transition: all 0.2s ease;
+
+  border: 1px solid #00b207;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top: 14px solid #fff;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  &[data-selected="true"] {
+    color: #fff;
+
+    border: 1px solid #fff;
+    background-color: #00b207;
+
+    &::after {
+      border-top: 14px solid #00b207;
+    }
+  }
+`;
+
+export const SearchButton = styled.button`
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  padding: 6px 12px;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: 50px;
+  background: #fff;
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 1px rgba(0, 0, 0, 0.15);
+
+  z-index: 1001;
+`;
+
+export const SearchBtnTxt = styled.p`
+  color: #176d1b;
+
+  ${({ theme }) => theme.text.detail2_reg};
+`;
+
+export const clustererStyles = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "80px",
+  height: "80px",
+  padding: "10px",
+  border: "2px solid #fff",
+  borderRadius: "50%",
+  background:
+    "linear-gradient(102deg, rgba(58, 200, 244, 0.90) 10.91%, rgba(94, 155, 243, 0.90) 89.69%)",
+  boxShadow: "0px 2px 18px 3px rgba(0, 0, 0, 0.10)",
+  fontSize: "20px",
+  fontWeight: 600,
+  color: "#fff"
+};