Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
Posuto - 간편한 포스트잇 어플리케이션
#side_projects
2년 전
10,003
3

서비스명 : Posuto(ポスト)

URL : https://posuto.netlify .app/

서비스 소개:

Posuto는 간단한 할 일 기록, TIL 등을 기록하기 위한 포스트잇 어플리케이션 입니다.
드래그&드롭/리사이즈 기능은 데스크탑에서만 이용 가능합니다.

undefined

  1. URL 접속시 최초로 보게 될 화면입니다.
  2. 계정이 없을 시, 우측 상단의 Signup 버튼을 누르면 회원가입 페이지로 이동합니다.

undefined

  1. Username은 이메일 형식으로 작성해야 합니다.

undefined

  1. 성공적으로 회원가입을 마쳤다면, 귀여운 모달창이 알려줍니다.
    Get Started 버튼을 누르면, 메인 페이지로 이동합니다.

undefined

  1. 우측 하단 포스트 버튼을 클릭시, 새로운 Default 포스트가 생성됩니다.
  2. 포스트에 마우스를 올리고 수정 버튼을 활성화하면, 포스트가 수정이 가능한 Form 형태가 됩니다.
  3. 수정을 마쳤다면, 다시 수정 버튼을 클릭해 비활성화하면, Drag&Drop/Resize 가능한 포스트잇 됩니다.
  4. Drag&Drop/Resize 이벤트가 발생시 서버에 PUT 요청을 보내, 유저 포스트의 Position 값을 실시간 저장 합니다.

undefined

  1. 우측 하단 설정버튼을 클릭시, 포스트잇 배경색을 선택하는 창이 나옵니다.
  2. 선택한 배경색은 localStorage에 저장되어 동일한 브라우저에서 유지 가능합니다.

개발&배포 환경

프론트엔드 - Vue.js / vuex / vue-router | Netlify 배포

백엔드 - Node.js(w. Express) / MongoDB(w. mongoose) | Heroku 배포

자세한 개발환경은 깃허브 를 참고해주세요.

3 comments