Skip to content

Commit 6994f1d

Browse files
parkcheolhongparkcheolhong
authored
Merge branch 'main' into copilot/fix-exit-code-1-error
2 parents ce74d0e + 77da5a2 commit 6994f1d

File tree

4 files changed

+933
-0
lines changed

4 files changed

+933
-0
lines changed

‎todo-app/README.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# 📝 할 일 목록 (To-Do List Application)
2+
3+
로컬 스토리지 기능을 갖춘 반응형 투두 리스트 웹 애플리케이션입니다.
4+
5+
## 🎯 주요 기능
6+
7+
### 기본 기능
8+
- ✅ **할 일 추가**: 새로운 할 일을 입력하고 추가
9+
- ✅ **완료 토글**: 체크박스로 완료/미완료 상태 변경
10+
- ✅ **할 일 삭제**: 개별 항목 삭제
11+
- ✅ **완료 항목 일괄 삭제**: 완료된 모든 항목을 한 번에 삭제
12+
- ✅ **로컬 스토리지**: 브라우저를 닫아도 데이터 유지
13+
14+
### 추가 기능
15+
- 📊 **통계 표시**: 전체/진행중/완료 개수 실시간 표시
16+
- 🔍 **필터링**: 전체/진행중/완료 항목 필터링
17+
- ✏️ **할 일 수정**: 기존 항목 내용 수정
18+
- 📱 **반응형 디자인**: 모바일, 태블릿, 데스크톱 최적화
19+
20+
## 🚀 사용 방법
21+
22+
### 설치 및 실행
23+
1. 웹 브라우저에서 `index.html` 파일을 엽니다
24+
2. 또는 로컬 서버를 실행합니다:
25+
```bash
26+
# Python 3 사용
27+
python3 -m http.server 8080
28+
29+
# 브라우저에서 http://localhost:8080 접속
30+
```
31+
32+
### 기능 사용법
33+
34+
#### 할 일 추가
35+
1. 상단 입력 필드에 할 일을 입력합니다
36+
2. "추가" 버튼을 클릭하거나 Enter 키를 누릅니다
37+
3. 빈 항목은 추가할 수 없습니다
38+
39+
#### 할 일 완료 표시
40+
- 각 항목의 체크박스를 클릭하여 완료/미완료 토글
41+
- 완료된 항목은 취소선과 흐린 색상으로 표시됩니다
42+
43+
#### 할 일 수정
44+
1. 항목의 "수정" 버튼을 클릭합니다
45+
2. 텍스트를 수정합니다
46+
3. "저장" 버튼을 클릭하거나 Enter 키를 누릅니다
47+
4. "취소" 버튼 또는 ESC 키로 취소할 수 있습니다
48+
49+
#### 할 일 삭제
50+
- 개별 삭제: 항목의 "삭제" 버튼 클릭
51+
- 일괄 삭제: 하단의 "완료된 항목 모두 삭제" 버튼 클릭
52+
53+
#### 필터링
54+
- **전체**: 모든 항목 표시
55+
- **진행중**: 미완료 항목만 표시
56+
- **완료**: 완료된 항목만 표시
57+
58+
## 🛠️ 기술 스택
59+
60+
- **HTML5**: 시맨틱 마크업
61+
- **CSS3**:
62+
- Flexbox & Grid 레이아웃
63+
- CSS 애니메이션
64+
- 반응형 미디어 쿼리
65+
- 그라디언트 배경
66+
- **Vanilla JavaScript**:
67+
- ES6+ 문법
68+
- LocalStorage API
69+
- DOM 조작
70+
- 이벤트 처리
71+
72+
## 📁 파일 구조
73+
74+
```
75+
todo-app/
76+
├── index.html # HTML 구조
77+
├── styles.css # 스타일시트
78+
├── script.js # JavaScript 로직
79+
└── README.md # 문서
80+
```
81+
82+
## 💾 데이터 저장
83+
84+
### LocalStorage 구조
85+
```javascript
86+
{
87+
"todos": [
88+
{
89+
"id": 1702518000000,
90+
"text": "프로젝트 문서 작성하기",
91+
"completed": false,
92+
"createdAt": "2025-12-14T03:40:00.000Z"
93+
}
94+
]
95+
}
96+
```
97+
98+
- **키**: `todos`
99+
- **형식**: JSON 배열
100+
- **속성**:
101+
- `id`: 타임스탬프 기반 고유 ID
102+
- `text`: 할 일 내용
103+
- `completed`: 완료 여부
104+
- `createdAt`: 생성 일시
105+
106+
## 🎨 UI/UX 특징
107+
108+
- **직관적인 인터페이스**: 명확한 버튼과 아이콘
109+
- **시각적 피드백**: 호버, 클릭 애니메이션
110+
- **색상 코딩**:
111+
- 파란색: 주요 액션
112+
- 노란색: 수정
113+
- 빨간색: 삭제
114+
- **빈 상태 표시**: 할 일이 없을 때 안내 메시지
115+
- **확인 다이얼로그**: 삭제 시 확인 요청
116+
117+
## 📱 반응형 브레이크포인트
118+
119+
- **데스크톱**: > 600px
120+
- **태블릿**: 400px - 600px
121+
- **모바일**: < 400px
122+
123+
## ⚠️ 브라우저 호환성
124+
125+
- Chrome (권장)
126+
- Firefox
127+
- Safari
128+
- Edge
129+
- 최신 브라우저에서 최적화됨
130+
131+
## 🔒 보안 고려사항
132+
133+
- XSS 방지: `textContent` 사용
134+
- 입력 검증: 빈 값 차단
135+
- LocalStorage 에러 처리
136+
137+
## 📝 라이선스
138+
139+
이 프로젝트는 MIT 라이선스를 따릅니다.
140+
141+
## 🤝 기여
142+
143+
버그 리포트와 기능 제안은 언제나 환영합니다!

