[FEAT] Implement Fake Data for Web UI Prototype

[dmp100]

Task Description

실제 API 연동 전, Fake Data를 사용해 Web UI 프로토타입을 제작한다. 임시 Repository와 Mock 데이터를 활용해 데이터 흐름과 화면 렌더링을 검증한다.

Use fake data to build a web UI prototype. Before connecting real APIs, verify data flow and UI rendering on the Web (composeApp or webApp) using a temporary repository and mock data.

Todo List

• Add Ktor MockEngine for fake HTTP calls

• Create FakeRepository implementing Repository interface

• Define sample models (e.g., Post, User, Category) in domain

• Implement functions returning fake data

• Inject FakeRepository into ViewModel via DI

• Create UiState sealed class for Compose binding

• Build and run Web (React) to verify fake data rendering

• Adjust UI layout, list design, and detail preview

Development Scope

Web Platform

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• [CHORE] Design ERD and Schema for Supabase Integration #10

👤 Suggested Assignees

• dmp100

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Approach

Ticket Summary

Create a web UI prototype using fake data to verify data flow and rendering before connecting to real APIs. Implement a mock HTTP layer using Ktor MockEngine, define domain models, create a fake repository, and build React UI components that consume shared Kotlin Multiplatform code.

Observations

Codebase Summary

This is a Kotlin Multiplatform project with a shared business logic module consumed by multiple platform targets. The webApp (React + TypeScript) is the web client that imports compiled Kotlin/JS artifacts from the shared module using ES6 imports. Currently, the shared module contains only basic utility code with no domain models, repositories, HTTP clients, or state management. Dependencies for Ktor 3.3.1 and kotlinx-serialization 1.9.0 are declared in the gradle catalog but not yet used.

Assumptions

Assumption 1: Web platform target implementation

Options Considered:

• Add JS target to composeApp and build Compose for Web UI
• Focus on webApp (React) as the web platform

Chosen Option: Focus on webApp (React) as the web platform

Rationale: Implement for webApp (React) as it's the only configured web target and the ticket explicitly mentions "run Web (React)." The state management will use patterns that work well with React rather than Compose-specific solutions, following established KMP-to-React integration patterns found in the codebase (StateFlow exposure, suspend functions as Promises).

Assumption 2: Dependency injection approach

Options Considered:

• Add Koin Multiplatform for comprehensive DI
• Use manual dependency injection with factory functions

Chosen Option: Use manual dependency injection with factory functions

Rationale: This aligns with the project's early stage, avoids adding framework complexity for a prototype, keeps dependencies minimal, and is easy for developers to understand and evolve to a proper DI framework later if needed.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Dependencies and Build Configuration

Set up the necessary dependencies for HTTP client, serialization, and data handling. Configure Gradle to include Ktor client libraries and kotlinx-serialization in the shared module.

Task 1: Add Ktor Client Dependencies

Configure the shared module to include Ktor client libraries for HTTP operations and mock testing.

• Update shared/build.gradle.kts commonMain dependencies block to include ktor-client-core, ktor-client-content-negotiation, and ktor-serialization-kotlinx-json from the existing version catalog
• Add ktor-client-js to jsMain dependencies for the JavaScript platform implementation
• Add ktor-client-mock to commonTest dependencies for testing with MockEngine
• Apply the kotlinx-serialization plugin in the shared module plugins block

Task 2: Add Coroutines Dependencies

Ensure coroutines support is available for asynchronous operations in the shared module.

• Add kotlinx-coroutines-core to commonMain dependencies in shared/build.gradle.kts
• Verify jsMain has kotlinx-coroutines-core configured for proper Promise mapping

🤖 Prompt for AI agents

Configure Gradle dependencies for HTTP client, serialization, and async
operations in the shared module.

In shared/build.gradle.kts:
- Apply kotlinx-serialization plugin
- Add to commonMain: ktor-client-core, ktor-client-content-negotiation,
ktor-serialization-kotlinx-json, kotlinx-coroutines-core
- Add to jsMain: ktor-client-js, kotlinx-coroutines-core
- Add to commonTest: ktor-client-mock

