✨ Feat : DisasterDetail

potenday-project · Oct 30, 2023 · 3329fd6 · 3329fd6
1 parent 8aae01f
commit 3329fd6
Show file tree

Hide file tree

Showing 3 changed files with 260 additions and 90 deletions.
diff --git 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,15 +47,14 @@ 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;
  padding-left: 20px;
  position: relative;
  &::before {
  content: "•";
- /* background-color: plum; */
  width: 10px;
  height: 10px;
  position: absolute;
@@ -115,101 +115,29 @@ export default function DisasterDetail() {
 
  const arr = arrayData[enterName];
 
- if (typeof arr["사전 준비"][0] === "string") {
- console.log(arr["사전 준비"]);
- } else {
- console.log(arr["사전 준비"]);
- }
-
  return (
  <DetailWrap>
  <Header title="" />
  <div className="contentsWrap">
  <p className="subtitle">자연재난</p>
  <h1>{enterName}</h1>
  <ContentsBox>
- <section>
- <TipBox>
- <div>
- <img src="/assets/icon/alert.png" alt="" />
- </div>
- <p>{arr["유의사항"]}</p>
- </TipBox>
- <ul>
- <h2>사전 준비</h2>
- {arr["사전 준비"].map((x, index) => {
- if (typeof x === "object") {
- return (
- <li key={`before-${index}`}>
- <h3>
- {index + 1}.<span>{x.title}</span>
- </h3>
- <ListContents>{x.desc}</ListContents>
- </li>
- );
- }
- return (
- <ListContents key={`before-${index}`}>
- {x.toString()}
- </ListContents>
- );
- })}
- </ul>
- <ul>
- <h2>발생 시</h2>
- {arr["발생 시"].map((x, index) => {
- if (typeof x === "object") {
- return (
- <li key={`acc-${index}`}>
- <h3>
- {index + 1}.<span>{x.title}</span>
- </h3>
- {typeof x.desc === "object"
- ? x.desc.map((y, ydex) => {
- return (
- <ListContents key={`acc-desc-${ydex}`}>
- {y}
- </ListContents>
- );
- })
- : x.desc}
- </li>
- );
- }
- return (
- <ListContents key={`acc-${index}`}>
- {x.toString()}
- </ListContents>
- );
- })}
- </ul>
- {arr["발생 이후"] ? (
- <ul>
- <h2>발생 이후</h2>
- {arr["발생 이후"].map((x, index) => {
- if (typeof x === "object") {
- return (
- <li key={`after-${index}`}>
- <h3>
- {index + 1}.<span>{x.title}</span>
- </h3>
- <ListContents>{x.desc}</ListContents>
- </li>
- );
- }
- return (
- <ListContents key={`after-${index}`}>
- {x.toString()}
- </ListContents>
- );
- })}
- </ul>
- ) : null}
- <ul>
- <h2>주요기관 연락처</h2>
- <ListContents>{arr["주요기관 연락처"]}</ListContents>
- </ul>
- </section>
+ <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>
  </div>
  </DetailWrap>

diff --git a/Frontend/src/pages/Guide/components/DisasterList.tsx 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 (
+ <ul>
+ <h2>{name}</h2>
+ {arrayData.map((data, index) => {
+ if (typeof data === "object") {
+ return (
+ <li key={`before-${index}`}>
+ <h3>
+ {index + 1}.<span>{data.title}</span>
+ </h3>
+ {typeof data.desc === "object" ? (
+ data.desc.map((acc, accIndex) => {
+ return (
+ <ListContents key={`acc-desc-${accIndex}`}>
+ {acc}
+ </ListContents>
+ );
+ })
+ ) : (
+ <ListContents>{data.desc}</ListContents>
+ )}
+ </li>
+ );
+ }
+ return (
+ <ListContents key={`before-${index}`}>{data.toString()}</ListContents>
+ );
+ })}
+ </ul>
+ );
+}