본문 바로가기

Projects

my_kind_calendar

리액트 기반의 웹 애플리케이션 프로젝트입니다.

스마트폰 환경에서는 가로모드에서, 브라우저는 크롬을 사용해주시기 바랍니다.

calendar

프로젝트 설명

  • React를 이용한 캘린더, 스케쥴러 웹사이트
    • 원페이지 웹사이트
  • BaaS(Backend as a Service)를 활용
  • 리덕스와 Firebase를 활용한 React 데이터 제어
  • moment를 활용한 달력 생성 알고리즘
  • react-router를 활용하여 컴포넌트마다 url 부여
    • history로 뒤로가기 구현
  • react-reveal 라이브러리의 애니메이션 효과
  • CSS 기반 화면 구성

사용 방법

  • 캘린더 상단의 버튼으로 월 단위로 이동
  • 현재 선택한 날짜는 별도의 색상으로 표시
    • 다른 달의 날짜를 클릭시, 해당 월로 이동
  • 현재 월에 속하지 않는 날은 다른 색상으로 표시
  • 해당하는 날짜의 스케쥴 표시
    • 완료된 스케쥴, 전체 스케쥴 토글 버튼으로 전환
    • 스케쥴 클릭시, 팝업창으로 해당 스케쥴 정보 표시
    • 완료하기 버튼으로 완료처리 가능
  • 스크롤로 더 많은 날짜 확인 가능
  • 원하는 일자, 시간에 스케쥴 추가 가능
    • 일정을 구분할 색상 설정 가능
  • 캘린더 내 일정은 시간 순으로 정렬

Components

첫 화면

start

달력

main

일정 생성

create

팝업

popup

License

MIT

Reference

https://www.flaticon.com/

'Projects' 카테고리의 다른 글

gaemangtalk  (0) 2021.04.22
hanghae99_books  (0) 2021.04.08
my_pet_is_the_best  (0) 2021.04.02
[Chapter1] 웹개발 미니 프로젝트 F.A (Final Assignment)  (0) 2021.03.04
[Chapter1] 웹개발 미니 프로젝트 S.A (Starting Assignment)  (0) 2021.03.01