React 프롬프트

[기술 스택]로 [기능/컴포넌트]을 만들어줘.

[요구사항]:
1. [구체적인 기능 설명]
2. [props/상태 정의]
3. [스타일링 방식]
4. [TypeScript 타입 정의]
5. [예외 처리]

React 함수형 컴포넌트를 만들어줘.

컴포넌트 이름: UserCard
기술 스택: TypeScript, CSS Modules

기능:
- 사용자 이름, 이메일, 아바타 이미지 표시
- 프로필 페이지 링크 버튼
- 호버 시 배경색 변경
- aria-label로 접근성 보장

props:
interface Props {
  user: {
    id: number;
    name: string;
    email: string;
    avatarUrl?: string;
  };
  onProfileClick?: (userId: number) => void;
}

React 로그인 폼 컴포넌트를 만들어줘.

기술 스택: TypeScript, React Hook Form, Zod

요구사항:
1. 이메일, 비밀번호 입력 필드
2. 입력 검증 (react-hook-form + zod)
   - 이메일: 유효한 형식
   - 비밀번호: 8자 이상
3. submit 버튼 (로딩 상태 표시)
4. 에러 메시지 표시 (FormField 컴포넌트)
5. useState로 로딩/에러 상태 관리
6. TypeScript 사용
7. 접근성: label, aria-invalid, role="alert"

React 사용자 목록 컴포넌트를 만들어줘.

요구사항:
1. 사용자 배열 렌더링 (User[])
2. 검색 입력 필드 (이름으로 필터)
3. 정렬 기능 (이름 asc/desc)
4. pagination (10개씩)
5. 로딩 스keleleton 표시
6. 빈 상태 UI
7. 각 사용자 클릭 시 상세 페이지 이동

React 모달 컴포넌트를 만들어줘.

요구사항:
1. Portal로 렌더링 (document.body)
2. backdrop 클릭 시 닫기
3. ESC 키로 닫기
4. 애니메이션 (fade in, scale)
5. 접근성: focus trap, aria-modal
6. children으로 콘텐츠슬롯

useState를 사용하는 카운터 컴포넌트를 만들어줘.

기술: TypeScript

요구사항:
1. 증가, 감소, 초기화 버튼
2. 현재 카운트 값 표시
3. 값이 0 이하일 때 빨간색, 10 이상일 때 파란색
4. CSS Modules로 스타일링
5. 초기값 0, 최대값 100, 최소값 0

useEffect를 사용하는 데이터 페치 컴포넌트를 만들어줘.

기술: TypeScript, fetch API

요구사항:
1. API에서 사용자 목록 가져오기 (/api/users)
2. 로딩 상태 표시
3. 에러 상태 처리 (try-catch)
4. 컴포넌트 언마운트 시 클린업 (AbortController)
5. useEffect 의존성 배열 정확히 명시
6. 데이터 타입 정의 (User interface)

useCallback을 사용하는 최적화된 컴포넌트를 만들어줘:

1. 부모 컴포넌트에서 함수 생성 후 자식에게 전달
2. useCallback으로 함수 메모이제이션
3. 의존성 배열 명시
4. React.memo로 자식 컴포넌트 최적화
5. DevTools로 렌더링 횟수 확인

Custom Hooks를 만들어줘:

1. useLocalStorage
   - localStorage에서 값 불러오기/저장하기
   - 타입 파라미터 지원
   - JSON 직렬화

2. useFetch
   - 제네릭 타입 지원
   - { data, loading, error } 객체 반환
   - refetch 함수 제공

3. useDebounce
   - 입력 디바운싱
   - 지연 시간 설정 가능 (기본 500ms)

React Theme Context를 만들어줘.

기술: TypeScript, createContext, useContext

요구사항:
1. ThemeProvider 컴포넌트
   - 다크/라이트 모드 토글 기능
   - 현재 테마 상태 제공
2. useTheme Hook 내보내기
3. localStorage에 테마 저장 (초기값: 'light')
4. system preference 감지 (prefers-color-scheme)
5. 타입 정의 (Theme, ThemeContextType)

React Auth Context를 만들어줘.

요구사항:
1. AuthProvider
   - user: User | null
   - isAuthenticated: boolean
   - login(email, password) 함수
   - logout() 함수
   - register(email, password, name) 함수
2. Protected Route 컴포넌트
3. 로컬 스토리지로 세션 유지
4. Axios 인스턴스 자동 토큰 첨부

Context 파일 구조를 만들어줘:

src/
├── context/
│   ├── ThemeContext.tsx    # createContext + Provider
│   ├── AuthContext.tsx     # 인증 상태 + 함수
│   └── CartContext.tsx    # 장바구니 상태
├── hooks/
│   ├── useTheme.ts        # useContext 래퍼
│   ├── useAuth.ts
│   └── useCart.ts
└── providers/
    ├── ThemeProvider.tsx   # 실제 Provider 래핑
    ├── AuthProvider.tsx
    └── index.ts           # 모든 Provider 조합

React Router v6을 사용하는 라우팅을 만들어줘.

기술: react-router-dom v6, TypeScript

요구사항:
1. 라우트 정의
   - / - 홈 페이지 (HomePage)
   - /about - 소개 페이지
   - /posts - 게시물 목록
   - /posts/:id - 게시물 상세
   - /login - 로그인 페이지
   - /* - 404 페이지 (wildcard)
2. 중첩 라우트 + Outlet 사용
3. NavLink로 활성 링크 스타일
4. useParams, useLocation, useNavigate Hooks

React Router v6에서 Protected Route를 만들어줘:

1. RequireAuth 컴포넌트
   - 인증 상태 확인
   - 미인증 시 로그인 페이지로 리다이렉트
   - 원래 페이지 URL 저장 (state)
2. AuthRedirect 컴포�ONENT
   - 인증 상태 확인
   - 인증 시 메인 페이지로 리다이렉트
3. 사용 예시
   - <Route element={<RequireAuth />}>
   - <Route element={<AuthRedirect />}>

React Router에서 Lazy Loading을 구현해줘:

1. React.lazy로 컴포넌트 지연 로드
2. Suspense로 로딩 상태 표시
3. ErrorBoundary로 에러 처리
4. 각 페이지별 번들 분할
5. Prefetch 비활성화 (선택)

React Router v6 구조를 만들어줘:

src/
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   ├── Posts.tsx
│   └── NotFound.tsx
├── components/
│   ├── Layout.tsx        # Outlet 사용
│   ├── Navbar.tsx
│   └── PrivateRoute.tsx
├── routes/
│   └── index.tsx        # 라우트 설정
└── App.tsx

TypeScript로 React 컴포넌트를 만들어줘.

기술: TypeScript, strict 모드

타입 정의:
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
  profile?: Profile;
}

interface Profile {
  bio: string;
  avatar: string;
}

요구사항:
1. User 타입 사용
2. props 타입 정의
3. 상태 타입 정의 (useState<User[]>)
4. strict 모드 compatible
5. 제네릭 활용

제네릭 List 컴포넌트를 만들어줘:

interface Props<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string;
  emptyMessage?: string;
}

사용 예시:
<List<User>
  items={users}
  renderItem={(user) => <UserCard user={user} />}
  keyExtractor={(user) => user.id.toString()}
/>