웹 · 서비스2026.02
대동카아트
차량 래핑/도장 작업 사진을 보기 좋게 모아 보여주는 사이트를 만들고, 사장님이 관리자 화면에서 사진을 올리거나 삭제하면 홈페이지에 그대로 반영되게 만들었습니다.
Next.jsTypeScriptTailwindCloudflare관리자GitHub API
프로젝트 소개
차량 래핑/도장 작업 사진을 보기 좋게 모아 보여주는 사이트를 만들고, 운영자가 관리자 화면에서 사진/게시물을 올리거나 삭제하면 홈페이지에 바로 반영되게 구성했습니다.
또, Cloudflare Pages처럼 정적 배포 환경에서도 관리자 기능이 끊기지 않도록(업로드/저장/반영) 서버 기능을 Pages Functions로 분리하고 저장은 GitHub에 남기도록 설계했습니다.
사용 기술
Next.js(App Router) · React · TypeScript · TailwindCloudflare Pages(정적 배포) · Pages FunctionsGitHub API(Contents/Git Data API)
문제 해결
- - Cloudflare Pages는 정적 배포라서 배포 환경에서는 Pages Functions가 `/api/admin/*`를 담당하도록 분리하고, 로컬에서는 Next Route Handler로 개발이 가능하게 구성했습니다.
- - 관리자 저장 시 원본(`data/gallery/<category>.json`)과 정적 반영용(`public/data/gallery/<category>.json`)을 함께 GitHub에 커밋해, 정적 사이트에서도 데이터가 안정적으로 유지되게 했습니다.
- - 이미지 업로드는 브라우저에 토큰을 두지 않고 서버가 GitHub로 업로드하도록 프록시를 둬 보안/운영 리스크를 줄였습니다.
- - 정적 export에서 `/api` 때문에 빌드가 깨지는 문제는 빌드 단계에서 `app/api`를 임시로 제외하고, 배포는 Functions로 처리하게 구성했습니다.
- - HTTPS일 때만 `Secure` 쿠키를 적용하고 인증 상태는 서버에서 확인하도록 해 환경별 로그인/쿠키 이슈를 정리했습니다.
- - 업로드/저장 중 편집 상태가 꼬이는 문제는 편집 상태 ref 동기화로 안정화했습니다.
- - 삭제/동기화 이슈는 이름 공백/표기 차이까지 고려해 포토갤러리 반영 로직을 개선했습니다.
적용 결과
- - 운영자가 관리자에서 수정하면 GitHub에 저장되고 배포가 따라오도록, 실제 운영 가능한 갤러리 사이트를 완성했습니다.
- - 정적 배포 제약(Cloudflare Pages) 안에서 인증/업로드/저장 흐름을 설계해 “만들고 끝”이 아니라 운영 가능한 형태로 정리했습니다.
핵심 요약
- - 갤러리(카테고리별) 목록/검색/상세 + 포토갤러리 노출
- - 관리자 페이지에서 게시물 CRUD/이미지 업로드/노출 관리
- - 비밀번호 로그인 + 쿠키 기반 인증으로 관리자 기능 보호
- - 수정 내용이 GitHub에 커밋되고 Cloudflare Pages 자동 배포로 반영되는 운영 흐름