네이버 웨일 브라우저 사이드바용 스마트워치 스타일 위젯 대시보드
Whale Dashboard는 듀얼 모니터 환경(27인치 QHD)을 위한 네이버 웨일 브라우저 사이드바 확장앱입니다. 보조 모니터의 사이드바를 상시 활용하여 시계, 할 일 관리, 타이머 등 다양한 위젯을 자유롭게 배치하고 관리할 수 있습니다.
- 듀얼 모니터 최적화: 27인치 QHD 듀얼 모니터 환경에서 보조 모니터의 사이드바를 항상 켜두고 활용
- 생산성 향상: 시계, 할 일, 타이머 등 자주 확인하는 정보를 한눈에 파악
- 커스터마이징: 각 위젯의 위치, 크기, 스타일을 자유롭게 조정 가능
- 확장성: 추후 다양한 위젯 추가 예정 (클립보드, AI 어시스턴트, 음성 검색 등)
- 자유로운 배치: 드래그 앤 드롭으로 위젯 위치 조정
- 크기 조정: 각 위젯의 크기를 자유롭게 변경 (비율 유지)
- 실시간 경계 피드백: 캔버스 경계에 도달하면 시각적 피드백 제공
- 위젯별 설정: 각 위젯 타입별 전역 설정 (색상, 투명도, 세부 옵션)
- 아날로그/디지털 모드: 취향에 따라 선택
- 시간 형식: 12시간/24시간 형식 지원
- 초 표시: 초 단위 표시 ON/OFF
- 색상 커스터마이징: 시계 색상 자유 변경
향후 계획:
- 여러 시간대 표시 (도쿄, 뉴욕, 런던 등)
- 세계 시계 위젯으로 확장
- 간단한 체크리스트: 빠른 할 일 추가 및 체크
- 투명도 조절: 배경 투명도 설정 가능
- 색상 테마: 위젯 색상 커스터마이징
향후 계획:
- 우선순위 설정
- 카테고리 분류
- 마감일 및 알림 기능
- 반복 작업 설정
- 포모도로 타이머: 25분 기본 설정 (커스터마이징 가능)
- 다양한 시간 프리셋: 5분, 15분, 25분, 30분, 45분, 60분
- 알림 기능: 타이머 종료 시 알림
향후 계획:
- 포모도로 사이클 자동 관리 (작업 25분 → 휴식 5분 → 반복)
- 세션 통계 및 기록
- 커스텀 타이머 저장
- 음향 효과 및 알림 커스터마이징
- 월간 뷰: 현재 월의 날짜 표시
- 주 시작 요일: 일요일/월요일 선택 가능
- 오늘 강조: 현재 날짜 하이라이트
향후 계획:
- 일정 추가 및 관리
- Google Calendar 연동
- 이벤트 알림
- 주간/일간 뷰 추가
- 자주 방문하는 사이트: 빠른 접근 링크 모음
- 커스텀 아이콘: 사이트별 아이콘 표시
향후 계획:
- 웨일 브라우저 북마크 동기화
- 폴더 구조 지원
- 드래그 앤 드롭 정렬
- 커스텀 북마크 그룹
- 프레임워크: React 18
- 언어: TypeScript
- 빌드 도구: Vite
- 스타일링: Tailwind CSS
- 상태 관리: Zustand (with persist middleware)
- 드래그 앤 드롭: @dnd-kit/core
- 패키지 매니저: pnpm
- 아키텍처: FSD (Feature-Sliced Design)
src/
├── app/ # 앱 초기화 및 전역 설정
├── pages/ # 페이지 컴포넌트
│ └── sidebar/ # 사이드바 페이지
├── widgets/ # 위젯 컴포넌트
│ ├── dashboard/ # 대시보드 캔버스 및 래퍼
│ ├── clock/ # 시계 위젯
│ ├── todo/ # 할 일 위젯
│ ├── timer/ # 타이머 위젯
│ ├── calendar/ # 캘린더 위젯
│ └── bookmarks/ # 북마크 위젯
├── features/ # 기능 단위 컴포넌트
│ ├── add-widget/ # 위젯 추가 기능
│ ├── widget-settings/ # 위젯 설정 기능
│ └── settings/ # 전역 설정
├── entities/ # 비즈니스 엔티티
│ └── widget/ # 위젯 관련 타입 및 설정
└── shared/ # 공유 리소스
├── ui/ # 공통 UI 컴포넌트
├── store/ # Zustand 스토어
└── lib/ # 유틸리티 함수
- 컴포넌트: PascalCase
- 훅: useCamelCase
- Path Alias:
@app,@pages,@widgets,@features,@entities,@shared
- Node.js 18 이상
- pnpm 8 이상
- 네이버 웨일 브라우저
# 의존성 설치
pnpm install
# 개발 서버 실행
pnpm dev
# 프로덕션 빌드
pnpm build- 프로젝트 빌드 (
pnpm build) - 웨일 브라우저에서
whale://extensions접속 - "개발자 모드" 활성화
- "압축해제된 확장 앱 로드" 클릭
- 프로젝트의
dist폴더 선택
- 우측 하단의
+버튼 클릭 - 원하는 위젯 타입 선택
- 추가된 위젯이 캔버스에 나타남
- 위젯을 드래그하여 원하는 위치로 이동
- 캔버스 경계에 도달하면 시각적 피드백 제공
- 위젯 우측 하단의 파란색 삼각형 핸들을 드래그
- 비율을 유지하며 크기 조정
- 우측 상단의 설정 버튼 클릭
- 설정하려는 위젯 클릭 (파란색 테두리로 선택 표시)
- 하단 설정 패널에서 옵션 조정
- 색상 변경
- 투명도 조절 (지원하는 위젯만)
- 위젯별 세부 설정
- 설정 모드에서 위젯 선택
- 하단 설정 패널의 "위젯 삭제" 버튼 클릭
- 즉시 삭제되며 다른 위젯이 자동으로 선택됨
- 클립보드 관리: 복사한 텍스트/이미지 히스토리 관리
- AI 어시스턴트: Claude/ChatGPT 연동 빠른 질문 응답
- 음성 검색: 음성으로 구글 검색 실행
- 메모장: 간단한 메모 작성 및 저장
- 날씨: 현재 위치 기반 날씨 정보
- 환율/주가: 실시간 환율 및 주가 정보
- RSS 리더: 즐겨찾는 블로그/뉴스 피드
- 음악 플레이어: Spotify/YouTube Music 컨트롤
- 여러 시간대 동시 표시
- 세계 시계 위젯
- 알람 기능
- 우선순위 및 카테고리
- 마감일 및 알림
- 반복 작업
- 통계 및 완료율
- 포모도로 사이클 자동 관리
- 세션 통계
- 커스텀 타이머 프리셋
- 음향 효과 커스터마이징
- Google Calendar 연동
- 일정 추가/수정/삭제
- 주간/일간 뷰
- 이벤트 알림
- 웨일 브라우저 동기화
- 폴더 구조 지원
- 드래그 정렬
- 커스텀 그룹
- 위젯 템플릿 저장/불러오기
- 데이터 백업/복원
- 키보드 단축키
- 다크 모드
- 위젯 잠금 (실수로 이동 방지)
기여는 언제나 환영합니다! 다음 절차를 따라주세요:
- 이 저장소를 Fork
- Feature 브랜치 생성 (
git checkout -b feature/AmazingFeature) - 변경사항 커밋 (
git commit -m 'Add some AmazingFeature') - 브랜치에 Push (
git push origin feature/AmazingFeature) - Pull Request 생성
- TypeScript strict 모드 준수
- ESLint 규칙 준수
- FSD 아키텍처 패턴 따르기
- 커밋 메시지는 명확하고 간결하게
MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.
프로젝트에 대한 질문이나 제안사항이 있으시면 이슈를 생성해주세요.
Note: 이 프로젝트는 현재 활발히 개발 중이며, 많은 기능들이 추가될 예정입니다.