Phase 2: Domain Layer with Models

Create the domain models and data structures that represent the application's core entities. These models will be shared across all platforms and serve as the contract between data and UI layers.

Task 1: Create Domain Model Data Classes

Define the core entities mentioned in the ticket (Post, User, Category) in the shared module.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/model/ directory
• Add Post.kt data class with @serializable and @JsExport annotations containing fields: id, title, content, authorId, categoryId, createdAt, updatedAt
• Add User.kt data class with @serializable and @JsExport annotations containing fields: id, username, email, displayName
• Add Category.kt data class with @serializable and @JsExport annotations containing fields: id, name, description, color
• Use String for IDs and timestamps for simplicity in the prototype

Task 2: Create UI State Models

Define sealed classes to represent different UI states for data loading, success, and error conditions.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/state/ directory
• Add DataState.kt sealed class with @JsExport: Loading, Success, Error subclasses
• Ensure generic type T is properly exposed to JavaScript with type parameters

🤖 Prompt for AI agents

Create domain models and UI state classes in the shared module.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/model/:
- Create Post.kt with @Serializable and @JsExport: id, title, content, authorId,
categoryId, createdAt, updatedAt (all Strings)
- Create User.kt with @Serializable and @JsExport: id, username, email,
displayName
- Create Category.kt with @Serializable and @JsExport: id, name, description,
color

In shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/state/:
- Create DataState.kt sealed class with @JsExport: Loading, Success<T>, Error
subclasses

Phase 3: Repository Pattern with Fake Data

Implement the repository interface and a fake implementation using Ktor MockEngine to simulate HTTP API responses. This establishes the data access pattern that will be used for real API integration later.

Task 1: Define Repository Interface

Create the contract for data access operations that will be implemented by both fake and real repositories.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/ directory
• Add PatchNoteRepository.kt interface with @JsExport annotation
• Define suspend functions: getPosts(), getPostById(id: String), getUsers(), getCategoryById(id: String), getCategories()
• Return types should be domain model classes (Post, User, Category) wrapped in Result or direct types

Task 2: Configure Ktor MockEngine

Set up Ktor HttpClient with MockEngine to return fake JSON responses for repository calls.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/data/network/ directory
• Add HttpClientFactory.kt with function to create HttpClient configured with ContentNegotiation(Json)
• Add MockDataProvider.kt to centralize mock JSON response strings for posts, users, and categories
• Create FakeHttpClient.kt that configures MockEngine to respond to different endpoint patterns ("/posts", "/users", "/categories") with the mock JSON data

Task 3: Implement FakeRepository

Create the concrete implementation that uses the mocked HTTP client to return fake data.

• Add FakeRepository.kt in shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/ implementing PatchNoteRepository
• Inject HttpClient as constructor parameter
• Implement each interface method to make HTTP calls through the mock client
• Handle JSON deserialization using kotlinx-serialization
• Include 5-7 realistic sample posts with varied content, 3-4 users, and 3-5 categories in MockDataProvider

🤖 Prompt for AI agents

Create repository pattern with fake data using Ktor MockEngine.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/:
- Create PatchNoteRepository.kt interface with @JsExport and suspend functions:
getPosts(), getPostById(id), getUsers(), getCategoryById(id), getCategories()

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/network/:
- Create HttpClientFactory.kt with function to create HttpClient with
ContentNegotiation(Json)
- Create MockDataProvider.kt with mock JSON strings for 5-7 posts, 3-4 users,
3-5 categories
- Create FakeHttpClient.kt configuring MockEngine to respond to "/posts",
"/users", "/categories" endpoints

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/:
- Create FakeRepository.kt implementing PatchNoteRepository using HttpClient,
deserializing JSON responses

Phase 4: State Management and Dependency Injection

Create a state holder that manages application state and exposes it to the UI layer. Set up manual dependency injection to wire components together.

Task 1: Create State Holder

