From 15b700db7c7650a29a39ea1997d49bcb80c3931e Mon Sep 17 00:00:00 2001 From: Hyeonji Roh <108173863+hyeonjiroh@users.noreply.github.com> Date: Fri, 4 Apr 2025 17:25:53 +0900 Subject: [PATCH] docs: Update README.md --- README.md | 276 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 244 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 77a64d9..f79e784 100644 --- a/README.md +++ b/README.md @@ -2,42 +2,254 @@ 코드잇 스프린트 13기 Part 3 과정에서 5팀이 진행한 중급 프로젝트 **Taskify** 레포지토리입니다. +## 🚀 배포 주소 +https://taskify-three-pearl.vercel.app + +## 📝 프로젝트 개요 +**Taskify**는 일정을 공유하며 관리할 수 있는 서비스입니다. +### 네비게이션 바 +#### 로그인 전 +- 로고 버튼 클릭 시 랜딩 페이지로 이동 +- 우측의 로그인, 회원가입 클릭 시 각각 로그인 페이지, 회원가입 페이지로 이동 + +#### 로그인 후 +- 우측의 유저 프로필 클릭 시 내 정보와 로그아웃 드롭다운 +- 내 정보 클릭 시 계정 관리 페이지로 이동 +- 로그아웃 클릭 시 액세스 토큰 삭제 후 랜딩 페이지로 이동 +**대시보드 상세 페이지** +- 해당 대시보드를 생성한 사람에게만 '관리' 버튼 표시 +- '관리' 버튼 클릭 시 해당 대시보드 수정 페이지로 이동 +- '초대하기' 버튼 클릭 시 초대하기 모달 표시 +- 우측에 해당 대시보드의 멤버 표시 + +### 사이드 바 +- 로그인 후 페이지들에서만 표시 +- 상단의 로고 클릭 시 나의 대시보드 페이지로 이동 +- '+' 버튼 클릭 시 대시보드 생성 모달 표시 +- 대시보드 목록들 중 내가 만든 대시보드는 대시보드 이름 뒤에는 👑로 표시 + +### 랜딩 페이지(`/`) +- Taskify의 초기 시작 페이지 + +### 로그인 페이지(`/login`) +- 유효한 이메일과 비밀번호 입력 시 '로그인' 버튼 활성화 +- 활성화된 '로그인' 버튼 클릭 시 액세스 토큰을 발급받고 나의 대시보드 페이지로 이동 + +### 회원가입 페이지(`/signup`) +- 회원가입 폼이 유효한 값으로 모두 채워지고, 약관 동의 체크 시 '가입하기' 버튼 활성화 +- 활성화된 '가입하기' 버튼 클릭 시 로그인 페이지로 이동 + +### 나의 대시보드 페이지(`/mydashboard`) +#### 내 대시보드 목록 +- '새로운 대시보드' 버튼 클릭 시 대시보드 생성 모달 표시 +- 내가 만든 대시보드는 대시보드 이름 뒤에는 👑로 표시 +- 원하는 대시보드 클릭 시 해당 대시보드 상세 페이지로 이동 + +#### 초대받은 대시보드 +- 원하는 키워드로 초대받은 대시보드 검색 가능 +- 초대 수락 시 해당 대시보드 상세 페이지로 이동 +- 초대 거절 시 초대받은 대시보드 목록에서 해당 대시보드 삭제 + +### 대시보드 상세 페이지(`/dashboard/{dashboardid}`) +#### 컬럼 +- '새로운 컬럼 추가하기' 버튼 클릭 시 컬럼 생성 모달 표시 +- 각 컬럼의 톱니바퀴 모양 버튼 클릭 시 컬럼 수정 모달 표시 + +#### 할 일 카드 +- 각 컬럼 상단의 '+' 버튼 클릭 시 할 일 생성 모달 표시 +- 각 할 일 카드 클릭 시 해당 할 일 카드 상세 모달 표시 +- 할 일 카드 상세 모달에서는 해당 할 일 카드에 댓글 등록, 수정, 삭제 가능 +- 할 일 카드 상세 모달의 우측 상단 메뉴 버튼 클릭 시 할 일 카드 수정, 삭제 가능 +- 할 일 카드 수정 시 할 일 수정 모달 표시 + +### 대시보드 수정 페이지(`/dashboard/{dashboardid}/edit`) +#### 대시보드 수정 +- 대시보드의 이름 및 색상 수정 후 '변경' 버튼 클릭 시 해당 대시보드 상세 페이지로 이동 + +#### 구성원 +- 해당 대시보드의 멤버 목록 확인 및 삭제 가능 + +#### 초대 내역 +- 해당 대시보드에 초대한 유저 이메일 목록 확인 및 취소 가능 +- 우측 상단의 '초대하기' 버튼 클릭 시 초대하기 모달 표시 + +#### 대시보드 삭제 +- 대시보드 삭제 버튼 클릭 시 대시보드 삭제 후 나의 대시보드 페이지로 이동 + +### 계정 관리 페이지(/mypage) +- 사용자의 프로필 이미지와 닉네임 변경 가능 +- 사용자의 이메일 변경 불가 +- 현재 비밀번호와 다른 비밀번호로 비밀번호 변경 가능 + +## ⏳ 개발 기간 +2025.03.18 ~ 2025.04.02 + +## 👩🏻‍💻 팀원 소개 + + + + + + + + + + + + + + + +
김경민노현지이아름이재혁임지혜
+ + + + + + + + + + + + + + + + + + + +
+ +## 🤝 역할 분담 +### 김경민 +- 나의 대시보드 페이지 - 내 대시보드 목록 +- 대시보드 생성 모달 +- 컬러 팔레트 버튼 리스트(공통) + +### 노현지 +- 상단 네비게이션 바 +- 사이드 바 +- 나의 대시보드 페이지 - 초대받은 대시보드 +- 대시보드 상세 페이지 +- 대시보드 수정 페이지 - 대시보드 수정, 초대 내역, 대시보드 삭제 +- 컬럼 추가 모달 +- 컬럼 수정 모달 +- 할 일 카드 상세 모달 +- 초대하기 모달 +- 로고 버튼(공통) +- 태그 & 태그 Input(공통) +- 모달(공통) +- alert(공통) + +### 이아름 +- 로그인 페이지 +- 회원가입 페이지 +- 계정 관리 페이지 +- Input(공통) +- 버튼(공통) +- 이미지 파일 추가 버튼(공통) + +### 이재혁 +- 대시보드 수정 페이지 - 구성원 목록 +- 페이지네이션 버튼(공통) +- 유저 아이콘(공통) + +### 임지혜 +- 랜딩페이지 +- 할 일 카드 수정 모달 +- 할 일 카드 생성 모달 +- Textarea(공통) +- Date Input(공통) + +## 💻 기술 스택 + +### Environment + +![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) +![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) +![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) + +### Linters + +![js](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white) +![js](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) + +### Development + +![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) +![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) +![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) +![Next JS](https://img.shields.io/badge/Next.js-%23000000.svg?style=for-the-badge&logo=next.js&logoColor=white) +![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) + + +### communication + +![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=for-the-badge&logo=discord&logoColor=white) +![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white) + +### Deployment + +![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) + ## 🗂️ 폴더 구조 ``` -📂 public # 공개 정적 파일 디렉토리 -│ -├── 📂 logo # 로고 이미지 -│ -├── 📂 icon # 아이콘 이미지 -│ -├── 📂 page-modal # 각 페이지 또는 모달에 필요한 이미지 -│ -│ -📂 src # 소스 코드 루트 디렉토리 -│ -├── 📂 actions # 서버 액션 관리 -│ -├── 📂 app # Next.js app 디렉토리 -│ │ -│ ├── 📂 page-path # 각 페이지 경로에 해당하는 컴포넌트 -│ -├── 📂 components # 컴포넌트 관리 -│ │ -│ ├── 📂 common # 공통 컴포넌트 관리 -│ │ │ -│ │ ├── 📂 common-name # 각 공통 컴포넌트 컴포넌트 -│ │ -│ ├── 📂 page-modal # 각 페이지 또는 모달에 사용하는 컴포넌트 -│ -├── 📂 constants # 상수 값 관리 -│ -├── 📂 hooks # 커스텀 훅 관리 -│ -├── 📂 utils # 유틸리티 함수 관리 -│ -├── 📄 types.tsx # 타입 정의 +📂 public +├── 📂 icon +├── 📂 logo +└── 📂 page-modal + +📂 src +├── 📂 app +│ ├── 📂 (after-login) +│ │ ├── 📂 dashboard +│ │ │ └── 📂 [dashboardid] +│ │ │ ├── 📂 _components +│ │ │ └── 📂 edit +│ │ ├── 📂 mydashboard +│ │ │ └── 📂 _components +│ │ └── 📂 mypage +│ │ └── 📂 _components +│ └── 📂 (before-login) +│ ├── 📂 (with-navbar) +│ └── 📂 (without-navbar) +│ ├── 📂 login +│ └── 📂 signup + +├── 📂 components +│ ├── 📂 commont +│ │ ├── 📂 alert +│ │ ├── 📂 button +│ │ ├── 📂 color-palette +│ │ ├── 📂 input +│ │ ├── 📂 logo-button +│ │ ├── 📂 modal +│ │ ├── 📂 pagination-button +│ │ ├── 📂 tag +│ │ ├── 📂 textarea +│ │ └── 📂 user-icon +│ ├── 📂 layout +│ │ ├── 📂 navbar +│ │ └── 📂 sidebar +│ └── 📂 modal +│ ├── 📂 add-column +│ ├── 📂 create-dashboard +│ ├── 📂 create-task +│ ├── 📂 edit-task +│ ├── 📂 edit-column +│ ├── 📂 invite +│ └── 📂 task-detail +├── 📂 lib +│ ├── 📂 apis +│ ├── 📂 constants +│ ├── 📂 hooks +│ ├── 📂 store +│ ├── 📂 utils +│ └── 📄 types.ts ``` ## ✅ 컨벤션