📌 T-GOLF FITTING - 프리미엄 골프 이커머스 플랫폼

🔹 프로젝트 개요

• 작업 기간: 2025.10 ~ 2025.12.01
• 작업 범위: 풀스택 개발 (UI/UX 디자인, 프론트엔드, 백엔드/어드민 구축)
• 사용 도구: Next.js 16, React 18, TypeScript, Tailwind CSS, Supabase (DB/Auth/Storage), Vercel, Git/GitHub
• 웹사이트 바로가기 : tg1.kr

🔹 프로젝트 목적 골프 피팅 전문 브랜드의 아이덴티티를 확립하고, 관리자가 코딩 없이 손쉽게 쇼핑몰을 운영할 수 있는 고성능 커머스 플랫폼 구축

• 브랜드 경험 고도화: T-Golf Gallery만의 프리미엄 이미지를 전달하기 위해 정교한 UI 인터랙션과 5단계 반응형 레이아웃을 적용하여 모든 디바이스에서 최적화된 쇼핑 경험 제공.
• 관리 효율성 극대화: 개발 지식이 없는 관리자도 상품, 배너, 팝업, 섹션 순서를 직관적으로 제어할 수 있도록 'Headless Admin System'을 자체 구축하여 운영 편의성 확보.
• 성능 및 확장성 확보: Next.js 16과 Supabase를 기반으로 한 서버리스 아키텍처를 통해 대용량 트래픽에도 안정적인 속도를 유지하며, 추후 결제 및 회원 기능 확장이 용이하도록 설계.

🔹 개발 포인트 (Tech & Design)프론트엔드 & UX 구현 (사용자 경험 최적화)

• 5단계 정밀 반응형 시스템: 모바일(0px)부터 대형 데스크톱(1920px+)까지 5구간(Breakpoint)으로 세분화된 CSS 설계를 통해, 어떤 해상도에서도 깨짐 없는 완벽한 레이아웃 구현.
• 고해상도 인터랙션 (Image Zoom): 상품 상세 페이지에서 마우스 호버 시 렌즈 효과와 함께 2배율 고해상도 이미지를 실시간으로 렌더링하는 돋보기 기능을 구현하여 상품 탐색 경험 강화.
• SEO 및 성능 최적화: Next.js의 SSR/ISR 기능을 활용하여 검색 엔진 최적화(SEO)를 적용하고, 이미지 Lazy Loading 및 WebP 포맷을 통해 LCP(최대 콘텐츠 렌더링) 속도 개선.

백엔드 & 어드민 (데이터 관리 및 보안)

• 직관적인 관리자 대시보드 (Admin): 상품 등록(최대 10개 멀티 업로드), 드래그 앤 드롭을 이용한 진열 순서 변경, 실시간 미리보기 기능을 갖춘 자체 관리자 페이지(CMS) 개발.