- 运行状态
- 在线
- 30 天在线率 100%
- 最近代码更新
- 3月18日
- 活跃仓库
- 最新版本
- 无
- 贡献者
- 1 人
- 复刻 0
- nomorevibe 收录
- 9月9日
- 仓库创建于 2026年3月
语言构成
- TypeScript 97%
- CSS 2.7%
- JavaScript 0.3%
更新0 条更新
全部尚未检测到更新。GitHub 发布版本后会显示在这里。
生活方式 分类的热门项目
按最近已完成的 8 小时观测回合间的 GitHub 星标增量排序
尚未检测到更新。GitHub 发布版本后会显示在这里。
按最近已完成的 8 小时观测回合间的 GitHub 星标增量排序
个人 GitHub 账号下公开仓库的所有者可以登录并验证所有权，自行管理介绍，无需管理员批准。
登录并生成验证文件，在 30 分钟内将其提交到此仓库的默认分支。其他分支或分叉仓库中的文件无效。然后在下方检查文件，即可无需管理员批准直接管理项目。请保留文件以维持管理权限。
如需登录，将前往登录页面。登录后请回到此处，再次点击所选的验证按钮。
在项目文件夹中运行 /nomorevibe verify，即可验证所有权并自行管理介绍。
一分钟完成验证A web-based re-creation of Life-4-Cuts, a.k.a. "인생네컷".
翻译准备中
取自仓库 README
正在加载完整 README。 以下为已保存的摘录。
A web-based re-creation of Life-4-Cuts, a.k.a. "인생네컷". 인생네컷에서 영감을 받아 시작한 프로젝트로, 카메라 촬영 또는 사진 업로드를 통해 나만의 포토 스트립을 만들고 꾸미고 공유할 수 있는 웹앱이다. • Next.js 16 (App Router, 웹 프레임워크) • TypeScript (타입 안전성) • Tailwind CSS + shadcn/ui (UI 컴포넌트) • Zustand (전역 상태 관리) • next-intl (한국어/영어 다국어 지원) • react-konva / konva (Canvas 기반 포토 스트립 렌더링 및 PNG 내보내기) • gifenc (Web Worker 기반 애니메이션 GIF 생성) • react-color (프레임 색상 선택기) • qrcode.react (공유 링크 QR 코드 표시) • Firebase Storage (공유 이미지 업로드) • Upstash Redis (IP별 업로드 횟수 제한, 단축 URL 저장)查看完整 README ↗
A web-based re-creation of Life-4-Cuts, a.k.a. "인생네컷".
인생네컷 스타일의 웹 기반 포토부스 경험
인생네컷에서 영감을 받아 시작한 프로젝트로, 카메라 촬영 또는 사진 업로드를 통해 나만의 포토 스트립을 만들고 꾸미고 공유할 수 있는 웹앱이다.
총 6단계로 이루어진 플로우:
/): 예시 포토 스트립 갤러리 및 앱 소개, "Start" 버튼/layout-select): 1×2, 1×3, 1×4, 2×2, 2×3, 2×4 중 레이아웃 선택/mode-select): 카메라 촬영 또는 사진 업로드 선택/instructions, /capture): 카메라 선택 시 촬영 간격 및 사진 수 설정 후 카운트다운과 함께 자동 연속 촬영. 업로드 선택 시 /upload로 이동하여 파일 선택./edit): 프레임 색상·너비, 사진 너비, 간격, 필터, 스티커, 타임스탬프 등 커스터마이징. 썸네일 레일에서 사진 선택 및 순서 변경. 각 사진 슬롯을 드래그(또는 모바일에서 터치)하여 상하좌우로 이동하거나, 스크롤(또는 모바일에서 핀치)로 확대·축소하여 크롭 위치를 조정할 수 있음./s/:id)/s/:id 페이지는 Open Graph 메타태그를 포함하여 SNS 공유 시 포토 스트립 미리보기 표시pnpm test # 전체 E2E 테스트 실행
pnpm test:ui # 인터랙티브 UI 모드
pnpm test:snapshots # 스냅샷 테스트만 실행
pnpm test:update-snapshots # 스냅샷 기준선 갱신
localhost:3000 기준 (pnpm build && pnpm start 필요)tests/~/.claude/settings.json) — Claude가 브라우저를 직접 제어 가능pnpm test:unit # 단위 테스트 실행
pnpm test:unit:watch # 워치 모드
src/__tests__/utils.test.ts — dataUrlToBlob, isMobile, isIosSafari 유틸리티 함수store.test.ts — Zustand 스토어 액션 및 상태 변이components.test.tsx — SelectOptionButton, SectionLabel, SliderControl, PhotoThumbnailGrid, PhotoOrPlaceholder 컴포넌트.env.local.example 파일을 복사하여 .env.local로 작성:
cp .env.local.example .env.local
필요한 값:
NEXT_PUBLIC_FIREBASE_*)UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN)NEXT_PUBLIC_BASE_URL) — OG 메타태그 절대 URL 생성에 필요A web-based photo booth experience inspired by Life-4-Cuts (인생네컷)
A project inspired by the popular Korean photo booth chain Life-4-Cuts. Users can take photos using their camera or upload existing ones, then customize the resulting photo strip with frames, filters, stickers, and timestamps — and download or share it.
A 6-step user flow:
/): Example strip gallery and app intro, "Start" button/layout-select): Choose from 1×2, 1×3, 1×4, 2×2, 2×3, 2×4/mode-select): Choose between camera capture or photo upload/instructions, /capture): For camera mode, set countdown interval and number of shots, then auto-capture with countdown. For upload mode, navigate to /upload and select files./edit): Customize frame color/width, photo width, gaps, filters, stickers, and timestamp. Select and reorder photos via the thumbnail rail. Drag (or touch on mobile) each photo slot to pan in any direction, or scroll (or pinch on mobile) to zoom in and adjust the crop — independently per slot./s/:id)/s/:id page includes Open Graph meta tags so the photo strip previews correctly when shared on social media or messengerspnpm test # Run all E2E tests
pnpm test:ui # Interactive UI mode
pnpm test:snapshots # Run snapshot tests only
pnpm test:update-snapshots # Regenerate snapshot baselines
localhost:3000 (requires pnpm build && pnpm start)tests//s/:id)~/.claude/settings.json — Claude can control the browser directly in conversationpnpm test:unit # Run unit tests
pnpm test:unit:watch # Watch mode
src/__tests__/utils.test.ts — dataUrlToBlob, isMobile, isIosSafari utility functionsstore.test.ts — Zustand store actions and state mutationscomponents.test.tsx — SelectOptionButton, SectionLabel, SliderControl, PhotoThumbnailGrid, PhotoOrPlaceholderCopy .env.local.example to .env.local and fill in the values:
cp .env.local.example .env.local
Required:
NEXT_PUBLIC_FIREBASE_*)UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN)NEXT_PUBLIC_BASE_URL) — needed for absolute OG metadata URLs