diff --git a/src/assets/icons/people.svg b/src/assets/icons/people.svg
new file mode 100644
index 0000000..93dab80
--- /dev/null
+++ b/src/assets/icons/people.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/person.svg b/src/assets/icons/person.svg
new file mode 100644
index 0000000..bd5d111
--- /dev/null
+++ b/src/assets/icons/person.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/common/AddTripDialog.js b/src/components/common/AddTripDialog.js
index 13f623d..e088cf4 100644
--- a/src/components/common/AddTripDialog.js
+++ b/src/components/common/AddTripDialog.js
@@ -1,3 +1,4 @@
+import styled from "styled-components";
import * as React from "react";
import PropTypes from "prop-types";
import List from "@mui/material/List";
@@ -7,32 +8,33 @@ import ListItemText from "@mui/material/ListItemText";
import Dialog from "@mui/material/Dialog";
import { useRecoilState } from "recoil";
import { dialog, dialogState } from "../../recoil/commonState";
-
-const emails = ["username@gmail.com", "user02@gmail.com"];
+import People from "../../assets/icons/people.svg";
+import Person from "../../assets/icons/person.svg";
export default function AddTripDialog(props) {
- const { onClose, open } = props;
const [dialog, setDialog] = useRecoilState(dialogState);
const handleClose = () => {
- onClose();
+ setDialog(false);
};
return (
-
+
+
+
+
+
+ 여행 추가하기
+
+
+
+
+
+ 친구 여행 참여하기
+
+
+
+
);
}
@@ -41,3 +43,41 @@ AddTripDialog.propTypes = {
open: PropTypes.bool.isRequired,
selectedValue: PropTypes.string.isRequired,
};
+
+const StDialog = styled(Dialog)`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding-left: 20rem;
+ padding-bottom: 31.6rem;
+ border: 1px solid red;
+`;
+
+const AddList = styled(List)`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: fit-content;
+ height: fit-content;
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+`;
+
+const AddlstItm = styled(ListItem)`
+ width: 13rem;
+ height: fit-content;
+ padding: 0rem;
+`;
+const AddItemBtn = styled(ListItemButton)`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ height: fit-content;
+ padding: 0.1rem 0rem 0.1rem 0.8rem;
+`;
+const IconImg = styled.img`
+ margin-right: 0.7rem;
+`;
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
index 56aa694..d29ebfd 100644
--- a/src/pages/MainPage.js
+++ b/src/pages/MainPage.js
@@ -5,11 +5,10 @@ import TripList from "../components/common/TripList";
import RecomList from "../components/common/RecomList";
import TagImgList from "../components/common/TagImgList";
import AddTripDialog from "../components/common/AddTripDialog";
-import React, { useState } from "react";
+import React from "react";
import { useRecoilState } from "recoil";
import { dialogState } from "../recoil/commonState";
const MainPage = () => {
- // const [dialog, setDialog] = useState(false);
const [dialog, setDialog] = useRecoilState(dialogState);
const handleOpen = () => {
setDialog(true);
@@ -17,12 +16,12 @@ const MainPage = () => {
return (
-
이채영님 반가워요!
트립토리와 함께 여행을 기록해요.
+
내 여행
diff --git a/yarn.lock b/yarn.lock
index e20592c..2751bbb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1132,6 +1132,13 @@
dependencies:
regenerator-runtime "^0.13.11"
+"@babel/runtime@^7.23.9":
+ version "7.24.1"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+ integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.22.5", "@babel/template@^7.3.3":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -1766,6 +1773,13 @@
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.3.tgz#474689f4d691993376e8a1ca07e08d4545275082"
integrity sha512-QxvrcDqphZoXRjsAmCaQylmWjC/8/qKWwIde1MJMna5YIst3R9O0qhKRPu36/OE2d8AeTbCVjRcRvNqhhW8jyg==
+"@mui/icons-material@^5.15.14":
+ version "5.15.14"
+ resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.14.tgz#333468c94988d96203946d1cfeb8f4d7e8e7de34"
+ integrity sha512-vj/51k7MdFmt+XVw94sl30SCvGx6+wJLsNYjZRgxhS6y3UtnWnypMOsm3Kmg8TN+P0dqwsjy4/fX7B1HufJIhw==
+ dependencies:
+ "@babel/runtime" "^7.23.9"
+
"@mui/material@^5.14.3":
version "5.14.3"
resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.3.tgz#c88dbc270c4ebde32f9956b9b3cbf8a5d1dc7aef"
@@ -8179,6 +8193,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+regenerator-runtime@^0.14.0:
+ version "0.14.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+ integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
regenerator-transform@^0.15.1:
version "0.15.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"