🎉 Next.js로 Todo 앱 만들기 - 첫 번째 이야기

📋 프로젝트 개요

ADMIN 페이지에 LocalStorage 기반 Todo 앱 기능을 추가했습니다. PRD.MD 문서를 기반으로 모든 P1(최우선) 작업을 완료했습니다.

✅ 완료된 작업 (총 7개)

1. 기본 설정

• 프로젝트 폴더 구조 및 타입 정의 (lib/types.ts)
• LocalStorage 유틸리티 구현 (lib/storage.ts)

1. 핵심 기능

• useTodos 훅 구현 - CRUD 로직, 자동 저장

1. UI 컴포넌트

• TodoItem 컴포넌트 - 체크박스, 편집, 삭제
• TodoList 컴포넌트 - 리스트 렌더링
• NewTodoInput 컴포넌트 - 입력 폼

1. 통합

• TodoApp 메인 컴포넌트 생성
• ADMIN 페이지에 Todo 앱 통합

🚀 구현된 기능

• Todo CRUD (생성, 읽기, 수정, 삭제)
• 필터링 (All/Active/Completed)
• 실시간 검색 (대소문자 무시)
• LocalStorage 자동 저장 (250ms 쓰로틀링)
• Clear Completed 버튼
• 다크 모드 지원
• 반응형 디자인

📁 생성된 파일

• lib/types.ts
• lib/storage.ts
• hooks/useTodos.ts
• components/todo/TodoItem.tsx
• components/todo/TodoList.tsx
• components/todo/NewTodoInput.tsx
• components/todo/TodoApp.tsx
• app/admin/page.tsx (수정)

안녕하세요! 오늘은 정말 뿌듯한 하루였어요. 😊

블로그 관리자 페이지에 Todo 앱 기능을 추가하는 프로젝트를 시작했는데요, 생각보다 순조롭게 진행되어서 오늘 하루 만에 핵심 기능들을 모두 완성했답니다! 🎯

🌟 오늘의 여정

아침에 PRD 문서를 꼼꼼히 읽으면서 어떤 기능들이 필요한지 파악했어요. 처음엔 막연했는데, 하나씩 정리하다 보니 명확한 로드맵이 그려지더라고요.

가장 먼저 한 일은 Notion의 '프로젝트 작업 관리' 데이터베이스에 모든 작업들을 정리하는 것이었어요. 이렇게 하니까 전체 구조가 한눈에 보여서 정말 좋았어요! 📝

💡 구현하면서 배운 것들

1. TypeScript로 타입을 먼저 정의하니 개발이 훨씬 수월했어요

Todo 인터페이스와 AppStateV1 타입을 만들면서, '아, 이렇게 구조를 잡으니까 나중에 코드 작성할 때 자동완성이 잘 되겠다!' 하는 생각이 들었죠.

1. LocalStorage 쓰로틀링의 중요성을 실감했어요

사용자가 빠르게 타이핑할 때마다 저장하면 성능이 떨어질 수 있잖아요? 그래서 250ms 쓰로틀링을 적용했는데, 이게 정말 효과적이더라고요. 사용자 경험도 좋고, 브라우저 부담도 줄일 수 있어서 일석이조!

1. React Hooks의 매력을 다시 한번 느꼈어요

useTodos라는 커스텀 훅을 만들면서, 상태 관리 로직을 깔끔하게 분리할 수 있었어요. 컴포넌트는 UI만 신경 쓰고, 비즈니스 로직은 훅에서 처리하니까 코드가 정말 읽기 좋아졌답니다! 😄

🎨 UI 컴포넌트 만들기

컴포넌트를 만드는 과정이 정말 재미있었어요. 특히 TodoItem 컴포넌트에서 더블클릭으로 편집 모드로 전환되는 기능을 구현할 때, 사용자 입장에서 '이렇게 하면 편하겠다'는 생각을 계속 하면서 만들었어요.

Enter로 저장하고, Esc로 취소하고, 포커스를 벗어나면 자동 저장되는 것도 구현했는데, 이런 작은 디테일들이 사용자 경험을 크게 향상시키더라고요! ✨

