🚀 miri.dev 신기능: 프로젝트 기반 배포 시스템

안녕하세요! miri.dev에 게임 체인저가 될 새로운 기능이 추가되었습니다! 🎉

기존의 단순한 파일 업로드 방식에서 한 단계 발전하여, 프로젝트 기반 배포 시스템을 도입했습니다. 이제 하나의 프로젝트에서 여러 배포 버전을 관리하고, 고정된 도메인으로 항상 최신 버전에 접근할 수 있습니다!

🎯 무엇이 달라졌나요?

기존 방식의 한계

• 🔗 임시 도메인: 배포할 때마다 새로운 랜덤 도메인 생성
• 📝 버전 관리 부재: 이전 배포와의 연결성 없음
• 🔄 불편한 업데이트: 새 배포 시마다 도메인이 바뀌어 링크 관리 어려움
• 📊 통계 분산: 배포별로 조회수가 분리되어 전체 성과 파악 어려움

🆕 새로운 프로젝트 시스템

• 🌐 고정 도메인: project-name-12345678.miri.dev 형태의 영구 도메인
• 📋 버전 관리: 하나의 프로젝트에 여러 배포 연결 및 이력 관리
• ⚡ 무중단 배포: 새 배포 시 자동으로 현재 버전 교체
• 📈 통합 통계: 프로젝트 단위로 배포 현황과 성과 추적

🛠️ 새로운 기능 상세 가이드

1. 📦 프로젝트 생성하기

마이페이지에서 "📦 프로젝트" 탭을 클릭하고 "새 프로젝트" 버튼을 눌러보세요!

// 프로젝트 생성 시 자동으로 생성되는 구조
{
  projectName: "my-portfolio",
  subdomain: "my-portfolio-a1b2c3d4",  // 8자리 고유 ID 추가
  domain: "my-portfolio-a1b2c3d4.miri.dev",
  deployments: [],  // 배포 이력
  currentVersion: null  // 현재 활성 배포
}

프로젝트 이름 규칙:

• ✅ 영문, 숫자, 하이픈(-) 사용 가능
• ✅ 1-50자 제한
• ✅ 특수문자는 자동으로 하이픈으로 변환
• ✅ 8자리 고유 ID가 자동 추가되어 중복 방지

2. 🚀 프로젝트에 배포하기

기존 배포 방식에 프로젝트 연결 옵션이 추가되었습니다:

새 프로젝트로 배포:

// 배포 시 프로젝트명 입력
{
  files: [...],
  projectName: "새-프로젝트명",  // 새 프로젝트 자동 생성
  deploymentNotes: "첫 번째 배포"
}

기존 프로젝트에 추가 배포:

// 기존 프로젝트 ID로 연결
{
  files: [...],
  projectId: "abc123...",  // 기존 프로젝트 ID
  deploymentNotes: "버그 수정 및 성능 개선"
}

3. 🔄 자동 버전 관리

프로젝트에 새로운 배포가 추가될 때마다:

1. 버전 번호 자동 증가: v1, v2, v3...
2. 이전 배포 보관: 모든 배포 이력 유지
3. 현재 배포 교체: 새 배포가 자동으로 활성화
4. 도메인 유지: 같은 프로젝트 도메인으로 최신 배포 접근

graph TD
    A[새 배포 업로드] --> B[버전 번호 할당]
    B --> C[이전 배포 비활성화]
    C --> D[새 배포 활성화]
    D --> E[프로젝트 도메인 자동 연결]
    E --> F[사용자는 같은 URL로 접근]

📱 새로워진 마이페이지 UI

🎛️ 탭 기반 관리 시스템

마이페이지가 더욱 직관적으로 개편되었습니다:

• 📄 사이트 목록: 개별 배포들을 관리
• 📦 프로젝트: 프로젝트 단위로 관리

🎨 향상된 사이트 카드 디자인

각 사이트 카드에서 더 많은 정보를 한눈에:

interface EnhancedSiteCard {
  // 기본 정보
  name: string;
  url: string;
  createdAt: string;
  expiresAt: string;
  
  // 🆕 프로젝트 연결 정보
  projectName?: string;
  projectDomain?: string;
  deploymentVersion?: number;
  isCurrent?: boolean;  // 현재 활성 배포인지
  deploymentNotes?: string;
  
  // 🆕 연결 상태 (이중 확인 시스템)
  connectionStatus: 'full' | 'db_only' | 'metadata_only' | 'partial';
  confidence: number;  // 데이터 신뢰도 (0-100%)
}

🎯 프로젝트 카드 새 디자인

프로젝트별로 통합된 정보를 제공:

