이 앱은 간단한 내용을 에디터로 작성하고, 저장, 수정, 삭제할 수 있는 노트 기능을 제공합니다. 사용자들은 필요할 때마다 손쉽게 메모를 작성하고 관리할 수 있으며, 직관적인 인터페이스로 효율적인 노트 정리가 가능합니다.

📂 소개

이 프로젝트는 ReactJS, TypeScript, Redux-Toolkit, react-quill, Styled Components, 그리고 LocalStorage를 사용하여 구현된 간단한 노트 애플리케이션입니다.

All-Notes-App Project Repository 살펴보기 ↗️

🖥️ 서비스 화면

사용자는 react-quill 에디터를 통해 다양한 서식 옵션을 활용해 노트를 작성할 수 있습니다. 텍스트의 크기와 굵기를 조절할 수 있으며, 목록 작성, 코드 블록 삽입, 이미지 추가 등 다양한 형식의 콘텐츠 작성이 가능합니다. 이는 사용자의 글쓰기 편의성을 높이기 위한 주요 기능입니다.

작성된 노트는 최신 수정일 기준으로 자동 정렬되며, 노트 목록에서 최근에 수정된 노트가 상단에 표시됩니다. 노트는 LocalStorage에 저장되어 사용자가 브라우저를 새로고침하거나 앱을 종료하더라도 데이터가 유지됩니다. 이를 통해 오프라인 상태에서도 노트를 저장하고 유지할 수 있습니다.

노트의 제목과 내용을 통합적으로 검색할 수 있는 기능을 제공합니다.

Styled Components를 활용하여 라이트 모드와 다크 모드를 지원하며, 사용자 선호에 따라 테마를 전환할 수 있습니다. 테마 변경 사항은 LocalStorage에 저장되어 사용자가 앱을 다시 열었을 때도 유지됩니다. 앱 내에서도 다크 모드와 라이트 모드 변환이 가능하며, 웹 버전과 동일한 데이터를 유지합니다.

이 앱은 PWA로 구현되어, PC나 스마트폰에서 앱 형태로 설치하여 사용할 수 있습니다. PWA를 통해 오프라인에서도 작성된 노트를 조회하거나 편집할 수 있으며, 인터넷 연결이 없어도 한 번 설치한 앱은 계속 사용할 수 있습니다.

Styled Components로 UI를 설계하여 반응형 디자인을 적용했습니다. 다양한 화면 크기에서도 일관된 사용자 경험을 제공하며, 모바일과 데스크톱 환경 모두에서 최적의 사용성을 보장합니다.