diff --git a/Frontend/src/pages/Guide/DisasterDetail.tsx b/Frontend/src/pages/Guide/DisasterDetail.tsx index 923b884..4bdfebf 100644 --- a/Frontend/src/pages/Guide/DisasterDetail.tsx +++ b/Frontend/src/pages/Guide/DisasterDetail.tsx @@ -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; @@ -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; }; @@ -121,24 +123,36 @@ export default function DisasterDetail() {

자연재난

{enterName}

- - -
- -
-

{arr["유의사항"]}

-
+ {arr ? ( + + +
+ +
+

{arr["유의사항"]}

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

    주요기관 연락처

    - {arr["주요기관 연락처"]} -
-
+ + + {arr["발생 이후"] ? ( + + ) : null} +
    +

    주요기관 연락처

    + {arr["주요기관 연락처"]} +
+
+ ) : ( + 서비스 준비중입니다! + )}
); diff --git a/Frontend/src/pages/Guide/components/DisasterList.tsx b/Frontend/src/pages/Guide/components/DisasterList.tsx index a5a948a..c0def1b 100644 --- a/Frontend/src/pages/Guide/components/DisasterList.tsx +++ b/Frontend/src/pages/Guide/components/DisasterList.tsx @@ -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 (