Skip to content

Commit

Permalink
💄 Style : update disaster detail
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamsterStudent
HamsterStudent committed Oct 30, 2023
1 parent 3329fd6 commit 1f672eb
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 20 deletions.
50 changes: 32 additions & 18 deletions Frontend/src/pages/Guide/DisasterDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const ContentsBox = styled.div`
padding: 20px;
`;

const TipBox = styled.div`
export const TipBox = styled.div`
border-radius: 12px;
background: rgba(239, 74, 173, 0.1);
padding: 7px 10px 7px 13px;
Expand All @@ -100,7 +100,9 @@ interface IDisaterArray {
[key: string]: {
유의사항: string;
"사전 준비": string[] | { title: string; desc: string | string[] }[];
"발생 시 유의사항"?: string;
"발생 시": string[] | { title: string; desc: string | string[] }[];
"발생 이후 유의사항"?: string;
"발생 이후"?: string[] | { title: string; desc: string | string[] }[];
"주요기관 연락처": string;
};
Expand All @@ -121,24 +123,36 @@ export default function DisasterDetail() {
<div className="contentsWrap">
<p className="subtitle">자연재난</p>
<h1>{enterName}</h1>
<ContentsBox>
<TipBox>
<div>
<img src="/assets/icon/alert.png" alt="" />
</div>
<p>{arr["유의사항"]}</p>
</TipBox>
{arr ? (
<ContentsBox>
<TipBox>
<div>
<img src="/assets/icon/alert.png" alt="" />
</div>
<p>{arr["유의사항"]}</p>
</TipBox>

<DisasterList name={"사전 준비"} arrayData={arr["사전 준비"]} />
<DisasterList name={"발생 시"} arrayData={arr["발생 시"]} />
{arr["발생 이후"] ? (
<DisasterList name={"발생 이후"} arrayData={arr["발생 이후"]} />
) : null}
<ul>
<h2>주요기관 연락처</h2>
<ListContents>{arr["주요기관 연락처"]}</ListContents>
</ul>
</ContentsBox>
<DisasterList name={"사전 준비"} arrayData={arr["사전 준비"]} />
<DisasterList
name={"발생 시"}
arrayData={arr["발생 시"]}
tip={arr["발생 시 유의사항"]}
/>
{arr["발생 이후"] ? (
<DisasterList
name={"발생 이후"}
arrayData={arr["발생 이후"]}
tip={arr["발생 이후 유의사항"]}
/>
) : null}
<ul>
<h2>주요기관 연락처</h2>
<ListContents>{arr["주요기관 연락처"]}</ListContents>
</ul>
</ContentsBox>
) : (
<ContentsBox>서비스 준비중입니다!</ContentsBox>
)}
</div>
</DetailWrap>
);
Expand Down
13 changes: 11 additions & 2 deletions Frontend/src/pages/Guide/components/DisasterList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
import { ListContents } from "../DisasterDetail";
import { ListContents, TipBox } from "../DisasterDetail";

interface IDisaterArray {
name: string;
arrayData: string[] | { title: string; desc: string | string[] }[];
tip?: string;
}

export default function DisasterList({ name, arrayData }: IDisaterArray) {
export default function DisasterList({ name, arrayData, tip }: IDisaterArray) {
return (
<ul>
<h2>{name}</h2>
{tip ? (
<TipBox>
<div>
<img src="/assets/icon/alert.png" alt="" />
</div>
<p>{tip}</p>
</TipBox>
) : null}
{arrayData.map((data, index) => {
if (typeof data === "object") {
return (
Expand Down
122 changes: 122 additions & 0 deletions Frontend/src/pages/Guide/data/disater.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"비닐하우스의 경우 취약 부분을 사전에 보강하고, 주위의 물건이 강풍에 날아와 피해를 입지 않도록 주변을 미리 정리합니다.",
"강풍에 노출되는 전선들은 누전이나 감전사고가 발생하지 않도록 전선 연결 부위를 사전에 점검하고 필요할 경우 교체 합니다."
],
"발생 시 유의사항": "야외활동을 자제하고 주변의 독거노인 등 건강이 염려되는 분들의 안부를 살펴주세요.",
"발생 시": [
"노약자, 장애인 등이 거주하는 가정의 경우에는 비상시 대피 방법과 연락 방법을 가족 또는 이웃 등과 사전에 의논합니다.",
"대피 시에는 쓰러질 위험이 있는 나무 밑이나 전신주 밑을 피하고 안전한 건물을 이용합니다.",
Expand Down Expand Up @@ -252,6 +253,7 @@
]
}
],
"발생 이후 유의사항": "피해 상황을 확인하고,가까운 행정복지센터 등에 피해를 신고하여 보수·보강을 하도록 합니다.",
"발생 이후": [
{
"title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.",
Expand Down Expand Up @@ -326,6 +328,7 @@
]
}
],
"발생 시 유의사항": "자제하고, 외출을 할 경우에는 대중교통을 이용하거나 자동차의 월동 장비를 반드시 구비해야 합니다.보온 유지를 위해 외투, 장갑, 모자 등을 착용합니다.",
"발생 시": [
{
"title": "일반 가정에서는 가족들이 함께",
Expand Down Expand Up @@ -356,6 +359,7 @@
]
}
],
"발생 이후 유의사항": "큰눈이 멈춘 후에는 주변의 피해를 확인하고, 가까운 행정복지센터(주민센터) 등에 신고하여 보수·보강을 하도록 합니다.",
"발생 이후": [
{
"title": "가족 및 지인의 안전 여부를 주위 사람들과 함께 확인합니다.",
Expand Down Expand Up @@ -456,6 +460,124 @@
]
}
],
"발생 이후 유의사항": "호우가 지나간 후에는 이웃 등 주변의 피해 상황을 확인하고,가까운 행정복지센터 등에 피해를 신고하여 보수·보강을 하도록 합니다.",
"발생 이후": [
{
"title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.",
"desc": [
"가족 및 지인과 연락하여 안전 여부를 확인하고, 연락이 되지 않고 실종이 의심되는 경우에는 가까운 경찰서에 신고합니다."
]
},
{
"title": "태풍으로 인한 피해 여부를 주변에 있는 사람들과 함께 확인합니다.",
"desc": [
"대피 후 집으로 돌아온 경우 반드시 주택 등의 안전 여부를 확인하고 출입합니다.",
"파손된 시설물(주택, 상하수도, 축대, 도로 등)은 가까운 시·군·구청이나 행정복지센터(주민센터)에 신고합니다.",
"파손된 사유시설을 보수 또는 복구할 때에는 반드시 사진을 찍어 둡니다.",
"침수된 도로나 교량은 파손되었을 수 있으므로 건너지 않습니다.",
"고립된 지역에서는 무리하게 물을 건너지 말고, 119에 신고하거나 주변에 도움을 요청합니다."
]
},
{
"title": "주변에 있는 사람들과 함께 태풍으로 인한 2차 피해를 방지합니다.",
"desc": [
"물이 빠져나가고 있을 때에는 기름이나 동물 사체 등 오염된 경우가 많으므로 물에서 멀리 떨어져 있도록 합니다.",
"수돗물이나 저장되었던 식수는 오염 여부를 확인한 후에 사용합니다.",
"침수된 음식이나 재료는 식중독의 위험이 있으므로 사용하지 않습니다.",
"침수된 주택은 가스와 전기차단기가 내려가 있는지 확인하고, 한국가스안전공사(1544-4500)와 한국전기안전공사(1588-7500) 또는 전문가의 안전점검 후에 사용합니다.",
"태풍으로 피해를 입은 주택 등은 가스가 누출될 수 있으므로 창문을 열어 충분히 환기하고, 성냥불이나 라이터는 환기 전까지 사용하지 않습니다.",
"쓰러진 농작물은 일으켜 세우고, 침수된 논과 밭을 배수할 때에는 작물에 묻은 흙, 오물 등을 씻어내고 긴급 병해충 방제를 실시합니다."
]
}
],
"주요기관 연락처": "재난신고 119, 범죄신고 112, 민원 상담 110 행정안전부 중앙재난안전상황실044)205-1542~3"
},
"폭염": {
"유의사항": "폭염이 예보된 때에는 최대한 야외활동을 자제하고 주변의 독거노인 등 건강이 염려되는 분들의 안부를 살펴봅니다.",
"사전 준비": [
{
"title": "일반 가정에서는 가족들과 함께",
"desc": [
"야외활동을 최대한 자제하고, 외출이 꼭 필요한 경우에는 창이 넓은 모자와 가벼운 옷차림을 하고 물병을 반드시 휴대합니다.",
"물을 많이 마시고, 카페인이 들어간 음료나 주류는 마시지 않습니다.",
"냉방이 되지 않는 실내에서는 햇볕을 가리고 맞바람이 불도록 환기를 합니다.",
"창문이 닫힌 자동차 안에는 노약자나 어린이를 홀로 남겨두지 않습니다.",
"거동이 불편한 노인, 신체허약자, 환자 등을 남겨두고 장시간 외출할 경우에는 친인척, 이웃 등에 부탁하고 전화 등으로 수시로 안부를 확인합니다.",
"현기증, 메스꺼움, 두통, 근육경련 등의 증세가 보이는 경우에는 시원한 곳으로 이동하여 휴식을 취하고 시원한 음료를 천천히 마십니다."
]
},
{
"title": "직장에서는 직원들과 함께",
"desc": [
"휴식시간은 장시간 한 번에 쉬기보다는 짧게 자주 갖는 것이 좋습니다.",
"야외 행사, 스포츠경기 등 각종 외부 행사를 자제합니다.",
"점심시간 등을 이용하여 10~15분 정도의 낮잠으로 개인 건강을 유지합니다.",
"직장인들은 편한 복장으로 출근하여 체온을 낮추도록 노력합니다.",
"냉방이 되지 않는 실내에서는 햇볕이 실내에 들어오지 않도록 하고, 환기가 잘 되도록 선풍기를 켜고 창문이나 출입문을 열어둡니다.",
"건설 현장 등 실외 작업장에서는 폭염안전수칙(물, 그늘, 휴식)을 항상 준수하고, 특히, 취약시간(오후 2~5시)에는 ‘무더위 휴식시간제’를 적극 시행합니다."
]
},
{
"title": "학교에서는 학생들과 함께",
"desc": [
"초·중·고등학교에서 에어컨 등 냉방장치 운영이 곤란한 경우에는 단축수업, 휴교 등 학사일정 조정을 검토하고, 식중독 사고가 발생하지 않도록 주의합니다.",
"냉방이 되지 않는 실내에서는 햇볕이 실내에 들어오지 않도록 하고, 환기가 잘 되도록 선풍기를 켜고 창문이나 출입문을 열어둡니다.",
"운동장에서의 체육활동 및 소풍 등 각종 야외활동을 자제합니다."
]
},
{
"title": "축사ㆍ양식장에서는 지역 주민들과 함께",
"desc": [
"축사 창문을 개방하고 지속적인 환기를 실시하며, 적정 사육 밀도를 유지합니다.",
"비닐하우스, 축사 천장 등에 물 분무 장치를 설치하여 복사열을 낮춥니다.",
"양식 어류는 꾸준히 관찰하고, 얼음을 넣는 등 수온 상승을 억제합니다.",
"가축·어류 폐사 시 신속하게 방역기관에 신고하고 조치에 따릅니다."
]
},
{
"title": "축사ㆍ양식장에서는 지역 주민들과 함께",
"desc": [
"축사 창문을 개방하고 지속적인 환기를 실시하며, 적정 사육 밀도를 유지합니다."
]
},
{
"title": "무더위쉼터 이용",
"desc": [
"외부에 외출 중인 경우나 자택에 냉방기가 설치되어 있지 않은 경우 가장 더운 시간에는 인근 무더위쉼터로 이동하여 더위를 피합니다."
]
}
],
"발생 시": [
{
"title": "나와 가족, 지인들의 안전을 위해 외출은 자제하고 정보를 지속적으로 청취하며 정보가 필요한 사람들과 공유합니다.",
"desc": [
"TV, 라디오 등을 통해 기상정보를 청취하여 내가 있는 지역의 상황을 지속적으로 파악하고, 주변에 있는 사람들에게 알려 줍니다.",
"외부에 있는 가족, 지인, 이웃과 연락하여 안전을 확인하고 위험정보 등을 공유합니다.",
"차량은 속도를 줄여 운행하고, 개울가, 하천변, 해안가 등 급류에 휩쓸릴 수 있는 지역이나 침수 위험지역에는 접근하지 말고 주변에 있는 사람들에게 알려 줍니다."
]
},
{
"title": "건물, 집안 등 실내에서의 안전수칙을 미리 알아두고 가족과 함께 확인합니다.",
"desc": [
"건물의 출입문, 창문은 닫아서 파손되지 않도록 하고, 창문이나 유리문에서 되도록 떨어져 있도록 합니다.",
"강풍으로 인해 피해를 입지 않도록 가급적 욕실과 같이 창문이 없는 방이나 집안의 제일 안쪽으로 이동합니다.",
"가스 누출로 2차 피해가 발생할 수 있으므로 사전에 차단하고, 감전 위험이 있는 집 안팎의 전기시설은 만지지 않도록 합니다.",
"정전이 발생한 경우 양초를 사용하지 말고 휴대용 랜턴, 휴대폰 등을 사용합니다."
]
},
{
"title": "위험지역은 접근하지 말고, 즉시 안전한 지역으로 주변에 있는 사람들과 함께 대피합니다.",
"desc": [
"침수지역, 산간·계곡 등 위험지역에 있거나 대피 권고를 받았을 경우에는 주변에 있는 사람들과 함께 즉시 안전한 지역으로 대피합니다.",
"주변에 연세가 많거나 홀로계신 어르신, 어린이, 장애인 등 대피에 어려움이 있는 분들은 안전하게 대피할 수 있도록 돕습니다.",
"특히, 침수된 도로, 지하차도, 교량 등은 사람과 차량의 통행을 엄격히 금지하고 주변에 있는 사람들에게 알려 진입하지 않도록 합니다.",
"공사장, 가로등, 신호등, 전신주, 지하 공간 등 위험지역에는 접근하지 않도록 합니다.",
"농촌지역에서는 논둑이나 물꼬를 보러 나가지 않습니다.",
"이동식 가옥이나 임시 시설에 거주할 경우에는 견고한 건물로 즉시 이동하고 주변에 있는 사람들에게 위험지역을 알려줍니다."
]
}
],
"발생 이후 유의사항": "호우가 지나간 후에는 이웃 등 주변의 피해 상황을 확인하고,가까운 행정복지센터 등에 피해를 신고하여 보수·보강을 하도록 합니다.",
"발생 이후": [
{
"title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.",
Expand Down

0 comments on commit 1f672eb

Please sign in to comment.