[내일의집] Sidebar (dreawer) + Search Modal

01 sidebar 마크업

1. 기초는 <aside> : 문서의 맥락에서 벗어나 존재하는 요소를 담음. heading 태그 필요.
2. <aside> 내부에서도 각 역할에 맞게 <heading>, <nav>, 로 섹션 구분하기
3. styling을 위해 필요한 만큼 <div>로 감싸기

02 sidebar 내부 스타일

1. <aside> 전체적인 padding 파악, padding 또는 height 고정으로 간격 조정하기
2. avatar 이미지가 없는 경우에 대비해 기본 이미지를 background-image로 삽입
   • bg-position: center center;
   • bg-repeat: no-repeat;
   • bg-size: contain;
3. 넘치는 유저이름을 '...' 처리(truncate) 하려면 (수제캔디 생각하기)
   • 상위영역(block) 크기 지정 (flex 정렬 된 상태라면 유저이름에 flew-grow: 1; 으로 영역 확보해 주기 -> 유지보수용 ) 
   • white-space: nowrap ;  -> 줄넘김(두 줄로 표기)하지 않고 한 줄로 표기
   • overflow: hidden ;  -> 상위영역 크기 넘어가는 부분은 똑 잘라냄
   • text-overflow: ellipsis ;  -> 똑 잘린 부분의 텍스트를 ... 처리함
4. flex로 정렬한 아이들이 압축돼서 찌그러지면, 찌그러진 아이에 flex-shrink: 0; 입력
5. transition 줄 때는 변화하는 style보다 원상태의 class에 넣어주기
   • display 속성의 경우 transition 불가  -> 대신 max-height 값을 변화시킬 수 있음. (right, left, margin, padding, border 등도 transition 가능은 하지만 합이 안 좋음)
   • 닫힌 생태에서 max-height: 0px , overflow: hidden 으로 숨긴 뒤 is-active 상태에서 원래 높이로 변화시킴
   • max-height는 내부 컨텐츠 높이와 정확히 맞춰줘야 버벅임 없음. js든 뭐든 써서 높이 계산하기. 

03 sidebar 레이아웃

1. 로그인 여부, dreawer 오픈 여부에 따라 레이아웃이 변화하는 부분과 그렇지 않은 부분을 살펴셔 적절한 곳에 margin/padding/border 등을 부여
2. sidebar 띄우기
   • position: fixed;
   • height: 100vh; overflow-y: auto;  화면 높이에서 넘치는 내용은 아래로 스크롤.
   • 스크롤바 없애려면 ::-webkit-scrollbar {display: none);
   • overscroll-behaivior: contain; 사이드바 스크롤 이후 메인화면까지 스크롤되는 기능 강제
   • z-index 상위로 조정
3. sidebar 숨기기
   • transform: translate3d(x, y, z) : 3d가속을 고려해 부드러운 애니메이션 사용 가능
4. shadow 오버레이
   • 오버레이용 div를 따로 만들어서 적용시키고, z-index 조정
   • 사용하지 않을 때는 opacity: 0, visibility: hidden 

04 Search modal

1. 스타일링
   • sementic하게 자리 잡아주기
   • search-history는 모바일-웹 모두 사용하므로 따로 떼어 작성 + 웹에만 해당하는 부분 gnb 안에 추가로 작성
   • 버튼 요소가 많으므로 flex-grow, flex-shrink, padding 적절히 활용해 공간 할당. 클릭할 면적이 너무 적어지거나 겹치지 않도록 주의.
2. 상태 디자인
   • 살짝 위에서 내려오는 transition 주고 싶다면 transform에서 y 위치 옮겨두기. **transformY()에서 이미 설정해 둔 값 있다면 무시되지 않도록 추가해서 작성**