👽 Update : update code due to API changes

potenday-project · Nov 14, 2023 · 6692c9d · 6692c9d
1 parent c512589
commit 6692c9d
Show file tree

Hide file tree

Showing 5 changed files with 491 additions and 163 deletions.
diff --git a/Frontend/src/pages/Guide/Guide.tsx b/Frontend/src/pages/Guide/Guide.tsx
@@ -77,6 +77,11 @@ const Guide = () => {
 
   const data = ["재난대처", "응급처치", "생존배낭"];
 
+  // 안드로이드 데이터 전송
+  useEffect(() => {
+    window.Android.getType(name);
+  }, [name]);
+
   // useEffect(() => {
   //   let stored = localStorage.getItem("tabs");
   //   if (!stored) return;

diff --git a/Frontend/src/pages/Map/Map.tsx b/Frontend/src/pages/Map/Map.tsx
@@ -158,6 +158,7 @@ const Map = () => {
   const [myLocation, setMyLocation] = useRecoilState(curLocationAtom);
 
   const [wholeData, setWholeData] = useState<IArr[]>();
+  const [tempLivingData, setTempLivingData] = useState<IArr[]>();
 
   const wholeDataArr = () => {
     let sortArr: {
@@ -170,7 +171,11 @@ const Map = () => {
     }[] = [];
     if (dataArr) {
       dataArr.waterworks.map((x) => sortArr.push(x));
-      dataArr.shelter.map((x) => sortArr.push(x));
+      dataArr.shelter.map((x) => {
+        if (x.tag === "전체 대피소") {
+          sortArr.push(x);
+        }
+      });
       dataArr.hospital.map((x) => sortArr.push(x));
     }
     sortArr.sort((a, b) => {
@@ -268,7 +273,7 @@ const Map = () => {
     if (mapRef) {
       let center = mapRef.getCenter();
       setMyLocation({ latitude: center._lat, longitude: center._lng });
-      console.log(dataArr);
+      // console.log(dataArr);
     }
   };
 
@@ -312,22 +317,28 @@ const Map = () => {
                   />
                 ))
               : dataArr && categoryName === "전체 대피소"
-              ? dataArr.shelter.map((data) => (
-                  <Marker
-                    key={data.title}
-                    position={
-                      new navermaps.LatLng(data.latitude, data.longitude)
-                    }
-                    title={data.title}
-                    onClick={() => {
-                      clickMapEvent([data.latitude, data.longitude]);
-                      setListName(data.title);
-                    }}
-                    icon={{
-                      content: `<div class="marker exitMarker"><img src="assets/icon/exit.png" alt=${data.tag} /></div>`,
-                    }}
-                  />
-                ))
+              ? dataArr.shelter.map((data) => {
+                  if (data.tag === "전체 대피소") {
+                    return (
+                      <Marker
+                        key={data.title}
+                        position={
+                          new navermaps.LatLng(data.latitude, data.longitude)
+                        }
+                        title={data.title}
+                        onClick={() => {
+                          clickMapEvent([data.latitude, data.longitude]);
+                          setListName(data.title);
+                        }}
+                        icon={{
+                          content: `<div class="marker exitMarker"><img src="assets/icon/exit.png" alt=${data.tag} /></div>`,
+                        }}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })
               : dataArr && categoryName === "병원&약국"
               ? dataArr.hospital.map((data) => (
                   <Marker
@@ -350,6 +361,52 @@ const Map = () => {
                     }}
                   />
                 ))
+              : dataArr && categoryName === "임시주거시설"
+              ? dataArr.shelter.map((data) => {
+                  if (data.tag === "임시주거시설") {
+                    return (
+                      <Marker
+                        key={data.title}
+                        position={
+                          new navermaps.LatLng(data.latitude, data.longitude)
+                        }
+                        title={data.title}
+                        onClick={() => {
+                          clickMapEvent([data.latitude, data.longitude]);
+                          setListName(data.title);
+                        }}
+                        icon={{
+                          content: `<div class="marker exitMarker"><img src="assets/icon/exit.png" alt=${data.tag} /></div>`,
+                        }}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })
+              : dataArr && categoryName === "지진 대피소"
+              ? dataArr.shelter.map((data) => {
+                  if (data.tag === "지진 대피소") {
+                    return (
+                      <Marker
+                        key={data.title}
+                        position={
+                          new navermaps.LatLng(data.latitude, data.longitude)
+                        }
+                        title={data.title}
+                        onClick={() => {
+                          clickMapEvent([data.latitude, data.longitude]);
+                          setListName(data.title);
+                        }}
+                        icon={{
+                          content: `<div class="marker exitMarker"><img src="assets/icon/exit.png" alt=${data.tag} /></div>`,
+                        }}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })
               : dataArr && categoryName === "전체"
               ? wholeData?.map((data) => (
                   <Marker

diff --git a/Frontend/src/pages/Map/components/List.tsx b/Frontend/src/pages/Map/components/List.tsx
@@ -0,0 +1,114 @@
+import styled from "styled-components";
+import { IData } from "../Map";
+import CopyClipBoard from "../../../components/CopyClipBoard";
+import { v4 as uuidv4 } from "uuid";
+
+interface IListColor {
+  color: string;
+}
+
+const ListItem = styled.li<IListColor>`
+  position: relative;
+  display: flex;
+  margin-bottom: 8px;
+  padding: 20px 26px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  border-radius: 20px;
+  border: 1px solid var(--G_03, #d9d9d9);
+  background: var(--W_00, #fff);
+  box-sizing: border-box;
+
+  h3 {
+    width: 80%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--Sub_01, var(--G_00, #000));
+    font: 600 18px/24px "Pretendard";
+  }
+  p {
+    width: 230px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--main, #056fe7);
+    font: 400 14px "Pretendard";
+  }
+
+  .label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 67px;
+    height: 100%;
+    flex-shrink: 0;
+    border-radius: 0px 20px 20px 20px;
+    background: ${(props) =>
+      props.color === "전체 대피소" ||
+      props.color === "임시주거시설" ||
+      props.color === "지진 대피소" ||
+      props.color === "대피소" ||
+      props.color === "지진옥외" ||
+      props.color === "이재민 임시주거시설" ||
+      props.color === "지진겸용 임시주거시설"
+        ? `#056fe7 no-repeat url('${process.env.PUBLIC_URL}/assets/icon/exit.png')`
+        : props.color === "급수시설"
+        ? `#5EBBCB no-repeat url('${process.env.PUBLIC_URL}/assets/icon/drop.png')`
+        : props.color === "병원"
+        ? `#EF4AAD no-repeat url('${process.env.PUBLIC_URL}/assets/icon/hospital.png')`
+        : props.color === "약국"
+        ? `#7750E7 no-repeat url('${process.env.PUBLIC_URL}/assets/icon/medicine.png')`
+        : null};
+    background-position: center;
+  }
+  .copy {
+    display: inline-block;
+  }
+`;
+
+interface IList {
+  data:
+    | {
+        address: string;
+        distance: number;
+        facility: string;
+        gu: string;
+        latitude: number;
+        longitude: number;
+        scale?: string;
+        si: string;
+        tag: string;
+        title: string;
+      }
+    | {
+        [key: string]: string | number;
+        tag: string;
+        title: string;
+        address: string;
+      };
+  tag: string;
+  clickEvent: any;
+  setListName: any;
+}
+
+export default function List({ data, tag, clickEvent, setListName }: IList) {
+  return (
+    <ListItem
+      key={`${data.title}-${tag}${uuidv4()}`}
+      color={data.tag}
+      onClick={(e) => {
+        clickEvent([data.latitude, data.longitude]);
+        setListName(data.title);
+      }}
+    >
+      <h3>{data.title}</h3>
+      <div className="addressWrap">
+        <p>{data.address}</p>
+        <CopyClipBoard text={data.address} />
+      </div>
+      <div className="label"></div>
+    </ListItem>
+  );
+}