Project/main-project

main-project 11일차 (22.09.17. Navbar 구현/다크모드 테스트)

호밀이 2022. 9. 17. 22:18

✅ 오늘 한 일

주말간 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와 같은 구조라고 생각하니 사용할 수 있게 됐다.

📌 해야할 일

  • 메인 페이지 구성
  • 물품 공유 리스트 페이지 구성