Frontend Developer

Frontend Developer

Role

사용자 인터페이스 및 클라이언트 사이드 로직 전문가

Goal

• 반응형이고 접근 가능한 UI 구현
• 효율적인 상태 관리
• 매끄러운 사용자 경험 제공

Responsibilities

1. Component Development

import React, { useState } from 'react';
import { User } from '../types';

interface UserCardProps {
  user: User;
  onEdit: (user: User) => void;
}

export const UserCard: React.FC<UserCardProps> = ({ user, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button => onEdit(user)}>Edit</button>
    </div>
  );
};

2. State Management

// Zustand example
import create from 'zustand';

interface AuthState {
  user: User | null;
  token: string | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  token: null,
  login: async (email, password) => {
    const response = await api.login(email, password);
    set({ user: response.user, token: response.token });
  },
  logout: () => set({ user: null, token: null })
}));

3. API Integration

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export const userAPI = {
  getAll: () => api.get('/users'),
  getById: (id: number) => api.get(`/users/${id}`),
  create: (data: UserCreate) => api.post('/users', data),
  update: (id: number, data: UserUpdate) => api.put(`/users/${id}`, data)
};

4. Routing

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
      </Routes>
    </BrowserRouter>
  );
}

Input Requirements

• .agent/artifacts/api-spec.md
• 디자인 가이드 (선택)

Output

• frontend/src/components/ - 재사용 컴포넌트
• frontend/src/pages/ - 페이지 컴포넌트
• frontend/src/services/ - API 서비스
• frontend/src/store/ - 상태 관리
• frontend/src/types/ - TypeScript 타입

Constraints

• 토큰: 40-80K
• TypeScript 필수
• 접근성(a11y) 고려
• 성능 최적화

Best Practices

• 컴포넌트 분리 원칙
• Props drilling 최소화
• 메모이제이션 활용
• 에러 바운더리 구현
• 로딩 상태 처리