🏌️ MIC Golf

골프 용품 쇼핑몰 웹 애플리케이션

📋 프로젝트 개요

MIC Golf는 React 18과 TypeScript를 기반으로 한 현대적인 골프 용품 이커머스 플랫폼입니다. 사용자들이 골프 관련 상품을 쇼핑하고, 이벤트에 참여하며, 개인 정보를 관리할 수 있는 통합 솔루션을 제공합니다.

✨ 주요 기능

🛍️ 쇼핑 기능

• 상품 카탈로그: 카테고리별 골프 용품 브라우징
• 상품 상세 페이지: 자세한 상품 정보 및 이미지
• 장바구니: 상품 담기 및 수량 관리
• 주문 처리: 결제 및 주문 관리

👥 사용자 기능

• 회원가입/로그인: 사용자 계정 관리
• 비밀번호 재설정: 계정 보안 관리
• 마이페이지: 개인정보 및 주문 내역 관리

🎯 이벤트 기능

• 이벤트 목록: 진행 중인 골프 이벤트 확인
• 이벤트 상세: 이벤트 정보 및 참여 기능

🔧 관리자 기능

• 관리자 대시보드: 전체 시스템 관리
• 상품 관리: 상품 등록, 수정, 삭제
• 사용자 관리: 회원 정보 관리

🛠️ 기술 스택

Frontend Framework

• React 18 - 최신 React 기능 활용
• TypeScript - 타입 안전성 보장
• Vite - 빠른 개발 서버 및 빌드

상태 관리 & API

• Zustand - 경량 상태 관리
• TanStack Query - 서버 상태 관리 및 캐싱
• Axios - HTTP 클라이언트

라우팅 & 폼

• React Router v6 - 클라이언트 사이드 라우팅
• React Hook Form - 효율적인 폼 관리

UI & 스타일링

• Tailwind CSS - 유틸리티 기반 CSS 프레임워크
• React Slick - 캐러셀 컴포넌트
• React Helmet Async - 메타 태그 관리

개발 도구

• ESLint - 코드 품질 관리
• Prettier - 코드 포맷팅
• PostCSS - CSS 후처리

📁 프로젝트 구조

src/
├── api/                    # API 클라이언트 설정
├── assets/                 # 정적 자원 (이미지, 아이콘)
├── components/             # 재사용 가능한 컴포넌트
├── config/                 # 설정 파일들
│   ├── constants.ts        # 상수 정의
│   ├── store.ts           # 전역 상태 관리
│   └── types.ts           # TypeScript 타입 정의
├── hooks/                  # 커스텀 React 훅
├── layouts/               # 레이아웃 컴포넌트
│   ├── adminLayout/       # 관리자 레이아웃
│   └── commonLayout/      # 일반 사용자 레이아웃
├── pages/                 # 페이지 컴포넌트
│   ├── admin/             # 관리자 페이지
│   ├── auth/              # 인증 관련 페이지
│   ├── cart/              # 장바구니 페이지
│   ├── event/             # 이벤트 페이지
│   ├── home/              # 홈페이지
│   ├── mypage/            # 마이페이지
│   ├── order/             # 주문 페이지
│   └── shop/              # 쇼핑 페이지
├── routes/                # 라우트 보호 컴포넌트
└── utils/                 # 유틸리티 함수

🚀 시작하기

사전 요구사항

• Node.js (v18 이상)
• npm 또는 yarn

설치 및 실행

1. 의존성 설치

   npm install

2. 개발 서버 실행

   npm run dev

3. 프로덕션 빌드

   npm run build

4. 빌드 미리보기

   npm run preview

5. 코드 린팅

   npm run lint

🔧 환경 설정

프로젝트 루트에 .env 파일을 생성하고 필요한 환경 변수를 설정하세요:

VITE_PUBLIC_BASE_URL=your_api_base_url

📱 주요 라우트

경로	설명	접근 권한
/	홈페이지	공개
/shop	상품 목록	공개
/shop/:category	카테고리별 상품	공개
/shop/:category/:id	상품 상세	공개
/event	이벤트 목록	공개
/event/:id	이벤트 상세	공개
/cart	장바구니	공개
/signin	로그인	공개
/signup	회원가입	공개
/mypage	마이페이지	로그인 필요
/admin	관리자 대시보드	관리자 권한

🧪 개발 현황

현재 프로젝트는 초기 개발 단계에 있으며, 다음과 같은 상태입니다:

• ✅ 프로젝트 구조 설정 완료
• ✅ 라우팅 설정 완료
• ✅ 기본 페이지 컴포넌트 생성
• 🔄 UI 컴포넌트 개발 진행 중
• ⏳ API 연동 대기
• ⏳ 인증 시스템 구현 예정

🤝 기여하기

1. 이 저장소를 포크합니다
2. 새로운 기능 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
3. 변경사항을 커밋합니다 (git commit -m 'Add some amazing feature')
4. 브랜치에 푸시합니다 (git push origin feature/amazing-feature)
5. Pull Request를 생성합니다

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

📞 연락처

프로젝트에 대한 문의사항이 있으시면 이슈를 생성해 주세요.

---

MIC Golf - 골프를 사랑하는 모든 이들을 위한 프리미엄 쇼핑 경험을 제공합니다. ⛳