README.md

쉽고 빠른 할 일 관리 With Plan 📝

💚 멤버 소개 및 담당 영역

나은	지은	혜윤	슬	소희

🔗 관련 링크

✅ 배포 사이트 보러가기

✅ 노션 보러가기

✅ JIRA 보러가기

🧐 About 위드플랜

with-plan-service.mp4

- 회사 업무부터 개인 목표 관리 및 모임 활동 관리까지 모든 할 일 관리를 위드플랜에서 하세요.

- 업무 혹은 프로젝트 대시보드를 생성하고 구성원과 함께 댓글로 소통하며 이용해보세요.

- 할 일 카드에서 내용과 함께 마감일, 담당자, 태그, 이미지까지 디테일하게 관리해보세요.

👉 이제 할 일 관리는 스마트한 위드플랜과 함께 간편하게!

🛠️ 채택 기술

📆 개발 기간

2023년 12월 18일(월) ~ 2024년 01월 04일(목)

✅ 담당 영역

👸 나은

• input 컴포넌트 제작 , header 컴포넌트 제작 , side menu 컴포넌트 제작 , modal dropdown 컴포넌트 제작 , 계정관리 페이지 레이아웃 , 대시보드 수정 페이지 레이아웃 , 404 페이지 레이아웃 , 사이드메뉴 기능 , 컬럼 추가 모달 기능 , 컬럼 수정 모달 기능 , 초대하기 모달 기능 , 초대 내역 삭제 기능 , 구성원 삭제 기능 , 프로필 변경 카드 기능 , 비밀번호 변경 카드 기능 , 로그인 / 회원가입 페이지 기능 , 대시보드 수정 페이지 기능 , 페이지네이션 기능 , 전체적인 ui 리팩토링

👸 지은

• 컬럼 컴포넌트 구현 , 카드 컴포넌트 구현 , 태그 컴포넌트 구현 , NoProfileImage 컴포넌트 구현 , 나의 대시보드 목록 컴포넌트 구현 , 나의 대시보드 페이지 레이아웃 , 대시보드 추가 모달 구현 , 대시보드 color picker 구현 , 로그인 / 회원가입 페이지 기능 , 태스크 생성 모달 기능 구현 , 태스크 수정 모달 가능 구현 , 무한스크롤 기능 구현 , 스크롤 네비게이션 바 구현 , 배포

👸 혜윤

• 모달 컴포넌트 제작 , 대시보드 수정 페이지 , 대시보드 수정 기능 , 사이드 메뉴 팝업 기능 , 대시보드 삭제 기능 , 컬럼 컴포넌트 리팩토링 , 댓글 기능 리팩토링

👸 슬

• 랜딩페이지 제작 , 나의 대시보드 레이아웃 , 담당자 드롭다운 컴포넌트 , 여러가지 icon 컴포넌트 , 구성원 컴포넌트 , 초대 내역 컴포넌트 , 초대받은 대시보드 컴포넌트 , 메뉴(홈, 계정관리, 로그아웃) 드롭다운 컴포넌트 , 대시보드 멤버 리스트 팝업 기능 , 대시보드 수정 기능 , 대시보드 초대 수락과 거절 기능 , 할 일 수정과 삭제 기능 , 버튼 컴포넌트 리팩토링 , 상태 드롭다운 기능 리팩토링 , nav 헤더 기능 리팩토링 , 전체적인 ui 리팩토링

👸 소희

• 버튼 공용 컴포넌트 , 모달 인풋 컴포넌트 , 로그인 페이지 레이아웃 , 회원가입 페이지 레이아웃 , 태스크 모달 기능 , 태스크 모달 리팩토링 , 댓글 기능 , 할 일 생성 모달 기능 , 할 일 수정 모달 기능 , 메인 페이지 리팩토링 , 계정 정보 수정 기능

⭐️ 주요 기능

