🌱 루틴 체인 (Routine Chain)

작은 습관이 모여 위대한 변화를 만드는 과정을 돕는 간단한 습관 및 루틴 관리 웹 애플리케이션입니다. 사용자는 개별 습관을 등록하고, 여러 습관을 묶어 루틴을 생성하며, 매일의 진행 상황을 추적하고 통계를 확인할 수 있습니다.

✨ 주요 기능

• 사용자 인증: Google 계정을 통한 간편 로그인 및 로그아웃 기능을 제공합니다.
• 습관 관리: 새로운 습관을 추가하고, 목록에서 관리하며, 더 이상 필요 없는 습관을 삭제할 수 있습니다.
• 루틴 빌더: 여러 개의 습관을 묶어 하나의 루틴으로 생성하고 관리할 수 있습니다. 루틴의 순서를 변경하거나 수정, 삭제하는 기능도 지원합니다.
• 오늘의 할 일 (대시보드): 오늘 수행해야 할 루틴과 개별 습관들을 한눈에 보고 진행 상황을 체크할 수 있습니다.
• 통계: 월별 달력을 통해 일일 습관 달성률을 시각적으로 확인하고, 특정 날짜에 완료한 습관 내역을 상세히 볼 수 있습니다.
• 다국어 지원: 한국어와 영어를 모두 지원하며, 언제든지 언어를 전환할 수 있습니다.

🛠️ 기술 스택

• 프론트엔드: React, Vite
• 상태 관리: React Hooks
• 데이터베이스/인증: Firebase (Firestore, Authentication)
• 아이콘: Lucide React
• 스타일링: 인라인 스타일(Inline Styles) 및 CSS
• 언어: TypeScript, JavaScript (ESM)

🚀 시작하기

1. 프로젝트 클론

git clone https://github.com/your-username/my-routine-app.git
cd my-routine-app

2. 의존성 설치

프로젝트에 필요한 라이브러리들을 설치합니다.

npm install

3. Firebase 설정

Firebase 프로젝트를 생성하고 웹 앱을 추가한 뒤, 발급받은 firebaseConfig 객체를 src/routine/firebase.ts 파일에 설정해야 합니다.

참고: 현재 코드에는 Firebase 설정이 하드코딩되어 있으나, 실제 프로덕션 환경에서는 환경 변수나 별도의 설정 파일을 사용하는 것이 안전합니다.

4. 개발 서버 실행

다음 명령어를 실행하여 개발 서버를 시작합니다.

npm run dev

서버가 실행되면 브라우저에서 http://localhost:5173 (또는 Vite가 지정한 다른 포트)으로 접속할 수 있습니다.

📜 사용 가능한 스크립트

• npm run dev: 개발 모드로 Vite 서버를 실행합니다.
• npm run build: 프로덕션용으로 앱을 빌드합니다. 결과물은 dist 폴더에 생성됩니다.
• npm run lint: ESLint를 사용하여 코드 스타일을 검사하고 문제를 찾습니다.
• npm run preview: 프로덕션 빌드 결과물을 로컬에서 미리 확인합니다.