😎 일정 관리 서비스 코워커스 Coworkers

💻 배포 URL: https://coworkers-1.netlify.app/

💻 개발 기간: 2024.09.02 - 2024.10.09

목차

1. 프로젝트 개요
2. 프로젝트 구조
3. 팀원 소개
4. 페이지별 기능 및 설명
5. 개선한 점
6. 추가 기능
7. 프로젝트 후기

프로젝트 개요

개발환경

개발 기술

추가로 사용한 DB

협업 도구

플로우 차트

1팀 코워커스 플로우차트

프로젝트 구조

📦 
├─ .eslintrc.json
├─ .github
├─ .gitignore
├─ .husky
├─ .prettierrc
├─ .storybook
├─ README.md
├─ next.config.mjs
├─ package-lock.json
├─ package.json
├─ postcss.config.mjs
├─ public
├─ src
│  ├─ assets
│  │  ├─ IconList.tsx
│  │  ├─ icons
│  │  ├─ images
│  ├─ components
│  │  ├─ button
│  │  ├─ dropdown
│  │  ├─ input
│  ├─ constants
│  ├─ containers
│  ├─ firebase
│  │  ├─ firebaseDB.tsx
│  ├─ hooks
│  ├─ libs
│  │  ├─ axios.ts
│  ├─ middleware.ts
│  ├─ pages
│  ├─ schema
│  ├─ services
│  │  └─ userAPI.ts
│  ├─ stores
│  │  └─ userStore.ts
│  ├─ stories
│  ├─ styles
│  │  └─ globals.css
│  ├─ types
│  │  ├─ Article.d.ts
│  │  ├─ Comment.d.ts
│  └─ utils
│     ├─ cn.ts
├─ tailwind.config.ts
└─ tsconfig.json

• components 폴더에 재사용 가능한 컴포넌트들을 분리하여 관리
• airbnb eslint 사용
• husky 와 eslint를 통해 커밋 일관성을 유지

팀원 소개

최민경 (팀장)	강효성	서향	오조환
@mxkxx1011	@kanghyosung1	@Seo-Hyang	@ohjohwan
프로젝트 세팅, 리드미 작성	발표 자료 작성	발표 자료 작성, 리드미 이미지	발표
모달, 드롭다운	버튼, 인풋	GNB 및 헤더 루트, 사이드메뉴	프로필, 멤버, 캘린더
할 일 리스트, 계정 설정 마이 히스토리 페이지	게시판, 상세 게시글, 글쓰기, 랜딩 페이지	팀 생성 및 팀 참여 팀 페이지 및 멤버 관리	로그인, 회원가입 간편로그인 등 인증인가 담당

페이지별 기능 및 설명

로그인 & 회원가입

로그인	회원가입	약관동의

react-hook-form과 yup을 활용하여 유효성 검증을 수행하고, 사용자가 입력한 데이터의 유효성을 실시간으로 확인하여 에러 메시지로 사용자에게 즉시 피드백하도록 하였습니다. 또한 약관동의 페이지를 추가하여 약관 동의 후 회원가입을 처리하게끔 하였습니다.

그룹 페이지

그룹 관리자	그룹 멤버
톱니바퀴 버튼을 통해 그룹 수정, 삭제가 가능함	나가기 버튼을 눌러 그룹을 나갈 수 있음)

• 목록의 모든 일정에 대한 진행상황을 그룹 페이지에서 확인할 수 있습니다.
• 그룹에 존재하는 멤버 리스트를 확인할 수 있으며, 그룹 관리자일 경우 멤버를 내보낼 수 있습니다.
• 목록을 확인할 수 있으며 목록을 추가할 수 있습니다.

할 일 리스트 페이지

리스트 페이지	상세 일정

