Skip to content

sssssubin/todo-list-app

BranchesTags

Repository files navigation

Todo List App

1. 프로젝트 개요

팀원: 강선영, 조성은, 김수빈, 김현빈, 이의영

프로젝트 이름: Todo List

목표: 사용자들이 할 일을 효율적으로 관리할 수 있는 Todo List 웹 애플리케이션을 개발한다. 기본적인 할 일 관리 기능뿐만 아니라, 카테고리 분류, 검색 등 다양한 기능을 제공하여 사용자가 직관적으로 할 일을 관리할 수 있도록 한다.

2. 기본 요구사항

2.1. 할 일 입력 공간

  • 설명: 사용자가 새로운 할 일을 추가할 수 있는 입력 필드를 제공한다.
  • 구현 요소:
    • 입력 필드 (text)
    • 추가 버튼 (클릭 시 할 일이 목록에 추가됨)

2.2. 할 일 추가, 삭제, 수정 기능

  • 설명: 각 할 일 항목에 대해 추가, 삭제, 수정을 할 수 있는 기능을 제공한다.
  • 구현 요소:
    • 할 일 항목마다 수정 버튼, 삭제 버튼 제공
    • 수정 기능:
      • 수정 팝업 또는 수정 페이지에서 수정 가능
    • 삭제 기능:
      • 삭제 버튼 클릭 시 해당 할 일을 삭제

2.3. 할 일 목록 리스트

  • 설명: 추가된 할 일들이 리스트로 표시된다.
  • 구현 요소:
    • 할 일 목록 리스트는 사용자가 쉽게 확인할 수 있는 형태로 표시
    • 드래그앤드롭 순서 변경 기능: 사용자가 할 일의 우선순위를 쉽게 조정할 수 있도록, 할 일을 드래그앤드롭하여 목록 순서를 변경할 수 있는 기능 구현

2.4. 할 일 목록 데이터 저장 (서버 미구축 시)

  • 설명: 서버를 구축하지 않은 경우, 할 일 목록의 데이터를 Local Storage에 저장하여 새로고침 후에도 데이터가 유지되도록 한다.

2.5. 할 일 title 검색 기능

  • 설명: 사용자가 입력한 키워드로 할 일 목록에서 해당 키워드가 포함된 항목을 검색할 수 있는 기능 제공
  • 구현 요소:
    • 검색 입력 필드 및 검색 버튼
    • 할 일 목록에서 해당 키워드가 포함된 항목을 검색할 수 있는 기능

3. 보너스 요구사항

3.1. 서버 데이터 구축 및 관리

  • 설명: 서버를 구축하여 데이터를 중앙에서 관리할 수 있도록 한다. 서버 API를 통해 할 일의 추가, 삭제, 수정, 조회 기능을 구현한다.
  • 구현

3.2. 완료된 할 일 및 미완료 할 일 분류

  • 설명: 사용자가 완료한 할 일과 아직 완료하지 않은 할 일을 구분하여 볼 수 있는 기능 제공
  • 구현 방법:
    • 별도의 섹션(완료/미완료)으로 구분

3.3. 카테고리 분류 기능

  • 설명: 할 일에 카테고리를 부여하여 할 일 목록을 분류할 수 있는 기능 제공
    • 예시 카테고리: 오늘 할일, 간단한 메모, 완료
  • 구현 요소:
    • 할 일 입력 시 카테고리 선택 가능하도록 select 요소 제공
    • 카테고리 선택 시 해당 카테고리에 해당하는 할 일만 목록에 표시

3.4. 카테고리 선택 후 검색 필터링 기능

  • 설명: 카테고리 옵션과 검색 키워드를 함께 활용하여 필터링된 할 일 목록을 제공하는 기능 구현
  • 구현 요소:
    • 카테고리 선택 필드 (select)
    • 검색 필드 (text) 및 검색 버튼

3.5. 보너스 기능 추가에 따른 UI 변경

  • 기능 추가에 따른 UI 추가는 공통 UI 활용하기.
    • 예: 할일 항목 뷰 팝업 안에 edit 버튼 / 완료 or 미완료 토글 버튼

3.6. API 명세 📌

3.6.1. Todo 항목 생성하기

  • HTTP 메소드: POST
  • URL: /todos
  • Request Body 예시: 
    {
  "title": "새 Todo 제목",
  "description": "Todo 내용",
  "category": "category"
}
  • Response 예시: 
    {
  "id": "생성된 Todo ID",
  "title": "새 Todo 제목",
  "description": "Todo 내용",
  "category": "category",
  "createdAt": "2024-08-18T00:00:00Z",
  "updatedAt": "2024-08-18T00:00:00Z"
}

3.6.2. Todo 전체 목록 조회

  • HTTP 메소드: GET
  • URL: /todos
  • Response 예시: 
    [
  {
    "id": "1",
    "title": "첫 번째 Todo",
    "description": "할 일 내용",
    "category": "category",
    "createdAt": "2024-08-18T00:00:00Z",
    "updatedAt": "2024-08-18T00:00:00Z"
  },
  {
    "id": "2",
    "title": "두 번째 Todo",
    "description": "할 일 내용",
    "category": "category",
    "createdAt": "2024-08-18T00:00:00Z",
    "updatedAt": "2024-08-18T00:00:00Z"
  }
]

