feat: Create main UI

frontend/ditto/src/App.js

@@ -1,22 +1,22 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
-// import { useNavigate } from "react-router-dom";
-// import { useEffect } from 'react';
 import { useState } from 'react';
-import Buttons from "./components/Buttons";
-import Map from "./components/map";
+import Home from "./components/Home";
+import Area from "./components/Area";
+import Place from "./components/Place";
+import Map from "./components/Map";
 
 const App = () =>{
-  // const navigate = useNavigate();
   const [x, setX] = useState(37.61066839994)
   const [y, setY] = useState(126.9973271351)
+  const [id, setId] = useState(0)
 
-
-
   return (
     <>
      <Router>
      <Routes>
-        <Route path="/" element={<Buttons changeX={setX} changeY={setY} />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/area" element={<Area id={id} changeId={setId}/>} />
+        <Route path="/place" element={<Place x={x} y={y} changeX={setX} changeY={setY} id={id}/>} />
         <Route path="/map" element={<Map x={x} y={y}/>} />
       </Routes>
 

frontend/ditto/src/components/Area.js

@@ -0,0 +1,60 @@
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import FlexBox from "./Common/FlexBox";
+import FlexTextBox from "./Common/FlexTextBox";
+import Navbar from "./Navbar";
+import ListItem from '@mui/material/ListItem';
+import AddLocationAltIcon from '@mui/icons-material/AddLocationAlt';
+import Button from '@mui/material/Button';
+
+const Icon = styled(AddLocationAltIcon)`
+	color: #74EABC  !important;
+  margin: 0 0.3rem 0 0;
+`;
+
+const Btn = styled(Button)`
+ width: 12rem;
+ height: 3rem;
+ border: 1.8px solid rgb(0 0 0 / 15%) !important;
+ color: #333333 !important;
+ margin-bottom: 0.4rem !important;
+
+`;
+
+const areaList = ["서울특별시", "인천광역시", "대구광역시", "대전광역시", "광주광역시", "부산광역시", "울산광역시", "제주특별자치도" ];
+
+const Area = (props) =>{
+	const navigate = useNavigate();
+	const onClickBtn = (x) => {
+		props.changeId(x);
+		navigate("/place");
+	};
+
+  const Btns = () => {
+		const newArr = [];
+		for (let i = 0; i < 8; i += 1) {
+		  newArr.push(
+        <ListItem disablePadding onClick={()=> onClickBtn(i)}>
+        <Btn variant="outlined">
+          <Icon/>
+          <FlexTextBox fontWeight={400} fontSize="0.9rem">{areaList[i]}
+          </FlexTextBox>
+        </Btn>
+        </ListItem>
+		  );
+		}
+		return newArr;
+	};
+
+  return (
+    <FlexBox column center gap="2rem" >
+	    <Navbar/>
+      <FlexBox center column>
+			  {Btns()}
+      </FlexBox>
+
+    </FlexBox>
+  );
+}
+
+export default Area;

frontend/ditto/src/components/Common/FlexTextBox.js

@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+const defaultProps = {
+  width: "auto",
+  height: "auto",
+  margin: "0",
+  padding: "0",
+  fontSize: "1rem",
+  lineHeight: "160%",
+  textAlign: "left",
+  fontWeight: "800",
+  background: "",
+  marginBottom: "0",
+};
+
+const FlexTextBox = (props) => {
+  const {
+    children,
+    width,
+    height,
+    padding,
+    margin,
+    fontSize,
+    color,
+    fontWeight,
+    lineHeight,
+    textAlign,
+    background,
+    marginBottom,
+  } = props;
+
+  return (
+    <div
+      css={css`
+        width: ${width};
+        height: ${height};
+        margin: ${margin};
+        padding: ${padding};
+        font-size: ${fontSize};
+        font-weight: ${fontWeight};
+        line-height: ${lineHeight};
+        text-align: ${textAlign};
+        color: ${color};
+        background: ${background};
+        margin-bottom: ${marginBottom};
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+FlexTextBox.defaultProps = defaultProps;
+
+export default FlexTextBox;

frontend/ditto/src/components/Home.js

@@ -0,0 +1,92 @@
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import FlexBox from "./Common//FlexBox";
+import FlexTextBox from "./Common/FlexTextBox";
+import Button from '@mui/material/Button';
+import Navbar from "./Navbar";
+
+const Img = styled.img`
+	width: 42.5%;
+	height: 40vh;
+`;
+
+const ImgMap = styled.img`
+	width: 20%;
+	height: 30vh;
+	border-radius: 1.4rem;
+`;
+
+const ImgAI = styled.img`
+	margin: 3rem 0 0 0;
+	width: 21%;
+	height: 30vh;
+	border-radius: 1.4rem;
+`;
+
+
+
+const BtnMap = styled(Button)`
+	width: 7.6rem;
+	height: 2.6rem;
+	font-size: 0.8rem !important;
+	font-weight: 600 !important;
+	background-color: rgb(117 177 236 / 88%) !important;
+`;
+
+
+const Home = () =>{
+	const navigate = useNavigate();
+
+	const onClickMap = (x, y) => {
+		navigate("/area");
+	};
+	return (
+	  <>
+	        <Navbar/>
+			<FlexBox column center margin="5rem 0 0 0" gap="5rem">
+				<FlexBox center>
+					<FlexBox column>
+						<FlexTextBox fontSize="1.8rem">드론을 활용한 <br/> 인구 밀집도 및 위험 감지 <br/> </FlexTextBox>
+						<FlexTextBox margin="1rem 0 0 0" fontSize="1.1rem" fontWeight="600" color="#353535">시민들의 안전하고 즐거운 야외활동에 DITTO가 함께합니다 :)</FlexTextBox>
+					</FlexBox>
+					<Img src="images/drone.jpg" alt=""/>
+				</FlexBox>
+				<FlexBox center width="100%" gap="7%">
+					<ImgMap src="images/map.jpg"/>
+					<FlexBox column>
+					<FlexTextBox fontSize="1.5rem">인구 밀집도 지도</FlexTextBox>
+					<FlexBox column center gap="1rem" margin="0.5rem 0 0 0">
+
+						<FlexTextBox fontSize="0.85rem" fontWeight="600" color="#353535">인구 밀집도를 지도에 분류된 색상으로 표시합니다.  
+							<br/>사용자는 이를 통해 혼잡한 곳은 피하며  
+							<br/>사고를 예방하고 안전하게 야외활동을 즐길 수 있습니다.
+						</FlexTextBox>
+						<BtnMap variant="contained" onClick={()=> onClickMap(37.61066839994, 126.9973271351)}>지도 보기</BtnMap>
+					</FlexBox>
+					</FlexBox>
+				</FlexBox>
+
+				<FlexBox center width="100%" gap="5%">
+
+					<FlexBox column>
+					<FlexTextBox fontSize="1.5rem">인공지능을 활용한 <br/> 인구 밀집도 및 위험 감지</FlexTextBox>
+					<FlexBox column center gap="1rem" margin="0.5rem 0 0 0">
+
+						<FlexTextBox fontSize="0.85rem" fontWeight="600" color="#353535">드론을 통해 받아온 영상에서 사람 수를 알아내 인구 밀집도를 
+							<br/> 계산합니다. 쓰러짐, 폭행 등 위험 상황을 감지하여 사고를 
+							<br/> 예방하고 안전하게 야외활동을 즐길 수 있습니다.
+						</FlexTextBox>
+						<BtnMap variant="contained">관리자 화면</BtnMap>
+					</FlexBox>
+					</FlexBox>
+					<ImgAI src="images/ai.png"/>
+				</FlexBox>
+			</FlexBox>
+
+
+	  </>
+	);
+  }
+
+  export default Home;
+

frontend/ditto/src/components/Navbar.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from "styled-components";
+
+const Logo = styled.img`
+  width: 8.5rem;
+`
+
+
+const Navbar =()=> {
+
+  return (
+    <>
+      <Logo src="images/logo.png"/>
+      {/* <Logo src="images/logo2.png"/> */}
+    </>
+  );
+}
+
+export default Navbar;

frontend/ditto/src/components/Place.js

@@ -0,0 +1,52 @@
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import FlexBox from "./Common/FlexBox";
+import Navbar from "./Navbar";
+import List from '@mui/material/List';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import RoomIcon from '@mui/icons-material/Room';
+import dummyPlaces from "./dummyPlaces";
+
+const Icon = styled(RoomIcon)`
+	color: #74EABC  !important;
+`;
+
+const Place = (props) =>{
+	const navigate = useNavigate();
+	const onClickBtn = (x, y) => {
+		props.changeX(x);
+		props.changeY(y);
+		navigate("/map");
+	};
+
+	const Btns = (places) => {
+		const newArr = [];
+		for (let i = 0; i < places.length; i += 1) {
+		  newArr.push(
+			<ListItem onClick={()=> onClickBtn(places[i][2], places[i][3])}>
+			<ListItemText primary={places[i][0]} secondary={places[i][1]} />
+			<ListItemAvatar>
+			  <Avatar sx={{background:"#f4f4f4"}}>
+				<Icon />
+			  </Avatar>
+			</ListItemAvatar>
+		  </ListItem>
+		  );
+		}
+		return newArr;
+	};
+
+  return (
+    <FlexBox center column>
+		<Navbar/>
+		<List sx={{ width: '100%', maxWidth: 250, bgcolor: 'background.paper', marginTop:2 }}>
+			{Btns(dummyPlaces[props.id]["place"])}
+		</List>	
+    </FlexBox>
+  );
+}
+
+export default Place;