- 運作狀態
- 上線中
- 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