서버와 클라이언트 컴포넌트 조합하기

// src/app/dashboard/page.tsx (서버 컴포넌트) - 대시보드 메인 페이지

import ChartWidget from './ChartWidget'; // 클라이언트 컴포넌트
import UserProfileCard from './UserProfileCard'; // 클라이언트 컴포넌트

interface UserData {
  name: string;
  totalSales: number;
  // ... 기타 대시보드 초기 데이터
}

async function getDashboardData(): Promise<UserData> {
  // ⛔️ 민감한 DB 쿼리나 내부 API 호출은 여기서 안전하게! ⛔️
  console.log('Server: Fetching initial dashboard data...');
  await new Promise(resolve => setTimeout(resolve, 800)); // 지연 시뮬레이션
  return {
    name: '김넥스트',
    totalSales: 1234567,
    // ...
  };
}

export default async function DashboardPage() {
  const data = await getDashboardData(); // 서버에서 초기 데이터 페칭

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ color: '#333' }}>환영합니다, {data.name}님의 대시보드!</h1>
      <p style={{ fontSize: '1.1em', color: '#666' }}>
        총 매출: <strong style={{ color: '#28a745' }}>{data.totalSales.toLocaleString()}원</strong>
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginTop: '30px' }}>
        <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '15px' }}>
          <h2>매출 차트</h2>
          {/* ChartWidget은 클라이언트에서 동적으로 데이터 업데이트 및 차트 상호작용 */}
          <ChartWidget initialSales={data.totalSales} />
        </div>
        <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '15px' }}>
          <h2>사용자 프로필</h2>
          {/* UserProfileCard는 프로필 수정 등 클라이언트 상호작용이 있음 */}
          <UserProfileCard initialName={data.name} />
        </div>
      </div>
    </div>
  );
}

// src/app/dashboard/ChartWidget.tsx (클라이언트 컴포넌트)
"use client";

import React, { useState, useEffect } from 'react';
// import { Line } from 'react-chartjs-2'; // 실제 차트 라이브러리 가정

interface ChartWidgetProps {
  initialSales: number;
}

export default function ChartWidget({ initialSales }: ChartWidgetProps) {
  const [currentSales, setCurrentSales] = useState(initialSales);
  const [loading, setLoading] = useState(false);

  // 3초마다 새로운 매출 데이터 페칭 시뮬레이션
  useEffect(() => {
    const interval = setInterval(async () => {
      setLoading(true);
      console.log('Client: Fetching updated sales data...');
      await new Promise(resolve => setTimeout(resolve, 500));
      setCurrentSales(prev => prev + Math.floor(Math.random() * 10000 - 5000)); // 무작위 증감
      setLoading(false);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>실시간 매출: <strong style={{ color: '#007bff' }}>{currentSales.toLocaleString()}원</strong></p>
      {loading ? <p>업데이트 중...</p> : null}
      {/* <Line data={...} /> */} {/* 실제 차트 렌더링 */}
      <button onClick={() => alert('차트 클릭 이벤트 처리 (클라이언트)')} style={{ marginTop: '10px' }}>
        차트 데이터 상세 보기
      </button>
    </div>
  );
}

// src/app/dashboard/UserProfileCard.tsx (클라이언트 컴포넌트)
"use client";

import React, { useState } from 'react';

interface UserProfileCardProps {
  initialName: string;
}

export default function UserProfileCard({ initialName }: UserProfileCardProps) {
  const [userName, setUserName] = useState(initialName);
  const [isEditing, setIsEditing] = useState(false);

  const handleSave = () => {
    // 클라이언트에서 사용자 이름 업데이트 API 호출 등
    alert(`이름 저장: ${userName}`);
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
            style={{ width: '100%', padding: '8px', marginBottom: '10px' }}
          />
          <button onClick={handleSave} style={{ marginRight: '10px' }}>저장</button>
          <button onClick={() => setIsEditing(false)}>취소</button>
        </div>
      ) : (
        <div>
          <p>이름: <strong>{userName}</strong></p>
          <button onClick={() => setIsEditing(true)}>편집</button>
        </div>
      )}
    </div>
  );
}

// src/app/conditional-content/page.tsx (서버 컴포넌트)
import ClientConditionalWrapper from './ClientConditionalWrapper';
import ImportantServerMessage from './ImportantServerMessage'; // 서버 컴포넌트

export default function ConditionalContentPage() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto' }}>
      <h1>조건부 콘텐츠 페이지</h1>
      <p>아래는 클라이언트 컴포넌트가 제어하는 서버 콘텐츠입니다.</p>
      <ClientConditionalWrapper>
        {/* ImportantServerMessage는 서버에서 렌더링되어 ClientConditionalWrapper의 children으로 전달됩니다. */}
        <ImportantServerMessage />
      </ClientConditionalWrapper>
    </div>
  );
}

// src/app/conditional-content/ClientConditionalWrapper.tsx (클라이언트 컴포넌트)
"use client";

import React, { useState } from 'react';

export default function ClientConditionalWrapper({ children }: { children: React.ReactNode }) {
  const [showContent, setShowContent] = useState(false);

  return (
    <div style={{ border: '1px dashed orange', padding: '15px', marginTop: '20px', borderRadius: '8px' }}>
      <h2>클라이언트 조건부 래퍼</h2>
      <button onClick={() => setShowContent(!showContent)}>
        {showContent ? '숨기기' : '중요 메시지 보기'}
      </button>
      {showContent && (
        <div style={{ marginTop: '15px', padding: '10px', backgroundColor: '#fffbe6' }}>
          {children} {/* 서버에서 렌더링된 ImportantServerMessage가 여기에 삽입됨 */}
        </div>
      )}
    </div>
  );
}

// src/app/conditional-content/ImportantServerMessage.tsx (서버 컴포넌트)
export default async function ImportantServerMessage() {
  // 이 메시지는 서버에서 미리 생성됩니다.
  console.log('Server: ImportantServerMessage rendered.');
  await new Promise(resolve => setTimeout(resolve, 300)); // 시뮬레이션
  return (
    <div>
      <h3 style={{ color: '#d9534f' }}>🚨 서버에서 전달된 중요한 공지 🚨</h3>
      <p>이 내용은 서버에서 미리 준비되었으며, 클라이언트 상호작용에 따라 나타납니다.</p>
      <p>렌더링 시간: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}