아키텍처 가이드

Divetobada의 구조와 설계 원칙

레이아웃 시스템

Divetobada는 가변 사이드바를 가진 3-컬럼 레이아웃 구조입니다.

┌─────────────────────────────────────────┐
│         LeftSidebarArea (가변)          │
│  ┌─────────┬─────────────────────────┐ │
│  │ Server  │  Content Block          │ │
│  │ List    │  (Docs/Discord/None)    │ │
│  │ (80px)  │  (320px)                 │ │
│  └─────────┴─────────────────────────┘ │
├─────────────────────────────────────────┤
│         MainContent (가변 너비)         │
│         (중앙 정렬, 최대 3xl)           │
├─────────────────────────────────────────┤
│         RightSidebarArea (320px)        │
│         (페이지별 콘텐츠 블록)           │
└─────────────────────────────────────────┘

좌측 사이드바 (LeftSidebarArea)

• 너비: 가변 (80px 또는 400px)
• 서버 리스트: 항상 표시 (80px)
• 콘텐츠 블록: 조건부 표시 (320px)
  • Docs: 독스 네비게이션
  • Discord: 스튜디오 채널 목록
  • None: 콘텐츠 없음

중앙 콘텐츠 (MainContent)

• 너비: 가변 (사이드바 너비에 따라 자동 조절)
• 최대 너비: 3xl (768px)
• 정렬: 중앙 정렬
• CSS 변수: --left-sidebar-width, --right-sidebar-width

우측 사이드바 (RightSidebarArea)

• 너비: 고정 (320px)
• 콘텐츠: 페이지별 블록
  • 홈: 크리에이터 추천, 브랜드 사이드바
  • 스튜디오: 스튜디오 정보
• 접기/펼치기: 양쪽 사이드바 동시 제어

라우팅 구조

Next.js App Router 기반의 파일 시스템 라우팅입니다.

• / - 홈 피드 (전체/팔로잉)
• /studios/[studioId] - 스튜디오 메인 페이지
• /studios/[studioId]/workspace - 워크스페이스 대시보드
• /studios/[studioId]/workspace/[fileId] - 화이트보드 파일 페이지
• /studios/[studioId]/settings - 스튜디오 설정
• /docs - 독스 페이지

CSS 변수