main merge

.gitignore

@@ -24,4 +24,7 @@ dist-ssr
 
 # env
 .env
-.env.*
+.env.*
+
+# md
+troubleShooting.md

.nvmrc

@@ -0,0 +1 @@
+v20.17.0

README.md

@@ -1,50 +1,186 @@
-# React + TypeScript + Vite
+# 🏌️ MIC Golf
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+골프 용품 쇼핑몰 웹 애플리케이션
 
-Currently, two official plugins are available:
+## 📋 프로젝트 개요
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+MIC Golf는 React 18과 TypeScript를 기반으로 한 현대적인 골프 용품 이커머스 플랫폼입니다. 사용자들이 골프 관련 상품을
+쇼핑하고, 이벤트에 참여하며, 개인 정보를 관리할 수 있는 통합 솔루션을 제공합니다.
 
-## Expanding the ESLint configuration
+## ✨ 주요 기능
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### 🛍️ 쇼핑 기능
 
-- Configure the top-level `parserOptions` property like this:
+- **상품 카탈로그**: 카테고리별 골프 용품 브라우징
+- **상품 상세 페이지**: 자세한 상품 정보 및 이미지
+- **장바구니**: 상품 담기 및 수량 관리
+- **주문 처리**: 결제 및 주문 관리
+
+### 👥 사용자 기능
+
+- **회원가입/로그인**: 사용자 계정 관리
+- **비밀번호 재설정**: 계정 보안 관리
+- **마이페이지**: 개인정보 및 주문 내역 관리
+
+### 🎯 이벤트 기능
+
+- **이벤트 목록**: 진행 중인 골프 이벤트 확인
+- **이벤트 상세**: 이벤트 정보 및 참여 기능
+
+### 🔧 관리자 기능
+
+- **관리자 대시보드**: 전체 시스템 관리
+- **상품 관리**: 상품 등록, 수정, 삭제
+- **사용자 관리**: 회원 정보 관리
+
+## 🛠️ 기술 스택
+
+### 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 후처리
+
+## 📁 프로젝트 구조
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
 ```
+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. **의존성 설치**
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+   ```bash
+   npm install
+   ```
+
+2. **개발 서버 실행**
+
+   ```bash
+   npm run dev
+   ```
+
+3. **프로덕션 빌드**
+
+   ```bash
+   npm run build
+   ```
+
+4. **빌드 미리보기**
+
+   ```bash
+   npm run preview
+   ```
+
+5. **코드 린팅**
+   ```bash
+   npm run lint
+   ```
+
+## 🔧 환경 설정
+
+프로젝트 루트에 `.env` 파일을 생성하고 필요한 환경 변수를 설정하세요:
+
+```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** - 골프를 사랑하는 모든 이들을 위한 프리미엄 쇼핑 경험을 제공합니다. ⛳

eslint.config.js

@@ -3,19 +3,23 @@ import globals from 'globals';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
-import prettierPlugin from 'eslint-plugin-prettier'; // Prettier 플러그인 추가
+import prettierPlugin from 'eslint-plugin-prettier';
+import typescript from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
 
 export default [
   { ignores: ['dist'] }, // 'dist' 디렉토리는 ESLint 검사를 무시
   {
-    files: ['**/*.{js,jsx}'], // ESLint가 검사할 파일 확장자 설정
+    files: ['**/*.{js,jsx,ts,tsx}'], // ESLint가 검사할 파일 확장자 설정
     languageOptions: {
       ecmaVersion: 2020, // ECMAScript 2020 지원
       globals: globals.browser, // 브라우저 전역 변수 허용
+      parser: tsParser, // TypeScript 파서 사용
       parserOptions: {
         ecmaVersion: 'latest', // 최신 ECMAScript 버전 지원
         ecmaFeatures: { jsx: true }, // JSX 지원
         sourceType: 'module', // ECMAScript 모듈 사용
+        project: './tsconfig.json', // tsconfig.json 경로 설정
       },
     },
     settings: {
@@ -26,15 +30,20 @@ export default [
       'react-hooks': reactHooks, // React Hooks 플러그인
       'react-refresh': reactRefresh, // React Fast Refresh 플러그인
       prettier: prettierPlugin, // Prettier 플러그인 추가
+      '@typescript-eslint': typescript, // TypeScript ESLint 플러그인 추가
     },
     rules: {
       ...js.configs.recommended.rules, // ESLint 추천 규칙 적용
       ...react.configs.recommended.rules, // React 추천 규칙 적용
       ...react.configs['jsx-runtime'].rules, // JSX 런타임 관련 규칙
       ...reactHooks.configs.recommended.rules, // React Hooks 추천 규칙 적용
+      ...typescript.configs.recommended.rules, // TypeScript 추천 규칙 적용
+      ...typescript.configs['recommended-requiring-type-checking'].rules, // 타입 체크가 필요한 규칙 적용
       'react/jsx-no-target-blank': 'off', // target="_blank" 보안 경고 비활성화
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'prettier/prettier': 'error', // Prettier 규칙을 위반하면 ESLint에서 에러로 처리
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 사용되지 않는 변수 경고
+      '@typescript-eslint/explicit-module-boundary-types': 'off', // 함수 반환 타입 강제 비활성화
     },
   },
-];
+];