# Add Component

> Generates SolidJS components or pages with ts-rs bindings, error handling, and reactive patterns. Use when creating new frontend UI.

- Skill: `tomevault-io/add-component-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/add-component-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/add-component-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/add-component-3

---


# SolidJS 컴포넌트 추가 워크플로우

`$ARGUMENTS[0]`을 생성합니다.

---

## 0단계: 타입 분류

| 인수 | 위치 | 설명 |
|------|------|------|
| `page` | `src/pages/` | 라우트 페이지 (lazy import) |
| `component` | `src/components/` | 재사용 공유 컴포넌트 |
| `feature` | `src/features/` | 도메인 기능 모듈 |

(미지정 시 `component`로 기본 처리)

---

## 1단계: 컴포넌트 파일 생성

### Page인 경우

**위치**: `src/pages/$ARGUMENTS[0].tsx`

```tsx
import { createResource, Show } from "solid-js";
import type { MyType } from "@/types/generated/MyType";

export default function $ARGUMENTS[0]Page() {
  const [data] = createResource(fetchData);

  return (
    <div class="p-4">
      <h1 class="text-xl font-bold mb-4">페이지 제목</h1>
      <Show when={data.loading}>
        <div class="animate-pulse">로딩 중...</div>
      </Show>
      <Show when={data.error}>
        <div class="text-red-500">에러: {data.error.message}</div>
      </Show>
      <Show when={data()}>
        {/* 데이터 렌더링 */}
      </Show>
    </div>
  );
}

async function fetchData(): Promise<MyType> {
  const res = await fetch("/api/v1/...");
  if (!res.ok) throw new Error(`API 에러: ${res.status}`);
  return res.json();
}
```

### Component인 경우

**위치**: `src/components/$ARGUMENTS[0].tsx`

```tsx
import type { Component } from "solid-js";

interface $ARGUMENTS[0]Props {
  // props 정의
}

export const $ARGUMENTS[0]: Component<$ARGUMENTS[0]Props> = (props) => {
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
};
```

---

## 2단계: 라우트 등록 (Page인 경우)

**위치**: `src/App.tsx`

```tsx
const $ARGUMENTS[0]Page = lazy(() => import("./pages/$ARGUMENTS[0]"));

// Route 추가
<Route path="/<route>" component={$ARGUMENTS[0]Page} />
```

---

## 3단계: ts-rs 타입 확인

API 연동이 필요한 경우:

```bash
# Rust 측 타입에 #[derive(TS)] #[ts(export)] 확인
grep -r "pub struct.*Response" crates/trader-api/src/routes/

# 바인딩 생성
cargo test -p trader-api export_bindings
cp crates/trader-api/bindings/*.ts frontend/src/api/types/generated/
```

⚠️ `src/types/generated/` 파일을 수동 편집하지 마세요.

---

## 4단계: 검증

```powershell
cd frontend
npx tsc --noEmit
npx eslint src --max-warnings 0
npm run build
```

### 검증 실패 시
1. 에러 메시지에서 파일/라인 확인
2. 해당 파일 수정
3. 검증 명령 재실행 — 통과할 때까지 반복

### 체크포인트
- [ ] `@/types/generated/` import (수동 타입 정의 금지)
- [ ] `any` 타입 미사용
- [ ] `<Show>` / `<For>` 제어 흐름 사용
- [ ] `<ErrorBoundary>` 또는 에러 상태 처리
- [ ] 한글 주석
- [ ] Tailwind CSS 유틸리티 클래스

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/berrzebb) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->