diff --git a/Frontend/src/components/Header.tsx b/Frontend/src/components/Header.tsx index c38e9e5..bff73a1 100644 --- a/Frontend/src/components/Header.tsx +++ b/Frontend/src/components/Header.tsx @@ -4,13 +4,13 @@ import { useNavigate } from "react-router-dom"; import { useEffect, useState } from "react"; interface IHeaderStyle { - isTitleDisplay?: boolean; + istitledisplay?: boolean; } const HeaderWrap = styled.section` background: #fbfbfc; box-shadow: ${(props) => - props.isTitleDisplay ? "0px 16px 16px 0px rgba(0, 0, 0, 0.07)" : null}; + props.istitledisplay ? "0px 16px 16px 0px rgba(0, 0, 0, 0.07)" : null}; width: 100%; height: 70px; position: relative; @@ -37,7 +37,7 @@ interface IHeader { } const Header = ({ title }: IHeader) => { - const [isTitleDisplay, setTitleDisplay] = useState(true); + const [istitledisplay, setTitleDisplay] = useState(true); useEffect(() => { if (title === "") { setTitleDisplay(false); @@ -45,7 +45,7 @@ const Header = ({ title }: IHeader) => { }, []); let history = useNavigate(); return ( - +
{ history(-1); @@ -68,7 +68,7 @@ const Header = ({ title }: IHeader) => {
-

{isTitleDisplay ? title : null}

+

{istitledisplay ? title : null}

 ); }; diff --git a/Frontend/src/pages/Guide/DisasterDetail.tsx b/Frontend/src/pages/Guide/DisasterDetail.tsx index b6c12c8..49c99f2 100644 --- a/Frontend/src/pages/Guide/DisasterDetail.tsx +++ b/Frontend/src/pages/Guide/DisasterDetail.tsx @@ -7,9 +7,8 @@ import { useState } from "react"; const DetailWrap = styled.section` height: 100%; background: linear-gradient(180deg, #fbfbfc 0%, #ebebf5 100%); - .contentsWrap { - padding: 30px; + padding: 20px; overflow-y: scroll; .subtitle { color: var(--main, #056fe7); @@ -18,17 +17,49 @@ const DetailWrap = styled.section` h1 { font: 700 30px "Giants"; } - div { - margin-top: 18px; - border-radius: 12px; - overflow: hidden; - border: 1px solid var(--G_03, #d9d9d9); - img { - width: 100%; - height: 100%; - object-fit: contain; + h2 { + font: 700 20px "Giants"; + color: #056fe7; + margin: 20px 0; + } + h3 { + display: flex; + font: 600 20px/22px "Pretendard"; + margin-bottom: 10px; + margin-top: 20px; + span { + margin-left: 5px; } } + li { + color: var(--G_00, #000); + font: 400 18px/22px "Pretendard"; + margin-bottom: 6px; + position: relative; + } + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } +`; + +const ListContents = styled.li` + color: var(--G_00, #000); + font: 400 18px/22px "Pretendard"; + margin-bottom: 6px; + padding-left: 20px; + position: relative; + &::before { + content: "•"; + /* background-color: plum; */ + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0px; } `; @@ -36,6 +67,33 @@ const ContentsBox = styled.div` width: 100%; height: 90vh; background-color: #fff; + overflow-y: scroll; + margin-top: 18px; + border-radius: 12px; + border: 1px solid var(--G_03, #d9d9d9); + padding: 20px; +`; + +const TipBox = styled.div` + border-radius: 12px; + background: rgba(239, 74, 173, 0.1); + padding: 7px 10px 7px 13px; + color: var(--P_00, #ef4aad); + font: 400 14px "Pretendard"; + display: flex; + align-items: center; + justify-content: space-between; + div { + width: 20px; + height: 20px; + img { + width: 100%; + object-fit: contain; + } + } + p { + width: 90%; + } `; interface IDisaterArray { @@ -43,6 +101,7 @@ interface IDisaterArray { 유의사항: string; "사전 준비": string[] | { title: string; desc: string | string[] }[]; "발생 시": string[] | { title: string; desc: string | string[] }[]; + "발생 이후"?: string[] | { title: string; desc: string | string[] }[]; "주요기관 연락처": string; }; } @@ -69,39 +128,88 @@ export default function DisasterDetail() {

자연재난

{enterName}

- {arr["유의사항"]} -
    -

    사전 준비

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

    {arr["유의사항"]}

    +     +
      +

      사전 준비

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

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

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

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

      -

      {x.desc}

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

      발생 시

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

      발생 시

      + {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 ( -
    • -

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

      -

      {x.desc}

      -
      • + + {x.toString()} + ); - } - return
    • {x.toString()}
      • ; - })} -
    + })} +
