Skip to content

Commit

Permalink
💄 Style : disaterDetail style edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamsterStudent
HamsterStudent committed Oct 29, 2023
1 parent 7561de4 commit 8aae01f
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 48 deletions.
10 changes: 5 additions & 5 deletions Frontend/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<IHeaderStyle>`
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;
Expand All @@ -37,15 +37,15 @@ interface IHeader {
}

const Header = ({ title }: IHeader) => {
const [isTitleDisplay, setTitleDisplay] = useState(true);
const [istitledisplay, setTitleDisplay] = useState(true);
useEffect(() => {
if (title === "") {
setTitleDisplay(false);
}
}, []);
let history = useNavigate();
return (
<HeaderWrap isTitleDisplay={isTitleDisplay}>
<HeaderWrap istitledisplay={istitledisplay}>
<div
onClick={() => {
history(-1);
Expand All @@ -68,7 +68,7 @@ const Header = ({ title }: IHeader) => {
</svg>
</div>

<h2>{isTitleDisplay ? title : null}</h2>
<h2>{istitledisplay ? title : null}</h2>
</HeaderWrap>
);
};
Expand Down
188 changes: 148 additions & 40 deletions Frontend/src/pages/Guide/DisasterDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -18,31 +17,91 @@ 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;
}
`;

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 {
[key: string]: {
유의사항: string;
"사전 준비": string[] | { title: string; desc: string | string[] }[];
"발생 시": string[] | { title: string; desc: string | string[] }[];
"발생 이후"?: string[] | { title: string; desc: string | string[] }[];
"주요기관 연락처": string;
};
}
Expand All @@ -69,39 +128,88 @@ export default function DisasterDetail() {
<p className="subtitle">자연재난</p>
<h1>{enterName}</h1>
<ContentsBox>
<span>{arr["유의사항"]}</span>
<ul>
<h1>사전 준비</h1>
{arr["사전 준비"].map((x, index) => {
if (typeof x === "object") {
<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 (
<li>
<h2>
{index + 1}.{x.title}
</h2>
<p>{x.desc}</p>
</li>
<ListContents key={`before-${index}`}>
{x.toString()}
</ListContents>
);
}
return <li>{x.toString()}</li>;
})}
</ul>
<ul>
<h1>발생 시</h1>
{arr["사전 준비"].map((x, index) => {
if (typeof x === "object") {
})}
</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 (
<li>
<h2>
{index + 1}.{x.title}
</h2>
<p>{x.desc}</p>
</li>
<ListContents key={`acc-${index}`}>
{x.toString()}
</ListContents>
);
}
return <li>{x.toString()}</li>;
})}
</ul>
})}
</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>
</ContentsBox>
</div>
</DetailWrap>
Expand Down
6 changes: 3 additions & 3 deletions Frontend/src/pages/Guide/data/disater.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
{
"title": "차량 이용자 행동요령",
"desc": [
"(차량침수) 차량이 침수되기 시작하면 타이어 높이의 2/3 이상 잠기기 전에 차량을 안전한 곳으로 이동시키고, 차량이 침수된 상황r에서 외부 수압으로 문이 열리지 않을 때는 좌석 목받침 하단 철재봉을 이용하여 유리창을 깨서 대피하세요. 유리창을 깨지 못한 경우 차량 내·외부 수위 차이가 30cm이하가 될 때까지 기다렸다가 차량 문이 열리는 순간 탈출하세요.",
"(차량침수) 차량이 침수되기 시작하면 타이어 높이의 2/3 이상 잠기기 전에 차량을 안전한 곳으로 이동시키고, 차량이 침수된 상황에서 외부 수압으로 문이 열리지 않을 때는 좌석 목받침 하단 철재봉을 이용하여 유리창을 깨서 대피하세요. 유리창을 깨지 못한 경우 차량 내·외부 수위 차이가 30cm이하가 될 때까지 기다렸다가 차량 문이 열리는 순간 탈출하세요.",
"(지하차도) 침수가 시작된 지하차도는 절대 진입하지 않으며, 만약 진입시에는 차량을 두고 신속히 밖으로 대피하세요.",
"(세월교 횡단) 급류가 있는 교량에서 차량은 수압에 의해 하천으로 밀릴 수 있어 절대 진입하지 마시고 우회하거나 안전한 곳에서 대기하세요. 만약, 급류에 차량이 고립되면 급류가 밀려오는 반대쪽 문을 열고 탈출하고 문이 열리지 않으면 창문을 깨고 탈출하세요."
]
Expand Down Expand Up @@ -166,7 +166,7 @@
]
}
],
"이후": [
"발생 이후": [
"낙뢰로부터 안전한 장소로 주변인들과 함께 피해자를 옮기고 의식 여부를 살핍니다.",
"의식이 없으면 즉시 호흡과 맥박의 여부를 확인하고 호흡이 멎어 있을 때에는 인공호흡을, 맥박도 멎어 있으면 인공호흡과 함께 심장 마사지를 합니다. 또한 119 또는 인근 병원에 긴급 연락하고, 구조요원이 올 때까지 주변인들과 함께 피해자를 응급조치 하고 피해자의 체온을 유지시킵니다.",
"피해자가 맥박이 뛰고 숨을 쉬고 있다면, 주변인들과 함께 피해자의 다른 상처를 가능한 빨리 찾습니다. 몸에서 낙뢰가 들어가고 빠져 나온 부위의 화상을 체크하며,신경계 피해, 골절, 청각과 시각의 손상을 체크합니다.",
Expand Down Expand Up @@ -252,7 +252,7 @@
]
}
],
"이후": [
"발생 이후": [
{
"title": "가족과 지인의 안전 여부를 주위 사람들과 함께 확인합니다.",
"desc": [
Expand Down

0 comments on commit 8aae01f

Please sign in to comment.