VIBE Coding 원데이 클래스

소프트웨어 개발자를 위한 현대적이고 전문적인 개인 포트폴리오 웹사이트를 만들어주세요. 다음 정보와 섹션들을 포함해 주세요: 개인 정보: - 이름: 홍길동 - 직책: 프론트엔드 개발자 - LinkedIn: hong-gildong - 이메일: hong@example.com 웹사이트 섹션: 1. 히어로 섹션 - 위의 이름과 직책과 프로필 사진을 사용한 간단한 소개 2. 소개 섹션 - 상세한 자기소개 3. 프로젝트 포트폴리오 - 3-4개의 프로젝트 카드 예시: - 개인 포트폴리오 웹사이트 (TypeScript, Next.js, Tailwind CSS) - TODO 리스트 앱 (React, Replit DB) - 데이터 시각화 대시보드 (React, API) - 팀 프로젝트 (협업 도구 사용) 4. 경력 및 교육 이력 5. 연락처 섹션 - LinkedIn 링크와 이메일 포함 기술 스택: - JavaScript - Next.js: React 기반 풀스택 웹 프레임워크 - Tailwind CSS: 유틸리티 우선 CSS 프레임워크 디자인 요구사항: - 깔끔하고 현대적인 디자인 (파란색, 회색 계열) - 모바일, 태블릿, 데스크톱에서 완전 반응형 - 부드러운 애니메이션과 호버 효과 - 다크/라이트 모드 전환 기능 - 섹션으로 스크롤하는 네비게이션 메뉴 - 'Poppins' 헤드라인 폰트와 'PT Sans' 본문 폰트 사용 - 깊이감을 주는 그라데이션과 그림자 효과

개인 생산성 추적 대시보드를 만들어주세요. ## Goal & Vision **목표**: 개인의 일일 업무와 목표를 체계적으로 관리하고 성과를 시각적으로 추적할 수 있는 스마트 대시보드 구축 **비전**: 데이터 기반의 자기 관리를 통해 지속적인 개인 성장과 생산성 향상을 실현 ## 핵심 가치 - **자기 인식**: 본인의 업무 패턴과 생산성 습관 파악 - **목표 지향**: 명확한 목표 설정과 달성 과정 추적 - **지속적 개선**: 데이터 기반의 개인 성과 분석과 개선 - **동기 부여**: 성취감과 진전을 시각적으로 확인 ## 주요 기능 1. **구글 로그인 시스템** - Replit Auth를 활용한 구글 OAuth 간편 로그인 - "구글로 로그인" 버튼 구현 (Replit Auth 내장 기능 사용) - 로그인 상태 관리 (React useState) - 로그아웃 기능 - 구글 계정 정보로 개인 데이터 저장 2. **할 일(Task) 관리** - 새 할 일 추가 입력창 - 할 일 제목, 중요도(1-5), 예상 소요시간 입력 - 할 일 목록 표시 (진행중/완료 구분) - 체크박스로 완료 처리 - 완료 시간 자동 기록 - 할 일 수정/삭제 기능 3. **실시간 통계 업데이트** - 할 일 완료할 때마다 통계 자동 갱신 - 오늘 완료한 할 일 수 - 총 소요시간 누적 - 평균 완료 시간 - 중요도별 완료 분포 - 주간/월간 성과 비교 4. **데이터 저장 및 조회** - Replit Database 사용해서 개인 데이터 저장 - 완료된 할 일 히스토리 조회 - 날짜별 개인 성과 기록 - 데이터 수정/삭제 기능 - 데이터 백업 및 복원 5. **개인 데이터 시각화** - 라인 차트: 일별 완료 할 일 수 트렌드 - 바 차트: 중요도별 완료 분포 - 도넛 차트: 오늘의 진행률 (완료/전체) - 히트맵: 시간대별 생산성 패턴 - 주간/월간 성과 비교 차트 6. **개인 인사이트 및 분석** - 현재 진행률 실시간 표시 - 평균 완료 시간 분석 - 가장 생산적인 시간대 분석 - 완료 시 축하 메시지와 애니메이션 - 일일/주간 목표 달성률 - 개인 성장 트렌드 분석 - 생산성 향상 팁 제공 ## 기술 요구사항 - React 사용 (useState로 실시간 상태 관리) - Tailwind CSS로 스타일링 - Replit Database로 데이터 저장 - Replit Auth로 구글 로그인 구현 - 반응형 디자인 (모바일 지원) - 현대적이고 깔끔한 UI/UX - 실시간 업데이트와 애니메이션 - 로그인 상태에 따른 조건부 렌더링 ## 데이터베이스 구조 - users: {googleId, email, name, profileImage, createdAt} - tasks: {id, userId, title, priority, estimatedTime, completed, completedAt, createdAt} - dailyStats: {id, userId, date, completedTasks, totalTime, productivity} - goals: {id, userId, title, targetDate, completed, createdAt} ## 디자인 - 색상: 파란색, 보라색 계열의 그라데이션 - 로그인 페이지: 깔끔한 중앙 정렬 폼 - 개인 대시보드: 카드 기반 레이아웃 - 부드러운 그림자와 rounded 모서리 - 할 일 완료 시 체크 애니메이션과 축하 효과 - 실시간 카운터 애니메이션 - 프로필 이미지와 개인 상태 표시 - 성과 차트와 진행률 표시 - 개인 목표 달성 축하 애니메이션 - 헤더에 사용자 정보, 목표, 로그아웃 버튼 ## 초기 설정 1. 첫 화면에 구글 로그인 버튼 표시 2. 구글 로그인 성공 시 개인 대시보드 화면으로 전환 3. 구글 계정 정보로 사용자 프로필 표시 4. 첫 로그인 시 환영 메시지와 사용법 안내 5. 예시 할 일 데이터 (첫 로그인 시 자동 생성): - "프로젝트 기획서 작성" (중요도: 5, 예상시간: 2시간) - "이메일 답변" (중요도: 3, 예상시간: 30분) - "운동하기" (중요도: 4, 예상시간: 1시간) - "독서 30분" (중요도: 3, 예상시간: 30분) 6. 기본 목표 설정: "오늘 할 일 4개 모두 완료하기" 시작해주세요!