// TODO: 목업 이미지 추가

개인 / 단체의 일정 관리에 사용할 수 있는 서비스입니다.
회원가입 후 대시보드를 생성하고, 일정을 함께 관리할 팀원들을 초대하거나 팀원의 초대를 수락/거절하여 팀을 형성할 수 있습니다.
각 대시보드마다 할일을 추가하고 진행 상황에 따라 수정하며 프로젝트의 일정을 관리할 수 있습니다.

https://taskify-15-dev.vercel.app/

pnpm install  # 패키지 설치
pnpm run dev  # 개발 서버 실행

• 기술 스택
• 개발 환경
• 개발 기간
• 개발 문화
• 프로젝트 폴더 구조
• 서비스 상세설명
• 서비스 개선 사항
• 팀원 소개 및 프로젝트 후기

Github Flow에 백업용 브랜치를 추가한 형태로, main, develop, feature를 사용합니다.

• main: 배포를 위한 브랜치 (develop -> PR -> main)
• develop: 개발 통합을 위한 브랜치 (feature -> PR -> develop)
• feature: 기능을 개발을 위한 브랜치

• main은 develop에서 PR을 생성하는 방식으로 변경사항을 반영합니다. (주로 rebase, 묶을 수 있다면 squash)
• feature는 develop을 base로 feature/{기능이름}으로 브랜치를 생성합니다.
• feature에서 목표한 작업이 끝나면 develop으로 PR을 생성하는 방식으로 변경사항을 반영하며, squash and merge로 병합합니다.
• PR은 최소 1명의 승인이 있어야 병합 가능하며, 급하지 않다면 3명 모두 승인한 뒤 병합하도록 합니다.

