Todo List Application 할 일 관리 애플리케이션 - gwk1231/Todo_list GitHub Wiki

📝 Todo List Application React와 Vite를 기반으로 한 나만의 할 일 관리 애플리케이션입니다. 드래그 앤 드롭, 실시간 날씨 정보, 통계 시각화 등 평소에 있었으면 좋겠다고 생각했던 기능을 핵심으로 넣었습니다.

✨ 주요 기능

🎯 할 일 관리

  • 드래그 앤 드롭: react-beautiful-dnd 오픈소스 소프트웨어를 사용한 직관적인 작업 이동
  • 처리 현황 보드: 할 일, 진행 중, 완료 3단계로 구성
  • 우선순위 설정: 높음, 중간, 낮음 3단계 우선순위
  • 마감일 설정: 날짜 선택을 통한 마감일 관리
  • 자동 정렬: 마감일과 우선순위 기반 자동 정렬

🌤️ 실시간 날씨 정보

  • OpenWeatherMap API: 실시간 날씨 데이터 제공
  • 위치 기반 날씨: 사용자의 현재 위치 기반 오픈 API 날씨 정보
  • 컴팩트한 디스플레이: Todo 컨테이너 우측 상단에 배치

📊 통계 및 시각화

  • Recharts 라이브러리: Recharts 오픈 소스 소프트웨어 사용
  • 상태별 통계: 할 일, 진행 중, 완료 상태별 파이 차트
  • 우선순위별 분석: 우선순위별 할 일 분포 막대 차트
  • 마감일 설정 비율: 마감일 설정 여부 통계

🎨 모던한 UI/UX

  • 다크 테마: 네온 디자인이 적용된 다크 테마
  • 트랜지션: 호버, 드래그, 전환 효과
  • 시각적 구분: 우선순위별 색상 구분 및 상태 표시

🛠️ 기술 스택

Frontend

  • React 18: 최신 React 기능 활용
  • Vite: 빠른 개발 서버 및 빌드 도구
  • CSS3: 커스텀 스타일링 및 애니메이션

오픈 소스 라이브러리

  • react-beautiful-dnd: 드래그 앤 드롭 기능
  • recharts: 데이터 시각화 차트
  • axios: HTTP 클라이언트
  • nanoid: 고유 ID 생성

개발 도구

  • ESLint: 코드 품질 관리
  • Vite: 모듈 번들러

📁 프로젝트 구조

src/ ├── components/ │ ├── TodoList.jsx # 메인 할 일 관리 컴포넌트 │ ├── TodoList.css # 할 일 목록 스타일 │ ├── TodoStats.jsx # 통계 시각화 컴포넌트 │ ├── TodoStats.css # 통계 차트 스타일 │ ├── WeatherWidget.jsx # 날씨 위젯 컴포넌트 │ └── WeatherWidget.css # 날씨 위젯 스타일 ├── App.jsx # 메인 앱 컴포넌트 ├── App.css # 전역 스타일 ├── main.jsx # 앱 진입점 └── index.css # 기본 스타일

🚀 시작하기

필수 요구사항

  • Node.js 16.0 이상
  • npm 또는 yarn

설치 및 실행

1.저장소 클론 git clone cd Todo_list

2.의존성 설치 npm install

3.개발 서버 실행 npm run dev

4.브라우저에서 확인 http://localhost:5173

빌드

프로덕션 빌드

npm run build

빌드 결과 미리보기

npm run preview

🔧 환경 설정 OpenWeatherMap API 날씨 기능을 사용하려면 OpenWeatherMap API 키가 필요합니다: 1.OpenWeatherMap에서 API 키 발급 2.src/components/WeatherWidget.jsx의 API_KEY 상수 수정

const API_KEY = 'your-api-key-here';

📱 사용법

할 일 추가 1.상단 입력 필드에 할 일 내용 입력 2.마감일 선택 (선택사항) 3.우선순위 설정 4."추가" 버튼 클릭 또는 Enter 키 입력

할 일 관리

  • 이동: 카드를 드래그하여 다른 컬럼으로 이동
  • 삭제: 각 카드의 "삭제" 버튼 클릭
  • 자동 정렬: 마감일과 우선순위에 따라 자동 정렬

통계 확인

  • 할 일 목록 하단의 통계 섹션에서 다양한 차트 확인
  • 상태별, 우선순위별, 마감일 설정 비율 등의 정보 제공

🎨 디자인 특징

색상 팔레트

  • 배경: 다크 그라데이션 (#0f172a → #1e293b)
  • 컨테이너: 슬레이트 계열 (#1e293b, #334155)
  • 텍스트: 밝은 회색 (#f1f5f9, #cbd5e1)
  • 액센트: 인디고/퍼플 계열 (#4f46e5, #6366f1)

우선순위 색상

  • 높음: 빨간색 (#ef4444)
  • 중간: 주황색 (#f59e0b)
  • 낮음: 초록색 (#10b981)

📹 Demo

Demo Video