Code Monkey home page Code Monkey logo

schedule-manager's Introduction

schedule-manager

목차

  1. 개발 동기
  2. 주요 기능
  3. 기술 스택
  4. 개발자 소개
  5. 협업 방식

🎉 개발 동기

A : "우리 이번 주에 언제 만날까?"
B : "나 이번 주 월요일은 프로젝트 전체 회의, 화요일은 세미나, 수요일은 서류 접수 있고, ··· 토요일 어때?"
A : "토요일만 시간이 안 되네 ㅠㅠ 다음 주는 언제가 괜찮아?"

나의 일정을 연인과 미리 공유하고, 데이트 날짜를 편하게 정할 수 있는 방법이 필요했다.

💡 주요 기능

1. 일정 달력

  • 달력에 날짜별로 스케줄이 간략하게 표시된다.
  • 달력에서 날짜를 선택하고 우측 하단에 있는 ➕ 버튼을 누르면 일정 추가 모달이 열린다.

2. 일정 추가 모달

  • 일정 이름, 시작 시간, 종료 시간, 장소를 입력하고 일정 상태를 선택한다.
  • 일정 내용을 작성하고 완료 버튼을 누르면 일정이 저장된다.
  • 자주 사용하는 일정으로 등록하면 기존 내용을 불러와 일정을 간편하게 추가할 수 있다.

3. 주간 일정

상단에 고정된 슬라이더를 통해 주 단위로 이동하면서 원하는 주의 일정을 확인할 수 있다.

4. 주간/월간 통계

  • 주간 통계 : 나와 상대방의 일정이 일주일 동안 무슨 요일에 얼마나 있었는지 확인할 수 있다.
  • 월간 통계 : 데이트 한 날, 데이트 못한 날로 나눠서 한 달 동안 얼마나 만났는지 알 수 있다. 데이트 한 날짜는 원형 차트 안쪽에 나타난다.

🛠 기술 스택

👩🏻‍❤️‍👨🏻 개발자 소개

김현규 백지연
  • 구글 소셜 로그인
  • 일정 달력
  • 일정 추가 모달
  • 월간 통계
  • 파이어베이스 연동
  • 파이어스토어 데이터베이스 쿼리
  • PWA(Progressive Web App) 적용
  • 주간 일정
  • 주간 통계

🤝🏼 협업 방식

Commit message convention

  • feat: 새로운 기능 추가
  • fix: 버그 수정
  • docs: 문서 수정
  • style: 코드 형식, 정렬, 주석 수정
  • refactor: 코드 리팩토링
  • chore: 그 외 자잘한 변경

Git branch strategy

  • develop - feature
  • develop : 배포 및 개발된 기능(feature)을 통합하는 브랜치
  • feat/[name] : 담당자별 기능 개발을 진행하는 브랜치

etc.

  • 주 1회(토요일 14시) 회의 진행
  • 깃허브 칸반 보드 활용

schedule-manager's People

Contributors

hyeonqyu avatar 100gyeon avatar

Stargazers

lesley chang avatar  avatar

Watchers

James Cloos avatar  avatar

schedule-manager's Issues

[Feat] 일정 추가 시 데이트 여부, 못 만나는 날 여부 선택 (UI)

요구사항

추후 통계 페이지 > 월간 통계 개발을 위해 일정 추가 시 데이트 여부, 못 만나는 날 여부를 선택할 수 있도록 한다.

할 일

  • ScheduleStore에서 관리하는 상태값으로 두 가지 요소 추가
  • 데이트 여부, 못 만나는 날 여부 선택할 수 있도록 체크박스 UI 추가

[Feat] 자주 사용하는 일정 삭제

요구 사항

  • 자주 사용하는 일정 삭제

할 일

  • 자주 사용하는 일정 스와이프
  • 스와이프 시 삭제 UI 노출
  • 자주 사용하는 일정 DB에서 삭제

[Feat] 달력에 스케쥴 표시

요구사항

  • 메인 화면 달력에 일자별로 스케쥴이 간략하게 표시되도록 함

할 일

  • 이번 달 모든 날짜에 대한 스케쥴 조회
  • 날짜별로 스케쥴 UI에 표시

[Feat] 통계 페이지 > 월간 통계 UI

요구사항

통계 페이지 > 월간 통계 개발
데이트 한 날, 데이트 못한 날로 나눠서 통계를 낸다.

할 일

  • 월간 통계 UI
  • 나와 상대방의 이번 달 데이트 여부를 조회
  • 데이터 반영

[Feat] 월간 통계 UI

요구 사항

  • 데이트 했던 날 목록 움직이는 공 UI 표시
  • 이전달, 다음달 통계 조회

[Feat] 일정 수정

요구 사항

  • 일정 수정 기능 필요

할 일

  • 일정 선택 시 일정 수정 모달창 오픈
  • 일정 수정 모달 구현
  • db 수정 기능
  • 데이트 여부 수정 시 유효성 검사
  • 못 만나는 날 수정 시 유효성 검사
  • 못 만나는 날 수정 시 해당 날의 일정 모두 못 만나는 날 수정

[Feat] 통계 페이지 > 주간 통계 UI

요구사항

