Feat: 모노레포 인프라 설정 #88

DreamPaste · 2025-11-29T14:11:07Z

📌 개요

모노레포 인프라 관리를 위한 TypeScript/ESLint 공유 설정 및 Changesets 버전 관리 시스템 도입

TypeScript 공유 설정 패키지 (@soso/tsconfig) 생성
ESLint 공유 설정 패키지 (@soso/eslint-config) 확장
Changesets 자동 버전 관리 시스템 초기화
pnpm workspace 구조 최적화
모노레포 디렉토리 구조 확립 (apps/, packages/)

🗒 상세 설명

1. 모노레포 디렉토리 구조 확립

프론트엔드 팀의 통합 인프라를 위한 모노레포 기본 구조를 설계하고 생성했습니다.

핵심 기술 및 구현사항

pnpm workspaces: 패키지 간 의존성 관리 및 심볼릭 링크 기반 로컬 개발
Turborepo: 빌드 캐싱 및 affected builds (향후 설정 예정)
apps vs packages 전략:
- apps/: 실행 가능한 애플리케이션 (web, docs, storybook)
- packages/: 재사용 가능한 라이브러리 (ui, hooks, utils, config)

디렉토리 구조

SOSO-Front-End/
├── apps/
│   ├── web/                # Next.js 메인 웹 앱
│   ├── docs/               # Nextra 문서 사이트 (예정)
│   └── storybook/          # Storybook 개발 환경 (예정)
│
├── packages/
│   ├── tsconfig/           # ✨ 새로 생성
│   ├── eslint-config/      # ✨ 새로 생성
│   ├── ui/                 # React 컴포넌트 라이브러리 (예정)
│   ├── hooks/              # 커스텀 훅 라이브러리 (예정)
│   └── utils/              # 유틸리티 함수
│
├── .changeset/             # ✨ 새로 생성
└── pnpm-workspace.yaml     # ✅ 업데이트

사용 예시

# 워크스페이스 확인
pnpm list --depth 0

# 특정 패키지에서 명령어 실행
pnpm --filter @soso/storybook dev
pnpm --filter @soso/ui build

# 모든 패키지 빌드 (Turborepo 활용)
pnpm build:packages

2. TypeScript 공유 설정 패키지 (`@soso/tsconfig`)

모든 패키지와 앱에서 재사용할 수 있는 TypeScript 설정을 패키지로 분리했습니다.

핵심 기술 및 구현사항

3가지 설정 파일 제공:
1. base.json: 모든 설정의 기본 (strict, ES2020, incremental)
2. nextjs.json: Next.js 앱용 (noEmit: false, 빌드 가능)
3. react-library.json: React 라이브러리용 (noEmit: true, 타입 체크만)
Strict 모드 기본 활성화:
- strict: true
- noUnusedLocals: true
- noUnusedParameters: true
- noFallthroughCasesInSwitch: true
모던 JavaScript 타겟:
- target: ES2020
- lib: ["ES2020", "DOM"]
- module: ESNext

생성된 파일

packages/tsconfig/
├── package.json
├── base.json               # 기본 설정
├── nextjs.json             # Next.js용
├── react-library.json      # 라이브러리용
├── .eslintrc.cjs           # 패키지 자체 린트 설정
└── README.md               # 사용 가이드

사용 예시

