Feat: adjust dialog list position and disconnect button event #4

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 = ["[email protected]", "[email protected]"];
+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 (
-    <Dialog onClose={handleClose} open={dialog}>
-      <List sx={{ pt: 0 }}>
-        <ListItem disableGutters>
-          <ListItemButton>
-            <ListItemText>직접 추가</ListItemText>
-          </ListItemButton>
-        </ListItem>
-        <ListItem disableGutters>
-          <ListItemButton>
-            <ListItemText>친구 여행</ListItemText>
-          </ListItemButton>
-        </ListItem>
-      </List>
-    </Dialog>
+    <StDialog onClose={handleClose} open={dialog}>
+      <AddList>
+        <AddlstItm disableGutters>
+          <AddItemBtn onClick={handleClose}>
+            <IconImg src={Person} />
+            <ListItemText>여행 추가하기</ListItemText>
+          </AddItemBtn>
+        </AddlstItm>
+        <AddlstItm disableGutters>
+          <AddItemBtn onClick={handleClose}>
+            <IconImg src={People} />
+            <ListItemText>친구 여행 참여하기</ListItemText>
+          </AddItemBtn>
+        </AddlstItm>
+      </AddList>
+    </StDialog>
   );
 }
 
@@ -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;
+`;

src/pages/MainPage.js

@@ -5,24 +5,23 @@ 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);
   };
 
   return (
     <StMainPage>
-      <AddTripDialog />
       <IntroDiv>
         <HiP>이채영님&nbsp;반가워요!</HiP>
         <WelcomeP>트립토리와 함께 여행을 기록해요.</WelcomeP>
       </IntroDiv>
       <MainDiv>
+        <AddTripDialog />
         <MyTripDiv>
           <UpDiv>
             <DivNameP>내 여행</DivNameP>

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"