처음에는 메인부분만을 맡다가 팀소개 페이지 부분을 이어받아서 팀프로젝트를 진행하게 되었다. 전 팀원분이 팀소개 페이지의 레이아웃을 잘 짜주셔서 나는 약간의 애니메이션적인 요소와 디자인부분만 추가적으로 수정하면 됐었다.

1. 메인수정

수정 전 모달창(단순 환영문구)	수정 후 모달창(우리 웹사이트에 초대한 느낌을 냄)

어제에 이어 약간 아쉬움이 남았던 선물찾기로 모달창을 제대로 열었을 경우에 단순히 환영한다는 문구에서 선물로 초대장을 찾았다는 느낌을 더 주기위해 내용을 추가하였다.

2. 팀소개 수정

기획	와이어프레임

처음에 기획 했던 것은 크리스마스 어드벤트 캘린더 느낌을 내서 상자를 꺼내는 느낌을 표현하는 것이었다.

팀소개 front 디자인	팀소개 back 디자인

상자에서 무언가를 꺼내는 느낌까지는 가능했지만 내용을 어떻게 보여줄지 상의하다가 카드를 꺼내 뒤집어서 보여주는 느낌을 주는 것으로 결론을 냈다. 이 모션은 CSS에서 @keyframes을 사용해서 구현해냈다. 처음에 retateY(180deg)로 했을 때 카드가 뒤집어지지 않다가 retateY(179deg)로 하니 카드가 뒤집혀진 모습이 제대로 구현이 됐다.

 @keyframes move {

    0% {
        transform: rotateY(0deg);
    }

    50% {
      transform: scale(1.1);
      /* 애니메이션이 50%만큼 동작시 */
    }
  
    100% {
      transform: rotateY(179deg) scale(1.1);
      /* 애니메이션이 100%만큼 동작시 */
    }
  }

3. 팀소개페이지 머지 + 깃허브

프로필페이지	프로필페이지-모달	방명록페이지

깃허브 관련해서 너무 많은 충돌을 겪고 멤버들의 자료를 리셋시킬 뻔 했으나 다행히도 현재 팀소개 페이지는 막바지에 도달한 상태라 머지를 하였다. 주로 html과 css만을 사용한 나와는 달리 다른 팀원분들 같은 경우는 자바스크립트뿐만이 아니라 파이어베이스도 사용하셨다. 또한 다른 팀원분들의 코드를 보는 것만으로도 많은 공부가 될 수 있을 것 같다.