• 🌐 고정 도메인: 클릭 한 번으로 바로 접근
• 📊 배포 통계: 총 배포 수, 활성 배포 수
• 🚀 마지막 배포: 최근 배포 시간
• ⭐ 현재 버전: 현재 활성화된 배포 정보

🔧 개발자를 위한 기술적 세부사항

📐 데이터베이스 스키마

-- 프로젝트 테이블
CREATE TABLE projects (
  id UUID PRIMARY KEY,
  project_name TEXT NOT NULL,
  short_id VARCHAR(8) UNIQUE NOT NULL,  -- 고유 8자리 ID
  subdomain TEXT UNIQUE NOT NULL,       -- project-name-shortid
  user_id TEXT NOT NULL,
  current_deployment_id UUID,           -- 현재 활성 배포
  created_at TIMESTAMPTZ DEFAULT now()
);

-- 확장된 배포 테이블
ALTER TABLE deployed_sites ADD COLUMN
  project_id UUID,                      -- 프로젝트 연결
  deployment_version INTEGER DEFAULT 1, -- 버전 번호
  is_current BOOLEAN DEFAULT false,     -- 현재 활성 여부
  deployment_notes TEXT;                -- 배포 노트

🚦 자동 라우팅 시스템

미들웨어에서 프로젝트 도메인을 자동 감지:

// 프로젝트 도메인 패턴 매칭
const projectDomainPattern = /^(.+)-([a-f0-9]{8})$/;

if (projectDomainPattern.test(subdomain)) {
  // 프로젝트의 현재 배포로 자동 라우팅
  const currentDeployment = await getCurrentDeployment(subdomain);
  return NextResponse.rewrite(new URL(`/site/${currentDeployment.id}`, request.url));
}

🔄 배포 함수

핵심 프로젝트 관리 함수들:

-- 프로젝트 생성
CREATE FUNCTION create_project(
  p_project_name TEXT,
  p_user_id TEXT
) RETURNS project_info;

-- 프로젝트에 배포 추가
CREATE FUNCTION deploy_to_project(
  p_project_id UUID,
  p_site_id UUID,
  p_deployment_notes TEXT
) RETURNS BOOLEAN;

-- 현재 배포 조회
CREATE FUNCTION get_current_deployment(
  p_subdomain TEXT
) RETURNS deployment_info;

🎯 사용 시나리오

📚 개인 포트폴리오 관리

# 1. 프로젝트 생성
Project: "my-portfolio"
Domain: my-portfolio-a1b2c3d4.miri.dev

# 2. 초기 버전 배포
Version: v1 (기본 포트폴리오)

# 3. 디자인 업데이트
Version: v2 (새로운 테마 적용)

# 4. 프로젝트 추가
Version: v3 (새로운 프로젝트 추가)

# 사용자는 항상 같은 URL로 최신 버전 확인 가능!

🏢 클라이언트 프로젝트 관리

# 프로젝트별로 별도 도메인 관리
company-website-b2c3d4e5.miri.dev  # 회사 웹사이트
landing-page-c3d4e5f6.miri.dev     # 랜딩페이지
event-site-d4e5f6g7.miri.dev       # 이벤트 사이트

# 각각 독립적인 배포 이력과 버전 관리

🔮 앞으로의 계획

Phase 1 (완료) ✅

• ✅ 기본 프로젝트 시스템
• ✅ 자동 라우팅
• ✅ 마이페이지 UI 개선

Phase 2 (진행 중) 🚧

• 🔄 배포 히스토리 상세 보기
• 🔄 프로젝트 설정 관리
• 🔄 커스텀 도메인 연결

Phase 3 (계획) 📋

• 📋 Git 저장소 연동
• 📋 웹훅 기반 자동 배포
• 📋 환경별 배포 (dev/staging/prod)
• 📋 협업 기능 (팀 멤버 초대)

Phase 4 (미래) 🌟

• 🌟 CI/CD 파이프라인 연동
• 🌟 A/B 테스트 지원
• 🌟 실시간 분석 대시보드
• 🌟 모바일 앱 배포 지원

🎉 지금 바로 체험해보세요!

1. miri.dev 접속
2. 카카오/네이버 로그인 후 마이페이지 이동
3. "📦 프로젝트" 탭에서 첫 프로젝트 생성
4. 파일 업로드 시 프로젝트 연결 선택
5. 고정 도메인으로 바로 확인!

💬 피드백을 기다립니다

새로운 프로젝트 시스템이 어떠신가요?

• 🐛 버그 리포트: 이슈 제보
• 💡 기능 제안: 아이디어 공유
• 🤝 사용 후기: 경험 공유

여러분의 소중한 의견으로 miri.dev가 더욱 발전할 수 있습니다! 🚀

---

miri.dev와 함께 더 스마트한 웹 개발을 경험해보세요! 💻✨