우선적으로 메인에서 사원증 사진에 커서를 올리면
hover 기능과 함께 자세히 보기라는 메세지로 변경되게끔 디자인하려 했는데
아직 기능이 완전 구현되지 않았다
그리고 깃에 코드를 올려야하는데 팀원 대부분이 git으로 협업하는게 거의 처음이다보니 여러 차례 소통하면서 수정하기로 했다
hover 기능에 관련해선 다른 팀원분이 맡아주셔서
내가 만든 페이지 내부에 추가할 사항은 없을지 고민을 많이 해봤다
그러다 유튜브를 통해 애니메이션 기능이란걸 알게됐다
전체적인 사용 방법은 이 유튜브를 참고하였다

대략적인 사용법은 익혔으나 어떤 기능들이 있는지 몰라 GPT한테 추천받기 !
그 중에서 floating이 가장 마음에 들어 자세히 알려달라고 요청보았다
아주 똑똑한 지피티 ,,
바로 코드 추가해줬다
<style>
@keyframes floating {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(10px);
}
}
</style>
나는 위아래로 움직이길 원해서 translateY로 위치를 조정해주었다
<style>
animation: floating 3s ease-in-out infinite;
</style>
그리고 위 코드를 사원증 부분에 추가해 사진이 둥둥 떠있는것처럼 만들어줬다

그러면 이렇게 둥둥 떠있는것같은 효과가 만들어진다
정말 ... 개인적으로 이번 팀플하면서 가장 많은 시간을 쏟은 것 같다
지금은 좀 익숙해져서 괜찮지만 처음 하는 협업이다보니 push pull하는 타이밍조차 어려웠다

그러다 눈물의 사건 ... 충돌이 나버렸다 ...
어째서 pull을 해오지 않았던거야 ..
일단 어떻게든 해결은 해야하니 직접 병합을 하고 또 했는데
결론만 말하자면 실패했다
실무 상황이었다면 지금 생각해도 아찔하다
이럴 상황을 예상해서 이름이 다른 파일로 작업을 해 원본에 복붙하는 식으로 운용했었기 때문에 작업했던게 전부 날아가는 상황은 막을 수 있었다
충돌이 난 가장 큰 원인는 pull request를 하지 않았기 때문인것같다
앞으로 이런 문제를 예방하고자 pull request의 중요성과 충돌이 났을 때의 대처법은 따로 정리해둘 예정이다
이 이후로는 작업 후 코드를 올려야하면 팀원들간에 메세지를 통해 열심히 사실을 알렸고 이번 프로젝트 내에서 더 이상 충돌은 없었다

우여곡절 끝에 코드 병합에 성공했다
사실 나는 이와 같은 소규모 프로젝트에서 충돌이 난게 정말 다행이라고 생각한다
왜냐하면 이 일을 계기로 충돌이 났을때의 대처법에 대해 더 자세히 공부할 수 있게됐고 충돌 상황에 대한 경각심이 생겼기 때문이다
발표자료는 우리팀 팀장님이 너무 멋있게 만들어주셨고
Read me는 정말 열심히 작업해서 꼭 봐주셨으면 좋겠습니다
4일동안 팀원분들과 같이 협업하면서 개인적으로 정말 귀중한 시간을 보냈습니다. 무언가를 '같이'한다는 것이 익숙하지 않았던 저이지만 너무 좋은 팀원들덕에 무사히 정해진 기간내에 작업물을 완성해냈다고 생각합니다. 저희 팀에서 작성한 Read me는 한 번쯤 읽어주셨으면 좋겠습니다.
최종 완성본