Divetobada 개발자 가이드 | 버전 2.0 | 마지막 업데이트: 2025년 1월 15일
Divetobada는 크리에이터와 팬을 직접 연결하는 엔터테인먼트 플랫폼입니다.
소속사 없이도 주도권을 가지고 활동하며 팬들과 매끄럽게 소통할 수 있는 공간을 제공합니다.
15.1.2App Router 기반 프레임워크
18.3.1UI 라이브러리
타입 안정성
유틸리티 퍼스트 스타일링
5.90.5서버 상태 관리
리치 텍스트 에디터
11.11.4화이트보드 라이브러리
관계형 데이터베이스
5.16.1ORM
3.2.0인증 시스템
OAuth 라이브러리
스키마 검증
배포 플랫폼
파일 스토리지
이메일과 비밀번호로 간단하게 가입할 수 있습니다.
💡 Google 계정으로 간편 가입 가능
나만의 개성있는 프로필을 만들어보세요.
여러분의 창작물과 이야기를 팬들과 공유해보세요.
크리에이터를 위한 전문 공간을 만들어보세요.
가변 사이드바를 가진 3-컬럼 레이아웃 구조입니다.
가변 (80px 또는 400px)
가변 (사이드바 너비에 따라 자동 조절)
고정 (320px)
--left-sidebar-width좌측 사이드바 너비
가능한 값: 80px, 400px | 기본값: 80px
--right-sidebar-width우측 사이드바 너비
가능한 값: 320px | 기본값: 320px
페이지별로 동적으로 변경되는 사이드바 시스템입니다.
none0px사이드바 없음
사용 사례: 일부 특수 페이지
docs400px독스 페이지 사이드바
콘텐츠: 독스 네비게이션 메뉴
discord80px 또는 400px스튜디오 디스코드 스타일 사이드바
콘텐츠: 서버 리스트 + 스튜디오 채널 목록
💡 콘텐츠 블록 유무에 따라 너비 변경
Next.js App Router 기반의 파일 시스템 라우팅입니다.
/홈 피드 (전체/팔로잉)
/studios/[studioId]스튜디오 메인 페이지
/studios/[studioId]/workspace워크스페이스 대시보드
/studios/[studioId]/workspace/[fileId]화이트보드 파일 페이지
/studios/[studioId]/settings스튜디오 설정
/docs-old독스 페이지
Lucia Auth 기반의 인증 시스템입니다.
전통적인 이메일과 비밀번호를 사용한 인증
/api/auth/loginGoogle 계정을 통한 간편 로그인
/api/auth/callback/googleLogin with Divetobada를 통한 외부 서비스 인증
// Express 예시
app.post("/sso/divetobada", async (req, res) => {
const { token } = req.body;
const decoded = jwt.verify(token, SHARED_SSO_SECRET);
// 이메일로 계정 찾기 또는 생성
let user = await User.findOne({ email: decoded.email });
if (!user) {
user = await createUser(decoded);
}
return res.json({ access_token: generateToken(user) });
});// /sso 페이지
const token = searchParams.get('token');
axios.post('/sso/divetobada', { token })
.then(({ data }) => {
saveSession(data);
redirect('/dashboard');
});<iframe
src="https://divetobada.com/api/widget/login-button?redirect=YOUR_SSO_URL&service=YOUR_SERVICE_NAME"
width="100%"
height="60"
frameborder="0"
scrolling="no"
style="border: none;"
></iframe>스튜디오는 크리에이터가 콘텐츠를 발행하고 팬들과 소통하는 공간입니다.
POST /api/studiosupdatePATCH /api/studios/[studioId]membersGET /api/studios/[studioId]/membersinvitePOST /api/studios/[studioId]/members스튜디오 내 다양한 콘텐츠 타입
노드 기반 화이트보드
/studios/[studioId]/workspace스튜디오 게시물 목록
/studios/[studioId]?tab=posts일정 및 이벤트 관리
/studios/[studioId]?tab=calendar노트 관리
/studios/[studioId]?tab=notesReact Flow 기반의 노드 기반 화이트보드 시스템입니다.
노드는 워크스페이스에서 정보를 표현하고 연결하는 기본 단위입니다.
PLANNING프로젝트 기획 및 아이디어를 기록하는 노드
💡 사용 사례: 프로젝트 기획, 아이디어 정리
NOTE일반적인 메모 및 텍스트 노드
💡 사용 사례: 일반 메모, 문서 작성
SCHEDULE일정 및 이벤트 정보를 표시하는 노드
💡 사용 사례: 일정 관리, 이벤트 계획
RESOURCE파일 및 자료를 공유하는 노드
💡 사용 사례: 자료 공유, 파일 관리
POST스튜디오 게시물을 워크스페이스에 임베드하는 노드
💡 사용 사례: 게시물 참조, 콘텐츠 연결
PHOTO이미지를 직접 표시하는 노드
💡 사용 사례: 이미지 표시, 포트폴리오
POST /api/studios/[studioId]/nodes사이드바의 노드 추가 버튼을 클릭하여 새 노드를 생성합니다.
PATCH /api/studios/[studioId]/nodes/[nodeId]노드를 클릭하거나 편집 버튼을 눌러 내용을 수정합니다.
POST /api/studios/[studioId]/edges노드의 연결점을 드래그하여 다른 노드와 연결합니다.
DELETE /api/studios/[studioId]/nodes/[nodeId]노드를 삭제합니다. 연결된 연결선도 함께 제거됩니다.
워크스페이스 파일을 통해 노드를 그룹화할 수 있습니다.
listGET /api/studios/[studioId]/filescreatePOST /api/studios/[studioId]/filesupdatePATCH /api/studios/[studioId]/files/[fileId]deleteDELETE /api/studios/[studioId]/files/[fileId]Divetobada API 엔드포인트 문서입니다.
Base URL: https://divetobada.com/api
대부분의 API는 인증이 필요합니다. 쿠키 기반 세션 인증을 사용합니다.
GET/posts/for-you인증 필요전체 피드 조회
PostsPageGET/posts/following인증 필요팔로잉 피드 조회
PostsPageGET/posts/[postId]게시물 상세 조회
PostPOST/posts인증 필요게시물 생성
PostGET/studios인증 필요내 스튜디오 목록 조회
Studio[]POST/studios인증 필요스튜디오 생성
StudioGET/studios/[studioId]스튜디오 상세 조회
StudioGET/studios/[studioId]/nodes인증 필요노드 목록 조회
ProjectNode[]POST/studios/[studioId]/nodes인증 필요노드 생성
ProjectNodeGET/users/me인증 필요현재 사용자 정보 조회
UserGET/users/[userId]/followers팔로워 목록 조회
User[]Divetobada SDK를 사용하여 자신만의 커스텀 노드를 만들고 워크스페이스에 통합할 수 있습니다.
⚠️ 현재 상태: 개발 예정 (Phase 4+)
SDK를 통해 커스텀 노드를 개발하면, 워크스페이스에서 자체 제작한 노드를 사용할 수 있습니다.
npm install @divetobada/sdkimport { NodeComponent, NodeProps } from '@divetobada/sdk';
export default function MyCustomNode({ data, id }: NodeProps) {
return (
<div className="custom-node">
<h3>{data.title}</h3>
<p>{data.content}</p>
</div>
);
}import { registerNode } from '@divetobada/sdk';
import MyCustomNode from './MyCustomNode';
registerNode({
type: 'MY_CUSTOM_TYPE',
label: '내 커스텀 노드',
icon: 'CustomIcon',
component: MyCustomNode,
defaultWidth: 300,
defaultHeight: 200
});// 스튜디오 설정에서 커스텀 노드 활성화
// 또는 API를 통해 노드 플러그인 등록커스텀 노드는 다음 인터페이스를 구현해야 합니다.
dataCustomNodeData필수노드의 데이터 객체
idstring필수노드의 고유 ID
selectedboolean노드가 선택되었는지 여부
onEdit노드 편집 시 호출되는 콜백
파라미터: nodeId: string
onDelete노드 삭제 시 호출되는 콜백
파라미터: nodeId: string
기본적인 텍스트 표시 노드 예제
import { NodeComponent } from '@divetobada/sdk';
const SimpleTextNode: NodeComponent = ({ data }) => {
return (
<div className="p-4 border-2 border-black rounded-lg">
<h3 className="font-bold">{data.title}</h3>
<p className="text-sm text-gray-600">{data.content}</p>
</div>
);
};
export default SimpleTextNode;외부 API와 연동하는 노드 예제
import { NodeComponent } from '@divetobada/sdk';
import { useQuery } from '@tanstack/react-query';
const APINode: NodeComponent = ({ data, id }) => {
const { data: apiData } = useQuery({
queryKey: ['api-node', id],
queryFn: async () => {
const res = await fetch(data.apiUrl);
return res.json();
}
});
return (
<div className="p-4 border-2 border-black rounded-lg">
<h3 className="font-bold">{data.title}</h3>
{apiData ? (
<pre>{JSON.stringify(apiData, null, 2)}</pre>
) : (
<p>로딩 중...</p>
)}
</div>
);
};
export default APINode;⚠️ 주의: 베타 기능은 변경되거나 제거될 수 있습니다. 프로덕션 환경에서의 사용은 권장하지 않습니다.
A.일반 포스트는 SNS 스타일의 짧은 글이고, 스튜디오는 블로그 형식의 긴 콘텐츠를 위한 공간입니다. 스튜디오에서는 제목이 있고, Notion 스타일의 에디터를 사용할 수 있습니다.
A.네, 하나의 계정으로 여러 스튜디오를 만들 수 있습니다. 각 스튜디오는 독립적인 브랜딩과 콘텐츠를 가질 수 있습니다.
A.네, 본인이 작성한 게시물은 언제든 수정하거나 삭제할 수 있습니다. 게시물 우측 상단의 메뉴(⋮)를 클릭하세요.
A.개별 이미지는 최대 4MB까지 업로드 가능하며, 한 게시물당 최대 10개의 이미지를 첨부할 수 있습니다.
A.스튜디오의 워크스페이스 탭에서 노드를 추가하고 연결하여 프로젝트를 시각적으로 관리할 수 있습니다. 각 노드는 타입에 따라 다른 기능을 제공합니다.
A.현재는 개발 예정입니다. 향후 SDK를 통해 커스텀 노드를 개발하고 공유할 수 있을 예정입니다.
⚠️ 중요: 모든 사용자가 안전하고 즐거운 경험을 할 수 있도록 아래 가이드라인을 준수해 주세요. 위반 시 계정이 제한될 수 있습니다.
Divetobada를 중심으로 한 다양한 서비스들을 하나의 계정으로 이용하세요
최신 소식과 튜토리얼을 확인하세요
Divetobada Documentation | 버전 2.0
마지막 업데이트: 2025년 1월 15일
5. 소셜 기능
소셜 기능
게시물, 댓글, 팔로우 등 소셜 미디어 핵심 기능입니다.
게시물
텍스트, 이미지, 링크를 포함한 리치 콘텐츠 게시물
API 엔드포인트
createPOST /api/postsgetGET /api/posts/[postId]updatePATCH /api/posts/[postId]deleteDELETE /api/posts/[postId]댓글
게시물에 대한 댓글 시스템
API 엔드포인트
createPOST /api/posts/[postId]/commentsgetGET /api/posts/[postId]/comments상호작용
좋아요, 북마크, 리포스트 기능
API 엔드포인트
likePOST /api/posts/[postId]/likesbookmarkPOST /api/posts/[postId]/bookmark피드 시스템
게시물 피드 및 추천 시스템
전체 (For You)
추천 알고리즘 기반 게시물
GET /api/posts/for-you팔로잉
인증 필요팔로우한 사용자의 게시물
GET /api/posts/following공개
비로그인 사용자를 위한 공개 게시물
GET /api/posts/public