💻 배포 URL: https://coworkers-1.netlify.app/
📦
├─ .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 폴더에 재사용 가능한 컴포넌트들을 분리하여 관리
airbnbeslint 사용husky와eslint를 통해 커밋 일관성을 유지
 |
 |
 |
 |
|---|---|---|---|
| 최민경 (팀장) | 강효성 | 서향 | 오조환 |
| @mxkxx1011 | @kanghyosung1 | @Seo-Hyang | @ohjohwan |
| 프로젝트 세팅, 리드미 작성 | 발표 자료 작성 | 발표 자료 작성, 리드미 이미지 | 발표 |
| 모달, 드롭다운 | 버튼, 인풋 | GNB 및 헤더 루트, 사이드메뉴 | 프로필, 멤버, 캘린더 |
| 할 일 리스트, 계정 설정 마이 히스토리 페이지 |
게시판, 상세 게시글, 글쓰기, 랜딩 페이지 |
팀 생성 및 팀 참여 팀 페이지 및 멤버 관리 |
로그인, 회원가입 간편로그인 등 인증인가 담당 |
| 로그인 | 회원가입 | 약관동의 |
|---|---|---|
 |
 |
 |
react-hook-form과 yup을 활용하여 유효성 검증을 수행하고, 사용자가 입력한 데이터의 유효성을 실시간으로 확인하여 에러 메시지로 사용자에게 즉시 피드백하도록 하였습니다. 또한 약관동의 페이지를 추가하여 약관 동의 후 회원가입을 처리하게끔 하였습니다.
| 그룹 관리자 | 그룹 멤버 |
|---|---|
 |
 |
| 톱니바퀴 버튼을 통해 그룹 수정, 삭제가 가능함 | 나가기 버튼을 눌러 그룹을 나갈 수 있음) |
- 목록의 모든 일정에 대한 진행상황을 그룹 페이지에서 확인할 수 있습니다.
- 그룹에 존재하는 멤버 리스트를 확인할 수 있으며, 그룹 관리자일 경우 멤버를 내보낼 수 있습니다.
- 목록을 확인할 수 있으며 목록을 추가할 수 있습니다.
| 리스트 페이지 | 상세 일정 |
|---|---|
 |
 |
- 우측 상단을 통해 현재 날짜를 확인할 수 있고 다른 날짜를 확인할 수 있습니다. 캘린더 버튼을 누를 경우 원하는 날짜를 선택 가능합니다.
- 왼쪽에는 목록, 오른쪽은 목록의 일정들을 확인할 수 있습니다.
- 체크박스를 통해 일정을 완료할 수 있습니다.
- 일정을 누를 경우 일정의 상세 페이지를 확인할 수 있습니다.
| 팀 추가 | 팀 참여 |
|---|---|
 |
 |
- 팀을 추가하거나 초대 코드를 통해 팀을 참여할 수 있습니다.
- 일주일 간격으로 현재 사용자가 완료한 일정들의 히스토리를 확인할 수 있습니다.
- 상단에서 좋아요가 많은 베스트 게시글을 확인할 수 있습니다.
- 하단에서는 전체 게시글을 볼 수 있으며, 최신순/좋아요순 으로 정렬해서 확인할 수 있습니다.
| 라이트 모드 | 다크 모드 |
|---|---|
 |
 |
사용자의 선택을 우선적으로 생각해 피그마에서 기본 제공된 다크 색상 팔레트에 라이트 색상을 추가 구현하였습니다.
이를 통해 사용자에게 라이트/다크 모드 전환 옵션을 제공함으로써 사용자 경험을 한층 더 개선하였습니다.
| 버튼 | 로그인 상태 | 완료상태에 따른 메시지 |
|---|---|---|
 |
  |
 |
다양한 상호작용 요소에서 사용자가 클릭하기 전에 어떤 액션을 취할지 미리 안내하는 툴팁 메시지를 적용하였습니다.
특히 할 일 완료 기능에서는 완료 상태에 따라 다른 메시지가 표시되며, 최근에 완료된 작업을 쉽게 취소할 수 있는 상호작용 이벤트도 추가하여 사용자가 상태를 손쉽게 변경할 수 있도록 개선하였습니다.
로딩 중에는 스켈레톤 컴포넌트를 사용하여, 로딩이 완료된 후 표시될 UI를 사용자에게 시각적으로 미리 보여줌으로써 더 나은 경험을 제공하였습니다.
| 기존 | 개선한 진척도 |
|---|---|
 |
 |
기존에는 목록에 대해 전체 진행 사항만 확인할 수 있었으나, 진척도 탭을 추가하여 각 목록별로 오늘의 할 일을 얼마나 마쳤는지를 개별적으로 확인할 수 있게 되었습니다.
| 본문 | 조회수 영역 |
|---|---|
 |
 |
Firebase를 활용하여 각 게시글별로 조회수를 확인할 수 있는 기능을 구현하였으며, 중복 집계를 방지하기 위해 페이지를 새로고침하더라도 조회수가 자동으로 갱신되지 않도록 설계했습니다.
이를 통해 보다 정확한 조회수 통계를 제공하고, 사용자 행동에 따른 불필요한 데이터 누적을 방지하여 시스템 성능을 최적화하였습니다.
| 이모지 종류 | 댓글 |
|---|---|
 |
 |
카카오톡의 채팅 공감 기능을 참고하여 답글을 달지 않더라도 다른 사용자의 댓글에 간편하게 반응할 수 있도록 이모티콘 기능을 Firebase를 활용해 설계하고 추가하였습니다.
이를 통해 사용자들이 다른 팀원들과 더 쉽게 상호작용할 수 있습니다.
팀 일정 관리 서비스의 기능을 개선하여 효율성을 높였습니다.
기존에는 팀원 간 모든 일정을 공유했으나, 개인별 업무 중요도와 특성이 다를 것이라는 생각이 들었습니다.
이에 따라 개인화된 즐겨찾기 기능을 추가했습니다.
즐겨찾기는 사용자 개인만 접근 가능하여, 다른 팀원들에게는 표시되지 않습니다.
결과적으로 팀 전체의 일정 공유는 유지하면서도 개인별 맞춤 일정 관리가 가능해져, 팀 내 업무 효율성이 크게 향상됩니다.
최민경 -
강효성 -
서향 -
오조환 -