서버 액션 이해하기

// src/app/actions/itemActions.ts (새로 생성할 파일)
"use server"; // 이 파일의 모든 내보내기 함수는 서버 액션입니다.

import { revalidatePath } from 'next/cache'; // Next.js 캐시 재검증 유틸리티

interface Item {
  id: string;
  name: string;
}

// 더미 데이터 저장소 (실제로는 DB에 저장)
const items: Item[] = [{ id: '1', name: '초기 아이템' }];
let nextId = 2;

export async function createItem(formData: FormData) {
  // 서버에서 실행되는 로직
  const name = formData.get('itemName') as string;
  if (!name) {
    console.error('아이템 이름이 비어있습니다.');
    return { success: false, message: '아이템 이름이 필요합니다.' };
  }

  const newItem: Item = { id: (nextId++).toString(), name };
  items.push(newItem);
  console.log(`서버: 아이템 생성됨 - ${name}, 현재 아이템 수: ${items.length}`);

  // 특정 경로의 Next.js 캐시를 재검증하여 최신 데이터를 반영
  revalidatePath('/server-action');
  return { success: true, message: `아이템 '${name}'이(가) 성공적으로 추가되었습니다.` };
}

export async function getItems(): Promise<Item[]> {
  console.log('서버: 모든 아이템 조회 중...');
  // 실제 DB에서 조회하는 것을 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500));
  return items;
}

export async function deleteItem(itemId: string) {
  const initialLength = items.length;
  const index = items.findIndex(item => item.id === itemId);
  if (index > -1) {
    items.splice(index, 1);
    console.log(`서버: 아이템 ${itemId} 삭제됨. 현재 아이템 수: ${items.length}`);
    revalidatePath('/server-action');
    return { success: true, message: `아이템 ${itemId}이(가) 삭제되었습니다.` };
  }
  console.error(`아이템 ${itemId}를 찾을 수 없습니다.`);
  return { success: false, message: `아이템 ${itemId}를 찾을 수 없습니다.` };
}

// src/app/server-action/page.tsx (예시)
// 이 페이지 컴포넌트 자체는 서버 컴포넌트입니다.

import { createItem, getItems, deleteItem } from '../actions/itemActions'; // 서버 액션 임포트
import ClientForm from './ClientForm'; // 클라이언트 컴포넌트 임포트

export const dynamic = 'force-dynamic'; // 이 페이지는 항상 SSR로 동작하도록 강제 (선택 사항)

export default async function ServerActionPage() {
  const currentItems = await getItems(); // 서버 컴포넌트에서 서버 액션 호출 (빌드/요청 시)

  // 함수 단위 서버 액션 예시 (이 페이지에서는 직접 사용하지 않음)
  async function privateServerAction() {
    "use server"; // 이 함수만 서버 액션이 됨
    console.log('Private server action executed!');
    return { success: true };
  }

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #007bff', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
      <h1 style={{ textAlign: 'center', color: '#007bff' }}>서버 액션 예제</h1>
      <p style={{ textAlign: 'center', marginBottom: '30px', color: '#666' }}>
        클라이언트에서 서버 함수를 직접 호출하여 데이터를 처리하고 UI를 업데이트합니다.
      </p>

      <h2 style={{ color: '#333', marginBottom: '15px' }}>아이템 목록 (서버에서 가져옴)</h2>
      {currentItems.length > 0 ? (
        <ul style={{ listStyleType: 'decimal', paddingLeft: '20px' }}>
          {currentItems.map(item => (
            <li key={item.id} style={{ marginBottom: '8px' }}>
              {item.name} (ID: {item.id})
            </li>
          ))}
        </ul>
      ) : (
        <p>현재 아이템이 없습니다.</p>
      )}

      <hr style={{ margin: '30px 0', borderColor: '#eee' }} />

      <h2 style={{ color: '#333', marginBottom: '15px' }}>새 아이템 추가 (클라이언트 폼에서 서버 액션 호출)</h2>
      <ClientForm createItemAction={createItem} deleteItemAction={deleteItem} />
    </div>
  );
}

// src/app/server-action/ClientForm.tsx (새로 생성할 클라이언트 컴포넌트)
"use client";

import { useFormStatus } from 'react-dom'; // 폼 상태 훅
import { useRef } from 'react';

interface ClientFormProps {
  createItemAction: (formData: FormData) => Promise<{ success: boolean; message: string }>;
  deleteItemAction: (itemId: string) => Promise<{ success: boolean; message: string }>;
}

function SubmitButton() {
  const { pending } = useFormStatus(); // 폼 제출 상태 확인

  return (
    <button type="submit" disabled={pending} style={{
      padding: '10px 20px',
      backgroundColor: pending ? '#a0a0a0' : '#28a745',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      cursor: pending ? 'not-allowed' : 'pointer',
      transition: 'background-color 0.3s'
    }}>
      {pending ? '추가 중...' : '아이템 추가'}
    </button>
  );
}

export default function ClientForm({ createItemAction, deleteItemAction }: ClientFormProps) {
  const formRef = useRef<HTMLFormElement>(null);
  const deleteInputRef = useRef<HTMLInputElement>(null);

  // createItemAction은 서버 액션이므로 클라이언트 컴포넌트에 prop으로 전달 가능
  // 이는 클로저 역할을 하여 서버 액션에 클라이언트 값을 전달하는 효과를 낼 수 있음.

  const handleDelete = async () => {
    const itemId = deleteInputRef.current?.value;
    if (!itemId) {
      alert('삭제할 아이템 ID를 입력해주세요.');
      return;
    }
    const result = await deleteItemAction(itemId);
    alert(result.message);
    if (result.success && deleteInputRef.current) {
      deleteInputRef.current.value = ''; // 성공 시 입력 필드 초기화
    }
  };

  return (
    <div>
      <form
        ref={formRef}
        action={async (formData: FormData) => {
          // 폼 액션에 직접 서버 액션 함수를 전달
          const result = await createItemAction(formData);
          alert(result.message);
          if (result.success) {
            formRef.current?.reset(); // 폼 성공 시 초기화
          }
        }}
        style={{ marginBottom: '30px', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}
      >
        <label htmlFor="itemName" style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}>새 아이템 이름:</label>
        <input
          type="text"
          id="itemName"
          name="itemName" // name 속성은 FormData에서 값을 추출하는 데 사용됨
          required
          style={{ width: 'calc(100% - 20px)', padding: '10px', marginBottom: '15px', borderRadius: '5px', border: '1px solid #ddd' }}
        />
        <SubmitButton />
      </form>

      <h2 style={{ color: '#333', marginBottom: '15px' }}>아이템 삭제</h2>
      <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
        <label htmlFor="deleteItemId" style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}>삭제할 아이템 ID:</label>
        <input
          type="text"
          id="deleteItemId"
          ref={deleteInputRef}
          placeholder="예: 1"
          style={{ width: 'calc(100% - 20px)', padding: '10px', marginBottom: '15px', borderRadius: '5px', border: '1px solid #ddd' }}
        />
        <button onClick={handleDelete} style={{
          padding: '10px 20px',
          backgroundColor: '#dc3545',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          transition: 'background-color 0.3s'
        }}>
          아이템 삭제
        </button>
      </div>
    </div>
  );
}