diff --git a/Frontend/src/pages/Guide/DisasterDetail.tsx b/Frontend/src/pages/Guide/DisasterDetail.tsx index 49c99f2..923b884 100644 --- a/Frontend/src/pages/Guide/DisasterDetail.tsx +++ b/Frontend/src/pages/Guide/DisasterDetail.tsx @@ -3,6 +3,7 @@ import Header from "../../components/Header"; import styled from "styled-components"; import disaterArray from "./data/disater.json"; import { useState } from "react"; +import DisasterList from "./components/DisasterList"; const DetailWrap = styled.section` height: 100%; @@ -46,7 +47,7 @@ const DetailWrap = styled.section` } `; -const ListContents = styled.li` +export const ListContents = styled.li` color: var(--G_00, #000); font: 400 18px/22px "Pretendard"; margin-bottom: 6px; @@ -54,7 +55,6 @@ const ListContents = styled.li` position: relative; &::before { content: "•"; - /* background-color: plum; */ width: 10px; height: 10px; position: absolute; @@ -115,12 +115,6 @@ export default function DisasterDetail() { const arr = arrayData[enterName]; - if (typeof arr["사전 준비"][0] === "string") { - console.log(arr["사전 준비"]); - } else { - console.log(arr["사전 준비"]); - } - return (
@@ -128,88 +122,22 @@ export default function DisasterDetail() {

자연재난

{enterName}

-
- -
- -
-

{arr["유의사항"]}

- -
    -

    사전 준비

    - {arr["사전 준비"].map((x, index) => { - if (typeof x === "object") { - return ( -
  • -

    - {index + 1}.{x.title} -

    - {x.desc} -
    • - ); - } - return ( - - {x.toString()} - - ); - })} -
-
    -

    발생 시

    - {arr["발생 시"].map((x, index) => { - if (typeof x === "object") { - return ( -
  • -

    - {index + 1}.{x.title} -

    - {typeof x.desc === "object" - ? x.desc.map((y, ydex) => { - return ( - - {y} - - ); - }) - : x.desc} -
    • - ); - } - return ( - - {x.toString()} - - ); - })} -
- {arr["발생 이후"] ? ( -
    -

    발생 이후

    - {arr["발생 이후"].map((x, index) => { - if (typeof x === "object") { - return ( -
  • -

    - {index + 1}.{x.title} -

    - {x.desc} -
    • - ); - } - return ( - - {x.toString()} - - ); - })} -
- ) : null} -
    -

    주요기관 연락처

    - {arr["주요기관 연락처"]} -
-
+ +
+ +
+

{arr["유의사항"]}

+ + + + + {arr["발생 이후"] ? ( + + ) : null} +
    +

    주요기관 연락처

    + {arr["주요기관 연락처"]} +
diff --git a/Frontend/src/pages/Guide/components/DisasterList.tsx b/Frontend/src/pages/Guide/components/DisasterList.tsx new file mode 100644 index 0000000..a5a948a --- /dev/null +++ b/Frontend/src/pages/Guide/components/DisasterList.tsx @@ -0,0 +1,39 @@ +import { ListContents } from "../DisasterDetail"; + +interface IDisaterArray { + name: string; + arrayData: string[] | { title: string; desc: string | string[] }[]; +} + +export default function DisasterList({ name, arrayData }: IDisaterArray) { + return ( + + ); +} diff --git a/Frontend/src/pages/Guide/data/disater.json b/Frontend/src/pages/Guide/data/disater.json index 1e91281..fb2c44b 100644 --- a/Frontend/src/pages/Guide/data/disater.json +++ b/Frontend/src/pages/Guide/data/disater.json @@ -283,5 +283,208 @@ } ], "주요기관 연락처": "재난신고 119, 범죄신고 112, 민원 상담 110 행정안전부 중앙재난안전상황실044)205-1542~3" + }, + "대설": { + "유의사항": "대설은 짧은 시간에 급격히 눈이 쌓이게 되므로 눈사태, 교통 혼잡, 쌓인 눈으로 인한 시설물 붕괴 등의 피해가 발생될 수 있습니다.", + "사전 준비": [ + { + "title": "대설지역 및 지속시간 등을 파악해서 언제, 어떻게, 누구와 대피할지를 생각합니다.", + "desc": [ + "TV, 라디오, 인터넷, 스마트폰 등으로 기상상황을 미리 파악하여 언제, 어떻게, 누구와 무엇을 할 지를 준비합니다." + ] + }, + { + "title": "산간 고립지역‧붕괴 위험시설물 등 위험지역에서는 주변에 있는 사람들과 함께 안전한 곳으로 이동합니다.", + "desc": [ + "눈사태 위험지역, 노후주택 등 붕괴 위험이 있는 건물의 주민은 주변에 있는 사람들에게 알려주고 위험지역에 있는 사람들과 함께 안전한 곳으로 이동 준비를 합니다.", + "자가용 이용을 자제하고 대중교통(지하철, 버스 등) 수단을 이용합니다.", + "눈피해 대비용 안전장구(체인, 모래주머니, 삽 등)를 휴대합니다." + ] + }, + { + "title": "주택이나 차량 등의 보호를 위해 사전에 어떻게 할지를 가족이나 이웃과 함께 대비 합니다.", + "desc": [ + "선박이나 어망·어구 등은 사전에 결박하여 피해를 최소화하도록 합니다.", + "수산 증‧양식 시설은 어류 등이 동사하지 않도록 보온조치를 합니다.", + "공사장, 비탈면이 있는 지역은 안전 상태를 미리 확인합니다." + ] + }, + { + "title": "비상용품 준비 등 재난 발생에 가족이나 이웃과 함께 대비합니다.", + "desc": [ + "비상시 신속히 응급용품을 가지고 대피할 수 있도록 사전에 배낭 등에 모아둡니다.", + "상수도 공급이 중단 될 수 있으므로, 욕조 등에 미리 물을 받아둡니다.", + "정전에 대비하여 비상용 랜턴, 양초, 배터리 등을 구비해 둡니다." + ] + }, + { + "title": "약속, 일정 등을 조정합니다.", + "desc": [ + "대설이 예보된 날은 외출을 자제합니다.", + "부득이 외출 시에는 몸을 따뜻이 유지하기 위해 옷을 여러 겹 겹쳐 입습니다.", + "눈길 및 빙판길 운전을 피하고, 이동이 필요할 시에는 비상구호품 및 장비를 챙깁니다." + ] + } + ], + "발생 시": [ + { + "title": "일반 가정에서는 가족들이 함께", + "desc": [ + "눈이 많이 올 때에는 되도록 외출을 자제하여 피해를 사전에 방지합니다.", + "내 집 앞, 내 점포 앞 보행로와 지붕 및 옥상에 내린 눈은 가족이나 이웃과 함께 치워 사고를 예방합니다.", + "노후가옥은 가족이나 이웃과 함께 쌓인눈의 무게로 무너지지 않도록 안전점검과 보강을 하고, 고립이 우려되는 지역은 경찰서, 관공서와 비상연락체계를 유지하도록 합니다.", + "외출 시에는 바닥면이 넓은 운동화나 등산화를 착용하고, 주머니에 손을 넣지 말고 보온 장갑 등을 착용하여 체온을 유지합니다.", + "출·퇴근을 평소보다 조금 일찍 하고, 자가용 대신 지하철, 버스 등 대중교통을 이용합니다." + ] + }, + { + "title": "자동차 운전 중에는 가족이나 동승자가 함께", + "desc": [ + "되도록 외출을 자제하고 대중교통을 이용하고, 부득이 차량을 이용할 경우에는 반드시 차량용 안전장구(체인, 염화칼슘, 삽 등)를 휴대합니다.", + "차량으로 장거리 이동 시에는 월동장비, 연료, 식음료 등을 사전에 준비하고 기상상황을 미리 확인토록 합니다.", + "커브길, 고갯길, 고가도로, 교량, 결빙 구간 등에서는 특히 사고위험이 높으므로 서행하고, 교통사고 예방을 위해 안전거리를 두고 운행합니다.", + "차량 이동 중 고립되었을 때에는 가능한 수단을 통해 구조 연락을 취하고, 동승자와 함께 체온을 유지하고 돌아가면서 휴식을 취하도록 합니다.한 사람은 반드시 깨어있어야 하며 야간에는 실내등을 켜거나 색깔 있는 옷을 눈 위에 펼쳐 놓아 구조요원이 쉽게 찾을 수 있도록 합니다.", + "차량이 고립·정체된 경우 되도록 차량에서 대기하고, 부득이 차량을 벗어날 경우 연락처와 열쇠를 꽂아 둔 채로 대피합니다." + ] + }, + { + "title": "농·어촌, 공장 등에서는 가족이나 이웃, 직원이 함께", + "desc": [ + "비닐하우스, 가설 건축물 등은 가족이나 이웃과 함께 미리 점검하고, 지붕에 눈이 쌓이기 전에 치워 두거나, 받침대 등으로 미리 보강하여 피해를 예방합니다.", + "농촌에서는 가족이나 이웃과 함께 작물을 재배하지 않는 곳은 비닐을 걷어내고, 수산 증·양식장은 어류 등이 동사하지 않도록 보온조치를 합니다.", + "공장, 시장 비가림 시설, 주거용 비닐하우스, 창고 등 가설 패널을 이용한 구조물은 쌓인눈의 무게에 취약하므로 직원들과 함께 안전한 곳으로 이동합니다." + ] + } + ], + "발생 이후": [ + { + "title": "가족 및 지인의 안전 여부를 주위 사람들과 함께 확인합니다.", + "desc": [ + "가족 및 지인과 연락하여 안전 여부를 확인하고, 연락이 되지 않고 실종이 의심되는 경우에는 가까운 경찰서에 신고합니다." + ] + }, + { + "title": "대설로 인한 피해 여부를 주변에 있는 사람들과 함께 확인합니다.", + "desc": [ + "대피 후 집으로 돌아온 경우에는 노후주택 등은 안전에 위험이 있을 수 있으므로, 출입하기 전에 반드시 피해 여부를 확인합니다.", + "파손된 시설물(주택, 상하수도, 축대, 도로 등)은 있을 경우에는 가까운 행정복지센터 (주민센터) 나 시·군·구청에 신고합니다.", + "파손된 사유시설을 보수 또는 복구할 때는 반드시 사진을 찍어 둡니다.", + "고립된 지역에 있을 경우에는 무리하게 운전하여 이동하지 말고, 119 또는 112 등에 신고하거나 주변에 도움을 요청합니다." + ] + }, + { + "title": "대설로 인한 2차 피해를 주변에 있는 사람들과 함께 방지합니다.", + "desc": [ + "대설 후, 한파가 이어져 빙판이 생길 수 있으니 외출 시 따뜻하게 옷을 입고 미끄럼에 주의하도록 합니다.", + "가스, 전기가 차단되었을 때, 한국가스안전공사(1544-4500)와한국전기안전공사(1588-7500) 또는 전문가의 안전점검 후에 사용합니다.", + "대설로 가스가 누출될 수 있으므로 창문을 열어 충분히 환기하고, 성냥불이나 라이터는 환기 전까지 사용하지 않습니다.", + "붕괴 위험이 있는 시설물은 점검 후에 출입하도록 합니다." + ] + } + ], + "주요기관 연락처": "재난신고 119, 범죄신고 112, 민원 상담 110 행정안전부 중앙재난안전상황실044)205-1542~3" + }, + "호우": { + "유의사항": "호우는 하천 범람, 산사태, 침수 등을 통해 인명피해와 재산피해를 발생시킬 수 있기 때문에가족이나 이웃과 함께 대비합니다.", + "사전 준비": [ + { + "title": "호우예보지역과 시간을 주변에 있는 사람들과 함께 공유합니다.", + "desc": [ + "TV, 라디오, 인터넷, 스마트폰의 안전디딤돌 앱 등으로 기상상황을 미리 파악하여 가족과 주변 사람들과 함께 공유하고 대비합니다." + ] + }, + { + "title": "산간·계곡, 하천, 방파제 등 위험지역에서는 주변에 있는 사람들과 함께 안전한 곳으로 이동합니다.", + "desc": [ + "산간·계곡, 하천, 방파제 등에서 야영이나 물놀이를 멈추고 안전한 곳으로 대피합니다.", + "저지대나 상습 침수지역, 산사태 위험지역, 지하 공간이나 붕괴 우려가 있는 노후주택·건물 등에서는 안전한 곳으로 이동합니다." + ] + }, + { + "title": "차량이나 시설물 등의 보호를 위해 가족과 지역주민이 함께 미리 준비합니다.", + "desc": [ + "하천이나 해변, 저지대에 주차된 차량은 안전한 곳으로 이동합니다.", + "가정의 하수구나 집 주변의 배수구를 미리 점검하고 막힌 곳은 뚫어야 합니다.", + "침수가 예상되는 아파트 지하주차장 건물 등에서는 모래 주머니, 물 판막이등을 이용하여 피해를 예방합니다.", + "농경지는 배수로를 정비하여 피해를 예방합니다.", + "공사장, 주변의 배수로, 빗물받이, 비탈면, 옹벽, 축대 등은 미리 점검합니다." + ] + }, + { + "title": "가족과 함께 비상용품을 준비하여 재난 발생에 대비합니다.", + "desc": [ + "비상시 신속히 응급용품을 가지고 대피할 수 있도록 사전에 배낭 등에 모아둡니다.", + "상수도 공급이 중단 될 수 있으므로, 욕조 등에 미리 물을 받아둡니다.", + "재난정보 수신을 위해 스마트폰에 안전디딤돌 앱이 설치되었는지 확인하고 가까운 행정복지센터(주민센터) 등과 긴급 연락망을 확인합니다." + ] + }, + { + "title": "외출은 자제하고 연세 많은 어르신 등의 안부를 수시로 확인합니다.", + "desc": [ + "약속된 일정은 취소하거나 조정하여 외출을 자제하고, 주변에 정보를 알려 줍니다.", + "연세 많은 어르신, 어린이, 장애인 등은 외출을 하지 않도록 당부하고 수시로 전화 등을 통해 안부를 확인합니다." + ] + } + ], + "발생 시": [ + { + "title": "나와 가족, 지인들의 안전을 위해 외출은 자제하고 정보를 지속적으로 청취하며 정보가 필요한 사람들과 공유합니다.", + "desc": [ + "TV, 라디오 등을 통해 기상정보를 청취하여 내가 있는 지역의 상황을 지속적으로 파악하고, 주변에 있는 사람들에게 알려 줍니다.", + "외부에 있는 가족, 지인, 이웃과 연락하여 안전을 확인하고 위험정보 등을 공유합니다.", + "차량은 속도를 줄여 운행하고, 개울가, 하천변, 해안가 등 급류에 휩쓸릴 수 있는 지역이나 침수 위험지역에는 접근하지 말고 주변에 있는 사람들에게 알려 줍니다." + ] + }, + { + "title": "건물, 집안 등 실내에서의 안전수칙을 미리 알아두고 가족과 함께 확인합니다.", + "desc": [ + "건물의 출입문, 창문은 닫아서 파손되지 않도록 하고, 창문이나 유리문에서 되도록 떨어져 있도록 합니다.", + "강풍으로 인해 피해를 입지 않도록 가급적 욕실과 같이 창문이 없는 방이나 집안의 제일 안쪽으로 이동합니다.", + "가스 누출로 2차 피해가 발생할 수 있으므로 사전에 차단하고, 감전 위험이 있는 집 안팎의 전기시설은 만지지 않도록 합니다.", + "정전이 발생한 경우 양초를 사용하지 말고 휴대용 랜턴, 휴대폰 등을 사용합니다." + ] + }, + { + "title": "위험지역은 접근하지 말고, 즉시 안전한 지역으로 주변에 있는 사람들과 함께 대피합니다.", + "desc": [ + "침수지역, 산간·계곡 등 위험지역에 있거나 대피 권고를 받았을 경우에는 주변에 있는 사람들과 함께 즉시 안전한 지역으로 대피합니다.", + "주변에 연세가 많거나 홀로계신 어르신, 어린이, 장애인 등 대피에 어려움이 있는 분들은 안전하게 대피할 수 있도록 돕습니다.", + "특히, 침수된 도로, 지하차도, 교량 등은 사람과 차량의 통행을 엄격히 금지하고 주변에 있는 사람들에게 알려 진입하지 않도록 합니다.", + "공사장, 가로등, 신호등, 전신주, 지하 공간 등 위험지역에는 접근하지 않도록 합니다.", + "농촌지역에서는 논둑이나 물꼬를 보러 나가지 않습니다.", + "이동식 가옥이나 임시 시설에 거주할 경우에는 견고한 건물로 즉시 이동하고 주변에 있는 사람들에게 위험지역을 알려줍니다." + ] + } + ], + "발생 이후": [ + { + "title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.", + "desc": [ + "가족 및 지인과 연락하여 안전 여부를 확인하고, 연락이 되지 않고 실종이 의심되는 경우에는 가까운 경찰서에 신고합니다." + ] + }, + { + "title": "태풍으로 인한 피해 여부를 주변에 있는 사람들과 함께 확인합니다.", + "desc": [ + "대피 후 집으로 돌아온 경우 반드시 주택 등의 안전 여부를 확인하고 출입합니다.", + "파손된 시설물(주택, 상하수도, 축대, 도로 등)은 가까운 시·군·구청이나 행정복지센터(주민센터)에 신고합니다.", + "파손된 사유시설을 보수 또는 복구할 때에는 반드시 사진을 찍어 둡니다.", + "침수된 도로나 교량은 파손되었을 수 있으므로 건너지 않습니다.", + "고립된 지역에서는 무리하게 물을 건너지 말고, 119에 신고하거나 주변에 도움을 요청합니다." + ] + }, + { + "title": "주변에 있는 사람들과 함께 태풍으로 인한 2차 피해를 방지합니다.", + "desc": [ + "물이 빠져나가고 있을 때에는 기름이나 동물 사체 등 오염된 경우가 많으므로 물에서 멀리 떨어져 있도록 합니다.", + "수돗물이나 저장되었던 식수는 오염 여부를 확인한 후에 사용합니다.", + "침수된 음식이나 재료는 식중독의 위험이 있으므로 사용하지 않습니다.", + "침수된 주택은 가스와 전기차단기가 내려가 있는지 확인하고, 한국가스안전공사(1544-4500)와 한국전기안전공사(1588-7500) 또는 전문가의 안전점검 후에 사용합니다.", + "태풍으로 피해를 입은 주택 등은 가스가 누출될 수 있으므로 창문을 열어 충분히 환기하고, 성냥불이나 라이터는 환기 전까지 사용하지 않습니다.", + "쓰러진 농작물은 일으켜 세우고, 침수된 논과 밭을 배수할 때에는 작물에 묻은 흙, 오물 등을 씻어내고 긴급 병해충 방제를 실시합니다." + ] + } + ], + "주요기관 연락처": "재난신고 119, 범죄신고 112, 민원 상담 110 행정안전부 중앙재난안전상황실044)205-1542~3" } }