+ {arr["발생 이후"] ? ( +
    +

    발생 이후

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

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

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

    주요기관 연락처

    + {arr["주요기관 연락처"]} +
+ diff --git a/Frontend/src/pages/Guide/data/disater.json b/Frontend/src/pages/Guide/data/disater.json index 371bbfc..1e91281 100644 --- a/Frontend/src/pages/Guide/data/disater.json +++ b/Frontend/src/pages/Guide/data/disater.json @@ -26,7 +26,7 @@ { "title": "차량 이용자 행동요령", "desc": [ - "(차량침수) 차량이 침수되기 시작하면 타이어 높이의 2/3 이상 잠기기 전에 차량을 안전한 곳으로 이동시키고, 차량이 침수된 상황r에서 외부 수압으로 문이 열리지 않을 때는 좌석 목받침 하단 철재봉을 이용하여 유리창을 깨서 대피하세요. 유리창을 깨지 못한 경우 차량 내·외부 수위 차이가 30cm이하가 될 때까지 기다렸다가 차량 문이 열리는 순간 탈출하세요.", + "(차량침수) 차량이 침수되기 시작하면 타이어 높이의 2/3 이상 잠기기 전에 차량을 안전한 곳으로 이동시키고, 차량이 침수된 상황에서 외부 수압으로 문이 열리지 않을 때는 좌석 목받침 하단 철재봉을 이용하여 유리창을 깨서 대피하세요. 유리창을 깨지 못한 경우 차량 내·외부 수위 차이가 30cm이하가 될 때까지 기다렸다가 차량 문이 열리는 순간 탈출하세요.", "(지하차도) 침수가 시작된 지하차도는 절대 진입하지 않으며, 만약 진입시에는 차량을 두고 신속히 밖으로 대피하세요.", "(세월교 횡단) 급류가 있는 교량에서 차량은 수압에 의해 하천으로 밀릴 수 있어 절대 진입하지 마시고 우회하거나 안전한 곳에서 대기하세요. 만약, 급류에 차량이 고립되면 급류가 밀려오는 반대쪽 문을 열고 탈출하고 문이 열리지 않으면 창문을 깨고 탈출하세요." ] @@ -166,7 +166,7 @@ ] } ], - "이후": [ + "발생 이후": [ "낙뢰로부터 안전한 장소로 주변인들과 함께 피해자를 옮기고 의식 여부를 살핍니다.", "의식이 없으면 즉시 호흡과 맥박의 여부를 확인하고 호흡이 멎어 있을 때에는 인공호흡을, 맥박도 멎어 있으면 인공호흡과 함께 심장 마사지를 합니다. 또한 119 또는 인근 병원에 긴급 연락하고, 구조요원이 올 때까지 주변인들과 함께 피해자를 응급조치 하고 피해자의 체온을 유지시킵니다.", "피해자가 맥박이 뛰고 숨을 쉬고 있다면, 주변인들과 함께 피해자의 다른 상처를 가능한 빨리 찾습니다. 몸에서 낙뢰가 들어가고 빠져 나온 부위의 화상을 체크하며,신경계 피해, 골절, 청각과 시각의 손상을 체크합니다.", @@ -252,7 +252,7 @@ ] } ], - "이후": [ + "발생 이후": [ { "title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.", "desc": [