리드 조회

고친 부분

선택 했을 때 그 선택한 것에 대한 css styling

** 기존에 router에서 pathname을 가져와서 비교한 스타일링 **
각 li 요소마다 className을 추가로 하나씩 더 지정해 주어야 한다는 단점
만약 선택했을 때 스타일링 바꾸고 싶으면 하나하나 다 바꿔 주어야 함..

.link-btn__acc {
   background-color: ${path === '/account' 
   	            ? 'var(--highlight-color)' 
                : 'transparent'};
   border: ${path === '/account'
                ? '1px solid var(--highlight-border-color)'
                : 'none'}
}

** pathname을 비교해서 className을 사전에 설정한 스타일링 **
css 한번만 작성해 주면 됨, 고칠 때도 하나만 수정해 주면 됨

const router = useRouter()
const pathname = router.pathname
<li name='home' 
  className={
    pathname === '/' ? 'link-btn link-btn__selected' : 'link-btn'
  }
> ... </li>

** path로 비교를 하는 것이 아닌 경우에는 상태를 추가로 생성해서 비교해 줌 **

const [selectedObj, setSelectedObj] = useState({})

<li
  key={record.id}
  name={record.id}
  className={
    record.id === selectedObj.id
    ? 'record-card record-card__selected'
    : 'record-card'
  }
  onClick={handleRecordClick}
>

설계 변경

기존에 오브젝트마다 리스트 뷰랑 디테일 화면의 큰 부분은 반복이 된다고 생각해서
공통 컴포넌트로 생성하려고 했는데..
리스트 > 디테일 (부모 : 자식) 컴포넌트 구성으로 가는 것이 데이터를 넘겨주기에도 더 좋을 것 같았고,
어차피 큰 부분만 같고 그 안의 데이터나 그런 것들이 옵젝마다 다 다르기 때문에 따로 구성을 했다.

import LeadList from '@/components/lead/Lead'

export default function LeadPage() {
  return (
    <>
      <LeadList />
    </>
  )
}

그래서 pages > lead > index.js 에는 위의 소스만 담아두었고
LeadList 컴포넌트에 아래와 같이 LeadDetail 컴포넌트를 포함시켰다.

<div className='detail-view'>
   {detailOpen && <LeadDetailPage selectedObj={selectedObj} />}
</div>

LeadDetail 컴포넌트에는 section, row, field (label, value) 등이 있는데
그런 부분들은 오히려 컴포넌트로 만들까 생각중이다. 생각만.. 하고 있다!

추가한 부분

스크롤바 스타일링

스크롤바 스타일링은 처음 해봤다 ,, 자꾸 overflow 될 때마다 못생긴 스크롤바 나와서 기분이 쌍당히 안 좋았는데 이제 깔끔해져서 편안하다 ,, ˘͈ᵕ˘͈

/* src > styles > globals.css */

:root {
  --button-gray-color: #f0f0f0;
  --button-gray-border-color: #e5e5e5;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--button-gray-color) var(--secondary-color);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--button-gray-border-color);
  border-radius: 20px;
  border: 3px solid white;
}