// apps/web/tsconfig.json (Next.js 앱)
{
  "extends": "@soso/tsconfig/nextjs.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

// packages/ui/tsconfig.json (React 라이브러리)
{
  "extends": "@soso/tsconfig/react-library.json",
  "include": ["src"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}

3. ESLint 공유 설정 패키지 (`@soso/eslint-config`)

Next.js 앱과 React 라이브러리를 위한 ESLint 설정을 확장했습니다.

핵심 기술 및 구현사항

2가지 설정 파일 제공:
1. index.cjs: Next.js 앱용 (next/core-web-vitals 포함)
2. library.cjs: React 라이브러리용 (airbnb-typescript 기반)
통합된 스타일 가이드:
- Airbnb JavaScript Style Guide
- TypeScript ESLint
- Prettier 통합
React 17+ 대응:
- react/react-in-jsx-scope: off (JSX Transform 지원)
- react/jsx-filename-extension: ['.tsx']

생성된 파일

packages/eslint-config/
├── package.json
├── index.cjs               # Next.js용
├── library.cjs             # 라이브러리용
├── .eslintrc.cjs           # 패키지 자체 린트 설정
└── README.md               # 사용 가이드

사용 예시

// apps/web/.eslintrc.cjs (Next.js 앱)
module.exports = {
  root: true,
  extends: ['@soso/eslint-config'],
};

// packages/ui/.eslintrc.cjs (React 라이브러리)
const path = require('path');

module.exports = {
  root: true,
  extends: ['@soso/eslint-config/library'],
  parserOptions: {
    project: path.resolve(__dirname, './tsconfig.json'),
  },
};

4. Changesets 자동 버전 관리 시스템 추가

패키지의 버전 관리, Changelog 생성, npm 배포를 자동화하는 Changesets를 도입했습니다.

🎯 Changesets란?

Changesets는 모노레포 환경에서 여러 패키지의 버전을 자동으로 관리하고 Changelog를 생성하며 npm에 배포하는 도구입니다.

주요 기능:

✅ Semantic Versioning 자동화: major.minor.patch 버전 관리
✅ Changelog 자동 생성: 각 패키지의 변경사항을 자동으로 문서화
✅ 의존성 자동 업데이트: A 패키지가 업데이트되면 A에 의존하는 B도 자동 업데이트
✅ 안전한 배포: 변경사항을 먼저 기록하고, 리뷰 후 배포
✅ Git 기반 워크플로우: PR 단위로 변경사항 관리

📚 Changesets 워크플로우

1. 코드 수정
   ↓
2. changeset 생성 (pnpm changeset)
   ↓
3. PR 생성 및 리뷰
   ↓
4. PR 머지 to main
   ↓
5. 버전 업데이트 (pnpm version-packages)
   ↓
6. npm 배포 (pnpm release)

🔧 설정 파일 상세 설명

// .changeset/config.json
{
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",

  // Changelog 생성 방식
  "changelog": "@changesets/cli/changelog",

  // changeset 생성 시 자동 커밋 여부 (false 권장)
  "commit": false,

  // 함께 버전이 올라가야 하는 패키지 그룹
  "fixed": [],

  // 같은 버전을 공유하는 패키지 그룹
  "linked": [],

  // npm 배포 시 공개 범위 (public/restricted)
  "access": "public",

  // 기본 브랜치 (main/master)
  "baseBranch": "main",

  // 내부 의존성 업데이트 시 버전 증가 방식
  // "patch": 의존 패키지 업데이트 시 patch 버전만 증가
  "updateInternalDependencies": "patch",

  // npm에 배포하지 않을 패키지 (앱들)
  "ignore": [
    "@soso/web", // Next.js 메인 앱
    "@soso/docs", // Nextra 문서 사이트
    "@soso/storybook" // Storybook 앱
  ]
}

📖 Changesets 사용 가이드

Step 1: 변경사항 기록 (changeset 생성)

코드를 수정한 후 changeset을 생성합니다:

pnpm changeset

대화형 CLI가 실행됩니다:

🦋  Which packages would you like to include?
  ◯ @soso/ui
  ◯ @soso/hooks
  ◯ @soso/utils

화살표 키로 이동, 스페이스로 선택, 엔터로 확정합니다.

🦋  Which packages should have a major bump?
  ◯ @soso/ui

🦋  Which packages should have a minor bump?
  ◉ @soso/ui

🦋  Which packages should have a patch bump?
  ◯ @soso/ui

버전 선택 기준:

버전 타입	언제 사용?	예시
major (1.0.0 → 2.0.0)	Breaking Change 기존 API가 변경되어 사용자 코드가 깨질 수 있음	- 함수 시그니처 변경 - prop 이름 변경 - 기능 제거
minor (1.0.0 → 1.1.0)	New Feature 새로운 기능 추가 (하위 호환)	- 새로운 컴포넌트 추가 - 새로운 prop 추가 - 새로운 훅 추가
patch (1.0.0 → 1.0.1)	Bug Fix 버그 수정 또는 내부 개선	- 버그 수정 - 타입 수정 - 문서 업데이트

변경사항 요약 입력:

🦋  Please enter a summary for this change (this will be written to the changelog):
  Add size prop to Button component

생성된 changeset 파일:

## // .changeset/cool-bananas-smile.md

## "@soso/ui": minor

Add size prop to Button component

Step 2: 버전 업데이트

PR이 머지된 후, 배포 준비가 되면 버전을 업데이트합니다:

pnpm version-packages

자동으로 수행되는 작업:

.changeset/*.md 파일 읽기
package.json 버전 업데이트
CHANGELOG.md 생성/업데이트
의존하는 패키지들도 함께 업데이트
changeset 파일 삭제

예시:

// packages/ui/package.json (Before)
{
  "version": "0.0.0"
}

// packages/ui/package.json (After)
{
  "version": "0.1.0"
}

// packages/ui/CHANGELOG.md (자동 생성)

# @soso/ui

## 0.1.0

### Minor Changes

- abc1234: Add size prop to Button component

// apps/web/package.json (의존 패키지도 자동 업데이트)
{
  "dependencies": {
    "@soso/ui": "0.1.0" // 0.0.0 → 0.1.0
  }
}

Step 3: npm 배포

pnpm release

자동으로 수행되는 작업:

pnpm build:packages - 모든 패키지 빌드
changeset publish - npm에 배포
Git 태그 생성 (@soso/[email protected])

💡 Changesets 옵션 선택 가이드

1. 어떤 패키지를 선택해야 하나요?

실제로 코드를 수정한 패키지만 선택하세요.

# 예시: Button.tsx 파일만 수정
packages/ui/src/components/Button.tsx

# Changeset 생성 시
✅ @soso/ui 선택
❌ @soso/hooks 선택 안 함 (수정 안 함)
❌ @soso/web 선택 안 함 (apps는 자동 업데이트)

의존 패키지는 자동으로 처리됩니다:

@soso/ui 업데이트 → @soso/web도 자동으로 @soso/ui 버전 업데이트
수동으로 앱 패키지를 선택할 필요 없음

2. major/minor/patch 구분이 어려워요

구체적인 예시:

변경 내용	버전 타입	이유
`<Button>` 컴포넌트에 `size` prop 추가	minor	새 기능이지만 기존 코드는 그대로 작동
`<Button>` 컴포넌트의 `variant` prop을 `type`으로 변경	major	기존 코드가 깨짐
`<Button>`의 클릭 시 버그 수정	patch	버그 수정
`useAuth` 훅 새로 추가	minor	새 기능 추가
`useAuth` 훅의 반환 타입 변경	major	기존 사용자 코드 타입 에러
내부 함수 리팩터링 (외부 API 변화 없음)	patch	내부 개선
TypeScript 타입 수정 (사용자 코드 에러 없음)	patch	타입 개선
README 문서 업데이트	patch	문서 개선

헷갈릴 때는 이렇게 질문하세요:

"기존 코드가 깨지나?" → Yes: major
"새로운 기능이 추가되나?" → Yes: minor
"버그를 고치거나 개선했나?" → Yes: patch

3. 여러 패키지를 동시에 수정했어요

하나의 changeset에 여러 패키지를 포함할 수 있습니다:

pnpm changeset

# 선택
✅ @soso/ui (minor)
✅ @soso/hooks (patch)

생성된 changeset:

---
'@soso/ui': minor
'@soso/hooks': patch
---

Add Button component with useButton hook

각 패키지마다 다른 버전 타입을 지정 가능합니다.

4. changeset 파일을 수정할 수 있나요?

네, 직접 수정 가능합니다:

# 생성된 파일 확인
ls .changeset/
# cool-bananas-smile.md

# 파일 수정
vim .changeset/cool-bananas-smile.md

---
'@soso/ui': minor
---

Add size prop to Button component

**New Props:**

- `size`: "sm" | "md" | "lg"

**Migration Guide:**

- No breaking changes

Markdown 문법 사용 가능하며, 이 내용이 Changelog에 그대로 들어갑니다.

5. changeset을 삭제하고 싶어요

# changeset 파일 직접 삭제
rm .changeset/cool-bananas-smile.md

# 또는 새로 생성
pnpm changeset

Git에 커밋하기 전이라면 언제든 수정/삭제 가능합니다.

🚀 실전 시나리오

시나리오 1: Button 컴포넌트에 size prop 추가

# 1. 코드 수정
# packages/ui/src/components/Button.tsx

# 2. changeset 생성
pnpm changeset
# → @soso/ui 선택
# → minor 선택
# → "Add size prop to Button component" 입력

# 3. Git 커밋
git add .
git commit -m "feat(ui): add size prop to Button"

# 4. PR 생성
gh pr create

# 5. PR 머지 후 버전 업데이트
pnpm version-packages
# → packages/ui/package.json: 0.1.0
# → packages/ui/CHANGELOG.md: 생성
# → apps/web/package.json: @soso/ui 0.1.0으로 업데이트

# 6. 배포
pnpm release

시나리오 2: Breaking Change (prop 이름 변경)

# 1. 코드 수정
# packages/ui/src/components/Button.tsx
# - variant → type으로 변경

# 2. changeset 생성
pnpm changeset
# → @soso/ui 선택
# → major 선택 ⚠️
# → "BREAKING: Rename variant prop to type" 입력

# 3. changeset 파일 수정
vim .changeset/breaking-change.md

---
'@soso/ui': major
---

BREAKING: Rename variant prop to type

**Migration Guide:**

```tsx
// Before
<Button variant="primary">Click</Button>

// After
<Button type="primary">Click</Button>
```

Reason: Better naming convention


##### 시나리오 3: 여러 패키지 동시 수정

```bash
# 수정된 파일:
# - packages/ui/src/components/Select.tsx (새 컴포넌트)
# - packages/hooks/src/useSelect.ts (새 훅)
# - packages/ui/src/components/Button.tsx (버그 수정)

# changeset 생성
pnpm changeset
# → @soso/ui 선택 (minor) - Select 추가
# → @soso/hooks 선택 (minor) - useSelect 추가

pnpm changeset
# → @soso/ui 선택 (patch) - Button 버그 수정

2개의 changeset 파일 생성:

.changeset/add-select.md (ui: minor, hooks: minor)
.changeset/fix-button.md (ui: patch)

버전 업데이트 시 결과:

@soso/ui: 0.1.0 → 0.2.0 (minor가 우선)
@soso/hooks: 0.1.0 → 0.2.0

📋 Changesets 체크리스트

PR 생성 전:

코드 수정 완료
pnpm changeset 실행
올바른 패키지 선택
올바른 버전 타입 선택 (major/minor/patch)
명확한 변경사항 요약 작성
.changeset/*.md 파일 Git에 커밋
PR에 changeset 파일 포함

PR 머지 후 (릴리즈 담당자):

🎨 Changesets 파일 예시

## // .changeset/add-button-size.md

## "@soso/ui": minor

Add size prop to Button component

Added a new `size` prop to the Button component, allowing developers to easily control button sizes.

**Available sizes:**

- `sm`: Small button (32px height)
- `md`: Medium button (40px height) - default
- `lg`: Large button (48px height)

**Example:**
\`\`\`tsx
<Button size="lg">Large Button</Button>
\`\`\`

## // .changeset/breaking-rename-variant.md

## "@soso/ui": major

BREAKING: Rename Button variant prop to type

**Migration Guide:**

\`\`\`tsx
// Before
<Button variant="primary">Click</Button>
<Button variant="secondary">Cancel</Button>

// After
<Button type="primary">Click</Button>
<Button type="secondary">Cancel</Button>
\`\`\`

**Reason:**
The `type` prop name is more semantic and aligns with HTML button type attribute conventions.

사용 예시

# 변경사항 기록
pnpm changeset

# 버전 업데이트
pnpm version-packages

# npm 배포
pnpm release

5. pnpm workspace 최적화

핵심 기술 및 구현사항

Glob 패턴 적용: apps/*, packages/*로 자동 인식
기존 docs 단독 항목 제거: apps/*에 포함

설정 파일

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

6. 루트 package.json 스크립트 추가

핵심 기술 및 구현사항

모노레포를 편리하게 관리할 수 있는 스크립트를 추가했습니다.

{
  "scripts": {
    // 개발 서버
    "dev:storybook": "pnpm --filter @soso/storybook dev",
    "dev:docs": "pnpm --filter @soso/docs dev",

    // 빌드 및 테스트 (Turborepo)
    "build:packages": "turbo run build --filter='./packages/*'",
    "test:packages": "turbo run test --filter='./packages/*'",

    // Changesets
    "changeset": "changeset",
    "version-packages": "changeset version",
    "release": "pnpm build:packages && changeset publish"
  }
}

사용 예시

# Storybook 개발 서버 실행
pnpm dev:storybook

# 모든 패키지 빌드 (Turborepo 캐싱 활용)
pnpm build:packages

# 모든 패키지 테스트
pnpm test:packages

# Changeset 생성
pnpm changeset

# 버전 업데이트
pnpm version-packages

# npm 배포
pnpm release

7. ESLint 설정 최적화

문제 상황

packages/eslint-config/*.cjs 파일에서 TypeScript 파서 에러가 발생했습니다:

ESLint was configured to run on `packages/eslint-config/library.cjs`
using `parserOptions.project`: tsconfig.json
However, that TSConfig does not include this file

해결 방법

.eslintignore 생성:

packages/eslint-config/*.cjs
packages/tsconfig/*.json
**/*.json
!package.json

각 패키지별 .eslintrc.cjs 추가:

// packages/eslint-config/.eslintrc.cjs
module.exports = {
  root: true,
  parserOptions: {
    project: null, // 타입 체크 비활성화
  },
};

📸 스크린샷

AS-IS

SOSO-Front-End/
├── src/
├── public/
├── tools/
│   └── eslint-config/   # 루트에 존재
└── package.json         # 단일 프로젝트

TO-BE

SOSO-Front-End/
├── apps/
│   ├── web/             # Next.js 앱
│   ├── docs/            # Nextra 문서
│   └── storybook/       # Storybook
├── packages/
│   ├── tsconfig/        # ✨ TypeScript 공유 설정
│   ├── eslint-config/   # ✨ ESLint 공유 설정
│   ├── ui/              # ✨ UI 라이브러리
│   ├── hooks/           # ✨ 커스텀 훅
│   └── utils/           # 유틸리티
├── .changeset/          # ✨ Changesets
└── pnpm-workspace.yaml  # ✨ Workspace 설정

🔗 이슈

closes #86

✅ 체크리스트

코드가 스타일 가이드를 따릅니다
자체 코드 리뷰를 완료했습니다
복잡/핵심 로직에 주석을 추가했습니다 (설정 파일에 주석 포함)
관심사 분리를 확인했습니다 (apps vs packages)
잠재적 사이드이펙트를 점검했습니다 (ESLint 파서 에러 해결)
모든 설정을 테스트했습니다

🧪 테스트 방법

변경 사항을 다음 방법으로 검증했습니다:

1. pnpm workspace 확인

pnpm list --depth 0
# ✅ 모든 워크스페이스 정상 로드 확인
# ✅ @changesets/cli 설치 확인

2. 디렉토리 구조 확인

tree -L 2 packages/
# ✅ tsconfig/ 생성 확인
# ✅ eslint-config/ 생성 확인
# ✅ ui/ 기본 구조 확인

3. Changesets 동작 확인

pnpm changeset
# ✅ Changesets CLI 정상 작동
# ✅ .changeset/ 디렉토리 생성 확인

4. ESLint 실행 확인

pnpm lint
# ✅ ESLint 정상 실행
# ✅ packages/eslint-config/*.cjs 파서 에러 해결
# ✅ 기존 경고만 존재 (새로운 에러 없음)

5. TypeScript 설정 확인

# packages/ui/tsconfig.json에서 @soso/tsconfig 상속 확인
cat packages/ui/tsconfig.json
# ✅ "extends": "@soso/tsconfig/react-library.json" 확인

📝 추가 노트

참고 자료

후속 작업

이어서 진행할 작업 계획:

Issue 1.2: UI 패키지 기본 설정 및 빌드 시스템 (예정)

packages/ui/package.json 작성
- exports 필드 설정 (ESM/CJS 지원)
- peerDependencies 설정 (React, React-DOM)
- npm 메타데이터 추가
tsup 빌드 설정
- ESM/CJS 동시 번들링
- TypeScript 타입 선언 파일(.d.ts) 생성
- Source map 생성
Vitest 단위 테스트 환경
- Vitest 설정 파일 작성
- Testing Library 설정
- 커버리지 리포트 설정
간단한 컴포넌트 예제
- Button 컴포넌트 작성
- Button.test.tsx 작성
- 빌드 및 테스트 검증

Dependencies: ✅ Issue 1.1 완료

Issue 1.3: Storybook 개발 환경 구축 (예정)

Storybook 8 설치 및 설정
SOSO web 환경과 동일하게 설정 (Tailwind CSS, 폰트)
Interaction tests 설정 (Play functions)
Playwright 연동 (E2E 테스트)

Dependencies: Issue 1.2 완료 필요

linear · 2025-11-29T14:11:10Z

SOS-46 기본 인프라 구축

github-actions · 2025-11-29T14:13:17Z

✅ PREVIEW https://soso-front-end-j0t9rax80-dreampastes-projects.vercel.app

Copilot

Pull request overview

이 PR은 모노레포 기반 인프라 구축을 위한 핵심 설정 패키지들을 도입하여 프로젝트의 확장성과 유지보수성을 대폭 개선합니다.

주요 변경사항

TypeScript 공유 설정 패키지 (@soso/tsconfig) 생성으로 일관된 타입 체크 환경 구축
ESLint 공유 설정 패키지 (@soso/eslint-config) 확장으로 통일된 코드 스타일 적용
Changesets 버전 관리 시스템 도입으로 패키지 배포 프로세스 자동화 준비

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`pnpm-workspace.yaml`	`docs` 단독 항목 제거, glob 패턴으로 워크스페이스 구조 최적화
`pnpm-lock.yaml`	Changesets CLI 및 관련 의존성 추가, 새로운 패키지 등록
`packages/tsconfig/base.json`	모든 패키지의 기반이 되는 TypeScript 기본 설정 (strict 모드, ES2020)
`packages/tsconfig/nextjs.json`	Next.js 앱용 TypeScript 설정 (JSX preserve, Next.js 플러그인 지원)
`packages/tsconfig/react-library.json`	React 라이브러리용 TypeScript 설정 (react-jsx, bundler 해석)
`packages/tsconfig/package.json`	tsconfig 패키지 메타데이터 및 공개 파일 목록 정의
`packages/tsconfig/README.md`	tsconfig 패키지 사용 가이드 및 각 설정 파일 설명
`packages/tsconfig/.eslintrc.cjs`	tsconfig 패키지 자체의 ESLint 설정
`packages/eslint-config/index.cjs`	Next.js 앱용 ESLint 설정 (Airbnb, Next.js 규칙 포함)
`packages/eslint-config/library.cjs`	React 라이브러리용 ESLint 설정 (devDependencies 허용)
`packages/eslint-config/package.json`	eslint-config 패키지 메타데이터 및 진입점 정의
`packages/eslint-config/README.md`	eslint-config 패키지 사용 가이드
`packages/eslint-config/.eslintrc.cjs`	eslint-config 패키지 자체의 ESLint 설정
`package.json`	Changesets 관련 스크립트 추가 및 의존성 추가
`.eslintignore`	설정 파일 무시 패턴 최적화
`.changeset/config.json`	Changesets 설정 (배포 대상 패키지, 버전 관리 전략)
`.changeset/README.md`	Changesets 사용 가이드 및 워크플로우 설명

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2025-11-29T14:14:25Z

packages/tsconfig/README.md

+## 📚 참고
+
+- [TSConfig Reference](https://www.typescriptlang.org/tsconfig)
+- [TypeScript 모노레포 베스트 프랙티스](hhttps://turborepo.com/docs/guides/tools/typescript)


URL에 오타가 있습니다. "hhttps" → "https"로 수정해야 합니다.

Suggested change

- [TypeScript 모노레포 베스트 프랙티스](hhttps://turborepo.com/docs/guides/tools/typescript)

- [TypeScript 모노레포 베스트 프랙티스](https://turborepo.com/docs/guides/tools/typescript)

Copilot · 2025-11-29T14:14:25Z

packages/eslint-config/index.cjs

@@ -0,0 +1,42 @@
+/* tools/eslint-config/index.cjs  ───── 공통 ESLint preset */


파일 경로가 잘못되었습니다. "tools/eslint-config/index.cjs" → "packages/eslint-config/index.cjs"로 수정해야 합니다.

Suggested change

/* tools/eslint-config/index.cjs ───── 공통 ESLint preset */

/* packages/eslint-config/index.cjs ───── 공통 ESLint preset */

Copilot · 2025-11-29T14:14:25Z

.changeset/README.md

+Release PR이 머지되면, GitHub Actions가 자동으로:
+


문서에서 GitHub Actions를 통한 자동 배포를 언급하고 있지만, 현재 .github/workflows 디렉토리에는 changesets 관련 워크플로우가 없는 것으로 보입니다. 실제 구현이 아직 완료되지 않았다면 이 부분을 "추후 구현 예정"으로 명시하거나 제거하는 것이 좋습니다.

Suggested change

Release PR이 머지되면, GitHub Actions가 자동으로:

> ⚠️ 현재 GitHub Actions를 통한 자동 배포는 아직 구현되지 않았으며, 추후 구현될 예정입니다.

Release PR이 머지되면, (추후 구현 예정) GitHub Actions가 자동으로 다음 작업을 수행합니다:

곧 합니다

Copilot · 2025-11-29T14:14:26Z

.changeset/config.json

+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@soso/web", "@soso/docs", "@soso/storybook"]


현재 ignore 목록에 @soso/docs와 @soso/storybook가 포함되어 있지만, 실제 apps/ 디렉토리에는 아직 이 패키지들이 존재하지 않습니다. 향후 추가될 패키지를 미리 설정해둔 것이라면 문제없지만, 존재하지 않는 패키지를 설정에 포함하면 혼란을 줄 수 있습니다. 실제 패키지가 추가될 때 함께 설정하는 것을 권장합니다.

Suggested change

"ignore": ["@soso/web", "@soso/docs", "@soso/storybook"]

"ignore": ["@soso/web"]

추가할겁니다

Copilot · 2025-11-29T14:14:26Z

packages/tsconfig/nextjs.json

+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]


nextjs.json은 공유 설정 파일이므로 include와 exclude 필드를 포함하지 않는 것이 좋습니다. 이 필드들은 각 앱의 tsconfig.json에서 프로젝트별로 정의해야 합니다. 공유 설정에 포함하면 이를 상속받는 모든 프로젝트에 동일한 경로가 적용되어 유연성이 떨어집니다. README.md의 사용 예시처럼 각 앱에서 직접 정의하도록 수정하는 것을 권장합니다.

Suggested change

"include": [

"next-env.d.ts",

"**/*.ts",

"**/*.tsx",

".next/types/**/*.ts"

],

"exclude": ["node_modules"]

github-actions · 2025-11-29T14:16:14Z

📦 번들 분석 결과

📊 번들 크기 요약

항목	값
📦 전체 번들 크기	`3.7M`
📄 JavaScript 크기	`1.6M`
🗂️ JavaScript 파일 수	`61개`

🔍 주요 청크 파일 (크기순)

fe98bb7c-75056deddb8826d9.js - 169K
framework-69e0f7d37422957b.js - 137K
main-448b0e12e0910adc.js - 130K
7147-4b792b1c613a0a9e.js - 122K
1762-0e7232d83dcb3887.js - 121K
polyfills-42372ed130431b0a.js - 110K
2877-2422cd6c39a97d65.js - 90K
6086-65069d4634f32053.js - 76K
page-3026af1cfd56a766.js - 31K
2906-7f73a91282e5669e.js - 28K

🤖 자동 생성된 번들 분석 리포트

github-actions · 2025-11-29T14:16:14Z

⚡ Lighthouse 성능 분석 결과

📊 전체 평균 점수

지표	점수
🚀 Performance	74점
♿ Accessibility	86점
✅ Best Practices	100점
🔍 SEO	100점

📈 측정 현황

측정 성공: 15/16 페이지
상태: success

📄 페이지별 상세 분석

🏠 커뮤니티 페이지: `/main/community`

지표	점수
🚀 Performance	71점
♿ Accessibility	78점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👥 창업자 페이지: `/main/founder`

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🏡 홈 페이지: `/main/home`

지표	점수
🚀 Performance	75점
♿ Accessibility	91점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🗺️ 지도 페이지: `/main/maps`

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👤 프로필 페이지: `/main/profile`

지표	점수
🚀 Performance	75점
♿ Accessibility	88점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🔗 전체 상세 분석 결과

📊 전체 상세 Lighthouse 분석 결과 보기

📄 측정된 페이지

/main/community
/main/founder
/main/home
/main/maps
/main/profile

모든 페이지에서 성능 측정이 완료되었습니다.

🤖 자동 생성된 Lighthouse 성능 리포트

youdaeng2

전체적으로 모노레포 구조 정리해주셔서 더 명확해진 것 같습니다.
apps/web, packages 구조가 잘 분리된 것 같네요 👍👍 사용하면서 이슈 있으면 공유드리겠습니다!
고생 많으셨어요!

github-actions · 2025-12-06T08:08:47Z

✅ PREVIEW https://soso-front-end-1b6a27qjh-dreampastes-projects.vercel.app

DreamPaste added 4 commits November 29, 2025 22:36

feat: eslint용 공유 설정 패키지 추가

d77e2d2

feat: 타입스크립트 공유 설정 패키지 추가

3940a4b

docs: 문서 참고자료 수정

325b6b1

feat: changeSet 추가

027a434

Copilot AI review requested due to automatic review settings November 29, 2025 14:11

Copilot started reviewing on behalf of DreamPaste November 29, 2025 14:11 View session

Copilot finished reviewing on behalf of DreamPaste November 29, 2025 14:13

Copilot AI reviewed Nov 29, 2025

View reviewed changes

DreamPaste requested a review from youdaeng2 November 29, 2025 14:27

DreamPaste self-assigned this Nov 29, 2025

DreamPaste added Feat 💡 새로운 기능을 구현하고 추가합니다! Refactor 🫧 기존 내용을 개선하거나 최적화합니다! 휘건 labels Nov 29, 2025

youdaeng2 approved these changes Dec 6, 2025

View reviewed changes

Merge branch 'dev' into feat/SOS-46-monorepo

ccb5d6b

DreamPaste merged commit ee54272 into dev Dec 6, 2025
4 checks passed

DreamPaste deleted the feat/SOS-46-monorepo branch December 6, 2025 08:38

	- [TypeScript 모노레포 베스트 프랙티스](hhttps://turborepo.com/docs/guides/tools/typescript)
	- [TypeScript 모노레포 베스트 프랙티스](https://turborepo.com/docs/guides/tools/typescript)

		@@ -0,0 +1,42 @@
		/* tools/eslint-config/index.cjs ───── 공통 ESLint preset */

	/* tools/eslint-config/index.cjs ───── 공통 ESLint preset */
	/* packages/eslint-config/index.cjs ───── 공통 ESLint preset */

-Release PR이 머지되면, GitHub Actions가 자동으로:
+> ⚠️ 현재 GitHub Actions를 통한 자동 배포는 아직 구현되지 않았으며, 추후 구현될 예정입니다.
+Release PR이 머지되면, (추후 구현 예정) GitHub Actions가 자동으로 다음 작업을 수행합니다:

	"ignore": ["@soso/web", "@soso/docs", "@soso/storybook"]
	"ignore": ["@soso/web"]

Feat: 모노레포 인프라 설정 #88

Feat: 모노레포 인프라 설정 #88

Uh oh!

Conversation

DreamPaste commented Nov 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 개요

🗒 상세 설명

1. 모노레포 디렉토리 구조 확립

핵심 기술 및 구현사항

디렉토리 구조

사용 예시

2. TypeScript 공유 설정 패키지 (@soso/tsconfig)

핵심 기술 및 구현사항

생성된 파일

사용 예시

3. ESLint 공유 설정 패키지 (@soso/eslint-config)

핵심 기술 및 구현사항

생성된 파일

사용 예시

4. Changesets 자동 버전 관리 시스템 추가

🎯 Changesets란?

📚 Changesets 워크플로우

🔧 설정 파일 상세 설명

📖 Changesets 사용 가이드

Step 1: 변경사항 기록 (changeset 생성)

Step 2: 버전 업데이트

Step 3: npm 배포

💡 Changesets 옵션 선택 가이드

1. 어떤 패키지를 선택해야 하나요?

2. major/minor/patch 구분이 어려워요

3. 여러 패키지를 동시에 수정했어요

4. changeset 파일을 수정할 수 있나요?

5. changeset을 삭제하고 싶어요

🚀 실전 시나리오

시나리오 1: Button 컴포넌트에 size prop 추가

시나리오 2: Breaking Change (prop 이름 변경)

📋 Changesets 체크리스트

🎨 Changesets 파일 예시

사용 예시

5. pnpm workspace 최적화

핵심 기술 및 구현사항

설정 파일

6. 루트 package.json 스크립트 추가

핵심 기술 및 구현사항

사용 예시

7. ESLint 설정 최적화

문제 상황

해결 방법

📸 스크린샷

AS-IS

TO-BE

🔗 이슈

✅ 체크리스트

🧪 테스트 방법

1. pnpm workspace 확인

2. 디렉토리 구조 확인

3. Changesets 동작 확인

4. ESLint 실행 확인

5. TypeScript 설정 확인

📝 추가 노트

참고 자료

후속 작업

Issue 1.2: UI 패키지 기본 설정 및 빌드 시스템 (예정)

Issue 1.3: Storybook 개발 환경 구축 (예정)

Uh oh!

linear bot commented Nov 29, 2025

Uh oh!

github-actions bot commented Nov 29, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

주요 변경사항

Reviewed changes

Uh oh!

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 29, 2025

DreamPaste commented Nov 29, 2025 •

edited

Loading

2. TypeScript 공유 설정 패키지 (`@soso/tsconfig`)

3. ESLint 공유 설정 패키지 (`@soso/eslint-config`)

github-actions bot commented Nov 29, 2025 •

edited

Loading

github-actions bot commented Nov 29, 2025 •

edited

Loading

🏠 커뮤니티 페이지: `/main/community`

👥 창업자 페이지: `/main/founder`

🏡 홈 페이지: `/main/home`

🗺️ 지도 페이지: `/main/maps`

👤 프로필 페이지: `/main/profile`