- src/utils/theme에서 mui variants를 이용해서 Button, Avatar, CardHeader 컴포넌트를 커스텀했습니다. prop의 color 프로퍼티를 추가해 정해진 스타일이 적용되도록 해주었습니다.
- modal에서 페이지로 변경했습니다.
- 빌드 단계를 나타내는 Step Card를 추가하였습니다. (테마 예시 색상을 사용하여 색상 변경이 필요합니다.)
- whoiser 라이브러리를 사용해 도메인을 사용중인지 체크하는 로직을 추가하였습니다.
- 기존 컴포넌트 이름을 기능에 대해 좀 더 알아보기 쉽도록 변경하였습니다.
useResetBuildOption
훅을 만들어 new project 버튼 또는 dashboard 첫 렌더링시에 buildOptionsState, searchWordState를 초기화 시켜주는 로직을 추가하였습니다.
- searchWordState는 SearchInput을 사용하는 곳에서 동일하게 사용하는 state이기 때문에 기록이 남지 않도록 함께 초기화하였습니다.
useDeployEventHandler
에서 다루는 이벤트 핸들러를 buildOptionsState를 수정하는 이벤트 핸들러만 다루도록 변경하였습니다.
MuiAvatar: {
variants: [
{
props: { color: "default" },
style: {
backgroundColor: "#8c8c8c",
},
},
{
props: { color: "point" },
style: {
backgroundColor: lightRed,
},
},
],
},
- Avatar 컴포넌트에서 color="default" 또는 color="point" 를 적용하면 정해진 style로 커스텀화 할 수 있습니다.
- Avatar 컴포넌트는
src/components/build/BuildStepCards.tsx
파일에 적용되어 있습니다.
- 커스텀하는 부분에서는 palette에 접근하지 못해 바깥에서 색상을 선언한 후에 사용해야 할 것 같습니다.