OYG E-commerce Admin Dashboard

올리브영 이커머스 관리자 대시보드 - 최신 React 패턴으로 구조화된 코드

🚀 기술 스택

• React 18 - 최신 React 기능 활용
• Vite - 빠른 개발 환경
• Tailwind CSS - 유틸리티 우선 CSS 프레임워크
• ESLint - 코드 품질 관리

📁 프로젝트 구조

src/
├── components/           # React 컴포넌트
│   ├── Common/          # 공통 컴포넌트
│   ├── Icons/           # 아이콘 컴포넌트
│   ├── Layout/          # 레이아웃 컴포넌트
│   └── RuleEngine/      # 룰엔진 관련 컴포넌트
├── constants/           # 상수 및 데이터
├── hooks/              # 커스텀 훅
├── styles/             # 스타일 파일
├── utils/              # 유틸리티 함수
└── types/              # TypeScript 타입 정의

🎨 주요 기능

1. 테마 시스템

• 다크/라이트 모드
• 커스텀 테마 (신스웨이브, 미드나잇, 로즈파인 등)
• CSS 변수를 활용한 동적 테마 전환

2. 룰엔진

• 프로모션 규칙 관리
• 풀필먼트 지정 규칙
• 배송 옵션 규칙
• 리워드 규칙
• Dry Run 테스트 기능

3. 전역 검색

• 키보드 단축키 지원 (⌘K)
• 페이지, 규칙, 기능 검색
• 실시간 검색 결과

🛠️ 개발 환경 설정

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

3. 빌드

npm run build

4. 코드 린팅

npm run lint
npm run lint:fix

🎯 최신 React 패턴 적용

1. 컴포넌트 분리

• 단일 책임 원칙에 따른 컴포넌트 분리
• 재사용 가능한 공통 컴포넌트
• 명확한 props 인터페이스

2. 커스텀 훅

• useTheme - 테마 관리
• useKeyboardShortcuts - 키보드 단축키 관리
• 로직과 UI의 분리

3. 상수 관리

• 기능별 상수 파일 분리
• 타입 안전성 확보
• 유지보수성 향상

4. 스타일 시스템

• CSS 변수를 활용한 테마 시스템
• Tailwind CSS 유틸리티 클래스
• 반응형 디자인

📝 주요 컴포넌트

Layout Components

• Sidebar - 네비게이션 사이드바
• Header - 상단 헤더 (검색, 테마, 알림)
• GlobalSearchModal - 전역 검색 모달

Rule Engine Components

• RuleEnginePage - 룰엔진 메인 페이지
• RuleCatalog - 규칙 목록 관리
• RuleEditorModal - 규칙 편집 모달
• DryRunModal - 규칙 테스트 모달

Common Components

• PlaceholderPage - 개발 중 페이지
• SectionWrapper - 섹션 래퍼

🔧 개발 가이드

컴포넌트 작성 규칙

1. 함수형 컴포넌트 사용
2. 명확한 props 타입 정의
3. 적절한 컴포넌트 분리
4. 재사용성 고려

스타일 가이드

1. Tailwind CSS 클래스 우선 사용
2. CSS 변수 활용한 테마 시스템
3. 반응형 디자인 고려
4. 접근성 고려

상태 관리

1. 로컬 상태는 useState 사용
2. 복잡한 로직은 커스텀 훅으로 분리
3. 전역 상태는 필요시 Context API 사용

📄 라이선스

MIT License