[Django] 18. CHAKRA UI: Modal, Component, Grid, Responsive, Dark Mode, Skeleton,

Header 

 

로고, 로그인, 계정생성, 다크모드 전환 

src > components > Root.tsx 

 

React Icons

: React로 아이콘을 다루기 가장 좋은 방법 

https://react-icons.github.io/react-icons/ 

---

Modal: Log in

 

 

---

Modal: Sign in & Component 분리 

 

---

Dark Mode

: 사용자가 dark mode를 선택하면 chakra는 그 세팅을 로컬 저장소에 자동으로 저장 

  다시 접속했을때도 dark mode를 적용하기 위해서는 Chakra의 ColorModeScript 컴포넌트를 추가

 

theme.ts 파일 생성하여 'theme' 생성 

Header.tsx에서 useColorMode 사용 

일부 버튼에 대해 원하는 모드(dark / light)를 강제할 수 있다(바뀌지 않도록 함) 

여기서는 Sign up 버튼이 항상 light mode가 되도록 강제 

---

Rooms Grid

Home.tsx에서 Grid 컴포넌트 추가 

---

Responsive Design

: 화면 크기에 따른 사이즈를 일일이 지정하지 않아도 된다 

 

Room.tsx를 따로 생성

---

Skeleton

: '로딩중'이라는 글자 대신 멋진 로딩 인터페이스를 표시해주는 컴포넌트 

 

isLoaded가 false: Skeleton 안에 Box들을 숨길 수 있다 

isLoaded가 true: Skeleton이 사라지며 Box들이 서서히 나타난다 

---