[React] 게시판 리스트 추가

저번에 올린 게시판이 밋밋하여, 게시판을 추가하는 기능을 추가하겠습니다. 게시판 리스트를 추가하면 사용자가 여러 게시판을 선택할 수 있고, 선택한 게시판의 글을만 볼수 있게 됩니다.

 

게시판 코딩 및 설명

import React, { useState } from 'react';

const BoardWithList = () => {
  const [boards, setBoards] = useState([
    { id: 1, name: '일반 게시판' },
    { id: 2, name: '질문과 답변' },
    { id: 3, name: '자유 게시판' }
  ]);
  const [selectedBoard, setSelectedBoard] = useState(1);
  const [posts, setPosts] = useState([]);
  const [newPost, setNewPost] = useState({ title: '', content: '' });
  const [newBoardName, setNewBoardName] = useState('');

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewPost({ ...newPost, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newPost.title && newPost.content) {
      setPosts([...posts, { ...newPost, id: Date.now(), boardId: selectedBoard }]);
      setNewPost({ title: '', content: '' });
    }
  };

  const handleDelete = (id) => {
    setPosts(posts.filter(post => post.id !== id));
  };

  const handleBoardSelect = (boardId) => {
    setSelectedBoard(boardId);
  };

  const handleNewBoardSubmit = (e) => {
    e.preventDefault();
    if (newBoardName) {
      setBoards([...boards, { id: Date.now(), name: newBoardName }]);
      setNewBoardName('');
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">게시판 시스템</h1>
      
      <div className="flex mb-4">
        <div className="w-1/4 pr-4">
          <h2 className="text-xl font-bold mb-2">게시판 목록</h2>
          <ul>
            {boards.map(board => (
              <li 
                key={board.id} 
                className={`cursor-pointer p-2 ${selectedBoard === board.id ? 'bg-blue-100' : ''}`}
                onClick={() => handleBoardSelect(board.id)}
              >
                {board.name}
              </li>
            ))}
          </ul>
          <form onSubmit={handleNewBoardSubmit} className="mt-4">
            <input
              type="text"
              value={newBoardName}
              onChange={(e) => setNewBoardName(e.target.value)}
              placeholder="새 게시판 이름"
              className="w-full p-2 mb-2 border rounded"
            />
            <button type="submit" className="bg-green-500 text-white p-2 rounded">새 게시판 추가</button>
          </form>
        </div>
        
        <div className="w-3/4">
          <h2 className="text-xl font-bold mb-2">{boards.find(b => b.id === selectedBoard)?.name}</h2>
          <form onSubmit={handleSubmit} className="mb-4">
            <input
              type="text"
              name="title"
              value={newPost.title}
              onChange={handleInputChange}
              placeholder="제목"
              className="w-full p-2 mb-2 border rounded"
            />
            <textarea
              name="content"
              value={newPost.content}
              onChange={handleInputChange}
              placeholder="내용"
              className="w-full p-2 mb-2 border rounded"
            />
            <button type="submit" className="bg-blue-500 text-white p-2 rounded">게시하기</button>
          </form>

          <div>
            {posts.filter(post => post.boardId === selectedBoard).map(post => (
              <div key={post.id} className="bg-gray-100 p-4 mb-2 rounded">
                <h3 className="font-bold">{post.title}</h3>
                <p>{post.content}</p>
                <button onClick={() => handleDelete(post.id)} className="text-red-500 mt-2">삭제</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BoardWithList;

 

구현된 화면.

 

주요 변경사항은 다음과 같습니다.

1. 게시판 목록 상태 추가 

const [boards, setBoards] = useState([
  { id: 1, name: '일반 게시판' },
  { id: 2, name: '질문과 답변' },
  { id: 3, name: '자유 게시판' }
]);
const [selectedBoard, setSelectedBoard] = useState(1);

 

2. 새 게시판 추가 기능

const handleNewBoardSubmit = (e) => {
  e.preventDefault();
  if (newBoardName) {
    setBoards([...boards, { id: Date.now(), name: newBoardName }]);
    setNewBoardName('');
  }
};

 

3. 게시판 선택 기능

const handleBoardSelect = (boardId) => {
  setSelectedBoard(boardId);
};

 

4. 레이아웃 변경

    - 왼쪽에 게시판 목록을, 오른쪽에 선택된 게시판의 게시글을 표시합니다.

 

5. 게시글 필터링

posts.filter(post => post.boardId === selectedBoard).map(post => ...)

 

게시판 실행

1. 필요한 패키지 설치 : 이 예제에서는 Tailwind CSS를 사용했으므로 , 다음 명령어로 Tailwind를 설치합니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

 

2. Tailwind 설정 : src/index.css 파일을 열고 다음 내용으로 교체합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

3. App.js 수정 : src/App.js 파일을 열고 다음과 같이 수정합니다.

import React from 'react';
import BoardWithList from './BoardWithList';

function App() {
  return (
    <div className="App">
      <BoardWithList />
    </div>
  );
}

export default App;

 

5. 터미널에서 실행합니다.

npm start