diff --git a/README.md b/README.md index e215bc4..a6d12f0 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,123 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +Slice 로고 -## Getting Started +# Slice -First, run the development server: +목표를 작은 조각(할 일)으로 나누어 관리하고, 대시보드로 진행 상황을 확인하며, 노트로 학습 내용을 정리하는 웹 애플리케이션 -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` +- 프로젝트 기간 : 2025.11.21 - 2026.01.05 +- 배포 주소 : [https://slice-todo.vercel.app](https://slice-todo.vercel.app) -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## 기술 스택 -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +- **Language**: TypeScript +- **Framework**: React 19, Next.js 15 (App Router) +- **State Management**: TanStack Query, Zustand +- **Styling**: Tailwind CSS 4 +- **Library**: Tiptap, Framer Motion, Sonner +- **Testing**: Jest, Testing Library, Storybook +- **CI/CD**: GitHub Actions, Vercel -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +## 서비스 화면 -## Learn More +### 랜딩 페이지 -To learn more about Next.js, take a look at the following resources: +- 서비스 소개 및 주요 기능을 소개합니다. +- `시작하기` 버튼을 통해 로그인 상태에 따라 대시보드 또는 로그인 페이지로 이동합니다. -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +| 랜딩 페이지 (이진희) | +| :----------------------------------------------------------------: | +| | -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +### 로그인 / 회원가입 -## Deploy on Vercel +- 로그인: 이메일과 비밀번호 입력을 통해 계정을 인증합니다. +- 회원가입: 이름, 이메일, 비밀번호에 대한 유효성 검사를 통해 계정을 생성합니다. -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +| 로그인 / 회원가입 (최보아) | +| :--------------------------------------------------------------------: | +| | -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +### 네비게이션 사이드바 + +- 대시보드와 목표 상세 페이지로 이동할 수 있는 네비게이션을 제공하며, 목표와 할 일을 추가할 수 있습니다. +- 로그인한 계정 정보를 확인하고 로그아웃할 수 있습니다. + +| 네비게이션 사이드바 (최보아) | +| :----------------------------------------------------------------------: | +| | + +### 대시보드 + +- 최근 등록한 할 일: 가장 최근에 생성한 할 일을 확인하고, `모두 보기` 버튼을 통해 모든 할 일 페이지로 이동할 수 있습니다. +- 내 진행 상황: 완료된 할 일과 미완료 할 일의 비율을 통해 현재 진행 상황을 확인할 수 있습니다. +- 목표별 할 일: 목표별 할 일 목록을 확인하고, 각 목표에 할 일을 추가할 수 있습니다. 목표가 2개를 초과하면 무한 스크롤로 목표 목록이 추가됩니다. + +| 대시보드 (정다슬) | +| :----------------------------------------------------------: | +| | + +### 목표 상세 + +- 특정 목표의 상세 정보를 조회하고, 목표명을 수정하거나 삭제할 수 있습니다. +- 목표에 포함된 할 일들의 완료 여부를 기준으로 목표 진행 상황을 확인할 수 있습니다. +- `노트 모아보기` 버튼을 통해 목표에 속한 할 일들의 노트를 모아보는 페이지로 이동합니다. + +| 목표 상세 (정다슬) | +| :-----------------------------------------------------------: | +| | + +### 모든 할 일 + +- 등록한 모든 할 일 목록을 확인하고, 새로운 할 일을 추가할 수 있습니다. 할 일이 40개를 초과할 경우 무한 스크롤로 할 일 목록이 추가됩니다. +- 해야 할 일(TODO)과 완료된 일(DONE)로 필터링하여 할 일을 확인할 수 있습니다. +- 케밥 버튼을 통해 할 일을 수정하거나 삭제할 수 있으며, 노트 작성 여부에 따라 노트 작성하기 또는 노트 수정하기 페이지로 이동할 수 있습니다. + +| 모든 할 일 (나윤진) | +| :-----------------------------------------------------------: | +| | + +### 할 일 생성 및 수정 모달 + +- 제목, 자료 첨부, 목표 선택을 통해 할 일을 생성하거나 수정할 수 있습니다. +- 입력 값 유효성 검사를 통과한 경우에만 생성 또는 수정이 가능하며, 닫기 버튼 클릭 시 확인 후 이전 화면으로 돌아갑니다. + +| 할 일 생성 및 수정 모달 (나윤진) | +| :------------------------------------------------------------------------: | +| | + +### 노트 모아보기 + +- 목표에 속한 모든 할 일의 노트를 최신 저장 순으로 확인할 수 있습니다. +- 각 노트에는 노트 제목과 해당 할 일 제목, 해야 할 일(TODO) / 완료된 일(DONE)이 함께 표시됩니다. +- 노트 클릭 시 노트 상세가 사이드 보기로 열리며, 케밥 버튼을 통해 노트 수정 페이지로 이동하거나 노트를 삭제할 수 있습니다. + +| 노트 모아보기 (이진희) | +| :------------------------------------------------------------------: | +| | + +### 노트 작성 및 수정 + +- 할 일에 대한 노트를 작성하고 수정할 수 있으며, 링크를 첨부할 수 있는 에디터를 통해 노트 제목과 본문을 입력해 학습 내용을 정리할 수 있습니다. +- 첨부된 링크가 있는 경우, 링크 클릭 시 노트 내부에서 링크 콘텐츠의 임베드를 확인할 수 있습니다. +- 작성 중인 노트는 5분마다 자동으로 임시 저장되며, 임시 저장 버튼을 통해 수동 저장도 가능합니다. 저장된 노트를 불러와 이전 작업을 이어서 작성할 수 있습니다. + +| 노트 작성 및 수정 (이진희) | +| :----------------------------------------------------------------------: | +| | + +### 노트 상세 + +- 노트의 목표 및 할 일 제목, 노트 제목, 노트 마지막 저장일, 상세 내용을 확인할 수 있습니다. +- 첨부된 링크가 있는 경우, 링크 클릭 시 노트 내부에서 링크 콘텐츠의 임베드를 확인할 수 있습니다. +- 노트 상세는 클릭 시 사이드 보기로 열리며, URL 직접 접근이나 새로고침 시 전체 페이지로 전환됩니다.
+ (Parallel Routes와 Intercepting Routes를 활용) + +| 노트 상세 (이진희) | +| :--------------------------------------------------------------: | +| | + +## 팀원 소개 + +| 최보아 | 나윤진 | 이진희 | 정다슬 | +| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +|
@swallowedB |
@iyxxnjin |
@jjinheeWorld |
@goodaseul |