[✍️ Dev Log] 송다영 / 2022-1-21


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

- Mypage.js CSS와 게시판 CSS을 수정하여 페이지 디자인을 완료하였다.
- Manage, Search에 들어가는 메인 배너를 디자인하였다.

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

- CSS도 박스가 연결되어 있어서 하나씩 수정을 하면 연결된 박스들이 잇따라 움직여서 수정하는 것에 어려움이 컸다.
- 디자인한 배너를 이미지로 올리면 큰 화면으로 보일 때 화질이 깨져서 보완하는데 재수정하는 데에 시간이 오래걸렸다.

```js

// Mypage.js styled.component

const UserInfo = styled.div`
width: 100%;
height: 100%;
font-family: "Kfont";

.Box {
width: 100%;
height: 52vh;
/* border: 1px solid black; */
display: flex;
flex-direction: column;
background: #ace0ff;
}
.mypage {
/* border: 1px solid black; */
position: relative;
width: 10vw;
height: 6vh;
margin: 1% 0 0 1.5%;
font-size: 1.3rem;
}

.userImg {
/* border: 1px solid black; */
position: relative;
left: 15%;
width: 28vw;
height: 35vh;
}

.img {
width: 100%;
height: 100%;
padding: 0;
}
.userGreeting {
/* border: 1px solid black; */
position: relative;
width: 30vw;
height: 5vh;
font-size: 1.7rem;
left: 40%;
bottom: 30%;
font-weight: bold;
padding-left: 1%;
}
.userNotice {
position: relative;
width: 30vw;
height: 5vh;
left: 40%;
bottom: 28%;
padding-left: 1%;
}
`;
const Container = styled.div`
position: relative;
display: flex;
width: 100%;
height: 25vh;
/* border: 1px solid black; */
align-items: center;
justify-content: center;
`;
const TitleContainer = styled.div`
position: relative;
/* border: 1px solid black; */
justify-content: space-evenly;
width: 100%;
height: 100%;
display: flex;
text-align: left;
line-height: 500%;
`;

const Title = styled.div`
position: relative;
width: 13vw;
height: 8vh;
font-size: 1.7rem;
font-weight: bold;
/* border: 1px solid black; */
justify-content: center;
top: 63%;
right: 8%;
`;

const Box1 = styled.div`
position: relative;
justify-content: space-evenly;
display: flex;
width: 18vw;
height: 4vh;
/* border: 1px solid black; */
left: 22%;
top: 8%;
`;
const ButtonL = styled.button`
width: 7vw;
font-size: 0.9rem;
font-weight: bold;
color: white;
border-radius: 10px;
border: 1px solid #108dee;
background: #108dee;
`;
const ButtonR = styled.button`
width: 7vw;
font-size: 0.9rem;
font-weight: bold;
color: white;
border-radius: 10px;
border: 1px solid #cccccc;
background: #cccccc;
`;

const ContentContainer = styled.div`
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const Box3 = styled.div`
/* position: relative; */
border: 1px solid #ace0ff;
margin-top: 4%;
width: 70vw;
height: 90vh;
margin-bottom: 10%;
display: flex;
flex-direction: column;
align-items: center;
`;

```
## 서치 페이지 배너

## 매니지 페이지 배너


## 마이 페이지 CSS

## 게시판 CSS

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

- [x] 그린삭을 이용한 애니멘이션
- [x] 키프레임을 이용한 애니메이션