‎todo-app/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>할 일 목록 (To-Do List)</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<h1>📝 할 일 목록</h1>
13+
</header>
14+
15+
<div class="input-section">
16+
<form id="todo-form">
17+
<input
18+
type="text"
19+
id="todo-input"
20+
placeholder="새로운 할 일을 입력하세요..."
21+
autocomplete="off"
22+
required
23+
>
24+
<button type="submit" class="btn-add">추가</button>
25+
</form>
26+
</div>
27+
28+
<div class="filter-section">
29+
<button class="filter-btn active" data-filter="all">전체</button>
30+
<button class="filter-btn" data-filter="active">진행중</button>
31+
<button class="filter-btn" data-filter="completed">완료</button>
32+
</div>
33+
34+
<div class="stats-section">
35+
<div class="stat-item">
36+
<span class="stat-label">전체</span>
37+
<span class="stat-value" id="total-count">0</span>
38+
</div>
39+
<div class="stat-item">
40+
<span class="stat-label">진행중</span>
41+
<span class="stat-value" id="active-count">0</span>
42+
</div>
43+
<div class="stat-item">
44+
<span class="stat-label">완료</span>
45+
<span class="stat-value" id="completed-count">0</span>
46+
</div>
47+
</div>
48+
49+
<div class="todo-list-container">
50+
<ul id="todo-list" class="todo-list">
51+
<!-- 할 일 항목이 여기에 동적으로 추가됩니다 -->
52+
</ul>
53+
<div class="empty-state" id="empty-state">
54+
<p>📋 할 일이 없습니다.</p>
55+
<p>위에 새로운 할 일을 추가해보세요!</p>
56+
</div>
57+
</div>
58+
59+
<div class="actions-section">
60+
<button id="clear-completed" class="btn-clear">완료된 항목 모두 삭제</button>
61+
</div>
62+
</div>
63+
64+
<script src="script.js"></script>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)