3.6.3. 특정 Todo 검색

  • HTTP 메소드: GET
  • URL: /todos/{todoId}
  • Response 예시: 
    {
  "id": "1",
  "title": "첫 번째 Todo",
  "description": "할 일 내용",
  "category": "category",
  "createdAt": "2024-08-18T00:00:00Z",
  "updatedAt": "2024-08-18T00:00:00Z"
}

3.6.4. Todo 항목 수정하기

  • HTTP 메소드: PUT
  • URL: /todos/{todoId}
  • Request Body 예시: 
    {
  "title": "수정된 제목",
  "description": "수정된 내용",
  "category": "category"
}
  • Response 예시: 
    {
  "id": "1",
  "title": "수정된 제목",
  "description": "수정된 내용",
  "category": "category",
  "createdAt": "2024-08-18T00:00:00Z",
  "updatedAt": "2024-08-18T01:00:00Z"
}

3.6.5. Todo 항목 삭제

  • HTTP 메소드: DELETE
  • URL: /todos/{todoId}
  • Description: 지정한 Todo 항목을 삭제합니다.

4. 화면 설계서

1. 메인 화면

#1 MAIN (Light scheme) (16)

1-1. 상단 : 새 할일 추가 영역

  • 화면 설명: 할 일 입력 필드 및 추가 버튼

  • 유효성 체크: 필수 입력 값 모두 입력 후 add 버튼 클릭 시 저장(POST)

    1-1-1. 플러스 버튼 (보너스): 새 할일 버튼 따로 구현한다면, 기존 new ToDo 영역 (1-1. 화면 상단 부분)은 없어지고 플러스 버튼 클릭 시 NewToDo 모달창으로 구현함.

1-2. 중앙 : 검색 영역

  • 화면 설명: 할 일 목록 검색 및 카테고리 필터링 영역. 검색 값과 카테고리 선택 값에 따라 1-3. 할일 목록 영역의 할 일 데이터 변경.
  • 유효성 체크:
    • 검색 값 미 입력 혹은 온전한 문자가 아닌 경우, 알림 문구 & 검색 안 되고 전체 리스트 보임.

1-3. 할 일 목록 영역

1-3-1. 각 할 일 항목 오른쪽 영역

  • 수정 및 삭제 버튼
    • 수정 클릭 시 수정 팝업에서 할 일 수정 가능 (UPDATE)
    • 삭제 버튼 클릭 시 할 일 항목 삭제 (DELETE)

1-3-2. 할 일 항목 왼쪽 영역

  • 할 일 순서 변경을 위한 드래그앤드롭 그렙 영역
    • 그렙 영역 드래그앤드롭해서 할 일 항목 순서 변경 가능
  • 할 일 완료 여부 체크박스
    • 할 일을 완료했을 때 체크박스를 통해 완료 표시
    • 완료된 할 일과 미완료된 할 일을 시각적으로 구분

1-3-3. 할 일 미등록 시, 할 일 목록 영역 empty 이미지 or 문구 표시

#1 MAIN (Light scheme) (14) (1)

2. 수정 팝업(페이지)

image

  • 화면 설명: 사용자가 할 일을 수정할 수 있는 입력 필드 및 저장 버튼 제공
  • 유효성 체크: 할 일 수정 시 필수 입력값 모두 입력 후 save 버튼 클릭 시 저장(UPDATE)

3. 연동 흐름도(Flow Chart)

image (1)

5. 기술 스택

  • 프론트엔드:
    • HTML: 웹 페이지 구조 정의
    • CSS: 스타일과 레이아웃 설계
    • JavaScript: 동적 기능 구현
    • EJS (보너스): 서버에서 데이터를 템플릿에 삽입하여 HTML 동적 생성
  • 백엔드 (보너스):
    • Node.js: 서버 사이드 JavaScript 실행 런타임 환경
    • Express: Node.js를 위한 웹 애플리케이션 프레임워크, API 및 서버 로직 처리
  • 데이터베이스 (보너스):
    • MongoDB: NoSQL 데이터베이스, JSON 유사 데이터 저장
    • MySQL: 관계형 데이터베이스 관리 시스템(RDBMS), 구조화된 데이터 저장 (선택 사항)
  • 데이터 저장 (서버 미구축 시):
    • Local Storage: 브라우저에 클라이언트 측 데이터 저장, 새로고침 후 데이터 유지
  • 기타 라이브러리 (보너스):
    • axios: HTTP 요청 처리 클라이언트 라이브러리
    • body-parser: 요청 본문 구문 분석하여 서버에서 처리
    • cors: 다른 출처의 요청 허용/제한 미들웨어
    • dotenv: 환경 변수 관리 및 비밀 정보 저장
    • mongoose: MongoDB 데이터 모델링 지원 ODM(Object Data Modeling) 라이브러리
    • nodemon: 파일 변경 시 자동으로 서버 재시작

6. 프로젝트 일정(2일 소요)

  • 기획 및 설계: 2024.08.18
  • 프론트엔드 개발: 2024.08.19
  • 백엔드 개발 (보너스): 2024.08.20
  • 테스트 및 디버깅: 2024.08.20

추가 고려 사항

  • 기능 우선순위: 필수 요구사항을 우선적으로 개발하고, 보너스 요구사항은 시간에 따라 구현 여부를 결정합니다.
  • 반응형 디자인: 다양한 기기에서의 사용성을 고려하여 CSS 미디어 쿼리 등을 사용하여 디자인을 조정합니다.

About

할 일 관리 웹 애플리케이션

sub-todo-list-app.vercel.app/todos

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages