Sidebar

css와의 싸움

Sidebar의 레이아웃 재배치를 하였다.
쓸데없이 감싼 div태그들을 제거하고 flex 핸들링을 위해 레이아웃을 재배치했다.
레이아웃을 고치면서 느낀게 css 속성을 지울때 전혀 변화가 없을 경우가 여러번 있었다.
css 못하는 사람의 특징이라던데...

    <li className='track' >
      <div className='track-box'onClick={() => { handleChangeMusic(num); }} >
        <img className='track-img' src={music.img} alt={music.title} />
        <div className='track-info' >
          <p className='track-title'>{music.title}</p>
          <p className='track-artist'>{music.user.nickname}</p>
        </div>
	<button className='track-delete' onClick={(e) => { handleDeleteMusic(e, num); }}>X</button>
      </div>
    </li>

flex를 이용해서 레이아웃 배치를 할때 에러가 있었다.
재생목록 삭제 버튼이 있는데 이 버튼이 재생 변경 함수를 실행하는 div 내부에 있어서
둘이 동시에 실행되는 것이다.

그렇다고 해당 영역 바깥에 버튼을 만들자니 hover가 버튼이 차지하는 영역까지 적용되질 않았다.
그래서 delete 버튼을 가장 앞으로 빼고 positon: absolute를 이용해서 위치를 조정했다.
그리고 zindex값을 줘서 함수가 따로 실행되도록 했다.

    <li className='track' >
      <button className='track-delete' onClick={(e) => { handleDeleteMusic(e, num); }}>X</button>
      <div className='track-box'onClick={() => { handleChangeMusic(num); }} >
        <img className='track-img' src={music.img} alt={music.title} />
        <div className='track-info' >
          <p className='track-title'>{music.title}</p>
          <p className='track-artist'>{music.user.nickname}</p>
        </div>
      </div>
    </li>

Sidebar 애니매이션

사이드바를 오픈하는 버튼을 클릭 했을때, 왼쪽에서 스윽 등장하고 닫을때는 스윽 들어가게 구현했다.
사이드바 오픈 버튼을 클릭할때 state값으로 true false가 변경되게 하였고,
이를 Sidebar에 props로 전달해 true false 값으로 className을 바꿔줬다.

className에만 변경을 준 이유는, Sidebar의 음악 재생이 끊기지 않도록 하기 위해서이다.
만약 false일때 Sidebar가 렌더 되지 않는다면 Sidebar를 오픈할때에만 음악이 재생 되니까,
제 기능을 못하기 때문이다.

transform을 이용해 위치 조정으로 false일때는 브라우져 바깥으로 빠지게 하여 사라진듯한 표현을 했다.
그리고 transition을 이용해 위치 변경되는 시간을 설정했다.

<div id='sidebar' className={isSidebarOpen? 'sidebar-opened': 'sidebar-closed'} >
  
...

 .sidebar-opened {
    transform: translate(0);
    transition: transform 0.25s;
}

.sidebar-closed {
    transform: translate(-100%);
    transition: transform 0.25s;
}

---

오늘은 여기까지..

Sidebar의 기본 css 배치는 완료했고, open close의 애니메이션도 완료했다.
내일부터는 음원 등록페이지 음원 수정페이지를 만들 예정이다.