데이터 연동 페이지와 검증

import { useState } from 'react';
import useAxios from '../hooks/useAxios';
import PostList from '../components/PostList';
import AddPostForm from '../components/AddPostForm';
import mockApi from '../api/mockApi'; // Axios 인스턴스

function PostsPage() {
  // 게시물 목록 조회
  const { data, loading, error, fetchData: refetchPosts } = useAxios('/posts?_limit=20'); // useAxios 훅 사용!
  const posts = data || [];

  // 새 게시물 추가를 위한 상태
  const [addLoading, setAddLoading] = useState(false);
  const [addError, setAddError] = useState(null);

  const handleAddPost = async (newPost) => {
    setAddLoading(true);
    setAddError(null);
    try {
      await mockApi.post('/posts', newPost);
      alert('게시물이 성공적으로 추가되었습니다!');
      refetchPosts(); // 게시물 추가 후 목록 새로고침
    } catch (err) {
      setAddError(err);
      alert('게시물 추가에 실패했습니다!');
    } finally {
      setAddLoading(false);
    }
  };

  const handleDeletePost = async (id) => {
    if (!window.confirm(`${id}번 게시물을 정말 삭제하시겠습니까?`)) {
      return;
    }
    setAddLoading(true); // 로딩 상태 재활용
    setAddError(null);
    try {
      await mockApi.delete(`/posts/${id}`);
      alert(`${id}번 게시물이 삭제되었습니다.`);
      refetchPosts(); // 게시물 삭제 후 목록 새로고침
    } catch (err) {
      setAddError(err);
      alert(`게시물 삭제에 실패했습니다. ${err.message}`);
    } finally {
      setAddLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '40px', color: 'var(--header-color)' }}>게시판</h1>
      <AddPostForm onAddPost={handleAddPost} loading={addLoading} error={addError} />
      <PostList
        posts={posts}
        loading={loading}
        error={error}
        onDelete={handleDeletePost}
        onRetry={refetchPosts}
      />
    </div>
  );
}

export default PostsPage;

import { useParams } from 'react-router-dom';
import useAxios from '../hooks/useAxios';
import PostDetail from '../components/PostDetail';

function SinglePostPage() {
  const { postId } = useParams(); // URL 파라미터에서 postId 가져오기

  // useAxios 훅을 사용하여 특정 게시물 조회
  const { data: post, loading, error, fetchData: refetchPost } = useAxios(
    postId ? `/posts/${postId}` : null // postId가 있을 때만 요청 (null이면 요청X)
  );

  return (
    <div style={{ padding: '20px' }}>
      <PostDetail post={post} loading={loading} error={error} onRetry={refetchPost} />
    </div>
  );
}

export default SinglePostPage;

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { AppProvider } from './contexts/AppContext'; // 7장 실습의 AppContext 재사용 (테마, 로그인)
import Header from './components/Header'; // AppContext를 사용하는 Header
import PostsPage from './pages/PostsPage';
import SinglePostPage from './pages/SinglePostPage';
import NotFoundPage from './pages/NotFoundPage'; // 7장 실습에서 만든 404 페이지
import HomePage from './pages/HomePage'; // 간단한 홈페이지 (Optional)

// 7장 AppContext가 필요하다면 재활용 (이번 장 실습에서는 필수는 아님)
// AppContext.js 파일이 있다면 Header 컴포넌트가 정상 작동할 것입니다.
// 간단하게 404 페이지는 만들지 않고 아래에 직접 넣어두겠습니다.
const DefaultNotFoundPage = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h1>404 - 페이지를 찾을 수 없습니다.</h1>
    <p>요청하신 페이지가 존재하지 않습니다.</p>
    <Link to="/" className="button">홈으로 돌아가기</Link>
  </div>
);

function App() {
  return (
    <AppProvider> {/* 7장 AppContext를 사용한다면 AppProvider로 감쌉니다. */}
      <BrowserRouter>
        <Header /> {/* Header는 AppContext에 의존하므로, AppProvider 안에 있어야 합니다. */}
        <div className="main-content">
          <Routes>
            <Route path="/" element={<HomePage />} /> {/* Optional: 간단한 홈페이지 추가 */}
            <Route path="/posts" element={<PostsPage />} />
            <Route path="/posts/:postId" element={<SinglePostPage />} />
            <Route path="*" element={<DefaultNotFoundPage />} /> {/* 404 페이지 */}
          </Routes>
        </div>
      </BrowserRouter>
    </AppProvider>
  );
}

export default App;