• 우측 상단을 통해 현재 날짜를 확인할 수 있고 다른 날짜를 확인할 수 있습니다. 캘린더 버튼을 누를 경우 원하는 날짜를 선택 가능합니다.
• 왼쪽에는 목록, 오른쪽은 목록의 일정들을 확인할 수 있습니다.
• 체크박스를 통해 일정을 완료할 수 있습니다.
• 일정을 누를 경우 일정의 상세 페이지를 확인할 수 있습니다.

팀 추가 & 팀 참여

팀 추가	팀 참여

• 팀을 추가하거나 초대 코드를 통해 팀을 참여할 수 있습니다.

마이 히스토리 페이지

• 일주일 간격으로 현재 사용자가 완료한 일정들의 히스토리를 확인할 수 있습니다.

게시판 페이지

• 상단에서 좋아요가 많은 베스트 게시글을 확인할 수 있습니다.
• 하단에서는 전체 게시글을 볼 수 있으며, 최신순/좋아요순 으로 정렬해서 확인할 수 있습니다.

개선한 점

라이트/다크 모드

라이트 모드	다크 모드

사용자의 선택을 우선적으로 생각해 피그마에서 기본 제공된 다크 색상 팔레트에 라이트 색상을 추가 구현하였습니다.
이를 통해 사용자에게 라이트/다크 모드 전환 옵션을 제공함으로써 사용자 경험을 한층 더 개선하였습니다.

툴팁 메시지

버튼	로그인 상태	완료상태에 따른 메시지

다양한 상호작용 요소에서 사용자가 클릭하기 전에 어떤 액션을 취할지 미리 안내하는 툴팁 메시지를 적용하였습니다.
특히 할 일 완료 기능에서는 완료 상태에 따라 다른 메시지가 표시되며, 최근에 완료된 작업을 쉽게 취소할 수 있는 상호작용 이벤트도 추가하여 사용자가 상태를 손쉽게 변경할 수 있도록 개선하였습니다.

스켈레톤

그룹 페이지

베스트 게시글

로딩 중에는 스켈레톤 컴포넌트를 사용하여, 로딩이 완료된 후 표시될 UI를 사용자에게 시각적으로 미리 보여줌으로써 더 나은 경험을 제공하였습니다.

진척도 탭

기존	개선한 진척도

기존에는 목록에 대해 전체 진행 사항만 확인할 수 있었으나, 진척도 탭을 추가하여 각 목록별로 오늘의 할 일을 얼마나 마쳤는지를 개별적으로 확인할 수 있게 되었습니다.

추가 기능

조회수

본문	조회수 영역

Firebase를 활용하여 각 게시글별로 조회수를 확인할 수 있는 기능을 구현하였으며, 중복 집계를 방지하기 위해 페이지를 새로고침하더라도 조회수가 자동으로 갱신되지 않도록 설계했습니다.
이를 통해 보다 정확한 조회수 통계를 제공하고, 사용자 행동에 따른 불필요한 데이터 누적을 방지하여 시스템 성능을 최적화하였습니다.

댓글 이모지

이모지 종류	댓글

카카오톡의 채팅 공감 기능을 참고하여 답글을 달지 않더라도 다른 사용자의 댓글에 간편하게 반응할 수 있도록 이모티콘 기능을 Firebase를 활용해 설계하고 추가하였습니다.
이를 통해 사용자들이 다른 팀원들과 더 쉽게 상호작용할 수 있습니다.

일정 즐겨찾기

팀 일정 관리 서비스의 기능을 개선하여 효율성을 높였습니다.
기존에는 팀원 간 모든 일정을 공유했으나, 개인별 업무 중요도와 특성이 다를 것이라는 생각이 들었습니다.
이에 따라 개인화된 즐겨찾기 기능을 추가했습니다.
즐겨찾기는 사용자 개인만 접근 가능하여, 다른 팀원들에게는 표시되지 않습니다.
결과적으로 팀 전체의 일정 공유는 유지하면서도 개인별 맞춤 일정 관리가 가능해져, 팀 내 업무 효율성이 크게 향상됩니다.

프로젝트 후기

최민경 -

강효성 -

서향 -

오조환 -