🐰 [flowbit] #7. Workspace UI - 흐름을 보이게 만든 날

☘️ 1. 오늘 목표

어제까지는

이벤트를 기록하고
그 이벤트를 해석해서
프로젝트 상태를 도출하는 구조를 만들었다

즉,

데이터는 완성된 상태

→ 백엔드 기준에서는 이미 모든 정보가 계산 가능한 상태였다

근데 문제는 하나였다.

→ 이게 눈에 안 보인다

그래서 오늘 목표는 명확했다.

→ 흐름을 보이게 만들자

---

☘️ 2. 프론트엔드 구축 (React + Vite)

오늘은 처음으로 프론트를 붙였다.

Vite + React + TypeScript 환경 세팅
axios 기반 API 통신 모듈 분리
taskApi, projectApi 구조 설계

프론트 프로젝트 구조는 다음과 같다

이제부터는

API를 테스트하는 게 아니라
실제로 사용하는 단계

---

☘️ 3. Task 리스트 → Workspace 구조

초기 UI는 단순했다.

Task 1
Task 2
Task 3

근데 이건 Flowbit 방향이 아니었다.

Flowbit은

작업 흐름을 보는 시스템

그래서 구조를 바꿨다.

Project
 ├─ Task
 ├─ Task
 └─ Task

Project 중심으로 작업을 묶어
흐름 단위로 볼 수 있는 Workspace 구조로 변경했다

---

☘️ 4. CRUD 기능 전체 연결

프론트에서 모든 기능을 직접 제어할 수 있게 만들었다

프로젝트

• 생성
• 수정
• 삭제

작업(Task)

• 생성
• 상태 변경 (시작 / 완료 / 보류)
• 삭제
• 수정 (제목 + 설명)

이제는

Postman 없이 UI에서 직접 조작 가능하다

각 액션은 axios 기반 API 호출로
백엔드와 바로 연결되도록 구성했다

---

☘️ 5. 상태값 UI 개선

기존 상태:

TODO / IN_PROGRESS / BLOCKED / DONE

변경:

대기 / 진행중 / 보류 / 완료

그리고

• 상태별 색상 적용
• 사용자 기준으로 가공된 표현 사용

→ 시각적 피드백 강화

---

☘️ 6. UI/UX 개선

개발용 UI에서 서비스 UI로 전환했다

• 다크 테마 → 밝은 테마
• 카드형 UI 적용
• 버튼 스타일 개선
• 입력 영역과 액션 버튼 분리

→ 사용 흐름을 단순화

---

☘️ 7. soft delete + 데이터 정합성

문제:

→ 프로젝트 삭제 시 Task는 남아있음

해결:

task.delete();

삭제된 프로젝트의 Task는 화면에서 제외
조회 조건에서도 제외되도록 통일

→ 데이터 정합성 문제 해결

---

☘️ 8. 프로젝트 상태 구조 리팩토링 🌟

기존:

Project.status = DB 값

변경:

Project.status = Task 상태 기반 계산

if (tasks.isEmpty()) return "READY";
if (hasBlocked) return "BLOCKED";
if (hasInProgress) return "IN_PROGRESS";
if (allDone) return "DONE";

→ 상태를 저장하지 않고 도출한다

상태를 저장하면 동기화 문제가 발생할 수 있기 때문에 항상 Task 기준으로 계산하도록 구조를 변경했다

---

☘️ 9. 타임라인 UI 구현 🌟

GET /api/projects/{id}/timeline

이벤트가 시간순으로 나열될 뿐 작업 단위 흐름이 보이지 않았다

---

☘️ 10. 해결: Task 기준 그룹핑

timeline.reduce((acc, event) => {
  if (!acc[event.taskId]) {
    acc[event.taskId] = {
      taskTitle: event.taskTitle,
      events: [],
    };
  }
  acc[event.taskId].events.push(event);
  return acc;
}, {});

결과:

taskId 기준으로 이벤트 그룹핑
작업 단위 흐름으로 재구성

단순 로그 → 흐름 구조로 변환

---

☘️ 11. 프로젝트 요약 UI

GET /api/projects/{id}/analysis

• 전체 작업 수
• 진행중 / 완료 / 보류
• 마지막 활동

→ 프로젝트 상태를 한눈에 파악 가능

---

☘️ 12. 요청 처리 안정화

• 요청 중 버튼 비활성화 (중복 요청 방지)
• 에러 메시지 처리
• 입력 안정성 확보

---

☘️ 13. 오늘 정리

• 프론트 + 백엔드 연결
• Workspace UI 구현
• CRUD 기능 완성
• 상태 계산 구조 리팩토링
• 타임라인 + 요약 UI 구현

---

☘️ 14. 현재 상태

Project ✔️
Task ✔️
TaskEvent ✔️
Timeline ✔️
Analysis ✔️
Workspace UI ✔️

→ 동작하는 서비스 상태

---

☘️ 15. 다음 목표

이제 핵심 기능은 모두 구현됐다.

현재 상태는

• 흐름을 기록하고
• 해석하고
• 화면으로 보여줄 수 있는 상태

다음 단계는

→ 실제 서비스로 배포하기

도메인 연결
서버 배포
프론트 / 백엔드 연결

이제 로컬을 넘어
실제 환경에서 동작하는 단계로 들어간다

→ 기능 구현을 넘어서 서비스 단계로 전환