[React] 댓글 기능 구현

하단에 댓글 쓰는 컴포넌트 구현

import React, { useState, useRef } from 'react';
import '../css/comment.css';

function Commentwrite({onCreate}) {
    const contentInput = useRef(); 
    const authorInput = localStorage.getItem('authId'); 

    const [state, setState] = useState({
        author:authorInput,
        content: "",
        rating: "",
    });

    const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name]: e.target.value, 
        });
    };  

    const handleSubmit = () => {
        if(state.content.length < 5) {
            contentInput.current.focus();
            alert('본문은 5자 이상 입력해주세요.');
            return;
        }
        if(state.rating < 1) {
            alert('5점 만점에 몇점?! 어떘어요?');
            return;
        }
        onCreate(state.author, state.content, state.rating);
        setState({
            author:authorInput,
            content:"",
            rating:"0",
        });
        console.log(state);
        alert('저장 성공');
    };

    return (
    <div className="reviewEditor">
    <div>
    <div className="commentBox">
    <div>
    </div>
        <textarea
            className="reviewWrite"
            ref={contentInput}
            name="content" 
            value={state.content} 
            onChange={handleChangeState}
            placeholder="자세하고 솔직하게 작성해주세요!"
            />
    </div>
    <div className="commentSubmit">
    <div>
        <select 
            name='rating'
            value={state.rating} 
            onChange={handleChangeState}>
            <option value={0}>
            별점 평가
            </option>    
            <option value={1}>
            ⭐
            </option>
            <option value={2}>
            ⭐⭐
            </option>
            <option value={3}>
            ⭐⭐⭐
            </option>
            <option value={4}>
            ⭐⭐⭐⭐
            </option>
            <option value={5}>
            ⭐⭐⭐⭐⭐
            </option>
        </select>
    </div>
    <div>
        <button type="button" className="btn-primary btn-55" onClick={handleSubmit} id="reviewSubmit">댓글 달기</button>
    </div>
    </div>
    </div>
    </div>
    );
}

export default Commentwrite;

 

 

onCreate 함수로 배열에 추가되는 댓글 리스트 (별점 컴포넌트를 import하여 여기서도 재사용하였다.)

import { useState, useRef, useEffect }  from 'react';
import '../../css/review-card.css';
import Rating from '../star-rating/rating'

function reviewCard({review}) {
        const created_date_year = new Date().getFullYear();
        const created_date_month = new Date().getMonth() + 1;
        const created_date_date = new Date().getDate();
        const created_date_day = new Date().getDay();


        useEffect(()=> { 
            console.log(review);
          }, []);

        return (
            <ul className="reviewUnitWrapper">
                <h1 className="page-tit" id="product-info-tit">
                <h1 className="check"></h1>리뷰</h1>
            	{review.slice(1,10).map((rv,i) => 
                <ol className="review-list">
                <li className="review-item">
                    <article className="review-card">
                        <header className="review-card-header">
                            <h3 className="visually-hidden">
                            {rv[0].author}님의 작성 리뷰
                            </h3>
                        	<div className="review-card-body">
                            <div className="info">
                            <strong>
                                <h6 className="tag-outline" 
                                	id="comment-index">
                                {i+1}번째 리뷰
                                </h6>
                                <a className="username" href="#">
                                {rv[0].author}
                                </a>
                            </strong>
                            <div className="detail">
                            <div className="star-rating" 
                            	aria-label={`${rv[0].rating}
                                            / 5.0점`}>
                                <Rating total={5} 
                                        rating={rv[0].rating}/>
                            </div>
                            <div className="comment-time">
                            <time>
                            {created_date_year}년 
                            {created_date_month}월 
                            {created_date_date}일
                            </time>
                            {
                            created_date_day === 1
                            &&
                            <time>(월)</time>
                            }
                            {
                            created_date_day === 2
                            &&
                            <time>(화)</time>
                            }
                            {
                            created_date_day === 3
                            &&
                            <time>(수)</time>
                            }
                            {
                            created_date_day === 4
                            &&
                            <time>(목)</time>
                            }
                            {
                            created_date_day === 5
                            &&
                            <time>(금)</time>
                            }
                            {
                            created_date_day === 6
                            &&
                            <time>(토)</time>
                            }
                            {
                            created_date_day === 7
                            &&
                            <time>(일)</time>
                            }
                            </div>
                            </div>
                            </div>
                        </div>
                        </header>
                        <div>
                            <p className="review-contents" 
                            id="comment-contents">
                            {rv[0].content}
                            </p>
                        </div>
                    </article>
                </li>
            </ol>
        )}
        </ul>
        )
        }

export default reviewCard;