🌙 다크 모드도 잊지 않았어요

요즘 다크 모드를 선호하는 분들이 많잖아요? 모든 컴포넌트에 다크 모드 스타일을 추가해서, 라이트 모드와 다크 모드 모두에서 예쁘게 보이도록 신경 썼어요. 🌓

특히 완료된 항목은 취소선과 함께 색상이 옅어지는데, 다크 모드에서도 자연스럽게 보이도록 색상을 조정했답니다!

🔍 필터링과 검색 기능

할 일이 많아지면 찾기 어렵잖아요? 그래서 세 가지 필터를 만들었어요:

• 전체: 모든 할 일을 볼 수 있어요
• 진행 중: 아직 완료하지 않은 할 일만 모아볼 수 있어요
• 완료: 다 끝낸 할 일들을 확인할 수 있어요 (뿌듯함 충전용! 😊)

검색 기능도 넣었는데, 대소문자 구분 없이 부분 검색이 가능하도록 했어요. '회의'라고 검색하면 '팀 회의 준비', '고객 회의 자료' 같은 항목들이 모두 나오는 식이죠!

💾 데이터는 안전하게!

LocalStorage를 활용해서 브라우저를 닫아도 데이터가 사라지지 않도록 만들었어요. 새로고침해도 걱정 없어요! 😌

그리고 혹시나 용량이 부족해서 저장이 안 될 수도 있잖아요? QuotaExceededError 같은 예외 상황도 대비해서 에러 처리를 꼼꼼히 해뒀답니다.

🎁 완료 항목 한 번에 정리!

완료된 할 일들이 쌓이면 리스트가 복잡해지잖아요? 그래서 'Clear Completed' 버튼을 만들었어요. 클릭 한 번으로 완료된 항목들을 깔끔하게 정리할 수 있답니다! 🧹

📱 모바일에서도 편하게

반응형 디자인을 적용해서 핸드폰으로 봐도 예쁘게 보여요. 작은 화면에서는 버튼 텍스트를 숨기고 아이콘만 보여주는 등 세심하게 신경 썼어요!

🤔 조금 어려웠던 점

사실 처음엔 편집 모드에서 포커스 처리가 좀 까다로웠어요. useRef와 useEffect를 조합해서 편집 모드로 전환될 때 자동으로 포커스가 가고, 텍스트가 전체 선택되도록 만들었는데, 이 부분이 생각보다 신경 쓸 게 많더라고요.

그래도 결국 잘 해결했고, 이제는 정말 부드럽게 동작해요! 💪

✨ 특별히 신경 쓴 부분

접근성을 정말 중요하게 생각했어요. 모든 인터랙티브 요소에 aria-label을 추가해서 스크린 리더 사용자분들도 편하게 쓸 수 있도록 했고, 키보드만으로도 모든 기능을 사용할 수 있게 만들었어요. 👍

그리고 사용자가 빈 문자열을 입력하려고 하면 자동으로 방지하고, 완료 버튼도 비활성화되는 등 작은 디테일들도 놓치지 않으려고 노력했답니다.

🎯 다음 단계는?

오늘은 P1(최우선) 작업들을 모두 완료했어요! 이제 기본적인 Todo 앱이 완성되었고, 실제로 사용할 수 있는 상태가 되었답니다.

다음에는 P2 작업들을 진행할 예정인데요:

• 검색에 디바운스 적용하기 (150ms)
• 모바일 레이아웃 더 세밀하게 최적화하기
• LocalStorage 사용이 불가능한 환경에서 메모리 폴백 구현하기
• 키보드 네비게이션 더 개선하기

🌈 마무리하며

오늘 하루 정말 알차게 개발했어요! PRD를 보면서 계획을 세우고, Notion으로 작업을 관리하면서 하나씩 완료해나가니까 성취감이 배가 되더라고요.

무엇보다 TypeScript와 React의 강력함을 다시 한번 느낄 수 있었고, 깔끔한 코드 구조의 중요성도 실감했어요.

내일도 화이팅! 🚀