다이어리 앱 DAY ONE Version 0.1

주제

기존의 모바일 어플리케이션 Day One을 React.js를 통하여 데스크탑 버전으로 새롭게 재설계.
일기 작성 시 작성 위치가 저장 되고 지도에서 일기를 작성한 위치별로 모아볼 수 있는 저널링 서비스.

구성원

• PM: 김태진 (로그인 페이지, 타임라인 페이지)
• T1: 김우정 (캘린더 페이지, 마이 페이지)
• T2: 이하은 (일기 작성 및 수정 페이지, 일기 보기 페이지, 검색 페이지 + 디자인)
• T3: 주한슬 (지도 페이지)

프로젝트 핵심 목표

• Node Express Server를 구축하여 REST API 구현
• React를 이용한 컴포넌트 설계
• Router를 이용하여 SPA(Single-Page Application) 구현
• Context API + useReducer Hooks를 이용한 상태 관리
• CSS Module을 통하여 컴포넌트 스타일 클래스 이름의 중첩 현상 방지

MVP(Minimum Viable Product, 최소 기능 구현)

기능별 목표

• 로그인 페이지
• 타임라인 페이지
• 캘린더 페이지
• 지도 페이지
• 일기 작성 및 수정 페이지
• 일기 보기 페이지
• 마이 페이지(Option)
• 검색 페이지(Option)

기능별 1차 목표

• 로그인 페이지

  • 로그인 / 로그아웃 상태 관리
  • 아이디/ 패스워드 일치 확인

• 타임라인 페이지

  • 일기별 제목, 작성일, 썸네일이 포함된 목록 나열
  • 뷰 설정에 따라 일기 목록을 리스트/카드 형식으로 전환
  • 일기 클릭시 해당 일기 페이지로 이동

• 캘린더 페이지

  • 달력에 일기 작성 여부 표시
  • 일기 목록에 해당 날짜의 일기 나열
  • 해당 날짜의 일기 작성 페이지로 바로가기

• 지도 페이지

  • 지도 API를 활용하여 현재 위치 표시
  • 각 일기의 위치를 북마크로 표시
  • 일기 목록에 해당 위치의 일기 나열

• 일기 작성 및 수정 페이지

  • 일기 내용 저장
  • 일기 작성 날짜 설정 및 수정
  • 일기 작성 위치 설정 및 수정

• 일기 보기 페이지

  • 작성된 일기 뷰어
  • 북마크 등록 및 삭제

• 검색 페이지

  • 태그를 통한 일기 검색
  • 태그 목록 카운트 및 메뉴로 나열

기능별 2차 목표(Option)

• 타임라인 페이지

  • 미디어 목록 형식의 뷰 설정 추가

• 캘린더 페이지

  • 일기의 개수에 따라 색상을 다르게 표시

• 지도 페이지

  • 일기의 개수에 따라 색상을 다르게 표시
  • 줌 인/아웃에 따른 북마크 표시

• 일기 작성 및 수정 페이지

  • 일기 작성 중 사진 첨부
  • 일기 내용 수정

• 일기 보기 페이지

  • 작성된 일기의 수정 버튼 기능 추가

    (일기 작성 및 수정 페이지로 이동)

• 마이 페이지

  • 사용자 정보 표시
  • 작성한 일기의 개수 표시
  • 북마크 일기 표시

사용 기술

• Slack
• Figma
• HTML
• JavaScript
• React
• SCSS
• Node Express

코딩 컨벤션

코딩 컨벤션