feat: FSD 아키텍처 구현 및 Tailwind CSS 4.x 업그레이드, 모나코 에디터로 변경

[ohah]

feat: FSD 아키텍처 구현 및 Tailwind CSS 4.x 업그레이드, 모나코 에디터로 변경

📋 요약

이 PR은 Feature-Sliced Design (FSD) 아키텍처를 구현하고 유지보수성과 성능 향상을 위해 Tailwind CSS 4.x로 업그레이드합니다.

🚀 주요 변경사항

FSD 아키텍처 구현

• ✅ 각 FSD 레이어에 index.ts 파일 추가하여 적절한 export 구현
• ✅ FSD 규칙에 따라 파일명을 kebab-case로 변경
• ✅ 적절한 레이어 분리 및 의존성 규칙 구현
• ✅ TypeScript와 Vite 경로 별칭 추가 (@/* → ./src/*)

Tailwind CSS 4.x 업그레이드

• ✅ Tailwind CSS 3.x에서 4.x로 업그레이드
• ✅ Vite와의 완전한 통합을 위해 @tailwindcss/vite 플러그인 추가
• ✅ 호환성을 위해 CSS import 업데이트
• ✅ h-screen 클래스 적용 문제 해결

파일 구조 변경

src/
├── app/
│   ├── index.tsx
│   ├── providers.tsx
│   └── index.ts          # export * from 패턴
├── pages/
│   └── editor/
│       ├── editor-page.tsx        # EditorPage.tsx에서 이름 변경
│       ├── editor-page.test.tsx   # EditorPage.test.tsx에서 이름 변경
│       └── index.ts
├── widgets/
│   ├── code-editor/
│   │   ├── code-editor.tsx
│   │   └── index.ts
│   └── output-panel/
│       ├── output-panel.tsx
│       └── index.ts
├── features/
│   └── execute-code/
│       ├── model.ts
│       └── index.ts
└── shared/
    ├── types/
    │   └── index.ts
    ├── ui/
    │   ├── Button.tsx
    │   ├── Panel.tsx
    │   └── index.ts
    └── index.ts

🔧 기술적 세부사항

경로 별칭

• TypeScript: tsconfig.json에서 @/* → ./src/*
• Vite: vite.config.ts에서 @ → ./src

Import 변경사항

// 이전
import { CodeEditor } from '../../widgets/code-editor/code-editor';
import { useExecutionStore } from '../../features/execute-code/model';

// 이후
import { CodeEditor } from '@/widgets/code-editor';
import { useExecutionStore } from '@/features/execute-code';

FSD 레이어 규칙

• app → pages, widgets, features, shared
• pages → widgets, features, shared
• widgets → features, shared
• features → shared
• shared → (내부 의존성 없음)

🎯 장점

1. 더 나은 유지보수성: 명확한 레이어 분리 및 의존성 규칙
2. 개발자 경험 향상: @ 별칭을 사용한 절대 경로 import
3. 성능: Vite 플러그인 통합을 통한 Tailwind CSS 4.x
4. 일관성: FSD 명명 규칙 및 파일 구조
5. 확장성: 확립된 패턴을 따라 새로운 기능을 쉽게 추가

🧪 테스트

• 모든 기존 테스트 통과
• TypeScript 컴파일 성공
• Vite 빌드 프로세스 정상 작동
• Tailwind CSS 클래스 올바르게 적용

📝 주요 변경사항

• 파일명이 kebab-case로 변경됨 (EditorPage.tsx → editor-page.tsx)
• Import 경로가 @ 별칭을 사용하도록 업데이트
• Tailwind CSS 4.x를 위해 CSS import 구조 업데이트

🔄 마이그레이션 가이드

로컬 변경사항이 있다면:

1. Import 문을 @ 별칭을 사용하도록 업데이트
2. 새로운 파일명 사용 (kebab-case)
3. 직접 파일 경로 대신 레이어 index 파일에서 import

📚 참고 자료

• Feature-Sliced Design
• Tailwind CSS 4.x 문서

🔗 관련 커밋

1. feat: add FSD index.ts files for proper exports
2. refactor: rename files to kebab-case following FSD conventions
3. feat: add TypeScript path mapping for @ alias
4. feat: add Vite path alias configuration
5. refactor: update imports to use @ path alias
6. style: update CSS imports for Tailwind CSS 4.x

[Copilot]

Pull Request Overview

This PR implements Feature-Sliced Design (FSD) architecture and upgrades to Tailwind CSS 4.x with Monaco Editor integration. The changes improve maintainability through clear layer separation, better developer experience with path aliases, and enhanced styling capabilities.

Key Changes:

• Restructured codebase following FSD architecture patterns with proper layer separation (app, pages, widgets, features, shared)
• Upgraded Tailwind CSS from 3.x to 4.x with Vite plugin integration
• Replaced code editor with Monaco Editor for enhanced editing capabilities

Reviewed Changes

Copilot reviewed 34 out of 36 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Added @parcel/watcher to onlyBuiltDependencies
docs/docs/guide/development.mdx	Updated architecture documentation with FSD structure details
apps/executeJS/vitest.config.ts	Added path alias configuration for tests
apps/executeJS/vite.config.ts	Added Tailwind CSS 4.x plugin and path alias
apps/executeJS/tsconfig.json	Configured TypeScript path mapping for @ alias
apps/executeJS/src/widgets/output-panel/output-panel.tsx	New output panel component using Radix UI
apps/executeJS/src/widgets/code-editor/code-editor.tsx	New Monaco editor wrapper component
apps/executeJS/src/pages/editor/editor-page.tsx	Refactored editor page with FSD imports
apps/executeJS/src/features/execute-code/model.ts	New execution state management using Zustand
apps/executeJS/src/app/index.tsx	New app entry point with providers
apps/executeJS/src/main.tsx	Updated to import from FSD structure
apps/executeJS/src/index.css	Refactored to use Tailwind CSS 4.x syntax
apps/executeJS/package.json	Added Monaco, Radix UI, Tailwind CSS 4.x dependencies
agent.md	Updated documentation with FSD architecture details

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.