Progress Bar, Live Preview, Separated modules

 

Progress bar 작업 완료.

나중에 좀 더 다듬을 예정.

 

Live Preview 작업 완료.

후일 History Tab 구현 예정.

적어도 클라우드 스토리지는 구현한뒤에 가능할듯

 

 

프론트엔드의 generate/page.tsx에 페이지 내의 모든 컴포넌트들이 때려넣어져 있어서

하나하나 모듈을 분리하여 결합도를 떨어뜨리는 작업을 진행함.

 

generate status module

system monitor module

live preview module

types

등등..

 

수정 후 현재의 파일 구조는 다음과 같다 (Next.js 앱라우터 구조) :

comfy-surfai-frontend-next/
├── src/
│   ├── app/
│   │   ├── (auth)/           # Authentication related pages
│   │   ├── generate/         # Image generation page
│   │   │   └── page.tsx
│   │   ├── profile/          # User profile page
│   │   │   └── page.tsx
│   │   ├── layout.tsx        # Main layout
│   │   └── page.tsx          # Home page
│   │
│   ├── components/
│   │   ├── generate/         # Generation related components
│   │   │   ├── GenerationStatus.tsx
│   │   │   ├── LivePreviews.tsx
│   │   │   └── SystemMonitor.tsx
│   │   ├── nav/              # Navigation components
│   │   │   └── Navbar.tsx
│   │   └── template/         # Template related components
│   │       ├── ParameterField.tsx
│   │       └── TemplateForm.tsx
│   │
│   ├── contexts/             # React contexts
│   │   └── AuthContext.tsx
│   │
│   ├── dto/                  # Data Transfer Objects
│   │   ├── create-user.dto.ts
│   │   └── login.dto.ts
│   │
│   ├── interfaces/           # TypeScript interfaces
│   │   ├── system-monitor.interface.ts
│   │   ├── template-form.interface.ts
│   │   ├── websocket.interface.ts
│   │   └── workflow.interface.ts
│   │
│   └── lib/
│       └── apiClient.ts      # API client configuration