팀을 생성하고 팀원을 구성하여 공통의 할 일을 만들어서 업무의 효율을 높이는 프로젝트입니다.
또한 누구나 자유롭게 의견을 나눌 수 있는 자유게시판 기능도 제공합니다.
2024.09.02 ~ 2024.10.10
| 홍준기 | 고용빈 | 서미영 | 이대진 |
|---|---|---|---|
| @Oh_hong | @yongb2n | @myong39 | @LDJ |
.
├── README.md
├── assets
│ └── image
├── components
│ ├── auth
│ ├── boards
│ ├── common
│ ├── tasks
│ └── team
├── constants
│ ├── baseUrl.ts
│ ├── modal.ts
│ └── toast.ts
├── hooks
│ ├── useClickOutside.ts
│ ├── useMypage.ts
│ ├── useNotificationAPI.ts
│ └── useValidation.ts
├── models
│ └── Notification.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── pages
│ ├── 404
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── addboard
│ ├── api
│ ├── auth
│ ├── boards
│ ├── get-started-team
│ ├── groups
│ ├── history
│ ├── index.tsx
│ ├── login.tsx
│ ├── mypage
│ ├── reset-password.tsx
│ └── signup.tsx
├── postcss.config.mjs
├── public
│ ├── favicon.ico
│ ├── next.svg
│ └── vercel.svg
├── pull_request_template.md
├── queries
│ ├── article
│ ├── config.ts
│ ├── group
│ ├── history
│ ├── image
│ ├── task-list
│ ├── tasks
│ └── user
├── services
│ ├── article
│ ├── axios.ts
│ ├── database
│ ├── history
│ ├── postMypage.ts
│ ├── schemas
│ ├── socialLogin
│ └── task
├── store
│ ├── authStore.tsx
│ ├── useGroupStore.ts
│ └── useModalStore.ts
├── styles
│ ├── animation.css
│ └── globals.css
├── tailwind.config.ts
├── tsconfig.json
├── types
│ ├── group.ts
│ ├── task.ts
│ ├── taskList.ts
│ ├── user.ts
│ └── wow.js.d.ts
└── utils
├── auth.ts
└── common.ts
| 로그인 | 회원가입 |
|---|---|
 |
 |
- Zustand를 사용해 유저 정보를 저장했습니다.
- useValidation.ts 훅을 이용해 로그인 및 회원가입 유효성 검사를 수행하였고, 이를 사용자에게 즉각 나타내도록 하였습니다. 또한, 사용자가 입력한 데이터를 보냈을 때 서버에서 반환되는 에러메세지(중복된 이메일, 비밀번호 불일치 등)도 같이 표현하도록 설계했습니다.
| 관리자 | 멤버 |
|---|---|
 |
 |
| 공지 수정,삭제 가능 톱니바퀴 버튼을 통해 팀 삭제 및 팀 이름 수정 가능 |
공지 확인만 가능 톱니바퀴 버튼을 통해 팀 탈퇴 가능 |
- 모든 일정에 대한 상황을 그룹 페이지에서 확인 가능합니다.
- 그룹에 존재하는 팀원 리스트를 볼 수 있으며, 관리자인 경우 멤버 추방 및 초대가 가능합니다.
- 그룹 페이지에서 일정을 추가할 수 있습니다.
| 리스트 페이지 및 상세 정보 | 할 일 생성하기 |
|---|---|
 |
 |
| • 기본적으로 할 일들이 나와있고, 체크박스 클리을 통해 일정 완료 여부를 조정할 수 있습니다. • 드래그앤 드롭 기능을 통하여 완료된 일들을 아래로 배치할 수 있게 구현했습니다. |
• 할 일 추가 버튼을 클릭시, '할 일 만들기' 모달이 등장합니다. • 데이터를 입력할 수 있고, 반복 주기를 설정할 수 있습니다.(한 번, 매일, 특정 요일 반복, 특정 날짜 월 반복) |