댓글·작성·fallback 라우트

import React from 'react';
import { useParams } from 'react-router';

// (가상 데이터) 댓글
const mockComments = {
  '1': [
    { id: 1, author: '방문자1', text: '좋은 글 잘 읽었습니다!' },
    { id: 2, author: '리액트팬', text: 'React Router가 정말 편리하네요.' }
  ],
  '2': [
    { id: 3, author: '후크초보', text: 'useState 너무 헷갈렸는데 덕분에 이해했습니다.' }
  ]
};

function PostComments() {
  const { postId } = useParams(); // 부모 라우트의 파라미터도 자식에서 접근 가능
  const comments = postId ? (mockComments[postId] ?? []) : [];

  return (
    <div style={{ marginTop: '30px', borderTop: '1px solid #eee', paddingTop: '20px' }}>
      <h3 style={{ color: '#555', marginBottom: '15px' }}>댓글 목록</h3>
      {comments.length > 0 ? (
        comments.map(comment => (
          <div key={comment.id} style={{ border: '1px solid #eee', borderRadius: '5px', padding: '10px', marginBottom: '10px', backgroundColor: '#fdfdfd' }}>
            <p style={{ margin: '0 0 5px 0', fontWeight: 'bold' }}>{comment.author}</p>
            <p style={{ margin: 0, fontSize: '0.95em', color: '#666' }}>{comment.text}</p>
          </div>
        ))
      ) : (
        <p style={{ color: '#888' }}>아직 댓글이 없습니다.</p>
      )}
      <p style={{ fontSize: '0.9em', color: '#999', marginTop: '20px' }}>
        (이 댓글들은 postId: {postId} 에 대한 가상 데이터입니다.)
      </p>
    </div>
  );
}

export default PostComments;

import React, { useState } from 'react';
import { useNavigate } from 'react-router';

function NewPostPage() {
  const navigate = useNavigate();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [category, setCategory] = useState('React');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 실제 앱에서는 여기에서 서버에 게시글을 POST 요청하고, 성공 시 목록으로 이동합니다.
    console.log('새 게시글 제출:', { title, content, category });
    alert('게시글이 성공적으로 작성되었습니다!');
    navigate('/posts'); // 게시글 목록 페이지로 이동
  };

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px', border: '1px solid #eee', borderRadius: '8px', backgroundColor: '#fdfdfd' }}>
      <h2 className="text-center" style={{ marginBottom: '30px' }}>새 게시글 작성</h2>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
        <div>
          <label htmlFor="title" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>제목:</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '5px', boxSizing: 'border-box' }}
          />
        </div>
        <div>
          <label htmlFor="content" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>내용:</label>
          <textarea
            id="content"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            required
            rows="10"
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '5px', boxSizing: 'border-box', resize: 'vertical' }}
          ></textarea>
        </div>
        <div>
          <label htmlFor="category" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>카테고리:</label>
          <select
            id="category"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '5px', boxSizing: 'border-box' }}
          >
            <option value="React">React</option>
            <option value="JavaScript">JavaScript</option>
            <option value="CSS">CSS</option>
            <option value="Optimization">Optimization</option>
          </select>
        </div>
        <button type="submit" className="button" style={{ marginTop: '20px' }}>게시글 제출</button>
      </form>
    </div>
  );
}

export default NewPostPage;

import React from 'react';
import { Link } from 'react-router';

function NotFoundPage() {
  return (
    <div className="text-center" style={{ padding: '50px 20px', backgroundColor: '#fefefe', borderRadius: '8px' }}>
      <h2 style={{ color: '#e74c3c', fontSize: '2.5em', marginBottom: '15px' }}>페이지를 찾을 수 없습니다</h2>
      <p style={{ fontSize: '1.2em', color: '#555', marginBottom: '30px' }}>
        요청한 client route가 이 앱에 없습니다.
      </p>
      <Link to="/" className="button secondary">홈으로 돌아가기</Link>
    </div>
  );
}

export default NotFoundPage;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router';
import Navbar from './components/Navbar';
import HomePage from './pages/HomePage';
import PostListPage from './pages/PostListPage';
import PostDetailPage from './pages/PostDetailPage';
import PostComments from './pages/PostComments';
import NewPostPage from './pages/NewPostPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <Navbar /> {/* 내비게이션 바는 항상 상단에 표시 */}
      <div className="main-content"> {/* 모든 페이지 내용이 들어갈 컨테이너 */}
        <Routes>
          {/* 기본 라우트 */}
          <Route path="/" element={<HomePage />} />
          <Route path="/posts" element={<PostListPage />} />
          <Route path="/posts/new" element={<NewPostPage />} />

          {/* 동적 라우트 및 중첩 라우트 */}
          <Route path="/posts/:postId" element={<PostDetailPage />}>
            {/* 자식 라우트: /posts/:postId/comments */}
            <Route path="comments" element={<PostComments />} />
          </Route>

          {/* 구체 route가 없을 때 client fallback UI */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;