🔗 배포 링크 : kkom-kkom
- 팀 기반 일정 관리: 팀을 생성하고 팀원들을 초대하여, 함께 일정을 생성하고 관리할 수 있는 협업 툴을 제공합니다. 팀원들과 협력하여 할 일을 설정하고, 매일, 주간, 월간 주기로 반복되는 일정도 간편하게 관리할 수 있습니다.
- 실시간 진행 상황 확인: 오늘 해야 할 일과 진행 상황을 차트를 통해 한눈에 확인할 수 있습니다. 할 일의 완료 여부를 체크하며, 남은 작업량을 쉽게 파악할 수 있습니다.
- 투명한 일정 공유: 일정의 상세 내용과 댓글 기능을 통해 팀원 모두가 투명하게 일정을 공유할 수 있습니다. 모든 구성원이 일정을 명확하게 이해하고, 필요한 사항을 논의할 수 있습니다.
- 자유게시판: 팀별로만 사용하는 기능 외에도, 모든 사용자가 참여할 수 있는 자유게시판을 통해 다양한 의견을 나눌 수 있습니다.
|
|
|
|
| 김서영 | 이동규 | 이승현 | 정지현 |
|---|
- 소셜 로그인 기능
- 로그인, 회원가입, 로그아웃 기능
- 사용자 정보 수정 기능
- 테마 기능
- next.js의 미들웨어를 통해 로그인 상태에 따른 페이지 접근 제한
- 공통 input 컴포넌트
- 컴파운트 패턴을 적용한 드롭다운 컴포넌트
- 헤더, 모바일 사이드바, 랜딩페이지
- 공통 프로필 아이콘 및 input
- 할 일 추가 수정 및 삭제 기능
- 댓글 수정 및 삭제 기능
- 게시글 관련 기능 ( CRUD, 페이지네이션, 낙관적 업데이트 )
- 게시글 댓글 관련 기능 ( CRUD, 무한스크롤, 낙관적 업데이트 )
- 오버레이를 위한 overlay custom hook
- interceptor, base_url등 axios의 기능을 fetch에 더한 myFetch 함수를 구현
- 버튼 공통 컴포넌트
- 마이 히스토리 페이지
- 프로젝트 세팅 ( CI/CD 등 )
- 공통 버튼 컴포넌트
- 공통 팝오버 컴포넌트
- 팀 생성, 수정, 삭제 기능
- 할 일 목록 생성, 수정, 삭제 기능
- 할 일 목록 드래그 앤 드롭 기능
- 멤버 삭제하기, 팀 탈퇴하기 기능
- 오늘의 진행 상황, 오늘의 꼼꼼이 차트
- 멤버 초대, 팀 참여 기능
2023.07.26 ~ 2024.08.28 (4주)
- Next.js는 SSR과 SSG 기능을 기본 제공하여 SEO에 강점이 있습니다. 최신 App Router 기능을 도입해 페이지와 레이아웃 구조를 유연하게 관리하고, 서버 컴포넌트와 클라이언트 컴포넌트를 구분해 성능을 최적화했습니다. 빠른 페이지 로딩 속도와 향상된 사용자 경험을 제공하고자 Next.js를 선택했습니다.
- TypeScript를 사용하면 코드 작성 중 타입을 명시해 버그를 사전에 방지할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 협업 시 컴파일 단계에서 오류를 발견할 수 있어, 개발 생산성을 크게 향상시킬 수 있는 장점이 있습니다. 타입 정의를 통해 더욱 견고한 서비스를 개발하고자 TypeScript를 도입했습니다.
- Tailwind CSS : utility-first 방식의 CSS 프레임워크로, 클래스 기반의 빠르고 직관적인 스타일링이 가능합니다. 별도의 CSS 파일을 작성할 필요 없이 컴포넌트 안에서 스타일을 정의할 수 있어 개발 속도를 높이고, 디자인의 일관성을 유지할 수 있습니다. 반복적인 CSS 작성 시간을 줄이고 커스터마이징을 쉽게 하기 위해 Tailwind CSS를 채택했습니다.
- framer motion : 러닝커브가 높지 않으면서도 안정성이 있는 라이브러리 중에 하나입니다. 사용자 인터페이스에 생동감을 더할 수 있었습니다.
- storybook: 개발 중 발생할 수 있는 UI 오류를 사전에 방지하고, 일관된 UI 컴포넌트를 관리하기 위해 Storybook을 도입했습니다.
- Tanstack Query : TanStack Query는 서버 상태 관리에 최적화된 라이브러리로, 데이터 패칭과 캐싱, 동기화, 업데이트를 손쉽게 처리할 수 있습니다. 복잡한 비동기 로직을 선언적으로 간결하게 작성하고, 클라이언트와 서버 상태를 분리해 코드의 복잡성을 줄이기 위해 TanStack Query를 도입했습니다.
- react-hook-form : 이번 프로젝트에서는 form을 사용하는 부분이 굉장히 많았는데요. react-hook-form은 비제어 컴포넌트 관리나 유효성 검사 등 다양한 기능을 손쉽게 할 수 있는 라이브러리로 npm 기준 form중에서 가장 유명한 라이브러리이기에 안정성이 보장됩니다.
- Zustand : Zustand는 심플하고 가벼운 상태 관리 라이브러리로, 작은 규모의 애플리케이션 상태 관리에 적합합니다. 복잡한 설정이 필요 없으며, 빠르고 직관적인 상태 관리를 위해 Zustand를 채택했습니다.
- pnpm : pnpm은 빠르고 효율적인 패키지 매니저로, 모듈 설치 속도가 빠르고, 중복된 패키지를 효율적으로 관리해 디스크 공간을 절약할 수 있습니다. 패키지 관리의 효율성을 높이기 위해 pnpm을 사용했습니다.
- eslint, prettier : 코드 스타일을 자동으로 일관적으로 유지하기 위해 사용하였습니다. 대부분의 규칙은 Airbnb의 코딩 컨벤션을 따랐으나 필요에 따라 예외 규칙은 팀원들과 상의를 통해 수정하였습니다. 팀 내 코드 스타일을 통일하고 유지 보수성을 향상시킵니다.
- GitHub Actions: GitHub과의 긴밀한 통합으로 코드 변경 시 자동으로 테스트, 빌드, 배포를 수행할 수 있으며, YAML 파일을 통해 유연하게 CI/CD 파이프라인을 구성할 수 있습니다.
- Vercel: Next.js와 완벽하게 호환되는 서버리스 아키텍처로, Git 저장소와 연결하여 자동으로 빌드 및 배포를 할 수 있습니다. 글로벌 캐싱 네트워크와 간단한 설정으로 높은 성능과 편리성을 제공합니다. 이 두 가지를 결합하면 효율적이고 강력한 CI/CD 환경을 구축할 수 있습니다.
📂 app
📂(auth)
📂 signup
📂 _components // 이 페이지 안에서만 쓰는 컴포넌트
📑 page.tsx
📂 login
📂 oauth
📂 reset-password
📑 layout.tsx
📂 (team-setting)
📂 addteam
📂 paticipate-team
📑 layout.tsx
📂[groupId]
📂edit
📂tasks
📑 layout.tsx
📂 mypage
📑 page.tsx
📑 layout.tsx
📂 myhistory
📑 page.tsx
📑 layout.tsx
📂 no-team
📑 page.tsx
📑 layout.tsx
📂(free-board)
📂 boards
📂[boardId]
📑 layout.tsx
📑 page.tsx // 랜딩페이지
📑 layout.tsx
📂 constants // 상수
📂 hooks // 커스텀 훅
📂 utils // 유틸 함수
📂 lib
📂 apis
📂article
📑 index.ts
📂 public // 이미지 등 리소스
📂 icons
📂 images
📂 components // 공통 컴포넌트
📂 button
📂 dropdown
📑.env.local
- 입력값에 대해 다음 사항들을 확인합니다.
- 이메일 형식이 아닐 경우 에러 메세지를 보여줍니다.
- 비밀번호는 숫자, 영문, 특수문자(!@#$%^&*)를 포함해야 합니다.
- 모든 입력값들이 정상일 때 로그인 버튼이 활성화됩니다.
- 로그인에 실패하였을 경우 해당 입력창에 에러 메세지를 보여줍니다.
- 비밀번호가 다른 경우
- 존재하지 않는 이메일인 경우
- 구글, 카카오톡으로 간편 로그인할 수 있습니다.
- 가입하지 않은 계정 경우 회원가입 후 로그인 처리가 됩니다.
- 로그인에 성공한 경우 로그인된 상태로
/로 이동합니다. - 비밀번호가 기억나지 않는 경우 가입한 이메일 계정을 통해 비밀번호를 변경할 수 있습니다.
- 입력한 이메일로 비밀번호 변경에 필요한 토큰과 함께 비밀번호 변경 페이지로 이동합니다.
| 로그인 |
|---|
 |
| 소셜 로그인 - 카카오 |
|---|
 |
| 소셜 로그인 - 구글 |
|---|
 |
| 비밀번호 변경 |
|---|
   |
- 로그아웃 후
/로 이동합니다.
| 로그아웃 |
|---|
 |
| 회원가입 |
|---|
  |
- 프로필 이미지와 이름을 변경할 수 있습니다.
- 변경하기 버튼을 누르면 비밀번호 변경 모달창을 통해 비밀번호를 변경할 수 있습니다.
- 회원 탈퇴하기 버튼을 누르면 회원 탈퇴 모달창을 통해 탈퇴가 진행됩니다.
- 탈퇴 후
/로 이동합니다.
- 탈퇴 후
| 사용자 정보 수정 - 이미지, 이름 |
|---|
 |
| 사용자 정보 수정 - 비밀번호 |
|---|
 |
| 사용자 정보 수정 - 탈퇴 |
|---|
 |
- 사용자 시스템 설정에 맞는 테마가 적용됩니다.
- 헤더에 토글 버튼을 통해 테마를 변경할 수 있습니다.
| 테마 |
|---|
 |
- 팀 페이지는 관리자용과 멤버용으로 분리하여 역할에 따라 다른 권한을 부여합니다.
| 관리자용 |
|---|
 |
| 멤버용 |
|---|
 |
- 팀 생성하기 메뉴를 통해 팀 생성하기 페이지로 이동할 수 있습니다.
- 팀 프로필 이미지와 이름을 설정할 수 있으며, 이미지는 선택값이지만 이름은 필수값입니다.
- 팀 프로필 이미지를 설정하지 않을 경우에는 기본 이미지가 적용됩니다.
- 팀 생성 후에는 해당 팀 페이지로 이동합니다.
| 팀 생성 |
|---|
 |
- admin의 경우에는 팀 정보를 수정할 수 있습니다.
- 팀 프로필 이미지와 이름을 수정할 수 있습니다.
- 팀 수정 후에는 해당 팀 페이지로 이동합니다.
| 팀 정보 수정 |
|---|
 |
- admin의 경우에는 팀을 삭제할 수 있습니다.
- 삭제 후에는 랜딩 페이지로 이동합니다.
| 팀 삭제 |
|---|
 |
- admin의 경우에는 할 일 목록을 추가할 수 있습니다.
- 팀 내에서 중복되는 이름의 할 일 목록을 사용할 수는 없습니다.
- 추가한 할 일 목록은 바로 팀 페이지에 반영됩니다.
| 할 일 목록 추가 |
|---|
 |
- admin과 member 모두 할 일 목록을 수정할 수 있습니다.
- 할 일 목록 옆의 케밥 버튼을 통해 할 일 목록의 이름을 수정할 수 있으며 수정한 이름은 바로 팀 페이지에 반영됩니다.
- 드래그 앤 드롭으로 할 일 목록의 순서를 수정할 수 있습니다.
| 할 일 이름 수정 |
|---|
 |
| 할 일 목록 순서 수정 |
|---|
 |
- admin과 member 모두 할 일 목록을 삭제할 수 있습니다.
- 할 일 목록 옆의 케밥 버튼을 통해 할 일 목록을 삭제할 수 있으며 삭제한 할 일 목록은 바로 팀 페이지에 반영됩니다.
| 할 일 목록 삭제 |
|---|
 |
- admin의 경우에는 리포트를 확인할 수 있습니다.
- 오늘의 진행 상황과 오늘의 꼼꼼이를 확인할 수 있습니다.
- 오늘의 꼼꼼이 차트에선 오늘 할 일을 가장 많이 완료한 최대 3명의 멤버를 보여줍니다.
| 완료한 일이 없을 때의 리포트 |
|---|
 |
| 완료한 일이 있을 때의 리포트 |
|---|
 |
- admin의 경우에는 팀원을 삭제할 수 있습니다.
- 멤버 카드 옆의 케밥 버튼을 통해 팀원을 삭제할 수 있으며 삭제한 팀원은 바로 팀 페이지에서 사라집니다.
| 멤버 삭제 |
|---|
 |
- member의 경우에는 팀에서 탈퇴할 수 있습니다.
- 멤버 카드 옆의 케밥 버튼을 통해 팀에서 탈퇴할 수 있으며 탈퇴한 뒤에는 랜딩 페이지로 이동합니다.
| 팀 탈퇴 |
|---|
 |
- admin의 경우에는 새로운 멤버를 초대할 수 있습니다.
-
- 새로운 멤버 초대하기 버튼을 클릭하여 토큰을 포함한 초대 링크를 복사할 수 있습니다.
- 다른 유저가 해당 링크로 접근하면 팀 참여하기 페이지로 이동하며 토큰값을 자동으로 입력됩니다.
- 팀 참여 후에는 해당 팀 페이지로 이동합니다.
| 팀 초대 |
|---|
 |
| 팀 참여 |
|---|
 |
- 멤버 카드를 클릭하면 나타나는 멤버 프로필 모달에서 이메일을 복사할 수 있습니다.
| 이메일 복사 |
|---|
 |
- 팀 관리 페이지 할 일 목록을 클릭하면 해당 할 일로 이동
- 할 일 리스트 추가
- 할 일 추가 수정 및 삭제 기능
- 댓글 추가 및 삭제 기능
| 할일 리스트 만들기 |
|---|
 |
| 할일 만들기 |
|---|
 |
| 댓글 추가 수정 및 삭제 |
|---|
 |
- streaming 방식으로 렌더링하여 UX 향상
- 모든 api 요청은 텐스택 쿼리로 관리됩니다.
- 낙관적 업데이트가 적용되었습니다.
| 게시글 조회 | 게시글 추가 |
|---|---|
 |
 |
| 게시글 수정 | 게시글 삭제 |
|---|---|
 |
 |
| 게시글 좋아요, 좋아요 취소 |
|---|
 |
- streaming + 낙관적 업데이트 + 무한 스크롤 (useInfiniteSuspenseQuery)
| 댓글 조회 | 댓글 추가 |
|---|---|
 |
 |
| 댓글 수정 | 댓글 삭제 |
|---|---|
 |
 |
프로젝트가 한 달 동안 길게 진행되면서, 이전 프로젝트에서 아쉬웠던 부분들을 개선하여 여러 새로운 기술들을 적용해 볼 수 있는 좋은 기회였습니다. 단순히 기능 구현에 그치는 것이 아니라, 재사용성을 고려해 꼼꼼하게 작업한 덕분에 프로젝트명과 팀명처럼 '칠칠이'에서 '꼼꼼이'로 성장할 수 있었던 것 같습니다. 😚 힘든 내색하지 않고 마지막까지 긍정적이고 열정적으로 참여해 주신 팀원들 덕분에 행복하게 작업했던 거 같습니다. 백엔드의 잦은 변동에도 불구하고 묵묵히 끝까지 기능 구현을 맡아주신 동규님, 풍부한 지식을 바탕으로 새로운 기술을 적극 제안해 주신 CTO 승현님, 항상 긍정적인 태도로 팀 분위기를 밝게 만들어 주신 지현님 ! 모두 멋진 FE 개발자로 성장하실 거라고 믿어 의심치 않아요 ~ 우리 칠칠이들 너무 고생하셨습니다 ! 🌈🤍
이번 프로젝트를 통해서 디버깅 능력을 많이 키웠고 변경되는 ui 와 api에 대해 대응을 잘 했던 것 같습니다. 팀원들 덕분에 많이 성장하게 된 것 같습니다!
모든 팀원들이 처음부터 끝까지 체계적으로 하기 위해서 모두 노력해왔던 프로젝트였던 것 같습니다. tanstack query, app router, zustand 등등 현업에서 사용하는 기술들을 고도화하여 사용해본 경험은 앞으로 큰 도움이 될 것입니다. 개인적으로도 기술적으로도 많이 성장했습니다. 기억에 많이 남을 것 같아요.
추가 리팩토링이 남아있지만 이전처럼 스프린트 기간을 두진 않았기에 잠시 이별할 것 같네요. 다음에 성장한 모습으로 다시 봤으면 하는 팀이었습니다. 모두 감사했어요 😊
단순 서비스 구현에 중점을 둔 프로젝트가 아니라 사용자 경험 개선을 위해 끊임없이 수정을 거친 프로젝트입니다. 이를 위해 저희는 새로운 기술 도입을 두려워하지 않았어요! 그 과정에서 기술적인 측면에서도, 협업적인 측면에서도 많이 성장한 것 같습니다. 항상 질문 폭탄이었는데 힘든 내색 없이 친절하게 답변해주신 모든 팀원분들께 감사하며, 전국의 모든 칠칠이들이 이 서비스를 통해 꼼꼼이가 되길 바랍니다!