# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

## 데스크톱 앱 배포(Installer 생성)

Windows/맥/리눅스 설치 파일을 만들려면 electron-builder를 사용합니다.

1) 의존성 설치
- npm: `npm i -D electron-builder`

2) 빌드 스크립트
- Windows(NSIS): `npm run release:win`
- macOS(DMG): `npm run release:mac`
- Linux(AppImage): `npm run release:linux`
- 전체 타겟: `npm run release`

3) 출력 위치
- 산출물은 `release/` 폴더에 생성됩니다. 예) `Clarity Deck-0.0.0-win-x64.exe`

4) 아이콘(옵션)
- 프로젝트 루트에 `build/` 디렉토리를 만들고, 플랫폼별 아이콘을 두면 설치 파일에 적용됩니다.
  - Windows: `build/icon.ico`
  - macOS: `build/icon.icns`
  - Linux: `build/icons/*`

5) 코드 서명(옵션)
- Windows/macOS는 서명하지 않아도 로컬 테스트는 가능하지만, 배포 시 신뢰 경고가 뜰 수 있습니다. 조직 인증서가 있다면 서명 설정을 추가하세요.

## Clarity Deck 데스크톱(Electron) 사용 안내

- 개발 모드 실행: `npm run electron:dev`
  - Vite 개발 서버가 올라가면 Electron이 연결됩니다.
- 빌드된 앱 미리보기: `npm run electron:preview`

### IDE 열기 기능(크로스플랫폼)

이 프로젝트에는 프로젝트 폴더를 원하는 IDE로 여는 기능이 포함되어 있습니다. Windows/macOS/Linux에서 각각 적절한 런처를 자동으로 시도합니다.

- 제공 스크립트
  - VS Code: `npm run open:vscode`
  - Visual Studio: `npm run open:vs`
  - Android Studio: `npm run open:android`
- 직접 실행: `node scripts/open-ide.mjs <vscode|visual-studio|android-studio> [path] [--dry-run] [--wait]`
  - `--dry-run`: 실제 실행 대신 시도할 명령을 출력
  - `--wait`: IDE 프로세스 종료까지 대기(가능한 플랫폼에서)

### Windows 동작 방식 요약

- VS Code: `code` → `code.cmd` → `code.exe` → 기본 설치 경로(`%LOCALAPPDATA%\Programs\Microsoft VS Code\bin\code.cmd`, `Code.exe`) 순으로 시도
- Visual Studio: `vswhere.exe`로 `devenv.exe` 경로 탐색 후 실행, 실패 시 2022 기본 경로(Community/Professional/Enterprise) 시도
- Android Studio: `studio64.exe`/`studio.exe` 또는 `C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe`

PATH에 런처가 없을 경우에도 기본 설치 경로로 열기를 시도합니다. 설치 커스텀인 경우 PATH 추가 또는 설정 변경을 권장합니다.

### macOS / Linux 요약

- macOS: `open -a "앱 이름"`으로 호출(VS Code/IntelliJ/WebStorm/Android Studio 등)
- Linux: 일반적으로 바이너리 이름(`code`, `android-studio`, `studio.sh`)을 사용

### 문제 해결 및 로깅

- 개발 모드(`npm run electron:dev`)에서 IDE 오픈 버튼을 누르면 다음 위치에 로그가 남습니다.
  - 메인 프로세스(터미널):
    - `[ClarityDeck][IDE] open request: { ide, projectPath, platform }`
    - `[ClarityDeck][IDE] spawn try: <명령> <인자>`
    - `[ClarityDeck][IDE] spawn success: <명령>` 또는 `spawn error`
  - 렌더러 DevTools 콘솔:
    - `[ClarityDeck][IDE] tried: [{ cmd, args, ok, error }]` (IPC 응답에 포함된 시도 목록)

로그를 공유해 주시면 어떤 런처에서 실패했는지 바로 진단할 수 있습니다.

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```