댓글기능 추가, 댓글창 디자인 - 1

술래는 본래 기획이 커뮤니티였다. 서로 자신의 레시피를올리고 자기가 가진 재료로 만들수있는 다양한 칵테일을 검색할수있는 기능이 원래 생각한 기능이었다. 현재는 칵테일레시피를 올리고 저장할수는 있지만 의견을 나눌수가 없다. 그래서 커뮤니티의 시작이자 끝인 댓글 기능을 추가해보겠다. 

 

우선은 댓글을 입력하고 보여주기위해서 html코드로 디자인을 잡아주었다. 

아예 처음부터만들기에는 나의 미적감각이 절망적인 수준이어서 FlowVite라는 사이트에서 코드를 보고 컴포넌트화 했다.

https://flowbite.com/blocks/publisher/comments/

 

쪼개다 보니 생각보다 컴포넌트가 많아졌다.

그림으로 그려보면 이렇게 나온다.

 

CommentBox.tsx

import React from 'react'
import DisccussionCount from './DisccussionCount';
import WriteCommentText from './WriteCommentText';
import CommentTop from './CommentTop';

function CommentBox() {
  return (
    <section className="bg-white dark:bg-gray-900 py-8 lg:py-16 antialiased">
      <div className="mx-auto px-4">
        <DisccussionCount></DisccussionCount>
        <WriteCommentText></WriteCommentText>
        <CommentTop></CommentTop>
        <article className="p-6 mb-3 ml-6 lg:ml-12 text-base bg-white rounded-lg dark:bg-gray-900">
          <CommentTop></CommentTop>
        </article>  
        {/* 밑에 달린 코멘트는 이 태그에 들어감 2번쨰글 부터 border-t 로 구분선 추가. */}
        <div className='border-t'></div>
        <CommentTop></CommentTop>
      </div>
    </section>
  )
}

export default CommentBox

 

DisscussionCount.tsx

import React from 'react'

function DisccussionCount() {
  return (
    <div className="flex justify-between items-center mb-6">
        <h2 className="text-lg lg:text-2xl font-bold text-gray-900 dark:text-white">Discussion (20)</h2>
    </div>
  )
}

export default DisccussionCount

 

WriteCommentText.tsx

import { useLoginContext } from '@/app/(context)/LoginContext';
import React from 'react'

function WriteCommentText() {
    const { isLogin , setIsLogin } = useLoginContext();
  return (
    <form className="mb-6">
        <div className="py-2 px-4 mb-4 bg-white rounded-lg rounded-t-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
            <label htmlFor="comment" className="sr-only">Your comment</label>
            <textarea id="comment" rows={6}
                className="px-0 w-full text-sm text-gray-900 border-0 focus:ring-0 focus:outline-none dark:text-white dark:placeholder-gray-400 dark:bg-gray-800"
                placeholder={isLogin ? "댓글 작성":"로그인 후 댓글 작성이 가능합니다."} required>

            </textarea>
        </div>
        <button type="submit"
            className="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800">
            댓글
        </button>
    </form>
  )
}

export default WriteCommentText

이 코드는 전역값으로 로그인 여부에따라서 보이는 글을 다르게 설정해주고있다.

 

CommentTop.tsx

import React from 'react'
import CommentNameAndDate from './CommentNameAndDate'
import CommentDropDownButton from './CommentDropDownButton'
import CommentMainText from './commentMainText'

function CommentTop() {
  return (
    <article className="p-6 text-base bg-white rounded-lg dark:bg-gray-900">
        <footer className="flex justify-between items-center mb-2">
            <CommentNameAndDate></CommentNameAndDate>
            <CommentDropDownButton></CommentDropDownButton>
        </footer>
        <CommentMainText></CommentMainText>
    </article>
  )
}

export default CommentTop

이 부분이 댓글을 보여주는 부분의 컴포넌트 이다.

 

CommentNameAndDate.tsx

import React from 'react'

function CommentNameAndDate() {
  return (
    <div className="flex items-center">
        <p className="inline-flex items-center mr-3 text-sm text-gray-900 dark:text-white font-semibold">

            Michael Gough
        </p>
        <p className="text-sm text-gray-600 dark:text-gray-400">
            <time dateTime="2022-02-08" title="February 8th, 2022">
            Feb. 8, 2022
            </time>
        </p>
	</div>
  )
}

export default CommentNameAndDate

 

CommentDropDownButton

import React from 'react'

function CommentDropDownButton() {
  return (
    <>
    <button id="dropdownComment1Button" data-dropdown-toggle="dropdownComment1"
        className="inline-flex items-center p-2 text-sm font-medium text-center text-gray-500 dark:text-gray-400 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
        type="button">
        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
            <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
        </svg>
        <span className="sr-only">Comment settings</span>
    </button>
    <div id="dropdownComment1"
        className="hidden z-10 w-36 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
        <ul className="py-1 text-sm text-gray-700 dark:text-gray-200"
            aria-labelledby="dropdownMenuIconHorizontalButton">
            <li>
                <a href="#"
                    className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
            </li>
            <li>
                <a href="#"
                    className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Remove</a>
            </li>
            <li>
                <a href="#"
                    className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Report</a>
            </li>
        </ul>
    </div>
    </>
  )
}

export default CommentDropDownButton

 

CommentMainText.tsx

import React from 'react'

function CommentMainText() {
  return (
    <>
        <p className="text-gray-500 dark:text-gray-400">Very straight-to-point article. Really worth time reading. Thank you! But tools are just the
            instruments for the UX designers. The knowledge of the design tools are as important as the
            creation of the design strategy.</p>
        <div className="flex items-center mt-4 space-x-4">
            <button type="button"
                className="flex items-center text-sm text-gray-500 hover:underline dark:text-gray-400 font-medium">
                <svg className="mr-1.5 w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5h5M5 8h2m6-3h2m-5 3h6m2-7H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3v5l5-5h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z"/>
                </svg>
                Reply
            </button>
        </div> 
    </>
  )
}

export default CommentMainText

 

이렇게 컴포넌트로 댓글을 만들수있게 분리해두었다. 아직은 서버를 구현하지않아서 텍스트로 넣어놓은 닉네임이나 날짜 실제 댓글 데이터는 이후에 commentBox에서 받아서 props로 각 컴포넌트에 넘겨줄 계획이다.