Build a class that holds UI state and exposes it via StateFlow for reactive updates.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/presentation/ directory
• Add PatchNoteStateHolder.kt with @JsExport annotation
• Use MutableStateFlow<DataState<List>> for posts state, similar flows for users and categories
• Provide suspend functions: loadPosts(), loadUsers(), loadCategories() that update the state flows
• Accept repository instance via constructor parameter
• Ensure StateFlow is properly exposed to JavaScript (may need wrapper functions that return Flow)

Task 2: Set Up Manual Dependency Injection

Create factory functions that instantiate and wire together the repository and state holder.

• Create shared/src/commonMain/kotlin/org/patchnote/patchnote/di/ directory
• Add AppContainer.kt with @JsExport object or class that provides factory methods
• Implement provideRepository() that creates FakeRepository with FakeHttpClient
• Implement provideStateHolder() that creates PatchNoteStateHolder with the repository
• Expose singleton or factory pattern that ensures consistent instances

🤖 Prompt for AI agents

Create state management and manual DI for the shared module.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/presentation/:
- Create PatchNoteStateHolder.kt with @JsExport
- Add MutableStateFlow<DataState<List<Post>>> for posts, similar for users and
categories
- Add suspend functions loadPosts(), loadUsers(), loadCategories() that update
state flows
- Accept repository via constructor
- Expose StateFlow properly for JavaScript

In shared/src/commonMain/kotlin/org/patchnote/patchnote/di/:
- Create AppContainer.kt with @JsExport
- Add provideRepository() returning FakeRepository with FakeHttpClient
- Add provideStateHolder() returning PatchNoteStateHolder with repository
- Use singleton or factory pattern for consistent instances

Phase 5: React Integration and UI

Update the React application to consume the shared Kotlin state holder, create hooks for reactive state management, and build UI components to display the fake data.

Task 1: Create React Hooks for KMP State

Build custom React hooks that subscribe to StateFlow from the shared module and convert them to React state.

• Create webApp/src/hooks/ directory
• Add useKmpStateFlow.ts hook that accepts a StateFlow and returns React state + loading indicator
• Handle StateFlow subscription in useEffect with proper cleanup on unmount
• Convert Kotlin data classes to TypeScript interfaces in webApp/src/types/ for type safety
• Create usePatchNoteData.ts hook that initializes AppContainer, calls load functions, and returns states

Task 2: Build Post List Component

Create a React component that displays the list of posts from fake data.

• Create webApp/src/components/PostList/ directory with PostList.tsx and PostList.css
• Use usePatchNoteData hook to consume posts state
• Render loading state, error state, and success state with list of posts
• Display post title, author info, category, and preview of content
• Include basic styling with card layout and responsive grid

Task 3: Build User and Category Components

Create additional components to display users and categories.

• Create webApp/src/components/UserList/ with UserList.tsx to display user information
• Create webApp/src/components/CategoryList/ with CategoryList.tsx to show available categories
• Both components should follow same patterns as PostList (loading/error/success states)
• Add minimal styling for consistent look with post list

Task 4: Update Main App Component

Integrate the new components into the main application layout.

• Update webApp/src/App.tsx to remove placeholder Greeting component
• Add PostList, UserList, and CategoryList components in a clean layout
• Implement basic navigation or tabs to switch between views
• Add minimal header/navigation structure for the prototype
• Ensure proper error boundaries and fallback UI

Task 5: Verify Build and Data Flow

Test the complete data flow from shared module through React components.

• Run npm run build:shared to compile Kotlin to JavaScript
• Verify TypeScript types are generated correctly for domain models
• Run npm run dev to start the React development server
• Confirm fake data renders in all components
• Test that loading states appear briefly before data loads
• Verify no console errors in browser developer tools
• Document any adjustments needed for layout or styling in component CSS files

🤖 Prompt for AI agents

Build React UI that consumes shared Kotlin state and displays fake data.

In webApp/src/hooks/:
- Create useKmpStateFlow.ts hook that subscribes to StateFlow and converts to
React state with useEffect cleanup
- Create usePatchNoteData.ts hook that initializes AppContainer, calls load
functions, returns states

In webApp/src/types/:
- Define TypeScript interfaces matching Kotlin data classes (Post, User,
Category, DataState)