• commitlintrc 설정을 지킵니다.
  유형(#이슈번호): 제목의 형식을 준수합니다. (body, footer는 선택적으로)

  ✨  feat        새로운 기능 추가
  🛠  fix         버그 수정
  ↔️   style       코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
  ♻️   refactor    코드 리팩토링
  🎨  design      CSS 등 사용자 UI 디자인 변경
  ✅  test        테스트 코드, 리팩토링 테스트 코드 추가
  📝  docs        문서 수정
  ⚙️   chore       패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
  💬  comment     필요한 주석 추가 및 변경
  🚚  rename      파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
  🗑  remove      파일을 삭제하는 작업만 수행한 경우
  ❗️  !HOTFIX     급하게 치명적인 버그를 고쳐야 하는 경우
  

• 기본적으로는 린터와 프리티어 설정에 맞춥니다.
• 주석은 Comment Anchors를 사용해 확인하기 쉽게 합니다.
• 컴포넌트 함수는 선언문으로 (function 키워드), 이외 모든 함수는 표현식으로 작성합니다.

• 규칙 정리(팀 규칙, 코드 컨벤션, 커밋 컨벤션, 브랜치 전략 등)
• 프로젝트 선정, 기술 스택 선정
• 프로젝트 초기 설정(Git repo 생성, 각종 설정 완료 및 배포)
• 요구사항 분석 후 이슈 등록
• 유저플로우 분석하고 이에 기반해 이슈 우선순위 배정
  

• 버그 해결, 미완성 기능 구현
• 리팩토링, 추가 기능 구현
• 리드미 작성

• 리팩토링 (간결한 코드, 성능 개선)
• 리드미 완성

• 오전 10시 데일리 스크럼에 적극 참석합니다.
• 오전 11시 ~ 오후 6시는 코어타임으로 가급적 디스코드 음성채팅방에 접속하여 빠른 의사소통이 가능하도록 합니다. (점심시간, 일요일 제외)
• 회의에 불참하거나 휴가를 사용할 경우, 하루 전에는 팀원에게 공유합니다.
• ❗️ 데일리 스크럼 이전(오전 9시 55분까지)에 다음 사항들을 완료합니다.
  • 올라온 PR 리뷰하기
  • 회의록에 한 일과 팀원에게 공유할 사항(어려운 점, 개선사항) 정리하기 (이슈, 디스커션 언급만 해도 무방)
  • Project roadmap에 이슈 상태 최신화하기 (특히 status)
• 이슈 관리 규칙 을 숙지하고 적극 활용하여 진행상황을 공유하고, 의견을 교환합니다.
• 작업 중 질문이나 건의사항이 있으면 Discussions를 적극 활용합니다.
• PR, 이슈, 디스커션 알림이 오면 빠르게 확인하고 반응합니다.

깃허브 이슈로 프로젝트 일정을 관리하고 진행상황을 공유합니다. 프로젝트에서 이슈의 역할은 아래와 같으며, 이슈 관리 규칙에 따라 이슈를 관리합니다.

• 요구사항 정리
  
• 일정 관리
  
• 우선순위 기준 작업분배
  

.
├── .gitignore
├── .husky
├── public/
│   ├── favicon.ico
│   ├── fonts/
│   ├── icons/
│   └── images/
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── AButton.tsx
│   │       ├── BButton.tsx
│   │       └── index.tsx
│   ├── constants/
│   ├── containers/
│   ├── contexts/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── services/
│   ├── styles/
│   │   ├── globals.css
│   │   └── tailwind.css
│   ├── types/
│   └── utils/
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

랜딩페이지	회원가입	로그인

나의 대시보드	계정관리

대시보드	대시보드 관리

• 서비스에서 제공하는 기능 소개합니다.
• 로그인 / 회원가입 페이지로 이동할 수 있습니다.

• 정보를 입력하여 새로운 계정을 생성합니다.
• 가입 완료 시 안내와 함께 로그인 페이지로 이동합니다.

• 생성한 계정으로 로그인할 수 있습니다.
  • 로그인한 유저 정보는 Redux를 이용해 전역으로 관리합니다.
• 로그인 성공 시 나의 대시보드 페이지로 이동합니다.

• 프로필 이미지 / 닉네임을 변경할 수 있습니다.
• 비밀번호 변경를 변경할 수 있습니다.

• 내 대시보드 목록을 볼 수 있고, 새로운 대시보드를 생성할 수 있습니다.
  • 대시보드 목록은 페이지네이션을 이용해 정보를 불러옵니다.
• 초대받은 대시보드 목록을 확인하고, 수락 / 거절할 수 있습니다.
  • 초대받은 대시보드 목록은 무한스크롤로 정보를 불러오며, 대시보드 이름으로 검색 가능합니다.
• 좌측의 사이드바를 통해 계정 관리나 다른 대시보드로 이동할 수 있습니다.
• 우상단의 프로필을 클릭하면 나의 대시보드 / 계정 관리로 이동하거나 로그아웃할 수 있습니다.

• 페이지 끝 (PC: 우측, 태블릿/모바일: 하단) 새로운 컬럼 추가하기 버튼으로 컬럼을 추가할 수 있습니다.
• 컬럼 이름 옆 관리 버튼으로 컬럼 이름 변경 및 컬럼 삭제가 가능합니다.
• 컬럼 이름 아래 + 버튼으로 새로운 할 일을 추가할 수 있습니다.
• 할 일을 클릭하여 할 일 상세 정보를 확인할 수 있습니다.
  • 우상단 버튼을 클릭해 할 일을 수정 또는 삭제할 수 있습니다.
  • 본문 아래 댓글 입려 창에서 댓글을 추가하고, 추가된 댓글을 수정 / 삭제 / 열람할 수 있습니다.
    • 댓글 목록은 무한스크롤로 불러옵니다.
  • 할 일 목록은 무한스크롤로 불러옵니다.
• 드래그 앤 드랍으로 할 일의 컬럼을 변경할 수 있습니다.
• 대시보드 생성자의 경우 상단의 관리 / 초대하기 버튼이 노출됩니다.
  • 관리: 대시보드 관리로 이동합니다.
  • 초대하기: 서비스에 가입한 팀원의 이메일을 입력해 초대할 수 있습니다.

• 대시보드 이름 / 색상 / 공유 여부 / 즐겨찾기 여부를 변경할 수 있습니다.
  • 공유 시 url을 이용해 멤버가 아닌 사람도 대시보드를 열람할 수 있습니다.
  • 즐겨찾기 추가 시 사이드바 상단에 노출되어 쉽게 접근할 수 있습니다.
• 생성자를 제외한 구성원을 삭제할 수 있습니다.
• 새로운 구성원을 초대하거나 초대 내역을 확인하고 취소할 수 있습니다.
• 하단의 대시보드 삭제하기 버튼으로 전체 대시보드를 삭제할 수 있습니다.

• 대시보드 순서를 변경할 수 없어, 자주 확인하는 대시보드가 뒷쪽에 있다면 접근성이 떨어집니다. API 한계로 순서 변경은 어렵지만, 즐겨찾기 기능을 추가해 접근성을 높였습니다.
• 즐겨찾기는 대시보드 관리 페이지에서 추가 / 제거할 수 있고 최대 3개까지 추가 가능합니다.
• MongoDB Atlas를 이용해서 DB를 구축했습니다. Next.js API를 만들어 기존 서버의 유저 정보를 받아와서 저장하고 그 정보를 바탕으로 유저마다 즐겨찾기를 추가할 수 있도록 만들었습니다.
• 관련: 디스커션 #59, 이슈 #188, PR #213

• 대시보드 내 카드 드래그앤드롭을 구현하기 위해, react-beautiful-dnd 라이브러리를 사용했습니다.
• DragDropContext로 드래그 앤 드롭 동작을 감지하고, 드래그 시작, 드래그 종료, 드래그 업데이트 등의 이벤트를 통해 상태를 추적했습니다.
• onDragEnd 콜백 함수를 통해 드래그 중 발생하는 상태 변화를 쉽게 처리할 수 있었습니다.
• 관련: PR #145

DnD 구현 원리

• DragDropContext: 드래그앤드롭 기능을 제공하는 컨텍스트
• Droppable: 드롭 가능한 영역을 정의하며, 각 컬럼을 Droppable로 감싸줌
• Droppable 내에서 각 카드에 대해 Draggable을 사용해 드래그할 수 있음

• 초대가 왔을 때 사용자가 바로 인지할 수 있도록 알림을 제공합니다.
• TanStack Query의 useQuery에 refetchInterval을 적용하여 주기적으로 초대받은 내역을 받아옵니다.
• 새로 받은 내역과 이전 내역을 비교해 새로운 초대 목록을 구하고,react-toastify를 이용해 토스트로 알립니다.
• 관련: 이슈 #156, PR #178

• 팀의 대시보드를 외부 인원에게 공유할 수 있는 기능을 제공합니다.
• 대시보드 url을 공유하면, 로그인 여부와 관계없이 구성원이 아닌 사람도 대시보드를 확인할 수 있습니다. 구성원이 아닌 경우 읽기만 가능하며 수정은 불가능합니다.
• 대시보드 생성 / 수정 시 공유 설정이 가능하며, 공유를 선택한 경우 공유 계정을 멤버로 등록합니다.
  • 이 때, 공유 계정을 미리 만들고 그 정보를 환경변수로 등록해 사용합니다.
• axios의 interceptor를 이용해 공유 대시보드에 권한이 없는 경우, 공유계정의 권한으로 읽기를 수행합니다.
• 관련: 디스커션 #101, 이슈 #155, PR #181

• 비밀번호가 문자 그대로 전송되면, 전송 과정 중에 노출될 위험이 있습니다.
• sha256 해시함수와 환경변수로 설정한 문자열을 이용해 비밀번호를 암호화해서 전달합니다.
• 회원가입 / 로그인 / 비밀번호 변경에서 모두 같은 방법으로 암호화해 비밀번호 확인이 정확하도록 합니다.
• 관련: 디스커션 #88, 이슈 #90, PR #164

• next.js는 next-themes 라이브러리를 이용하면 쉽게 다크모드의 전환이 가능합니다.
• next-themes의 ThemeProvider를 이용해서 app을 감싸면 useTheme를 이용해 테마를 간편하게 변경이 가능합니다
• ThemeProvider는 유저의 디바이스 설정에 따라서 기본 모드가 적용이 됩니다.
• 관련: 이슈 #153

• 권한이 없는 대시보드 / 관리 페이지 등에 접근 시 에러를 보여주기보다는, 권한이 없다는 안내와 함께 로그인 여부에 따라 적절한 페이지로 이동하도록 했습니다.

• 나의 대시보드와 계정 관리의 접근성을 높이기 위해 사이드바에 이동할 수 있는 링크를 추가했습니다.
• 할 일 상세정보를 누르기 전에 팀원의 반응을 확인할 수 있도록 댓글 개수를 카드 하단에 추가했습니다.
• 404 페이지를 만들고, 잘못된 주소로 접근 시 404 페이지에서 3초간 머물다 로그인 여부에 따라 적절한 페이지로 이동하도록 했습니다.

김지윤	류혜원	이대양	정민재
@wayandway	@un0211	@oceanlee-seoul	@wjsdncl