Monorepo — 웹과 모바일 코드 공유하기

my-monorepo/
├── apps/
│   ├── mobile/            # React Native 앱
│   │   ├── app.json
│   │   ├── package.json
│   │   └── src/
│   └── web/               # Next.js 웹
│       ├── next.config.js
│       ├── package.json
│       └── src/
├── packages/
│   ├── shared/            # 공유 비즈니스 로직
│   │   ├── package.json
│   │   └── src/
│   │       ├── api/
│   │       ├── hooks/
│   │       ├── utils/
│   │       └── types/
│   ├── ui/                # 공유 UI 컴포넌트
│   │   ├── package.json
│   │   └── src/
│   └── config/            # 공유 설정
│       ├── eslint/
│       └── tsconfig/
├── package.json
├── turbo.json
└── pnpm-workspace.yaml

// packages/shared/src/hooks/useAuth.ts
// React Native와 웹 모두에서 사용 가능
import { create } from 'zustand';

interface AuthStore {
  user: User | null;
  token: string | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

export const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  token: null,
  login: async (email, password) => {
    const { user, token } = await authApi.login(email, password);
    set({ user, token });
  },
  logout: () => set({ user: null, token: null }),
}));

// packages/shared/src/api/userApi.ts
import { apiClient } from './client';

export const userApi = {
  getProfile: () => apiClient.get<User>('/users/me').then(r => r.data),
  updateProfile: (data: Partial<User>) => apiClient.put('/users/me', data),
};

// packages/shared/src/utils/validation.ts
import { z } from 'zod';

export const loginSchema = z.object({
  email: z.string().email('올바른 이메일을 입력하세요'),
  password: z.string().min(8, '8자 이상 입력하세요'),
});

export type LoginForm = z.infer<typeof loginSchema>;

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env"],
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {}
  }
}

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

# 전체 빌드
pnpm turbo build

# 특정 앱만 실행
pnpm turbo dev --filter=mobile
pnpm turbo dev --filter=web

# 공유 패키지 변경 시 의존 앱 자동 리빌드

// apps/mobile/metro.config.js
const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');

const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, '../..');

const config = getDefaultConfig(projectRoot);

// monorepo의 node_modules를 찾을 수 있도록 설정
config.watchFolders = [monorepoRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
];

module.exports = config;