{"id":49820400,"url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_ddal-kkak_fe","last_synced_at":"2026-05-13T10:07:07.565Z","repository":{"id":353481945,"uuid":"1217666176","full_name":"prgrms-fullcycle-devcourse/webfull_9_10_DDAL-KKAK_FE","owner":"prgrms-fullcycle-devcourse","description":"프로그래머스 웹 풀스택 9기 10회차 딸깍 FE : Travel-Tick","archived":false,"fork":false,"pushed_at":"2026-05-07T05:06:35.000Z","size":304,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-05-07T06:30:59.020Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webfull-9-10-ddal-kkak-fe.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-22T05:30:25.000Z","updated_at":"2026-05-07T04:28:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_DDAL-KKAK_FE","commit_stats":null,"previous_names":["prgrms-fullcycle-devcourse/webfull_9_10_ddal-kkak_fe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prgrms-fullcycle-devcourse/webfull_9_10_DDAL-KKAK_FE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_DDAL-KKAK_FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_DDAL-KKAK_FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_DDAL-KKAK_FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_DDAL-KKAK_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_DDAL-KKAK_FE/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_DDAL-KKAK_FE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32977392,"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:41.510Z","updated_at":"2026-05-13T10:07:07.557Z","avatar_url":"https://github.com/prgrms-fullcycle-devcourse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✈️ Travel-Tick\n\n\u003e **여행은 내가 할게, 기록은 네가 할래?**  \n\u003e 영수증 한 장으로 완성되는 AI 기반 여행 소비 기록 서비스\n\n---\n\n## 🧭 프로젝트 소개\n\n**Travel-Tick**은 여행 중 발생하는 소비 기록의 번거로움을 줄이기 위해 기획된  \n**OCR 기반 자동 기록 + 스마트 정산 서비스**입니다.\n\n사용자는 영수증을 촬영하는 것만으로  \n가게명, 금액, 통화, 결제 시각 등의 정보를 자동으로 입력받고,  \n이를 여행 단위로 관리하며 공동 정산까지 한 번에 처리할 수 있습니다.\n\n단순한 가계부를 넘어  \n**“기록 → 정리 → 정산 → 회고”까지 이어지는 여행 소비 경험**을 만드는 것을 목표로 합니다.\n\n---\n\n## 🎯 문제 정의\n\n기존 여행 가계부는 다음과 같은 불편함이 존재합니다.\n\n- ✍️ 이동 중 수기로 소비를 기록해야 하는 번거로움\n- 💱 현지 통화를 한화로 환산해야 하는 피로도\n- 🧾 시간이 지나면 소비의 맥락이 사라지는 문제\n- 💸 공동 경비와 개인 지출이 섞여 정산이 복잡해지는 문제\n\n👉 Travel-Tick은 이를 해결하기 위해  \n**“입력 최소화”와 “정산 자동화”**에 집중했습니다.\n\n---\n\n## ✨ 핵심 기능\n\n### 📸 OCR 기반 자동 기록\n\n- 영수증 촬영 시 AI가 금액, 가게명, 통화 등을 자동 추출\n- 사용자는 결과를 확인 후 즉시 저장 가능\n- 입력 과정을 최소화한 “딸깍 UX” 구현\n\n---\n\n### 🧳 여행 단위 소비 아카이브\n\n- 여행별 폴더 구조로 소비 데이터 관리\n- 이모지 + 한 줄 메모로 소비의 맥락까지 기록\n- 단순 지출이 아닌 **추억 기록 형태로 확장**\n\n---\n\n### 💱 하이브리드 환율 시스템\n\n- 실시간 환율 / 고정 환율 선택 가능\n- 현지 통화 + 한화 동시 표기\n- 여행 중 소비 감각 유지 가능\n\n---\n\n### 🤝 스마트 정산 시스템\n\n- 개인 / 공동 지출 즉시 분리\n- 공동 지출 자동 분배 (N분의 1)\n- 최종적으로 **최소 송금 횟수 기준 정산 루트 제공**\n\n---\n\n### 📊 AI 소비 리포트\n\n- 시간대 / 카테고리 기반 소비 패턴 분석\n- “미식가형”, “올빼미형” 등 사용자 유형 리포트 생성\n- 단순 데이터가 아닌 **해석된 결과 제공**\n\n---\n\n## 🧠 기술 선택 이유\n\n### React + Vite\n\n- 빠른 개발 환경과 컴포넌트 기반 UI 구성\n- 초기 세팅과 개발 속도를 고려한 선택\n\n### TanStack Query\n\n- 서버 상태를 효율적으로 관리하고 캐싱 처리\n- 지출 데이터, 정산 결과 등 실시간 데이터 관리에 적합\n\n### Tailwind CSS\n\n- 일관된 디자인 시스템 유지\n- 빠른 UI 개발을 위한 유틸리티 기반 스타일링\n\n### Vite PWA Plugin\n\n- 웹을 앱처럼 사용할 수 있도록 지원\n- 홈 화면 설치 및 향후 오프라인 기능 확장 고려\n\n---\n\n## 🏗️ 아키텍처\n\n- **Server State:** TanStack Query\n- **Client State:** React Hooks (useState, useMemo)\n- **Routing:** React Router\n- **Structure:** Feature-based architecture\n\n👉 기능 단위로 코드를 분리하여 유지보수성과 확장성을 고려했습니다.\n\n---\n\n## 📂 프로젝트 구조\n\n본 프로젝트는 기능 단위로 코드를 분리하는 **feature-based architecture**를 기반으로 구성했습니다.\n\n```bash\nsrc/\n├── assets/             # 이미지, 아이콘 등 정적 에셋\n├── components/\n│   ├── common/         # 공통 컴포넌트\n│   ├── layout/         # 레이아웃 컴포넌트\n│   └── ui/             # 버튼, 입력창 등 UI 컴포넌트\n├── config/\n│   └── env.ts          # 환경 변수 설정 및 관리\n├── features/           # 기능 단위 모듈\n│   ├── auth/           # 인증 관련 기능\n│   ├── expenses/       # 소비 기록 기능\n│   ├── journeys/       # 여행 생성 및 관리\n│   ├── ocr/            # OCR 스캔 및 데이터 처리\n│   └── settlement/     # 정산 로직 및 결과 처리\n├── lib/                # 공통 유틸 및 헬퍼 함수\n├── mocks/              # 목업 데이터 및 테스트용 데이터\n├── pages/              # 페이지 단위 컴포넌트\n├── routes/             # 라우팅 설정\n├── types/              # 공통 타입 정의\n├── App.tsx             # 루트 컴포넌트\n├── main.tsx            # 앱 진입점\n\nmd\n👉 공통 UI(`components`), 기능 로직(`features`), 페이지(`pages`)를 분리하여\n확장성과 유지보수성을 고려한 구조로 설계했습니다.\n```\n\n## 📊 AI 소비 리포트🔄 사용자 흐름\n\n- 로그인 (소셜 로그인)\n- 여행 생성 (여행지, 인원, 환율 설정)\n- 영수증 촬영 → OCR 자동 입력\n- 개인 / 공동 지출 분류\n- 실시간 지출 및 정산 상태 확인\n- 여행 종료 후 최종 정산 및 리포트 확인\n\n---\n\n## ⚙️ 개발 포인트\n\n1. OCR 결과를 바로 저장하지 않는 UX 설계\n   OCR의 오인식을 고려하여\n   사용자가 빠르게 검수할 수 있는 흐름을 설계했습니다.\n\n2. 정산 로직 구조화\n   공동 지출을 기반으로 개인별 금액 계산\n   최소 송금 횟수로 최적화된 정산 결과 제공\n\n3. PWA 기반 앱 경험 제공\n   웹 환경에서도 앱처럼 사용할 수 있도록 설계\n   향후 오프라인 기록 기능 확장 고려\n\n---\n\n## 🔗 연동 예정 백엔드\n\n- Node.js (Express)\n- PostgreSQL (Supabase)\n- Prisma\n- Naver Clova OCR\n- GPT-4o (AI 리포트)\n- Google Maps API (루트맵 기능)\n\n---\n\n## 🚀 시작하기\n\n- git clone \u003crepository-url\u003e\n- cd travel-tick\n- npm install\n- npm run dev\n\n---\n\n## 📜 스크립트\n\n- npm run dev\n- npm run build\n- npm run preview\n- npm run lint\n- npm run lint:fix\n- npm run format\n\n---\n\n## 📌 향후 개선 예정\n\n- IndexedDB 기반 오프라인 기록 기능\n- 지도 기반 여행 동선 시각화\n- OCR 정확도 개선 및 후처리 로직 추가\n- AI 리포트 고도화\n\n---\n\n## 📦 배포\n\n- Vercel 배포 예정\n\n---\n\n## 현재 포함된 화면(초기 스캐폴딩)\n\n- `/login`: 로그인/온보딩(임시 버튼)\n- `/`: 홈(여행 리스트/예산/정산 요약, 플로팅 스캔 버튼)\n- `/journeys/new`: 여정 생성 폼\n- `/journeys/:journeyId`: 여행 상세 타임라인\n- `/journeys/:journeyId/scan`: 영수증 스캔(모킹)\n- `/journeys/:journeyId/ocr-preview`: OCR 결과 확인/분류(모킹)\n- `/journeys/:journeyId/report`: 최종 정산 + AI 리포트, 이미지 저장(다운로드)\n- `/settings`: 설정(임시)\n\n---\n\n## 데이터 흐름\n\n현재는 `src/mocks/data.ts`의 mock 데이터로 동작하며, 조회는 TanStack Query 훅(`src/features/journeys/queries.ts`)으로 감싸져 있습니다.  \n백엔드 API가 준비되면 queryFn만 교체하면 됩니다.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_ddal-kkak_fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_ddal-kkak_fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_ddal-kkak_fe/lists"}