상세페이지 댓글(미)

'use client'

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import "@/css/article.css";

// Comment 컴포넌트를 import 합니다.
import Comment from "./Comment"

export default function ArticleDetail() {
    const params = useParams();  
    const [article, setArticle] = useState({});
    const [input, setInput] = useState('');
    const [commentList, setCommentList] = useState([]);

    useEffect(() => {
        fetch(`http://localhost:8090/api/v1/articles/${params.id}`)
        .then(result => result.json())
        .then(result => setArticle(result.data.article));
        
        // Comment data fetching can also be done here if needed
    }, []);

    const addComment = () => {
        if (input !== '') {
            const lastCmtIndex = commentList.length - 1;
            const addedCmtId = lastCmtIndex >= 0 ? commentList[lastCmtIndex].id + 1 : 1;
            const newComment = {
                id: addedCmtId,
                username: 'bibigo', // You can modify this to get the actual username
                content: input,
            };
            setCommentList([...commentList, newComment]);
            setInput('');
        }
    };

    return ( 
        <>
            <div className="container">
                <h1>게시판 상세 {params.id}번</h1>
                <div className="post"></div>
            </div>
            
            {/* Rendering Comments */}
            <ul className="list-cmt">
                {commentList.map(comment => (
                    <Comment key={comment.id} comment={comment} />
                ))}
            </ul>
                
            <div className="box-inp-cmt">
                <input
                    type="text"
                    placeholder="댓글 달기..."
                    value={input}
                    onChange={e => setInput(e.target.value)}
                    onKeyDown={e => (e.key === 'Enter' ? addComment() : null)}
                    />
                <button className="btn-submit" disabled={input === ''} onClick={addComment}>
                    게시
                </button>
            </div>
        </>
    );
}

ArticleList.tsx

import React from 'react';
import styled from 'styled-components';

const Table = styled.table`
  border-collapse: collapse;
  width: 100%;
`;

const Th = styled.th`
  border: 1px solid #dee2e6;
  padding: 8px;
`;

const ArticleTable = () => {
  return (
    <Table className="table">
      <thead className="table-dark">
        <tr>
          <Th>번호</Th>
          <Th>제목</Th>
          <Th>작성일시</Th>
        </tr>
      </thead>
      
    </Table>
  );
};

export default ArticleTable;

위에거 씌운거

'use client'

import { useEffect, useState } from "react"
import DefaultLayout from "@/components/Layouts/DefaultLayout";
import ArticleList from "./ArticleList"

export default function Article () {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        fetch("http://localhost:8090/api/v1/articles")
        .then(result => result.json())
        .then(result => setArticles(result.data.articles))
    }, [])

    return (
        <DefaultLayout>  
           <ul>
                번호 / 제목 / 생성일
                {articles.map(row => <li>{row.id} / {row.subject} / {row.createdDate}</li>)}
           </ul>
           <ArticleList></ArticleList>
        </DefaultLayout>
    )
}