[Bug]: react-heading 패키지 설치 후 Module not found 오류 발생

.changeset/violet-jars-invite.md

@@ -0,0 +1,25 @@
+---
+"@hensley-ui/react-heading": patch
+---
+
+fix: resolve Module not found error for react-heading package
+
+- Users encountered "Module not found: Error: Can't resolve 'react-heading'"
+- Package name mismatch between documentation and actual package name
+- Missing build files in dist directory
+- Inconsistent module format (mixed ESM/CommonJS)
+
+- Fix package name: use @hensley-ui/react-heading instead of react-heading
+- Convert to ESM-only build (remove CommonJS support)
+- Update package.json exports configuration
+- Regenerate build files with proper ESM format
+- Update README.md with correct usage examples
+- Fix vite.config.ts for ESM-only output
+
+- Package now exports only ESM format (removed CommonJS support)
+- Users must use @hensley-ui/react-heading instead of react-heading
+
+- Install: npm install @hensley-ui/react-heading
+- Import: import { Heading } from '@hensley-ui/react-heading'
+
+- Resolves GitHub issue #34

CLAUDE.md

@@ -0,0 +1,76 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+This is a monorepo using **pnpm workspaces** and **Turbo** for task orchestration.
+
+### Common Commands
+- `pnpm dev` - Start development mode for all packages in parallel
+- `pnpm build` - Build all packages (excludes playground)
+- `pnpm test` - Run tests for all packages (excludes playground)  
+- `pnpm type-check` - Type check all packages (excludes playground)
+- `pnpm clean` - Clean build artifacts across all packages
+
+### Package-specific Commands
+- `pnpm --filter @hensley-ui/ui storybook` - Run Storybook for the main UI package
+- `pnpm build-storybook` - Build Storybook static files
+
+### Publishing
+- `pnpm version-packages` - Version packages using Changesets
+- `pnpm ci:publish` - Publish packages to npm (used in CI)
+
+## Architecture Overview
+
+This is a **React UI component library** built on top of **Radix UI** and **ShadCN design system**. The project uses a monorepo structure with the following key packages:
+
+### Workspace Structure
+- `packages/ui/` - Main UI library package (`@hensley-ui/ui`)
+  - Contains polymorphic components (Heading, Button, Dialog, etc.)
+  - Uses Radix UI primitives with ShadCN styling
+  - Built with Vite and bundled as ES modules
+  - Includes Storybook for component documentation
+
+- `packages/ui/react-button/` - Standalone button package (`@hensley-ui/react-button`)
+- `packages/ui/react-heading/` - Standalone heading package  
+- `packages/typescript-config/` - Shared TypeScript configurations
+- `playground/` - Development playground using Vite + React
+
+### Key Technologies
+- **Build System**: Vite with TypeScript and DTS generation
+- **Styling**: TailwindCSS with ShadCN design tokens
+- **Component Architecture**: Polymorphic components using Radix Slot
+- **Testing**: Vitest with React Testing Library
+- **Documentation**: Storybook
+- **Monorepo**: pnpm workspaces + Turbo
+
+### Component Philosophy
+Components follow a **polymorphic pattern** allowing them to render as different HTML elements via the `as` prop. All components are built with accessibility-first approach using Radix UI primitives.
+
+Example:
+```tsx
+<Heading as="h1">Main Title</Heading>
+<Heading as="p">Paragraph text</Heading>
+```
+
+### Build Process
+The main UI package builds with Vite, generating:
+- ES modules in `dist/index.es.js`
+- TypeScript declarations in `dist/index.d.ts` 
+- CSS bundle in `dist/styles.css`
+
+Individual component packages are built separately and can be consumed independently.
+
+## Testing Strategy
+
+- Unit tests use Vitest + React Testing Library + jsdom
+- Run `pnpm test` to execute all tests
+- Individual packages can run tests with `pnpm --filter <package> test`
+
+## Linting and Type Checking
+
+- ESLint configuration extends from the monorepo root
+- TypeScript configs extend from `@hensley-ui/typescript-config`
+- Run `pnpm type-check` before building to catch type errors
+- Turbo ensures type-checking happens before builds automatically

packages/ui/react-heading/README.md

@@ -1,19 +1,19 @@
-# @hensley-ui/heading
+# @hensley-ui/react-heading
 
 A flexible and accessible heading component built with React and Tailwind CSS. This component provides semantic heading elements (h1-h6) with consistent styling and typography.
 
 ## Installation
 
 ```bash
-npm install @hensley-ui/heading
+npm install @hensley-ui/react-heading
 ```
 
 **Note:** This package depends on `@hensley-ui/utils`. It will be installed automatically.
 
 ## Usage
 
 ```tsx
-import { Heading } from '@hensley-ui/heading'
+import { Heading } from '@hensley-ui/react-heading'
 
 function App() {
   return (
@@ -55,7 +55,7 @@ Each heading level comes with predefined Tailwind CSS classes:
 ### Basic Usage
 
 ```tsx
-import { Heading } from '@hensley-ui/heading'
+import { Heading } from '@hensley-ui/react-heading'
 
 function Article() {
   return (
@@ -74,7 +74,7 @@ function Article() {
 ### Custom Styling
 
 ```tsx
-import { Heading } from '@hensley-ui/heading'
+import { Heading } from '@hensley-ui/react-heading'
 
 function CustomHeading() {
   return (
@@ -93,7 +93,7 @@ function CustomHeading() {
 The Heading component is polymorphic, meaning you can render it as any heading element:
 
 ```tsx
-import { Heading } from '@hensley-ui/heading'
+import { Heading } from '@hensley-ui/react-heading'
 
 function DynamicHeading({ level, children }) {
   return (

packages/ui/react-heading/package.json

@@ -34,9 +34,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.mjs"
     }
   },
   "scripts": {

packages/ui/react-heading/vite.config.ts

@@ -7,8 +7,8 @@ export default defineConfig({
     outDir: 'dist',
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'cjs'],
-      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'js'}`,
+      formats: ['es'],
+      fileName: () => 'index.mjs',
     },
     rollupOptions: {
       external: ['react', 'react-dom', 'react/jsx-runtime'],