[✍️ Dev Log] 송다영 / 2022-01-19


### 오늘은 어떻게 프로젝트에 기여했나요?

- mypage페이지에서 보여지는 유저 정보를 상단바를 클릭했을 때 manage, comment, content의 각각의 정보를 볼 수 있게 구현

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- mypage에서 상단 바를 클릭했을 때 상태를 변경하려고 하니 구조적으로 복잡하게 되어 정보별로 다시 컴포넌트를 분리시키느라 시간이 오래걸렸다.
- 수정 중간마다 CSS를 고쳐서 더욱 많은 시간을 소비하여 힘들었다.
- CSS를 수정할 때 각각의 값이 달라서 margin과 padding을 맞추는 것이 어려운 점이었다.
- map을 돌릴 때 빈 배열의 값을 고려하지 못해 html이 구현되지 않는 문제점을 찾고 수정하기까지 많은 콘솔을 확인해야해서 힘들었다.

```js

// Mypage.js

function Mypage() {
const [openModal, setOpenModal] = useState(false);
const accessToken = localStorage.getItem("accessToken");
//========================================================================
const [test, setTest] = useState([]);
const [manageInfo, setManageInfo] = useState([]);
const [commentInfo, setCommentInfo] = useState([]);

useEffect(() => {
manageHandler();
commentHandler();
content();
}, []);

const manageHandler = () => {
axios
.get(`http://localhost:80/user/manage`, {
headers: { authorization: `Bearer ${accessToken}` },
withCredentials: true,
})
.then((result) => {
setManageInfo([...result.data.data]);
})
.catch((err) => {
console.log(err);
});
};

const commentHandler = () => {
axios
.get(`http://localhost:80/user/comments/1`, {
headers: { authorization: `Bearer ${accessToken}` },
withCredentials: true,
})
.then((result) => {
setCommentInfo([...result.data.data]);
})
.catch((err) => {
console.log(err);
});
};

const content = () => {
axios
.get(`http://localhost:80/user/tips`, {
headers: { authorization: `Bearer ${accessToken}` },
withCredentials: true,
})
.then((result) => {
setTest([...result.data.data]);
})
.catch((err) => {
console.log(err);
});
};
const handleOn = () => {
setOpenModal(true);
};
const handleOff = () => {
setOpenModal(false);
};
const state = useSelector((state) => state.modalReducer);
const { isSignoutModal } = state;
const dispatch = useDispatch();

const [currentPage, setCurrentPage] = useState("manage");

function pageRender() {
if (currentPage === "manage") {
return ;
} else if (currentPage === "comment") {
return ;
} else if (currentPage === "contents") {
return ;
}
}

return (
<>



000님 환영합니다!



비밀번호 변경
{openModal && }
{
dispatch(signoutModalAction);
}}
>
회원탈퇴


{/* ============================================================================================= */}


{pageRender(currentPage)}

{/* */}
{/* 현재 등록된 정보가 없습니다. */}
{isSignoutModal && }


);
}
export default Mypage;

// MypageMenuBar.js를 만들어 상단바를 Mypage.js에서 분리
// onClick를 실행시켜줄 Props를 넘겨받는다.

import styled from "styled-components";
import React from "react";
import { useState, useEffect } from "react";

const Box2 = styled.div`
/* border: 1px solid #108dee; */
margin-top: 2%;
width: 70vw;
height: 8vh;
display: flex;
align-items: center;
background: #108dee;
font-size: 2rem;
font-weight: bold;
`;
const Manage = styled.div`
/* border: 1px solid #108dee; */
width: 24%;
margin-left: 12%;
font-size: 1.7rem;
background: none;
border: none;
z-index: 999;
border-right: 3px solid black;
cursor: pointer;
`;
const Contents = styled.div`
/* border: 1px solid #108dee; */
width: 24%;
margin-left: 12%;
font-size: 1.7rem;
background: none;
border: none;
z-index: 999;
border-right: 3px solid black;
cursor: pointer;
`;

const Comment = styled.div`
/* border: 1px solid #108dee; */
width: 24%;
margin-left: 10%;
font-size: 1.7rem;
z-index: 999;
background: none;
border: none;
cursor: pointer;
`;

function MypageMenuBar({ setCurrentPage }) {
const [currentClick, setCurrentClick] = useState(null);
const [prevClick, setPrevClick] = useState(null);

const GetClick = (e) => {
setCurrentClick(e.target.id);
setCurrentPage(e.target.textContent);
};

useEffect(
(e) => {
if (currentClick !== null) {
let current = document.getElementById(currentClick);
current.style.color = "white";
}
if (prevClick !== null) {
let prev = document.getElementById(prevClick);
prev.style.color = "black";
}
setPrevClick(currentClick);
},
[currentClick]
);

return (
<>


manage

contents

comment



);
}
export default MypageMenuBar;

// 상단 바를 클릭했을 때 보여줄 컴포넌트를 MypageComment.js / MypageManage.js / MypageContent.js로 분리
// 아래의 코드는 MypageManage.js 이고 나머지 두 개의 코드도 이와 비슷한 코드로 작동한다.

import styled from "styled-components";
import React from "react";

const Container = styled.div`
position: relative;
width: 90%;
display: column;
margin-bottom: 1px;
z-index: 100;
justify-content: center;
align-items: center;
margin-top: 10%;

/* border: 1px solid black; */
`;

const BoxContainer = styled.div`
display: flex;
margin: 0;
width: 55vw;
/* border: 1px solid red; */
box-sizing: border-box;
align-items: center;
margin-top: 2%;
margin-left: 6.5%;
border-bottom: 1px solid #cccccc;
`;

const Box = styled.div`
position: relative;
// z-index: 1;
flex: 6;
width: 30%;
height: 50%;
margin: 0;
align-items: center;
font-family: "Kfont";
box-sizing: border-box;
margin-top: 1%;
padding-left: 2%;
padding-bottom: 2.5%;
`;

const Box2 = styled.div`
flex: 2;
width: 30%;
height: 50%;
font-size: 0.9rem;
/* border: 1px solid black; */
font-family: "Kfont";
box-sizing: border-box;
margin-left: 31%;
padding-bottom: 2.5%;
`;

const Head = styled.div`
display: flex;
align-items: center;
width: 55vw;
height: 5vh;
font-size: 1.3rem;
font-family: "Kfont";
font-weight: bold;
border-bottom: 1px solid black;
position: absolute;
bottom: 10%;
padding-bottom: 0.5%;

.title {
display: flex;
padding-left: 2%;
/* border: 1px solid black; */
margin-right: 70%;
}
.comment {
display: flex;

/* border: 1px solid black; */
}
`;

const Empty = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 90%;
margin: 15% 0 0 5%;
`;

const BoxImg = styled.img`
display: flex;
margin-bottom: 2%;
`;

const Notice = styled.div`
display: flex;
font-size: 1.4rem;
margin-left: 2%;
`;

function MypageManage({ manageInfo }) {
return (
<>

{manageInfo.length === 0 ? (
<>


현재 등록된 정보가 없습니다.


) : (
<>
{manageInfo.map((el) => {
return (
<>

{el.container_name}
{el.size}


);
})}

)}


);
}
export default MypageManage;

```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] ManageContainer의 수조 삭제 버튼과 기능 구현
- [x] 페이지에 띄울 배너 디자인