매일 체크하면 잔디가 자라요 🌱 — 잔디 습관 트래커 만들었어요

안녕하세요! 😊 요즘 습관 하나 꾸준히 하는 게 왜 이렇게 어려운지… 작심삼일이 기본값이더라고요. 그래서 "눈에 보이면 좀 덜 게으르지 않을까?" 싶어서 만들어봤어요. 매일 한 칸씩 체크하면 GitHub 잔디처럼 초록으로 차오르는 잔디 습관 트래커입니다. 🌱

칸이 점점 진해지는 걸 보고 있으면 괜히 뿌듯하고, "이 연속 끊기 아깝다…" 싶어서 한 번 더 하게 되더라고요. 저처럼 동기부여가 잘 안 되는 분들께 딱이에요.

주요 기능

• 🟩 습관별 GitHub 잔디 히트맵 — 최근 약 6개월을 요일 × 주 그리드로 보여줘요. 한 해의 흐름이 한눈에 들어와요.
• 🔥 연속(streak)에 따라 칸이 진해져요 — 며칠 연속 채울수록 색이 짙어져서, 멀리서 봐도 "요즘 열심히 했구나"가 보여요.
• 🏆 현재 연속 + 최장 기록 — 카드마다 지금 며칠째인지, 내 최고 기록은 며칠인지 같이 보여줘요. 기록 깨는 재미가 쏠쏠해요.
• ✅ 오늘 칸 클릭 / "오늘 체크" 버튼 — 오늘 칸(흰 테두리)을 누르거나 버튼으로 완료/취소를 토글해요.
• 📊 오늘 N/M 완료 진행 바 — 오늘 전체 습관 중 몇 개를 끝냈는지 달성률로 보여줘서, 마지막 한 개를 채우고 싶게 만들어요.
• ➕ 이름 + 이모지 + 색상(8종)으로 습관 추가/삭제 — 운동은 초록, 독서는 파랑처럼 내 맘대로 꾸밀 수 있어요.
• 💬 칸에 마우스 올리면 날짜·완료 여부 툴팁 이 떠요.

처음 켜면 예시 습관 3개(운동 🏃 · 독서 📖 · 명상 🧘)와 5개월치 샘플 잔디가 미리 채워져 있어서, 설명 안 봐도 "아 이런 느낌이구나" 바로 와닿아요.

모바일에서도 깔끔하게 잘 나와요. 📱

기술 이야기

• Next.js(App Router) + TypeScript 로 만들었어요. 가볍고 빠르게 띄우기 좋더라고요.
• 스타일은 Tailwind CSS v4 로, 다크 테마 + 반응형을 빠르게 잡았어요.
• 가장 공들인 건 잔디 히트맵을 차트 라이브러리 없이 직접 구현한 부분이에요. 외부 라이브러리 안 쓰고 요일 × 주 그리드와 강도 단계를 직접 그렸더니 번들도 가볍고, 색상·간격을 원하는 대로 조절할 수 있었어요.
• 서버도 로그인도 없어요. 데이터는 브라우저 localStorage 에만 저장돼서, 그냥 켜면 바로 내 잔디밭이에요. (서버리스라 배포도 간편 😎)

작게 시작해서 꾸준히, 오늘도 한 칸! 직접 한 번 채워보세요 👇

• 🔗 라이브 데모: https://habit-grass.vercel.app
• 💻 GitHub: https://github.com/seokjinjeong-cod/habit-grass