데이터 연동 페이지와 검증

import { useEffect, useRef, useState } from 'react';
import useAxios from '../hooks/useAxios';
import PostList from '../components/PostList';
import AddPostForm from '../components/AddPostForm';
import ErrorDisplay from '../components/ErrorDisplay';
import mockApi from '../api/mockApi';

function PostsPage() {
  const { data, loading, error, fetchData: refetchPosts } = useAxios('/posts');
  const posts = Array.isArray(data) ? data : [];
  const responseShapeError =
    data !== null && !Array.isArray(data)
      ? new Error('GET /posts 응답이 배열이 아닙니다.')
      : null;

  const [createLoading, setCreateLoading] = useState(false);
  const [createError, setCreateError] = useState(null);
  const [deletingId, setDeletingId] = useState(null);
  const [deleteError, setDeleteError] = useState(null);
  const [refreshError, setRefreshError] = useState(null);
  const pageActiveRef = useRef(false);

  useEffect(() => {
    pageActiveRef.current = true;
    return () => {
      pageActiveRef.current = false;
    };
  }, []);

  const retryPosts = () => {
    void refetchPosts().catch(() => {});
  };

  const retryRefresh = () => {
    setRefreshError(null);
    void refetchPosts().catch((retryError) => {
      if (retryError.code !== 'ERR_CANCELED') {
        setRefreshError(retryError);
      }
    });
  };

  const refreshAfterMutation = async () => {
    if (!pageActiveRef.current) return;

    setRefreshError(null);
    try {
      await refetchPosts();
    } catch (refreshRequestError) {
      if (
        pageActiveRef.current &&
        refreshRequestError.code !== 'ERR_CANCELED'
      ) {
        setRefreshError(refreshRequestError);
      }
    }
  };

  const handleAddPost = async (newPost) => {
    setCreateLoading(true);
    setCreateError(null);
    try {
      await mockApi.post('/posts', newPost);
      if (!pageActiveRef.current) return false;
      await refreshAfterMutation();
      return pageActiveRef.current;
    } catch (mutationError) {
      if (pageActiveRef.current) {
        setCreateError(mutationError);
      }
      return false;
    } finally {
      if (pageActiveRef.current) {
        setCreateLoading(false);
      }
    }
  };

  const handleDeletePost = async (id) => {
    if (deletingId !== null) {
      return;
    }
    if (!window.confirm(`${id}번 게시물을 정말 삭제하시겠습니까?`)) {
      return;
    }
    setDeletingId(id);
    setDeleteError(null);
    try {
      await mockApi.delete(`/posts/${id}`);
      if (!pageActiveRef.current) return;
      await refreshAfterMutation();
    } catch (mutationError) {
      if (pageActiveRef.current) {
        setDeleteError(mutationError);
      }
    } finally {
      if (pageActiveRef.current) {
        setDeletingId(null);
      }
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '40px', color: 'var(--header-color)' }}>게시판</h1>
      <AddPostForm onAddPost={handleAddPost} loading={createLoading} error={createError} />
      {deletingId && <p>{deletingId}번 게시물을 삭제하는 중입니다.</p>}
      <ErrorDisplay error={deleteError} />
      <ErrorDisplay error={refreshError} onRetry={retryRefresh} />
      <PostList
        posts={posts}
        loading={loading}
        error={refreshError ? null : error ?? responseShapeError}
        onDelete={handleDeletePost}
        onRetry={retryPosts}
        deletingId={deletingId}
      />
    </div>
  );
}

export default PostsPage;

mockApi.interceptors.response.use((response) => {
  const isPostsList =
    response.config.method === 'get' && response.config.url === '/posts';

  if (isPostsList && !Array.isArray(response.data)) {
    const shapeError = new Error('GET /posts 응답이 배열이 아닙니다.');
    shapeError.name = 'ResponseShapeError';
    throw shapeError;
  }

  return response;
});

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)
  );

  const retryPost = () => {
    void refetchPost().catch(() => {});
  };

  if (error?.response?.status === 404) {
    return <p>요청한 게시물을 찾을 수 없습니다.</p>;
  }

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

export default SinglePostPage;

import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom';
import PostsPage from './pages/PostsPage';
import SinglePostPage from './pages/SinglePostPage';

const DefaultNotFoundPage = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h1>404 - 페이지를 찾을 수 없습니다.</h1>
    <p>요청하신 페이지가 존재하지 않습니다.</p>
    <Link to="/" className="button">홈으로 돌아가기</Link>
  </div>
);

function App() {
  return (
    <BrowserRouter>
      <div className="main-content">
        <Routes>
          <Route path="/" element={<Navigate to="/posts" replace />} />
          <Route path="/posts" element={<PostsPage />} />
          <Route path="/posts/:postId" element={<SinglePostPage />} />
          <Route path="*" element={<DefaultNotFoundPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;