{"id":49820370,"url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_tomado_fe","last_synced_at":"2026-05-13T10:06:59.221Z","repository":{"id":344544898,"uuid":"1180527845","full_name":"prgrms-fullcycle-devcourse/webfull_9_10_Tomado_FE","owner":"prgrms-fullcycle-devcourse","description":"프로그래머스 웹 풀스택 9기 10회차 토마두 FE","archived":false,"fork":false,"pushed_at":"2026-04-15T05:58:31.000Z","size":51966,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-04-15T06:28:45.153Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tomado-dev.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prgrms-fullcycle-devcourse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-13T06:06:33.000Z","updated_at":"2026-04-15T04:31:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_Tomado_FE","commit_stats":null,"previous_names":["prgrms-fullcycle-devcourse/webfull_9_10_tomado_fe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prgrms-fullcycle-devcourse/webfull_9_10_Tomado_FE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_Tomado_FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_Tomado_FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_Tomado_FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_Tomado_FE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prgrms-fullcycle-devcourse","download_url":"https://codeload.github.com/prgrms-fullcycle-devcourse/webfull_9_10_Tomado_FE/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_Tomado_FE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32977384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T06:31:55.726Z","status":"ssl_error","status_checked_at":"2026-05-13T06:31:51.336Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-13T10:06:33.382Z","updated_at":"2026-05-13T10:06:59.214Z","avatar_url":"https://github.com/prgrms-fullcycle-devcourse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tomado Frontend\n\nTomado는 포모도로 타이머, 집중 모드, Todo, Daily Log, Dashboard를 하나의 흐름으로 연결한 생산성 웹 애플리케이션입니다.  \n이 저장소는 Tomado 프론트엔드 구현을 담고 있으며, 사용자에게는 \"집중 시작부터 기록 회고까지 이어지는 루틴 경험\"을 제공하고, 개발 관점에서는 도메인 중심 구조와 상태 분리를 바탕으로 확장 가능한 프론트엔드 아키텍처를 목표로 했습니다.\n\n## Links\n\n- 서비스: [tomado-dev.vercel.app](https://tomado-dev.vercel.app/)\n- Swagger UI: [webfull-9-10-tomado-be.onrender.com/api-docs](https://webfull-9-10-tomado-be.onrender.com/api-docs/)\n- 백엔드 레포지토리: [webfull_9_10_Tomado_BE](https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_Tomado_BE)\n\n## What We Built\n\n- 포모도로 타이머와 세션 전환 흐름\n- 전체 화면 기반 Focus Mode\n- 날짜 기반 Todo 입력, 정렬, 이동\n- Daily Log 작성 및 회고 흐름\n- Dashboard / Stats 시각화 기반 기록 확인\n- BGM 플레이어와 설정 기반 사용자 경험 확장\n\n## Frontend Highlights\n\n- `React 19 + TypeScript + Vite` 기반으로 빠른 개발 경험과 타입 안정성을 확보했습니다.\n- `Zustand`로 도메인 원본 상태를 관리하고, view/controller 훅 분리로 화면 파생 상태와 행동 로직을 나눴습니다.\n- `React Router`의 layout 구조를 활용해 인증 흐름과 공통 상태 조합을 관리했습니다.\n- `React Query`와 생성 API 클라이언트(`orval`)를 기반으로 서버 연동 구조를 준비했습니다.\n- `dnd-kit`으로 Todo 정렬 경험을 구현했습니다.\n- `Supabase Storage`를 활용해 BGM / 이미지 에셋 로딩 구조를 확장했습니다.\n- `Tailwind CSS v4` 기반으로 디자인 토큰과 컴포넌트 스타일을 구성했습니다.\n\n## Engineering Focus\n\n이 프로젝트는 단순 페이지 조합보다, 도메인 단위로 책임을 분리하는 데 초점을 맞췄습니다.\n\n- `features/*` 중심 구조\n    - 인증, 타이머, 투두, 설정, 통계 등 도메인별로 상태와 UI를 분리\n- store / view / controller 분리\n    - 예: 타이머는 원본 상태(`useTimerStore`), 표시 파생 상태(`useTimerSessionView`), 행동(`useTimerSessionController`)으로 분리\n- shared composition\n    - 공통 레이아웃(`AuthLayout`)에서 공유 상태를 한 번 조합하고 여러 화면에 주입\n- 문서화\n    - `docs/` 아래에 설계 문서, 제품 스펙, 실행 계획 문서를 구조화\n\n## Core Screens\n\n- `Landing / Login / Signup`\n    - 인증 진입과 사용자 온보딩\n- `Main`\n    - 오늘의 타이머 흐름과 Todo를 함께 다루는 메인 집중 화면\n- `Focus Mode`\n    - 타이머와 TODO를 최소 UI로 유지하는 전용 몰입 화면\n- `Daily Log / Retro`\n    - 하루 기록과 회고 작성\n- `Dashboard / My`\n    - 기록 요약, 설정, 사용자 프로필 관리\n\n## Tech Stack\n\n\u003cp align=\"left\"\u003e\n  \u003cimg src=\"https://skillicons.dev/icons?i=react,ts,vite,tailwind,git,github\" alt=\"React TypeScript Vite Tailwind Git GitHub\" /\u003e\n\u003c/p\u003e\n\n### Main Libraries\n\n- React 19\n- TypeScript\n- Vite\n- Tailwind CSS v4\n- Zustand\n- TanStack Query\n- React Router\n- dnd-kit\n- Supabase\n- Orval\n\n## Project Structure\n\n```txt\nsrc\n├─ api          # API client, generated clients, request layer\n├─ assets       # 이미지, 오디오, 아이콘 등 정적 리소스\n├─ components   # 공용 UI / layout 컴포넌트\n├─ features     # 도메인별 기능 모듈\n├─ hooks        # 공용 커스텀 훅\n├─ pages        # 라우트 페이지 조합\n├─ routes       # route tree와 layout\n├─ stores       # toast, modal 등 전역 UI 상태\n├─ styles       # 글로벌 스타일과 토큰\n├─ utils        # 공용 유틸 함수\n└─ main.tsx     # 앱 엔트리\n```\n\n## Team\n\n### Frontend\n\n- \u003cimg src=\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\" alt=\"GitHub\" width=\"16\" /\u003e [@nogglee](https://github.com/nogglee)\n- \u003cimg src=\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\" alt=\"GitHub\" width=\"16\" /\u003e [@TeemoGB](https://github.com/TeemoGB)\n\n### Backend\n\n- \u003cimg src=\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\" alt=\"GitHub\" width=\"16\" /\u003e [@taesongxxxx](https://github.com/taesongxxxx)\n- \u003cimg src=\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\" alt=\"GitHub\" width=\"16\" /\u003e [@sandricks0592](https://github.com/sandricks0592)\n- \u003cimg src=\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\" alt=\"GitHub\" width=\"16\" /\u003e [@chocofanta01](https://github.com/chocofanta01)\n\n## Local Development\n\n```bash\nnpm install\nnpm run dev\nnpm run build\nnpm run preview\nnpm run lint\nnpm run format\n```\n\n## Documentation\n\n- 구조 개요: [ARCHITECTURE.md](./ARCHITECTURE.md)\n- 프론트엔드 원칙: [docs/FRONTEND.md](./docs/FRONTEND.md)\n- 설계 문서: [docs/design-docs/index.md](./docs/design-docs/index.md)\n- 제품 스펙: [docs/product-specs/index.md](./docs/product-specs/index.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_tomado_fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_tomado_fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_tomado_fe/lists"}