• TypeScript와 Next.js, React 기반 프로젝트
• ESLint, Prettier 활용 및 Styled-component 세부 컨벤션 설정 및 적용
• Jotai를 활용한 전역 변수 상태 관리 (데이터 수정시 리렌더링 없이 바로 연동)
• 페이지네이션 및 무한 스크롤 기능
• 반응형 디자인
• 회원가입 / 로그인 : 데이터 중복 검토 및 데이터 양식 검토 로직
• 나의 대시보드 : 초대 받은 대시보드 및 나의 대시보드 데이터 연동, 새로운 대시보드 생성 기능
• 대시보드 : 컬럼 추가/수정/삭제 기능, 컬럼에 할 일 카드 추가/수정/삭제 기능, 컬럼 관리 기능, 내가 생성한 대시보드 왕관 아이콘 적용 기능
• 대시보드 수정 : 대시보드 이름 및 색상 수정 기능, 구성원 리스트 확인 및 삭제 관리, 초대 내역 확인 및 삭제 관리 기능
• 모달 : 컬럼 추가/수정/삭제 모달, 구성원 초대하기 모달(메일 유효성 검토 로직) 기능
• 케밥 : 케밥 클릭시 모달 노출 및 외부 클릭시 모달 클로즈 기능
• 토스트 : 데이터 수정 반영 성공시 토스트 알림 기능
• 헤더 : 프로필 영역 데이터 및 클릭시 모달 - 홈/프로필 관리/로그아웃 기능, 대시보드 멤버 아이콘 및 전체 멤버 확인 리스트 모달, 관리 버튼(대시보드 수정 이동)
• 사이드 메뉴 : 대시보드 리스트 스크롤 기능 적용, 현재 위치 대시보드 표시 기능, 모바일 사이즈 리스트 드롭다운으로 세부 리스트 확인 및 외부 클릭시 클로즈 기능
• 할 일 카드(태스크) 생성 모달 : 담당자 드롭다운, 마감일 및 시간 선정, 태그 적용, 이미지 첨부 기능, 생성시 해당 컬럼에 카드 생성, 댓글 기능
• 댓글 : 댓글 생성, 등록한 댓글 수정 및 삭제 기능, 댓글 무한 스크롤 로딩
• 할 일 카드(태스크) 수정 모달 : 기존 데이터 보여주기, 컬럼 상태 값 및 기존 입력 내용 수정 및 반영 기능
• 404 페이지 : 각 접근 로직에 따른 404 페이지 노출
• 계정 관리 : 기존 프로필 정보 연동, 프로필 이미지 수정/삭제, 닉네임 수정 기능, 비밀번호 변경 기능

🖥️ 서비스 화면

나의 대시보드

대시보드

할 일 생성 / 수정

대시보드 관리

계정 정보 관리

💖 팀원들의 소감 한 마디

• 나은 : 팀원분들이 모두 의견을 잘 내주시고, 프로젝트에 열정적으로 임해서 너무 좋았습니다! 다른 팀들과는 차별적으로 디자인을 구상하고, 우리만의 로고를 만든 부분도 프로젝트를 하는데에 있어서 재밌게 임할 수 있는 부분이 되었던 것 같습니다. 또, 유저의 입장에서 필요한 기능과 필요 없는 기능을 적절하게 조정하면서 프로젝트를 완성해서 만족스럽고 뿌듯합니다! 🫶🏻

• 지은 : 저희 팀의 장점은 소통이라고 생각해요. 의견을 자유롭게 낼 수 있는 분위기 속에서 열정적으로 코딩할 수 있었어요! 유저 입장에서 필요한 기능이 무엇일지 계속 생각하며 추가 구현 했어요. 그 과정이 재밌었고 결과적으로 프로젝트의 질을 높일 수 있었어요.

• 혜윤 : 많은 논의를 함께하면서 서로의 생각을 공유할 수 있어서 좋았어요! 어려운 부분이나 고민이 되는 부분들도 함께 나누고 해결해서 막힘없이 프로젝트를 완성할 수 있었어요!

• 슬 : 소통의 중요성을 깨닫게 된 거 같아요! 원활하게 소통하니 더 퀄리티있고 좋은 결과물이 나온 거 같아요. 그리고 다들 디자인에 진심이셔서 너무 좋았어용 ㅎㅎ 결과물 볼 때마다 뿌듯해요! 역시 기능구현도 중요하지만 유저 입장에서도 보기에 이뻐보이는 것도 정말 중요한.. 😊

• 소희 : 이번 프로젝트를 통해서 초반에 어떤 식으로 논의하고 업무 방식을 세팅하는 것이 좋을지 배운 점이 많네요. 확실히 우리 팀은 소통이 너무 잘되어서 그 점이 너무 좋았구요! 개발할 때 항상 유저의 입장에서 고민해서 구현하려고 노력한 덕에 짧은 기간 내에 만족스러운 결과물이 나온 것 같습니다 🥰