공유 컴포넌트 만들기
오늘부터 새로운 매드업 기업과제를 시작하였다.
팀원들과 10시부터 폴더구조를 잡고 각자 맡을 기능을 정하였고 내가 맡게 된 부분은 반응형을 고려한 사이드바와 헤더부분이었다! 해당 파트 구현을 완료하였고 빠르게 정리하고 팀원분들의 작업을 돕기로 했다!
Sidebar
사이드바는 display: flex로 관리하기위해 피그마를 보고 상단과 하단으로 섹션을 나누었다.
광고 센터 부분에서 margin-bottom을 크게 주어도 됐겠지만, 그렇게 하는 것보다 최소 margin-bottom을 주고 데스크탑 화면에서는 사이드바 최하단에 내려가 있는 것이 더 이쁜 레이아웃이라고 생각했기 때문에 상단과 하단으로 나누고 justify-content: space-between을 주어서 레이아웃을 잡았다.
Header
헤더 부분은 반응형을 고려해서 화면이 몇 이하일때는 햄버거 버튼이 나오게 이상일때는 나타나지 않게를 구현하였다. 그리고 모바일 화면에서는 헤더에 있는 사용자 정보를 사이드바에 넣어 나타나도록 하려 했지만, 그렇게 하게되면 ui가 이쁘지 않았고 ux/ui를 봤을 때 사용자 정보나 알람, 세팅은 사이드바에 숨겨지는것이 아니라 헤더에 있는것이 맞다고 판단되어 팀원들에게 의견을 여쭙고 사용자 정보를 나타내는 헤더 부분은 모바일 때도 그대로 헤더에 있도록 하였다.
그리고 모바일일 때 생긴 햄버거 버튼을 클릭하게 되면 사이드바를 나타낼 수 있도록 구현하였다!
마무리..
완성한 부분을 레포에 올리고 PR을 올리고 피드백을 받는 시간을 가졌다. 햄버거 버튼 나타내는 부분을 괜히 어렵게 window resize이벤트를 이용해서 state로 관리하게 했었는데 팀원 한분께서 css로 관리하는 것은 어떨까요 라는 피드백을 해주셨고 순간 아! 왜 이렇게 어렵게 생각했지,, 싶었다,, 전에 투두 리스트 구현할 때도 비슷한 부분이 있었는데 또 머리가 띵했다😂 단순한 부분을 왜 어렵게만 생각한건지,, 바보같은 실수였다🤣 다음부터는 더 신경써야겠다..
사이드바에 있는 드롭다운은 아직 적용이 되지 않았지만 그외의 기능과 레이아웃은 마무리를 지었다. 또 걱정이 생겨 '내가 늦게 완성하면 어쩌지' 라는 걱정을 하면서 '빠르게 완성하고 수정할 부분이 있다면 그때 보완하자!' 라는 생각으로 완성지었다. 걱정이 많아 급하게 하려고 하는게 가끔은 혼자 스트레스도 받고,, 장점이라고 생각해본적은 없지만,, 그냥 긍정적으로 나는 손이 빠른가보다~! 라고 장점으로 생각하기로 했다! ㅋㅋ.. 손도 빠르고 실수도 적은 개발자가 되도록 노력해야겠다,,!! 화이팅이다🔥
