📚 JUICEPlanner - 나만의 다이어리

주소 : JUICEPlanner with gh-pages

📒 Description

플래너, 다이어리, 잡지, 스토리 등으로 활용 가능한 서비스입니다.
사진을 넣고 직접 그리고! 제목 내용도 직접 넣어서 저장하여서 카드로 소장할 수 있습니다!

프로젝트 기간 : 23.01.16 ~ 23.02.10

• D-Day 기능을 가지고, tooltip으로 주말과 평일을 출력한다.
• Diary을 작성할 수 있으며, 사진을 넣어 자신이 직접 꾸미고 제목과 내용을 입력할 수 있다.
• Editor에서 (마우스 사용시, touch ❌) 직접 그릴 수 있다. (사진 위로 그리기 가능)
• 저장한 Diary를 클릭하게 되면 다운로드 기능이 있다.
• 반응형으로 제작

🌈 Environments

Language

Library

style

🐭 Installation

$ npm install

Start

$ npm run start

Run on localhost:3000/juiceplan

📝 Pages & Features

Main Page

Profile.tsx 제작자의 정보가 담겨있다.
DDayBox.tsx 제작자의 전역일이 적혀있다.
SetBtn.tsx D-Day 추가, 삭제, Main 노출여부 결정할 수 있는 버튼
DisplayCard.tsx 다이어리를 요약하여서 보여준다.

Main

Card	Profile	DDay

SetBtn 시연 동영상
https://user-images.githubusercontent.com/44994011/218132504-9e43e337-6a64-4293-8d1b-379852465bc0.mov
⭐️ 이 있는 DDayBox는 Main에서 보여준다.

Diary Page

DisplayDiary.tsx 다이어리를 하나만 출력하고 다운로드가 가능하다.
DayDiary.tsx 다이어리를 편집 및 저장이 가능하다. (사진 업로드 가능)
Template.tsx 캔버스위로 그림을 마우스를 통해 그릴 수 있다.
Editor.tsx Template로 작성한 캔버스위에 글자를 입력할 수 있다.

Diary
뒤로가기는 홈으로 이동, 반응형으로 제작

DayDiary.tsx
다이어리 쓰기 버튼을 통해서 현재 페이지로 이동

Template.tsx	Editor.tsx
사진업로드 & Canvas를 통해서 그림 그리기 가능	적용하기 버튼을 통해서 에디터로 이동 후 글자 입력 가능

Display.tsx
저장하기 버튼을 통해서 저장, hover animation(scale, opacity)

DisplayDiary.tsx
Main에서 자세히, Diary에서 해당하는 다이어리 클릭시 이동, 다운로드 기능

Responsivle

Grid Components

Main DisplayCard.tsx
window size 1076

Diary index.tsx
window size 1076

적용된 Styles

display : grid;
// in min-width 768
grid-template-columns : repeat(1fr 1fr);
// in min-width 1024
grid-template-columns : repeat(1fr 1fr 1fr);

in Mobile

DayDiary.tsx의 MenuBar.tsx 상에서 window size < 450px 이하이면 캔버스 도구 사용 불가능하다.

MenuBar.tsx
window size 390

• 각종 글자 크기 등 450px 기준으로 반응형으로 설계

사진 정보

우주소녀 루다 사진 출처, 트위터 루대기