통계 페이지 > 주간 통계 개발
나와 상대방의 일정이 일주일 동안 무슨 요일에 얼마나 있었는지 그래프로 표시한다.

할 일

  • 주간 그래프 UI
  • 나와 상대방의 이번 주 일정 목록을 조회
  • 그래프에 요일별 일정 반영

[Feat] 상대방 계정 정보 조회

요구사항

  • 상대방의 일정을 추가하기 위해 상대방의 계정 정보(이메일)가 필요함

할 일

  • 계정 정보를 저장하는 Collection 추가
  • 로그인 시 Collection에서 자신의 계정 정보를 조회하고 없으면 추가
  • 상대방 계정 정보 조회

[Build] develop 모드와 production 모드의 env 분리

요구 사항

  • 현재 개발환경과 실제 운영환경이 같은 데이터베이스를 사용중
  • 웹팩 빌드 모드에 따라 다른 env 사용하도록 수정이 필요
  • production 모드의 env는 git에 올라가야 배포 가능

[Chore] ScrollToTop 적용

요구 사항

  • 이번 주 일정에서 스크롤을 내렸다가 다른 주로 넘어갔을 때 스크롤 위치가 이상함.
  • 주 단위로 이동 시 스크롤이 상단으로 초기화되어야 함.

할 일

  • ScrollToTop 컴포넌트 추가
  • ScrollToTop 적용했을 때 '{ children: Element; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다. 해결하기

[Feat] 통계 페이지 > 주간 통계 기능 추가

요구사항

통계 페이지 > 주간 통계 개발
image
상단의 <, > 버튼을 눌러 주 단위로 이동하면서 주간 통계를 확인할 수 있도록 한다.

할 일

  • 주 단위로 이동함에 따라 차트 변화
  • 이번 주보다 이전으로 넘어가면 '이번 주'라는 텍스트 대신 '02.13 - 02.19' 형태의 텍스트가 뜨도록 구현
  • 미래의 차트는 확인할 수 없도록 버튼에 disabled 처리

[Feat] 일정 삭제

요구 사항

  • 일정 삭제 기능 필요

할 일

  • 일정 삭제 UI 노출
  • db에서 일정 삭제

[Chore] 달력 UI 변경

요구사항

  • 날짜 선택 시 및 오늘 날짜 UI 수정
  • 주말 날짜 색 수정

할 일

  • 오늘 날짜 동그라미 표시
  • 선택된 날짜 동그라미
  • 주말 날짜 색 회색으로

[Fix] 주간 일정 UI 오류 수정

요구 사항

  • 띄어쓰기가 없는 이름이 긴 일정의 경우 이름이 UI가 표시될 수 있는 범위를 초과하여 나타나 수정 필요

image

[Feat] 일정 추가 모달 띄우기

요구사항

  • 일정 추가 모달을 띄우기 위해 날짜를 선택
  • 선택된 날짜가 모달에 표시됨

할 일

  • 일정 추가 버튼
  • 모달에 선택된 날짜 표시

[Feat] Checkbox 컴포넌트

요구사항

공통으로 사용될 수 있는 Checkbox 컴포넌트 제작

할 일

  • Checkbox 컴포넌트 제작

[Feat] 할 일 추가 - 자주 사용되는 일정 저장 및 불러오기

요구사항

할 일 추가 시 다음과 같은 기능이 요구됨.

  • (날짜, 시간) ~ (날짜, 시간) 구조에서 (날짜 시간 ~ 시간) 구조로 변경
  • 현재 설정 저장 기능
  • 저장한 설정 불러오기 기능

할 일

  • 날짜 select box 제거 및 날짜 고정값 표시
  • 저장 버튼 UI
  • 불러오기 버튼 UI
  • 자주 사용하는 일정 저장
  • 자주 사용하는 일정 불러오기

[Feat] 주간 일정 기능 추가

요구사항

  • 상단 날짜 부분에 <, > 버튼을 추가해 주 단위로 이동할 수 있어야 함

할 일

  • DateUtil.ts에 있는 getLastWeekDate, getNextWeekDate 함수 사용
  • 주 단위로 이동할 때 해당하는 주의 일정만 보이도록 구현

[Feat] 일정 저장

요구사항

  • 일정 추가 모달에서 완료 버튼 클릭 시 일정 저장

할 일

  • 저장 시 유효성 체크
  • schedules 컬렉션에 일정 저장
  • isDate인 경우 상대방에게도 같은 일정 생성
  • unableToMeet인 경우 해당하는 날짜에 대한 모든 일정 unableToMeet 업데이트

[Feat] alert, confirm UI 수정

요구 사항

  • confirm 및 alert UI가 조잡하여 수정 필요
  • alert UI는 토스트 메시지처럼 수정

할 일

  • 토스트 메시지 컴포넌트 구현
  • confirm UI 수정

[Chore] PWA화

요구 사항

  • 모바일 웹 브라우저 내 주소창으로 인한 css 스타일링의 어려움 해결 방안 필요
  • 상대방 일정 등록 시 푸쉬 알림 가능한 앱 기능이 요구됨
  • PWA로 빌드하여 위 요구 사항 반영 가능

할 일

  • apple-touch-icon 추가
  • Manifest doesn't have a maskable icon 오류 해결

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.