In webApp/src/components/:
- Create PostList/ with PostList.tsx and PostList.css displaying posts with
loading/error/success states, card layout
- Create UserList/ with UserList.tsx displaying users with same state patterns
- Create CategoryList/ with CategoryList.tsx displaying categories with same
state patterns

In webApp/src/App.tsx:
- Remove placeholder Greeting component
- Add PostList, UserList, CategoryList with navigation/tabs
- Add header and error boundaries

Test complete flow: build shared module, verify types, run dev server, confirm
rendering and no console errors

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Configure Gradle dependencies for HTTP client, serialization, and async
operations in the shared module.

In shared/build.gradle.kts:
- Apply kotlinx-serialization plugin
- Add to commonMain: ktor-client-core, ktor-client-content-negotiation,
ktor-serialization-kotlinx-json, kotlinx-coroutines-core
- Add to jsMain: ktor-client-js, kotlinx-coroutines-core
- Add to commonTest: ktor-client-mock
===============================================================================

Task: 2

Create domain models and UI state classes in the shared module.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/model/:
- Create Post.kt with @Serializable and @JsExport: id, title, content, authorId,
categoryId, createdAt, updatedAt (all Strings)
- Create User.kt with @Serializable and @JsExport: id, username, email,
displayName
- Create Category.kt with @Serializable and @JsExport: id, name, description,
color

In shared/src/commonMain/kotlin/org/patchnote/patchnote/domain/state/:
- Create DataState.kt sealed class with @JsExport: Loading, Success<T>, Error
subclasses
===============================================================================

Task: 3

Create repository pattern with fake data using Ktor MockEngine.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/:
- Create PatchNoteRepository.kt interface with @JsExport and suspend functions:
getPosts(), getPostById(id), getUsers(), getCategoryById(id), getCategories()

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/network/:
- Create HttpClientFactory.kt with function to create HttpClient with
ContentNegotiation(Json)
- Create MockDataProvider.kt with mock JSON strings for 5-7 posts, 3-4 users,
3-5 categories
- Create FakeHttpClient.kt configuring MockEngine to respond to "/posts",
"/users", "/categories" endpoints

In shared/src/commonMain/kotlin/org/patchnote/patchnote/data/repository/:
- Create FakeRepository.kt implementing PatchNoteRepository using HttpClient,
deserializing JSON responses
===============================================================================

Task: 4

Create state management and manual DI for the shared module.

In shared/src/commonMain/kotlin/org/patchnote/patchnote/presentation/:
- Create PatchNoteStateHolder.kt with @JsExport
- Add MutableStateFlow<DataState<List<Post>>> for posts, similar for users and
categories
- Add suspend functions loadPosts(), loadUsers(), loadCategories() that update
state flows
- Accept repository via constructor
- Expose StateFlow properly for JavaScript

In shared/src/commonMain/kotlin/org/patchnote/patchnote/di/:
- Create AppContainer.kt with @JsExport
- Add provideRepository() returning FakeRepository with FakeHttpClient
- Add provideStateHolder() returning PatchNoteStateHolder with repository
- Use singleton or factory pattern for consistent instances
===============================================================================

Task: 5

Build React UI that consumes shared Kotlin state and displays fake data.

In webApp/src/hooks/:
- Create useKmpStateFlow.ts hook that subscribes to StateFlow and converts to
React state with useEffect cleanup
- Create usePatchNoteData.ts hook that initializes AppContainer, calls load
functions, returns states

In webApp/src/types/:
- Define TypeScript interfaces matching Kotlin data classes (Post, User,
Category, DataState)

In webApp/src/components/:
- Create PostList/ with PostList.tsx and PostList.css displaying posts with
loading/error/success states, card layout
- Create UserList/ with UserList.tsx displaying users with same state patterns
- Create CategoryList/ with CategoryList.tsx displaying categories with same
state patterns

In webApp/src/App.tsx:
- Remove placeholder Greeting component
- Add PostList, UserList, CategoryList with navigation/tabs
- Add header and error boundaries

Test complete flow: build shared module, verify types, run dev server, confirm
rendering and no console errors

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!