- 다크 모드를 구현해볼 생각으로 시작한 토이 프로젝트 입니다.
- 다크 모드의 구현과 함께 fs 모듈을 사용해볼 생각으로 웹 텍스트 에디터를 컨셉으로 웹 사이트를 만들었다.
🥦 다만, 리액트에서 fs 모듈이 지원되지 않아서 FileReader와 blob으로 해당 기능을 구현하였다.- 텍스트 수정과 뷰어의 변환을 더블클릭을 통해서 구현하였다.
🍖 Click-To-Edit UI- 개발을 진행하면서, 텍스트가 길어지면 맨 위로 올라갈 수 있는 버튼이 있으면 사용자 경험에 좋을 것 같아 추가적으로 해당 기능을 추가했다.
- localstorage를 통해서 새로고침을 하여도 텍스트가 유지되도록 하였다.
사이트 기능 소개
- 처음에는 기본 light 모드로 화면이 구성된다.
- 우측 상단의 react-icons를 사용해 만든 아이콘을 누르면 다크 모드로 변경할 수 있다.
- 다크모드로 변경된 화면이다.
- 기존의 뷰어 화면(div)에서 글자 레이어를 더블 클릭할 시에 텍스트를 수정할 수 있는 textarea로 변경이 된다.
- 하단의 input을 통해서 txt 파일을 통해서 텍스트를 추가할 수 있다.
- 기존의 텍스트를 지우지 않고, 기존에 텍스트에 txt 파일의 내용이 추가된다.
- 오른쪽의 다운로드 버튼으로 다운로드 폴더에 your_text.txt라는 파일명으로 텍스트를 다운로드 할 수 있다.
- 뷰어 모드에서 일정 길이 이상 텍스트가 길어지면, 맨 위의 화면으로 올리는 버튼이 생긴다.
- 초기화 버튼을 통해서 텍스트가 맨 처음의 상태가 됩니다.
시행 착오
-
다크 모드의 구현을 위해서 styled-components와 Context API의 다양한 기능과 styled-reset을 사용하였습니다. Context API는 처음 사용해보기에, 아직 이해도가 부족한 것 같다.
🍗 styled-components의 ThemeProvider, createGlobalStyle
🍗 Context API의 createContext, useContext
🍗 reset으로 스타일을 초기화한다. -
글로벌 스타일을 적용했지만, button과 textarea 내부의 스타일은 적용되지 않아서 전역변수를 받아와 props를 통해서 다크 모드를 구현하였다.
-
처음에는 텍스트 편집 상태(textarea)에서 엔터키를 눌렀을 때, 다시 텍스트 뷰어(div) 상태로 되돌릴 생각이었으나, 그렇게 하면 줄바꿈이 되지 않아 더블클릭으로 수정을 완료하는 것으로 변경했다.
🍖 Double Click-To-Edit UI 구현 -
맨 위로 올라가는 버튼은 일정 수준 이상으로 화면이 밑으로 내려갔을 때 보이도록 변경하였다.
🍲 window.scroll를 사용하여 맨 위로 올라가는 버튼의 기능을 구현하였다. -
사용하기에 더 간편했던 vercel를 사용하여 배포하였다.
-
새로고침이 되었을 때, 텍스트 데이터가 사라지면 곤란하기에 localStorage에 텍스트 데이터를 저장하였다.
-
텍스트 파일을 읽어오는 과정은 FileReader를 통해서 비교적 쉽게 구현할 수 있었으나, 텍스트 파일을 내보내기 위해서 텍스트가 변경될 때 마다 텍스트 내용으로 Blob 객체를 만들고 그 Blob 객체로 File 객체를 만든 뒤, URL.createObjectURL로 해당 객체의 URL을 만들어 a 태그와 연결시켰다.
-
아이콘을 사용하기 위한 라이브러리로 인지도가 높은 react-icons를 사용하였다.
-
강원도교육청X헤움디자인이 제작한 강원교육모두체 Bold 폰트를 사용하였다.
링크
🧈 깃허브 : https://github.com/citron03/dark_mode_txt_web
🧈 배포 사이트 : https://dark-mode-txt-web.vercel.app/
