RG (Roblox Guard) - 블랙리스트 관리 플랫폼

로블록스 커뮤니티를 보호하는 전문적인 블랙리스트 관리 플랫폼입니다.

🎯 주요 기능

1. 홈 페이지 (Home)

• 💎 글래스모피즘 디자인의 검색창
• 🔍 닉네임 또는 로블록스 ID로 빠른 검색
• 📊 블랙리스트 사용자 간략 조회

2. 상세 페이지 (Detail)

• 📋 블랙리스트 사용자 상세 정보
• 🖼️ 증거 사진 이미지 뷰어
• 📊 누적 신고 건수 표시

3. 신고 페이지 (Report)

• ✍️ 블랙리스트 등록 신청
• 📸 증거 사진 업로드 (Firebase Storage)
• 🔐 로그인 필수 접근 제한
• ⏳ 검토 대기 상태 관리

4. 마이 페이지 (My Page)

• 👤 개인 정보 관리
• 🔑 비밀번호 변경
• 📝 내가 신고한 리스트
• 🛡️ 내 블랙리스트 상태 확인

5. 알림 페이지 (Notification)

• 🔔 신고 승인/거절 알림
• 🚨 긴급 알림 (블랙리스트 등록)
• 📲 실시간 알림 시스템

6. 어드민 페이지 (Admin)

• ✅ 신고 검토 및 승인
• ❌ 신고 거절 (사유 기록)
• 📊 대기 중인 신고 관리

🛠️ 기술 스택

항목	기술
Frontend	Next.js 14, React 18, TypeScript 5
Styling	Tailwind CSS, CSS3 (Glassmorphism)
상태 관리	Zustand
백엔드 & DB	Firebase (Authentication, Firestore, Storage)
인증	Firebase Auth + Discord OAuth 2.0 (준비 중)
API 통신	Axios

📦 프로젝트 구조

src/
├── app/                      # Next.js App Router
│   ├── (auth)/              # 인증 관련 페이지
│   │   ├── login/
│   │   └── signup/
│   ├── (main)/              # 메인 페이지들
│   │   ├── home/
│   │   ├── detail/[id]/
│   │   ├── report/
│   │   ├── mypage/
│   │   └── notification/
│   ├── admin/               # 어드민 페이지
│   ├── layout.tsx           # 메인 레이아웃
│   └── globals.css          # 글로벌 스타일
│
├── components/
│   ├── common/              # 공통 컴포넌트
│   │   ├── GlassButton.tsx
│   │   ├── GlassInput.tsx
│   │   ├── GlassCard.tsx
│   │   ├── GlassModal.tsx
│   │   ├── Loader.tsx
│   │   ├── Toast.tsx
│   │   └── index.ts
│   └── layout/              # 레이아웃 컴포넌트
│       ├── Header.tsx
│       ├── Footer.tsx
│       └── index.ts
│
├── lib/
│   └── firebase/            # Firebase 관련 함수
│       ├── config.ts        # Firebase 설정
│       ├── auth.ts          # 인증 함수
│       ├── firestore.ts     # Firestore CRUD 함수
│       └── storage.ts       # Storage 함수
│
├── store/                   # Zustand 상태 관리
│   ├── authStore.ts
│   └── blacklistStore.ts
│
├── types/                   # TypeScript 타입 정의
│   └── index.ts
│
├── styles/                  # 스타일 파일
│   └── glassmorphism.css    # 글래스모피즘 스타일
│
└── utils/                   # 유틸리티 함수

🎨 디자인 컨셉

Glassmorphism (글래스모피즘)

• 투명도가 적용된 화이트 배경
• backdrop-filter: blur(10px) 효과
• 미세한 테두리와 섀도우

3D 버튼 디자인

• 입체감을 주는 그림자 효과
• Hover 시 위로 떠오르는 애니메이션
• Active 상태에서 누르는 듯한 효과

색상 팔레트

용도	색상	용도
Primary	#3b82f6 (Blue)	버튼, 강조
Background	#FFFFFF	기본 배경
Secondary	#F0F0F0	보조 배경
Text Primary	#1a1a1a	주 텍스트
Text Secondary	#666666	보조 텍스트

🚀 빠른 시작

사전 요구사항

• Node.js 18.17 이상
• npm 또는 yarn
• Firebase 프로젝트 (설정 필요)

설치 및 실행

# 1. 프로젝트 디렉토리 이동
cd roblox-guard

# 2. 의존성 설치
npm install

# 3. 환경 변수 설정
cp .env.example .env.local
# .env.local 파일에서 Firebase 설정 값 입력

# 4. 개발 서버 실행
npm run dev

# 5. 브라우저에서 열기
# http://localhost:3000

🔑 Firebase 설정

Firestore 컬렉션 구조

// Users 컬렉션
{
  uid: string,
  userId: string,
  phoneNumber: string,
  robloxNickname: string,
  robloxId: string,
  createdAt: timestamp,
  updatedAt: timestamp
}

// Blacklist_Requests 컬렉션 (검토 대기)
{
  id: string,
  reporterId: string,
  robloxNickname: string,
  robloxId: string,
  reportType: 'scam' | 'harassment' | 'spam' | 'inappropriate' | 'other',
  description: string,
  imageUrls: string[],
  status: 'pending' | 'approved' | 'rejected',
  rejectionReason?: string,
  createdAt: timestamp,
  updatedAt: timestamp
}

// Blacklist_Official 컬렉션 (승인된 목록)
{
  id: string,
  robloxNickname: string,
  robloxId: string,
  reportType: string,
  description: string,
  imageUrls: string[],
  reportCount: number,
  approvedAt: timestamp,
  createdAt: timestamp
}

// Notifications 컬렉션
{
  id: string,
  userId: string,
  type: 'approval' | 'rejection' | 'blacklisted' | 'other',
  title: string,
  message: string,
  relatedData?: any,
  isRead: boolean,
  createdAt: timestamp
}

Firebase 규칙 (샘플)

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Users 컬렉션
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId;
    }

    // Blacklist_Requests (신고 접수)
    match /blacklist_requests/{requestId} {
      allow create: if request.auth != null;
      allow read: if request.auth.uid == resource.data.reporterId;
    }

    // Blacklist_Official (공개 데이터)
    match /blacklist_official/{blacklistId} {
      allow read: if true;
    }

    // Notifications
    match /notifications/{notificationId} {
      allow read, write: if request.auth.uid == resource.data.userId;
    }
  }
}

📱 반응형 디자인

• ✅ 모바일 최적화 (375px 이상)
• ✅ 태블릿 최적화 (768px 이상)
• ✅ 데스크톱 최적화 (1024px 이상)

🔐 보안 기능

• 🔒 Firebase Authentication
• 🛡️ CORS 설정
• 🔑 환경 변수를 통한 민감 정보 관리
• 👤 사용자 권한 관리 시스템

🤝 기여하기

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 있습니다.

📞 문의

• 이메일: support@robloxguard.com
• Discord: RG Community
• 홈페이지: https://robloxguard.com

🙏 감사의 말

로블록스 커뮤니티의 안전을 위해 함께해주는 모든 사람들에게 감사합니다!

---

RG (Roblox Guard) - 함께 만드는 안전한 로블록스 커뮤니티 🛡️