Blanc Belluno

프로젝트 개요

Blanc Belluno는 프리미엄 이벤트 스타일링 브랜드를 위한 포트폴리오 웹사이트입니다. 고객이 브랜드의 작업물을 카테고리별로 둘러보고 상담을 문의할 수 있으며, 운영자는 관리자 페이지에서 콘텐츠를 직접 관리할 수 있습니다.

주요 기능

프론트엔드

• 히어로 슬라이더: 관리자가 등록한 대표 이미지를 풀스크린 슬라이드로 표출
• 포트폴리오 갤러리: Wedding, Baby Shower, Party, Corporate 4개 카테고리별 작업물 필터링
• 상담 문의폼: 이벤트 종류/일자/예산 등 수집, 카카오 알림톡으로 즉시 운영자에게 전달
• 인스타그램 피드: Instagram Graph API로 최신 게시물 및 스토리 실시간 표출
• 글래스모피즘 디자인: 파스텔 팔레트 + 반투명 레이어로 프리미엄 브랜드 톤 구현

관리자 페이지 (/admin)

• 포트폴리오 CRUD + 드래그앤드롭 순서 변경 (@dnd-kit)
• 히어로 슬라이드 CRUD + 순서 변경
• 사이트 설정(브랜드 정보, 연락처, SNS 링크 등) 관리
• Supabase Storage로 이미지 업로드 및 퍼블릭 URL 자동 생성

기술적 포인트

Tailwind CSS v4 Config-less 설정

별도 tailwind.config.ts 없이 globals.css의 @theme 디렉티브만으로 파스텔 팔레트를 정의했습니다. 디자인 토큰을 CSS 레이어에서 직접 관리해 빌드 파이프라인을 단순화했습니다.

Supabase 기반 풀스택 구조

• PostgreSQL: 포트폴리오/슬라이드/설정 스키마
• Storage: 이미지 업로드 및 CDN 배포
• Anon key + Service role key 분리로 클라이언트/서버 권한 격리

카카오 알림톡 연동

상담 문의 접수 시 카카오 비즈메시지 API를 통해 운영자 휴대폰으로 알림톡을 즉시 발송합니다. 템플릿 코드 기반으로 변수 치환하여 전송합니다.

JSON 폴백 데이터

Supabase 장애 시에도 사이트가 멈추지 않도록 data/portfolio.json, data/settings.json을 폴백 소스로 두어 SSR 단계에서 안정적으로 렌더링됩니다.