diff --git a/client/src/components/MyPage/MyPage.css b/client/src/components/MyPage/MyPage.css index 9c2f2e4a..bdb75e08 100644 --- a/client/src/components/MyPage/MyPage.css +++ b/client/src/components/MyPage/MyPage.css @@ -5,14 +5,25 @@ padding: 20px; position: sticky; top: 100px; - background-color: #ffffff; + background-color: white; } -@media screen and (max-width: 600px) { - .container { - position: static; - margin-left: 0; - margin-right: 0; +@media (max-width: 1920px) { + .table_n{ + margin-top: 5%; + margin-left: 10%; + } + .profilecard { + width: 750px; + height: 600px; + overflow-y: auto; + border: 1px solid black; + border-radius: 5px; + padding: 20px; + background-color: white; + } + .profilecard::-webkit-scrollbar{ + display: none; } } @@ -32,26 +43,13 @@ width: 100%; } -.profilecard { - width: 750px; - height: 600px; - border: 1px solid #ccc; - border-radius: 5px; - padding: 20px; - background-color: #f9f9f9; -} - -.content { - margin-right: 100%; -} - .menu-card { width: 300px; - border: 1px solid #ccc; + border: 1px solid black; border-radius: 5px; padding: 20px; margin-left: 10%; - background-color: #f9f9f9; + background-color: white; } .button-group { @@ -67,7 +65,7 @@ .buttonstyle { width: 260px; height: 50px; - background-color: #ffffff; + background-color: skyblue; border: none; border-radius: 5px; font-size: 16px; diff --git a/client/src/components/MyPage/MyPage.js b/client/src/components/MyPage/MyPage.js index df2a2f1d..6c264ffc 100644 --- a/client/src/components/MyPage/MyPage.js +++ b/client/src/components/MyPage/MyPage.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Form, Button, Modal } from "react-bootstrap"; +import { Form, Button, Modal, Card } from "react-bootstrap"; import Navbar from "../Navbar/Navbar"; import Footer from "../Footer/Footer"; import "./MyPage.css"; @@ -19,32 +19,57 @@ axios.default.withCredentials = true; function MyPage() { let token = localStorage.getItem("token"); + const [name, setName] = useState(""); //프로필 이름 + const [gender, setGender] = useState(""); //프로필 성별 + const [email, setEmail] = useState(""); //프로필 이메일 + const [rank, setRank] = useState([]); //프로필 선호 태그 + const [currentPage, setCurrentPage] = useState("profile"); //메뉴 토글 + const [preview, setPreview] = useState([]); + const [create, setCreate] = useState(0); //생성한 일정 개수 + const [pw, setPw] = useState(""); //현재 패스워드 + const [password, setPassword] = useState(""); // 수정할 패스워드 + const [withdrawPassword, setWithdrawPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); //수정할 패스워드 확인 + const [correct, setCorrect] = useState(false); // 비밀번호 일치 여부 + const [posts, setPosts] = useState([]); //페이지마다 띄울 게시판 목록 + const [postNumber, setPostNumber] = useState([]); // 각 목록 번호 + const [postsPerPage, setPostsPerPage] = useState(10); //페이지마다 띄울 게시판 목록 개수 + var [currentNumber, setCurrentNumber] = useState(0); //현재 페이지 번호 + const [totalPage, setTotalPage] = useState(0); //전체 페이지 개수 + const [total, setTotal] = useState(13); //전체 목록 개수 + const [order, setOrder] = useState("기본"); //버튼 정렬 기준 + const [keyword, setKeyword] = useState(""); // 일정 검색어 + const [loading, setLoading] = useState(false); const [nestedModal, setNestedModal] = useState(false); + const [toggle, setToggle] = useState(false); + const [withdrawModal, setWithdrawModal] = useState(false); + const [accompanyList, setAccompanyList] = useState(["안녕하세요","안녕하세요","안녕하세요","안녕하세요","안녕하세요"]) // 동행 신청 현황 + var ranklist = ""; var size = posts.length; const indexOfLast = currentPage * postsPerPage; @@ -359,7 +384,7 @@ function MyPage() { const handlePasswordButton = (e) => { const postToServer = { - pw: pw + pw: password } axios @@ -475,8 +500,21 @@ function MyPage() {