Skip to content

나와 팀원들의 일정을 효율적으로 관리하는 웹사이트입니다.

Notifications You must be signed in to change notification settings

yeonilil/Planit

 
 

Repository files navigation

Planit:

✨ 프로젝트 소개

logo_blue

바쁘디 바쁜 현대사회 속에서 사용자와 팀원들의 효율적인 일정관리를 돕는 서비스입니다.
대시보드를 생성하여 일정을 관리하고 팀원들을 대시보드에 초대하여 함께 일정을 관리할 수 있습니다.

서비스 배포 주소

https://planit-xi.vercel.app/

🧑‍💻 개발자 소개(Sprint 6기 Part3 13팀)

FE_6기 고재성 FE_6기 곽서연 FE_6기 김혜선 FE_6기 조현지 FE_6기 천권희
• 공용 컴포넌트
• 대시보드 상세화면
• 드래그앤 드롭 기능 적용
• 헤더
• 사이드 바
• 대시보드
• 랜딩페이지
• 에러페이지
• 계정관리
• 대시보드 관리
• 프레이머 모션 적용
• 인증인가
• 할 일 카드 모달
• 다크모드 적용
• 공용 컴포넌트
• 카드 생성, 수정
• 컬럼 생성, 수정
• 웹 소켓 적용

🗓️ 진행 일정 및 진행 방식

개발 기간: 2024.0619.~2024.07.07

image

진행 방식

  • 매일 데일리 스크럼 시간을 가져서 각자의 Done, To do, 어려웠던 점, 추가 안건을 공유
  • 14:00~17:00 코어 타임 시간
  • github issue를 활용하여 맡은 작업에 대한 브랜치를 생성하여 개발 진행

🛠️ 기술 스택

프레임워크

라이브러리

UI

코드 포매터 및 검사 도구

협업툴

배포

📂 폴더구조

src
├── app
│   ├── (auth)
│   ├── (dashboard)
│   ├── api
│   ├── layout.tsx
│   ├── mypage
│   ├── not-found.tsx
│   └── page.tsx
├── components
│   ├── auth
│   ├── commons
│   ├── dashboard
│   ├── editdashboard
│   ├── home
│   ├── mydashboard
│   └── mypage
├── constants
├── context
├── hooks
├── middleware.ts
├── service
├── store
├── styles
└── utils

💻 주요 기능

  1. 실시간 협업

    • WebSocket을 활용한 실시간 데이터 동기화
    • 초대된 팀원들과 즉각적인 작업 상태 공유
  2. 사용자 인증 및 보안

    • 쿠키 기반의 토큰 관리로 보안성 강화
    • Zustand의 persist 기능을 활용한 사용자 세션 유지
    • Next.js 미들웨어를 통한 인증된 사용자만의 대시보드 접근 제어
  3. 사용자 인터페이스

    • Framer Motion을 이용한 부드러운 애니메이션과 전환 효과
    • 사용자 선호에 따른 라이트/다크 테마 전환 기능
    • 사이드 바 토글 기능으로 화면 UI 개선
  4. 할 일 관리

    • 사용자 정의 컬럼 및 카드 생성, 수정, 삭제 가능
    • 작업에 관련된 태그 추가 및 마감일 관리
    • 할 일 카드 상세 모달의 댓글 무한 스크롤 적용
    • 별도의 라이브러리 없이 구현한 드래그 앤 드롭으로 할 일의 컬럼 변경

시연영상

PlanIt_sample_video.1.mov

About

나와 팀원들의 일정을 효율적으로 관리하는 웹사이트입니다.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.5%
  • CSS 1.3%
  • Other 0.2%