🎨 Design(#153): 다크 모드 설정

[wjsdncl]

• 다크모드 기본 설정
• 내 대시보드 페이지 다크모드 적용

연관된 이슈

• close #153

작업 내용

기본적인 다크모드 설정 및 각 페이지 별 다크모드 설정

• [x] 다크모드 토글 버튼
• [x] 레이아웃
• [x] 내 대시보드 페이지
• [x] 내 페이지 페이지
• [x] 대시보드 페이지
• [x] 대시보드 수정 페이지
• [x] 로그인, 로그아웃 페이지

스크린샷

코멘트 및 논의 사항

레이아웃 같은게 변경된게 많아서 아에 새로 파서 만들었습니다! 내 대시보드 페이지만 다크모드 적용되어있습니다 프리뷰도 설정도 복사해서 넣어뒀습니다

[wjsdncl]

로그인 회원가입 페이지 제외하고 다크모드 적용 완료했습니다 확인 부탁드려요 🫡

[wjsdncl]

추가로 다크모드 변경 버튼 어디에 둘까요?

[un0211]

와.. 민재님 작업 빠르시네요!! 수고하셨습니다!!! 테일윈드 사용한 덕인가요?? 이따 코드 구경하겠습니다!!

댓글 글씨가 잘 안 보여요

[wjsdncl]

와.. 민재님 작업 빠르시네요!! 수고하셨습니다!!! 테일윈드 사용한 덕인가요?? 이따 코드 구경하겠습니다!!

넥스트 + 테일윈드가 다크모드 적용하기 정말 편한거같습니다

댓글 글씨가 잘 안 보여요

아 댓글을 확인 안했네요 바로 수정하겠습니다

[wjsdncl]

댓글에 다크모드 적용했습니다 🫡

[wjsdncl]

수고 많으셨어요!! 너무 좋아요~~

다만 어떤 버튼은 누를수록 하얘지고 어떤 버튼은 까매져서 (or 비활성화 / 활성화, 승인 / 거부) 이런게 직관적으로 느껴질까 싶어요! 모두 누를 때 밝아지는 것으로 통일하고, 다크모드에 어울리게 변형된 포인트 색상을 넣어도 괜찮을 것 같아요!! 이런건 사람마다 의견 다를 수 있는 부가적인 작업이니까 꼭 지금 다 안 넣으셔도 돼요~~

음 확실히 일관성 없게 넣긴했습니다 ㅋㅋ... 버튼 종류 확인하고 색 입혀보겠습니다 🫡

[wjsdncl]

민재님 너무 고생하셨습니다..!! 완전 멋진 것 같아요. 이렇게 다크 모드 설정하면, 로컬 디바이스의 다크 모드를 인식해서 반영할까요?? 토글 버튼 같은 경우는 마이페이지에 있으면 좋을 것 같은데 유저가 어떤 모드를 선택했는지 기억할 방법이 있을까요?!

네 처음 진입하면 디바이스 설정에 따라서 기본 모드가 정해지고 버튼 클릭하면 모드가 변경됩니다 어떤 모드인지 기억하는건 next-themes 라이브러리의 useTheme를 사용하면 알아서 로컬 스토리지에 저장해두고 사용합니다 그래서 따로 저장할 필요가없습니다! 👍

기본 모드 적용하는 것도 next-themes 의 ThemeProvider 기능입니다 👍 <ThemeProvider attribute='class' defaultTheme='system' enableSystem={true}> next-themes 너무 편합니다

[wjsdncl]

버튼 디자인 수정 했습니다! 테마 변경 버튼은 일단 사이드바에 놔뒀습니다 문제 없으면 바로 머지하겠습니다!

[un0211]

ㅠㅠ

[wjsdncl]

자동 적용 됐나보네요... 로그인 회원가입 페이지도 테마 버튼 추가하고 다크모드 설정 하겠습니다

[wjsdncl]

로그인, 회원가입 페이지도 추가했습니다 🫡

[un0211]

민재님 수고하셨습니다!! 나중에 테마 만들 일 있으면 민재님 코드 참고할게요~~