diff --git a/sidebar.config.mjs b/sidebar.config.mjs
index 965e129..ace2903 100644
--- a/sidebar.config.mjs
+++ b/sidebar.config.mjs
@@ -110,7 +110,6 @@ export const sidebars = [
items: [
{ label: "기능별 vs 계층별 폴더 구조", slug: "part9/folder-structure" },
{ label: "멀티 모듈 아키텍처", slug: "part9/multi-module" },
- { label: "melos를 이용한 모노레포", slug: "part9/monorepo", badge: "🚧" },
],
},
{
diff --git a/src/content/docs/part9/folder-structure.md b/src/content/docs/part9/folder-structure.mdx
similarity index 57%
rename from src/content/docs/part9/folder-structure.md
rename to src/content/docs/part9/folder-structure.mdx
index e3c20b3..e07a77e 100644
--- a/src/content/docs/part9/folder-structure.md
+++ b/src/content/docs/part9/folder-structure.mdx
@@ -1,6 +1,7 @@
---
title: 기능별 vs 계층별 폴더 구조
---
+import { FileTree } from '@astrojs/starlight/components';
Flutter 프로젝트를 시작할 때 가장 중요한 결정 중 하나는 코드를 어떻게 구성할 것인지 결정하는 것입니다. 적절한 프로젝트 구조는 코드의 가독성을 높이고, 확장성을 향상시키며, 팀 협업을 원활하게 합니다. 이 문서에서는 두 가지 주요 프로젝트 구조 접근 방식인 '기능별 구조'와 '계층별 구조'에 대해 살펴보고, 각각의 장단점 및 적합한 사용 사례를 분석합니다.
@@ -21,53 +22,57 @@ Flutter 프로젝트를 시작할 때 가장 중요한 결정 중 하나는 코
### 계층별 구조의 기본 예시
-```
-lib/
-├── models/ # 데이터 모델 클래스
-│ ├── user.dart
-│ ├── product.dart
-│ └── order.dart
-├── views/ # UI 컴포넌트 및 화면
-│ ├── home_screen.dart
-│ ├── product_screen.dart
-│ └── profile_screen.dart
-├── controllers/ # 비즈니스 로직 및 상태 관리
-│ ├── auth_controller.dart
-│ ├── product_controller.dart
-│ └── order_controller.dart
-├── services/ # 외부 서비스 통신 (API, 데이터베이스 등)
-│ ├── api_service.dart
-│ ├── storage_service.dart
-│ └── analytics_service.dart
-├── utils/ # 유틸리티 함수 및 상수
-│ ├── constants.dart
-│ ├── extensions.dart
-│ └── helpers.dart
-└── main.dart
-```
+
+
+- lib/
+ - models/ # 데이터 모델 클래스
+ - user.dart
+ - product.dart
+ - order.dart
+ - views/ # UI 컴포넌트 및 화면
+ - home_screen.dart
+ - product_screen.dart
+ - profile_screen.dart
+ - controllers/ # 비즈니스 로직 및 상태 관리
+ - auth_controller.dart
+ - product_controller.dart
+ - order_controller.dart
+ - services/ # 외부 서비스 통신 (API, 데이터베이스 등)
+ - api_service.dart
+ - storage_service.dart
+ - analytics_service.dart
+ - utils/ # 유틸리티 함수 및 상수
+ - constants.dart
+ - extensions.dart
+ - helpers.dart
+ - main.dart
+
+
### 계층별 구조의 변형: MVVM 패턴
-```
-lib/
-├── data/
-│ ├── models/ # 데이터 모델
-│ ├── repositories/ # 데이터 액세스 계층
-│ └── data_sources/ # 로컬/원격 데이터 소스
-├── domain/
-│ ├── entities/ # 비즈니스 모델
-│ ├── repositories/ # 리포지토리 인터페이스
-│ └── usecases/ # 비즈니스 규칙 및 로직
-├── presentation/
-│ ├── pages/ # 화면
-│ ├── widgets/ # 재사용 가능한 UI 컴포넌트
-│ └── viewmodels/ # 뷰 모델 (상태 관리)
-├── core/
-│ ├── utils/ # 유틸리티 함수
-│ ├── constants/ # 상수
-│ └── theme/ # 앱 테마
-└── main.dart
-```
+
+
+- lib/
+ - data/
+ - models/ # 데이터 모델
+ - repositories/ # 데이터 액세스 계층
+ - data_sources/ # 로컬/원격 데이터 소스
+ - domain/
+ - entities/ # 비즈니스 모델
+ - repositories/ # 리포지토리 인터페이스
+ - usecases/ # 비즈니스 규칙 및 로직
+ - presentation/
+ - pages/ # 화면
+ - widgets/ # 재사용 가능한 UI 컴포넌트
+ - viewmodels/ # 뷰 모델 (상태 관리)
+ - core/
+ - utils/ # 유틸리티 함수
+ - constants/ # 상수
+ - theme/ # 앱 테마
+ - main.dart
+
+
### 계층별 구조의 장점
@@ -91,72 +96,72 @@ lib/
### 기능별 구조의 기본 예시
-```
-lib/
-├── features/
-│ ├── auth/ # 인증 관련 기능
-│ │ ├── data/
-│ │ │ ├── repositories/
-│ │ │ └── models/
-│ │ ├── domain/
-│ │ │ └── usecases/
-│ │ └── presentation/
-│ │ ├── pages/
-│ │ │ ├── login_page.dart
-│ │ │ └── signup_page.dart
-│ │ ├── widgets/
-│ │ └── providers/
-│ │
-│ ├── products/ # 제품 관련 기능
-│ │ ├── data/
-│ │ ├── domain/
-│ │ └── presentation/
-│ │ ├── pages/
-│ │ │ ├── product_list_page.dart
-│ │ │ └── product_detail_page.dart
-│ │ ├── widgets/
-│ │ └── providers/
-│ │
-│ └── profile/ # 프로필 관련 기능
-│ ├── data/
-│ ├── domain/
-│ └── presentation/
-│
-├── core/ # 공통 기능
-│ ├── network/
-│ ├── storage/
-│ ├── theme/
-│ └── utils/
-│
-└── main.dart
-```
+
+
+- lib/
+ - features/
+ - auth/ # 인증 관련 기능
+ - data/
+ - repositories/
+ - models/
+ - domain/
+ - usecases/
+ - presentation/
+ - pages/
+ - login_page.dart
+ - signup_page.dart
+ - widgets/
+ - providers/
+ - products/ # 제품 관련 기능
+ - data/
+ - domain/
+ - presentation/
+ - pages/
+ - product_list_page.dart
+ - product_detail_page.dart
+ - widgets/
+ - providers/
+ - profile/ # 프로필 관련 기능
+ - data/
+ - domain/
+ - presentation/
+ - core/ # 공통 기능
+ - network/
+ - storage/
+ - theme/
+ - utils/
+ - main.dart
+
+
### 기능별 구조의 변형: DDD(Domain-Driven Design) 적용
-```
-lib/
-├── application/ # 애플리케이션 서비스 (UseCase)
-│ ├── auth/
-│ ├── products/
-│ └── profile/
-├── domain/ # 도메인 모델 및 규칙
-│ ├── auth/
-│ ├── products/
-│ └── profile/
-├── infrastructure/ # 인프라 계층 (리포지토리 구현, 데이터 소스)
-│ ├── auth/
-│ ├── products/
-│ └── profile/
-├── presentation/ # UI 계층
-│ ├── auth/
-│ ├── products/
-│ └── profile/
-├── shared/ # 공통 기능
-│ ├── constants/
-│ ├── extensions/
-│ └── widgets/
-└── main.dart
-```
+
+
+- lib/
+ - application/ # 애플리케이션 서비스 (UseCase)
+ - auth/
+ - products/
+ - profile/
+ - domain/ # 도메인 모델 및 규칙
+ - auth/
+ - products/
+ - profile/
+ - infrastructure/ # 인프라 계층 (리포지토리 구현, 데이터 소스)
+ - auth/
+ - products/
+ - profile/
+ - presentation/ # UI 계층
+ - auth/
+ - products/
+ - profile/
+ - shared/ # 공통 기능
+ - constants/
+ - extensions/
+ - widgets/
+ - main.dart
+
+
### 기능별 구조의 장점
@@ -179,126 +184,125 @@ lib/
### 계층별 구조 예시
-```dart
-lib/
-├── models/ # 데이터 모델
-│ ├── user.dart
-│ ├── product.dart
-│ └── order.dart
-├── providers/ # Riverpod 프로바이더
-│ ├── auth_provider.dart
-│ ├── product_provider.dart
-│ └── cart_provider.dart
-├── repositories/ # 데이터 액세스 계층
-│ ├── auth_repository.dart
-│ ├── product_repository.dart
-│ └── order_repository.dart
-├── screens/ # 화면 위젯
-│ ├── auth/
-│ │ ├── login_screen.dart
-│ │ └── signup_screen.dart
-│ ├── products/
-│ │ ├── product_list_screen.dart
-│ │ └── product_detail_screen.dart
-│ └── profile/
-│ └── profile_screen.dart
-├── widgets/ # 재사용 위젯
-│ ├── product_card.dart
-│ ├── custom_button.dart
-│ └── loading_indicator.dart
-├── router/ # GoRouter 설정
-│ └── router.dart
-├── utils/ # 유틸리티
-│ ├── constants.dart
-│ └── extensions.dart
-└── main.dart
-```
+
+
+- lib/
+ - models/ # 데이터 모델
+ - user.dart
+ - product.dart
+ - order.dart
+ - providers/ # Riverpod 프로바이더
+ - auth_provider.dart
+ - product_provider.dart
+ - cart_provider.dart
+ - repositories/ # 데이터 액세스 계층
+ - auth_repository.dart
+ - product_repository.dart
+ - order_repository.dart
+ - screens/ # 화면 위젯
+ - auth/
+ - login_screen.dart
+ - signup_screen.dart
+ - products/
+ - product_list_screen.dart
+ - product_detail_screen.dart
+ - profile/
+ - profile_screen.dart
+ - widgets/ # 재사용 위젯
+ - product_card.dart
+ - custom_button.dart
+ - loading_indicator.dart
+ - router/ # GoRouter 설정
+ - router.dart
+ - utils/ # 유틸리티
+ - constants.dart
+ - extensions.dart
+ - main.dart
+
+
### 기능별 구조 예시
-```dart
-lib/
-├── features/
-│ ├── auth/
-│ │ ├── models/
-│ │ │ └── user.dart
-│ │ ├── repositories/
-│ │ │ └── auth_repository.dart
-│ │ ├── providers/
-│ │ │ └── auth_provider.dart
-│ │ ├── screens/
-│ │ │ ├── login_screen.dart
-│ │ │ └── signup_screen.dart
-│ │ └── widgets/
-│ │ ├── login_form.dart
-│ │ └── social_login_buttons.dart
-│ │
-│ ├── products/
-│ │ ├── models/
-│ │ │ └── product.dart
-│ │ ├── repositories/
-│ │ │ └── product_repository.dart
-│ │ ├── providers/
-│ │ │ └── product_provider.dart
-│ │ ├── screens/
-│ │ │ ├── product_list_screen.dart
-│ │ │ └── product_detail_screen.dart
-│ │ └── widgets/
-│ │ └── product_card.dart
-│ │
-│ └── cart/
-│ ├── models/
-│ │ └── cart_item.dart
-│ ├── repositories/
-│ │ └── cart_repository.dart
-│ ├── providers/
-│ │ └── cart_provider.dart
-│ ├── screens/
-│ │ ├── cart_screen.dart
-│ │ └── checkout_screen.dart
-│ └── widgets/
-│ └── cart_item_widget.dart
-│
-├── core/
-│ ├── router/
-│ │ └── router.dart
-│ ├── theme/
-│ │ └── app_theme.dart
-│ ├── widgets/
-│ │ ├── custom_button.dart
-│ │ └── loading_indicator.dart
-│ └── utils/
-│ ├── constants.dart
-│ └── extensions.dart
-│
-└── main.dart
-```
+
+
+- lib/
+ - features/
+ - auth/
+ - models/
+ - user.dart
+ - repositories/
+ - auth_repository.dart
+ - providers/
+ - auth_provider.dart
+ - screens/
+ - login_screen.dart
+ - signup_screen.dart
+ - widgets/
+ - login_form.dart
+ - social_login_buttons.dart
+ - products/
+ - models/
+ - product.dart
+ - repositories/
+ - product_repository.dart
+ - providers/
+ - product_provider.dart
+ - screens/
+ - product_list_screen.dart
+ - product_detail_screen.dart
+ - widgets/
+ - product_card.dart
+ - cart/
+ - models/
+ - cart_item.dart
+ - repositories/
+ - cart_repository.dart
+ - providers/
+ - cart_provider.dart
+ - screens/
+ - cart_screen.dart
+ - checkout_screen.dart
+ - widgets/
+ - cart_item_widget.dart
+ - core/
+ - router/
+ - router.dart
+ - theme/
+ - app_theme.dart
+ - widgets/
+ - custom_button.dart
+ - loading_indicator.dart
+ - utils/
+ - constants.dart
+ - extensions.dart
+ - main.dart
+
+
## 하이브리드 접근 방식
많은 실제 프로젝트에서는 두 가지 접근 방식을 혼합하여 사용합니다. 다음은 하이브리드 구조의 예시입니다:
-```
-lib/
-├── features/ # 주요 기능별 구성
-│ ├── auth/
-│ ├── products/
-│ └── cart/
-│
-├── shared/ # 공유 컴포넌트
-│ ├── models/ # 공통 모델
-│ ├── widgets/ # 공통 위젯
-│ ├── services/ # 공통 서비스
-│ └── utils/ # 유틸리티
-│
-├── core/ # 핵심 인프라
-│ ├── network/ # 네트워크 관련
-│ ├── storage/ # 로컬 스토리지
-│ ├── di/ # 의존성 주입
-│ └── router/ # 라우팅
-│
-└── main.dart
-```
+
+
+- lib/
+ - features/ # 주요 기능별 구성
+ - auth/
+ - products/
+ - cart/
+ - shared/ # 공유 컴포넌트
+ - models/ # 공통 모델
+ - widgets/ # 공통 위젯
+ - services/ # 공통 서비스
+ - utils/ # 유틸리티
+ - core/ # 핵심 인프라
+ - network/ # 네트워크 관련
+ - storage/ # 로컬 스토리지
+ - di/ # 의존성 주입
+ - router/ # 라우팅
+ - main.dart
+
+
이 접근 방식은 다음과 같은 이점을 제공합니다:
diff --git a/src/content/docs/part9/multi-module.md b/src/content/docs/part9/multi-module.mdx
similarity index 90%
rename from src/content/docs/part9/multi-module.md
rename to src/content/docs/part9/multi-module.mdx
index 1333a30..37a080e 100644
--- a/src/content/docs/part9/multi-module.md
+++ b/src/content/docs/part9/multi-module.mdx
@@ -1,6 +1,7 @@
---
title: 멀티 모듈 아키텍처
---
+import { FileTree } from '@astrojs/starlight/components';
대규모 Flutter 프로젝트에서는 코드베이스가 커짐에 따라 빌드 시간 증가, 유지보수 복잡성, 팀 협업 어려움 등의 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위한 방법 중 하나가 멀티 모듈 아키텍처입니다. 이 문서에서는 Flutter에서 멀티 모듈 아키텍처를 구현하는 방법, 장단점, 그리고 실제 적용 사례를 살펴보겠습니다.
@@ -35,27 +36,29 @@ Flutter에서 멀티 모듈 아키텍처를 구현하는 여러 방법이 있습
#### 프로젝트 구조 예시
-```
-my_flutter_project/
-├── app/ # 메인 앱 모듈
-│ ├── lib/
-│ ├── pubspec.yaml
-│ └── ...
-├── packages/
-│ ├── core/ # 핵심 기능 모듈
-│ │ ├── lib/
-│ │ └── pubspec.yaml
-│ ├── feature_auth/ # 인증 기능 모듈
-│ │ ├── lib/
-│ │ └── pubspec.yaml
-│ ├── feature_home/ # 홈 기능 모듈
-│ │ ├── lib/
-│ │ └── pubspec.yaml
-│ └── feature_profile/ # 프로필 기능 모듈
-│ ├── lib/
-│ └── pubspec.yaml
-└── pubspec.yaml # 루트 pubspec.yaml (옵션)
-```
+
+
+- my_flutter_project/
+ - app/ # 메인 앱 모듈
+ - lib/
+ - pubspec.yaml
+ - ...
+ - packages/
+ - core/ # 핵심 기능 모듈
+ - lib/
+ - pubspec.yaml
+ - feature_auth/ # 인증 기능 모듈
+ - lib/
+ - pubspec.yaml
+ - feature_home/ # 홈 기능 모듈
+ - lib/
+ - pubspec.yaml
+ - feature_profile/ # 프로필 기능 모듈
+ - lib/
+ - pubspec.yaml
+ - pubspec.yaml # 루트 pubspec.yaml (옵션)
+
+
#### 각 모듈의 pubspec.yaml 설정
@@ -275,29 +278,31 @@ void setupServiceLocator() {
### 기능 모듈 예시
-```
-feature_auth/
-├── lib/
-│ ├── src/
-│ │ ├── data/
-│ │ │ ├── models/
-│ │ │ ├── repositories/
-│ │ │ └── datasources/
-│ │ ├── domain/
-│ │ │ ├── entities/
-│ │ │ ├── usecases/
-│ │ │ └── repositories/
-│ │ ├── presentation/
-│ │ │ ├── pages/
-│ │ │ ├── widgets/
-│ │ │ └── providers/
-│ │ └── di/
-│ │ └── auth_module.dart
-│ ├── feature_auth.dart # 공개 API
-│ └── testing.dart # 테스트 지원 API (선택사항)
-├── test/
-└── pubspec.yaml
-```
+
+
+- feature_auth/
+ - lib/
+ - src/
+ - data/
+ - models/
+ - repositories/
+ - datasources/
+ - domain/
+ - entities/
+ - usecases/
+ - repositories/
+ - presentation/
+ - pages/
+ - widgets/
+ - providers/
+ - di/
+ - auth_module.dart
+ - feature_auth.dart # 공개 API
+ - testing.dart # 테스트 지원 API (선택사항)
+ - test/
+ - pubspec.yaml
+
+
### 공개 API 설계
@@ -350,19 +355,21 @@ class AuthModule {
### 프로젝트 구조
-```
-ecommerce_app/
-├── app/ # 메인 앱 모듈
-├── packages/
-│ ├── core/ # 핵심 기능 모듈
-│ ├── ui_kit/ # UI 컴포넌트 모듈
-│ ├── feature_auth/ # 인증 기능 모듈
-│ ├── feature_products/ # 상품 기능 모듈
-│ ├── feature_cart/ # 장바구니 기능 모듈
-│ ├── feature_checkout/ # 결제 기능 모듈
-│ └── feature_profile/ # 프로필 기능 모듈
-└── melos.yaml
-```
+
+
+- ecommerce_app/
+ - app/ # 메인 앱 모듈
+ - packages/
+ - core/ # 핵심 기능 모듈
+ - ui_kit/ # UI 컴포넌트 모듈
+ - feature_auth/ # 인증 기능 모듈
+ - feature_products/ # 상품 기능 모듈
+ - feature_cart/ # 장바구니 기능 모듈
+ - feature_checkout/ # 결제 기능 모듈
+ - feature_profile/ # 프로필 기능 모듈
+ - melos.yaml
+
+
### 코어 모듈