반응형
🎡 소개
꿈 속에서 겪었던 즐겁거나 흥미로운 일들을 기록할 수 있는 꿈일기 어플리케이션
🎨 화면 구상
<메인>
url: /
색상 팔레트
월 이동 버튼: #563A3D
필터: #b18c79
일기 작성 버튼: #764845
배경: #FAF8F2
카드: #E7E1D8
이모티콘(이미지): #FFFDF5
<일기 작성 페이지>
url: /new
색상 팔레트
뒤로 가기, 취소하기 버튼: #b18c79
추가 버튼: #975AB7
작성 완료 버튼: #764845
<일기 조회 페이지>
url: /diary/:id
<일기 수정 페이지>
url: /edit/:id
🌌 기능 구상
[메인]
- 일기 조회, 작성, 수정, 삭제
- 하나의 페이지에 여러 개의 일기 추가 가능
- 제목에 드롭다운으로 장르 설정 가능
- 사용자 미지정시 '일상'
- 사용자가 장르 추가 가능
- 일기 검색
- 본문 검색
- 제목 검색
- 날짜 최신순/오래된 순 정렬 필터
- 장르별 필터 (가장 첫번째 일기 기준)
- 이미지 선택
- 이미지 업로드 기능
- LocalStorage 이용한 데이터 저장
----------------------------
[추가]
- 데이터 pdf 변환 저장
- 백업 파일 생성
디자인 도구 - 캔바(Canva)
색상 팔레트 참고
Color Set
for all who love color | inspiration & color palettes
www.design-seeds.com
반응형
'웹 프로그래밍 > 🌜꿈 일기장' 카테고리의 다른 글
| [React] 꿈 일기 기록 사이트 제작 일지-11. 일기 검색 기능 추가 (0) | 2023.09.27 |
|---|---|
| [React] 꿈 일기 기록 사이트 제작 일지-10. 사용자가 장르를 수정할 수 있는 `사용자 장르 추가/삭제 기능` 구현 (+ localStorage) (2) | 2023.09.27 |
| [React] 꿈 일기 기록 사이트 제작 일지-6. 일기아이템 생성 및 조회 페이지 이동 구현과 CSS 스타일링 (0) | 2023.09.25 |
| [React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현 (0) | 2023.09.25 |
| [React] 꿈 일기 기록 사이트 제작 일지-4. Home.js 작성한 월에 맞는 일기 리스트 렌더링 (0) | 2023.09.24 |
| [React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정 (0) | 2023.09.22 |
