✅ 오늘 한 일
주말간 Python 스터디가 있지만 마냥 프로젝트를 신경쓰지 않을 수 없었기 때문에 조금이나마 구현을 시작했다.
Navbar 구현
- 데스크탑 버전과 786px에서 모바일 환경으로 만들 수 있도록 구현했다.
- 공유장터, 레저용품 판매점, 로그인, 회원가입 등 페이지 이동을 위해 router설정을 해주었다.
다크모드 테스트
- 해(라이트모드), 달(다크모드) 아이콘을 클릭시 테마가 전환될 수 있도록 했다.
- Styled-components의 기능중 ThemeProvider를 사용하여 변수에 지정된 색상을 테마가 바뀜에 따라 변화하도록 설정할 수 있었다.
- ThemeProvider?
- context api기반으로 만들어졌으며 Redux와 같이 루트파일에서 글로벌로 지정할 수 있다.
- 참고자료
styled-components: Advanced Usage
Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects
styled-components.com
styled-components로 다크모드(darkMode) 만들기
woolta 블로그 ver2.0 기술 개발 블로그
blog.woolta.com
리액트 다크모드 구현하기 feat. styled-components & context API
사용자 경험을 최상으로 이끌어주는 디자인 트렌드 다크모드 UI.애플, 구글, 인스타그램, 페이스북 등 세계적인 브랜드들이 이 다크모드 기능을 애용하기 시작하며 UI/UX에 필수적인 기능 중 하나
velog.io
🥲 어려웠던 일
- ThemeProvider를 처음 사용해봐서 힘들었지만 Redux와 같은 구조라고 생각하니 사용할 수 있게 됐다.
📌 해야할 일
- 메인 페이지 구성
- 물품 공유 리스트 페이지 구성
'Project > main-project' 카테고리의 다른 글
| main-project 13일차 (22.09.20. 물품 공유 리스트 페이지 구현) (1) | 2022.09.21 |
|---|---|
| main-project 12일차 (22.09.19. 메인화면 구성) (0) | 2022.09.19 |
| main-project 8~10일차 (22.09.14 ~ 16. 기획서 작성) (0) | 2022.09.15 |
| main-project 7일차 (22.09.13. 기획서 작성) (0) | 2022.09.14 |
| main-project 3~6일차 (22.09.09 ~ 12. 기획서 작성) (0) | 2022.09.09 |