개인 프로젝트· 2024

Nomad

프로젝트 핸들링 서비스 (외주 PM 워크플로우)

역할: 기획 · 디자인 · 개발 (단독)

Vue.jsFirebase FirestoreVue RouterVuex

Live Site

Headline

클라이언트 등록 → 외주사 PM 배정 → 역할별 담당자 매칭 → 일정·태스크 매니징

외주 프로젝트 워크플로우를 한 화면에 모은 PoC. 클라이언트가 프로젝트를 등록하면 PM이 개발자/기획자/디자이너를 배정하고 일정·태스크를 추적합니다.

Problem

· 외주 프로젝트는 역할(클라이언트/PM/개발/기획/디자인)이 많아 협업 도구가 분산됨
· 프로젝트 + 태스크 + 담당자 배정을 한 곳에서 실시간으로 보고 싶음

Action

· Firestore NoSQL projects/tasks 컬렉션 설계 + arrayUnion으로 멤버 배정
· 역할별 권한 표준화 (클라이언트/PM/개발/기획/디자인)
· onSnapshot 실시간 구독으로 프로젝트·태스크 즉시 반영

Result

· PoC 배포 (nomad-poc.web.app)

Core Code

핵심 코드 스니펫

Firestore — 프로젝트 + 태스크 데이터 모델

// 컬렉션 구조
projects/ {
  id, title, status, clientId,
  deadline, description,
  members: [{ userId, role, assignedAt }]  // arrayUnion으로 추가
}
tasks/ {
  projectId, title, status,
  assigneeId, role, dueDate
}

// 역할 기반 담당자 배정
await updateDoc(doc(db, "projects", id), {
  members: arrayUnion({
    userId, role,           // dev/design/plan
    assignedAt: serverTimestamp(),
  }),
});

// 프로젝트 + 태스크 실시간 구독
onSnapshot(
  query(collection(db, "tasks"),
        where("projectId", "==", projectId)),
  (snap) => setTasks(snap.docs.map((d) => d.data()))
);

다른 프로젝트 보기