• Problem - 현재 어떤 문제, 혹은 질문이 있는지
• Reason - 해당 Problem의 이유, 문제가 되는 사유가 무엇인지
• Try to solve - 문제를 해결하기 위해 어떤 시도를 했고, 조사한 사항은 어디까지인지 ( 중요 )
• ( Option ) Alternative - 문제를 해결하지 못할 경우의 대안

#1 : 상태 관리

• Problem : 서버 상에서 데이터의 상태가 변경되어도 최신 데이터를 받아오지 못하는 문제
• Reason : 컴포넌트가 처음 Mount 될 때만 데이터를 받아오고 그 이후로 받아오지 않음
• Try to solve : 데이터 캐싱과 그에 따른 Refetching이 가능한 React-query(tanstack)의 도입

#2 : tailwind 사용으로 인한 html 가독성 ⬇️

• Problem : html이 과도하게 길어져 코드가 정리되지 않아보인다.
• Reason : tailwind 의 사용
• Try to solve : tailwind-styled-component 패키지를 사용해 html 태그가 너무 길어지는 경우에는 이를 이용해 작성

#3 : admin sidebar 전체 화면 높이로 고정

• Problem : sidebar가 전체 페이지를 차지하지 않고 현재 스크린 높이까지만 차지해서 스크롤을 내리면 아래가 비어있음
• Reason : css의 height가 처음 화면 높이만큼으로 지정되기 때문
• Try to solve :
  • 모든 부모와 sidebar 컴포넌트를 h-full을 줬지만 해결 X
  • index.css에 body, html을 { margin: 0; padding: 0; height : 100% }를 주고 모든 부모와 sidebar 컴포넌트에 h-full, 그리고 h-screen을 줬지만 해결 X
  • 테이블 컨텐츠가 화면 길이를 넘어설 때 스크롤을 만든다는 것을 깨닫고 AdminDashBoard와 sidebar를 완전히 분리시키기 위해 fixed 속성을 사용
    • → 또다른 문제 : sidebar가 버튼을 클릭하면 확장되는 방식이기 때문에 fixed로 고정할 시, 화면 확장할 때 AdminDashBoard 화면 위에 겹쳐 나오는 현상
    • 이를 해결하기 위해 부모 컴포넌트인 AdminPage에서 open 이라는 state를 만들고 AdminSidebar과 AdminDashBoard에 전달. sidebar가 open 된 경우와 아닌 경우를 나누어 width 를 지정하여 해결.