-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #93 from hufs-sports-live/feat/comment
[FEAT] 댓글 기능 구현
- Loading branch information
Showing
17 changed files
with
450 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { UseMutateFunction } from '@tanstack/react-query'; | ||
| import { FormEvent, useState } from 'react'; | ||
|
|
||
| import { MatchCommentPayload } from '@/types/match'; | ||
|
|
||
| type CommentFormProps = { | ||
| matchId: string; | ||
| mutate: UseMutateFunction<void, Error, MatchCommentPayload, unknown>; | ||
| scrollToBottom: () => void; | ||
| }; | ||
|
|
||
| export default function CommentForm({ | ||
| matchId, | ||
| mutate, | ||
| scrollToBottom, | ||
| }: CommentFormProps) { | ||
| const [inputValue, setInputValue] = useState(''); | ||
| const handleCommentSubmit = ( | ||
| e: FormEvent<HTMLFormElement>, | ||
| payload: MatchCommentPayload, | ||
| ) => { | ||
| e.preventDefault(); | ||
| mutate(payload); | ||
| setInputValue(''); | ||
| scrollToBottom(); | ||
| }; | ||
|
|
||
| return ( | ||
| <form | ||
| className="h-70px absolute -bottom-1 left-0 w-full" | ||
| onSubmit={e => | ||
| handleCommentSubmit(e, { | ||
| gameTeamId: Number(matchId), | ||
| content: inputValue, | ||
| }) | ||
| } | ||
| > | ||
| <div | ||
| className="grid items-center rounded-lg bg-gray-2" | ||
| style={{ gridTemplateColumns: '1fr auto' }} | ||
| > | ||
| <input | ||
| className="bg-inherit px-5 text-gray-5 outline-none" | ||
| value={inputValue} | ||
| onChange={e => setInputValue(e.target.value)} | ||
| placeholder="응원하는 팀에 댓글을 남겨보세요!" | ||
| /> | ||
| <button className="rounded-xl bg-primary px-5 py-3 text-white"> | ||
| 댓글 | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import useReportCommentMutation from '@/queries/useReportCommentMutation/query'; | ||
| import { $ } from '@/utils/core'; | ||
| import { parseTimeString } from '@/utils/time'; | ||
|
|
||
| type CommentItemProps = { | ||
| commentId: number; | ||
| content: string; | ||
| order: number; | ||
| isBlocked: boolean; | ||
| createdAt: string; | ||
| }; | ||
|
|
||
| export default function CommentItem({ | ||
| commentId, | ||
| content, | ||
| order, | ||
| isBlocked, | ||
| createdAt, | ||
| }: CommentItemProps) { | ||
| const { mutate } = useReportCommentMutation(); | ||
| const handleClickReportButton = (payload: { commentId: number }) => { | ||
| mutate(payload); | ||
| }; | ||
|
|
||
| const isEven = order % 2 === 0; | ||
| const { period, hours, minutes } = parseTimeString(createdAt); | ||
|
|
||
| return ( | ||
| <li className={$('mb-1 flex items-end', isEven && 'flex-row-reverse')}> | ||
| {isBlocked ? ( | ||
| <div | ||
| className={$( | ||
| 'rounded-xl border px-3 py-1', | ||
| isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]', | ||
| )} | ||
| > | ||
| ⚠️ 관리자에 의해 차단된 댓글입니다. | ||
| </div> | ||
| ) : ( | ||
| <div | ||
| className={$( | ||
| 'rounded-xl border px-3 py-1', | ||
| isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]', | ||
| )} | ||
| > | ||
| {content} | ||
| </div> | ||
| )} | ||
| <div | ||
| className={$( | ||
| 'mb-1 flex items-end justify-between text-xs', | ||
| isEven && 'flex-row-reverse', | ||
| )} | ||
| > | ||
| <time | ||
| className={$( | ||
| 'w-max px-2 text-gray-4', | ||
| isEven ? 'border-l' : 'border-r', | ||
| )} | ||
| > | ||
| {`${period} ${hours}:${minutes.toString().padStart(2, '0')}`} | ||
| </time> | ||
| <button | ||
| onClick={() => handleClickReportButton({ commentId })} | ||
| className="mx-2 w-max text-red-400" | ||
| > | ||
| 신고 | ||
| </button> | ||
| </div> | ||
| </li> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| 'use client'; | ||
|
|
||
| import { useEffect } from 'react'; | ||
|
|
||
| import useInfiniteObserver from '@/hooks/useInfiniteObserver'; | ||
| import { MatchCommentType } from '@/types/match'; | ||
|
|
||
| import CommentItem from '../CommentItem'; | ||
|
|
||
| type CommentListProps = { | ||
| commentList: MatchCommentType[]; | ||
| hasNextPage: boolean; | ||
| fetchNextPage: () => void; | ||
| isFetching: boolean; | ||
| scrollToBottom: () => void; | ||
| }; | ||
|
|
||
| export default function CommentList({ | ||
| commentList, | ||
| fetchNextPage, | ||
| hasNextPage, | ||
| isFetching, | ||
| scrollToBottom, | ||
| }: CommentListProps) { | ||
| const { ref } = useInfiniteObserver<HTMLDivElement>( | ||
| async (entry, observer) => { | ||
| observer.unobserve(entry.target); | ||
| if (hasNextPage && !isFetching) { | ||
| fetchNextPage(); | ||
| } | ||
| }, | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!scrollToBottom) return; | ||
|
|
||
| scrollToBottom(); | ||
| }, [scrollToBottom]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div ref={ref}></div> | ||
| {commentList.map(comment => ( | ||
| <CommentItem {...comment} key={comment.commentId} order={1} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| CommentList.SocketList = function SocketList({ | ||
| commentList, | ||
| }: Pick<CommentListProps, 'commentList'>) { | ||
| return ( | ||
| <> | ||
| {commentList.map(comment => ( | ||
| <CommentItem {...comment} key={comment.commentId} order={1} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useCallback, useEffect, useRef } from 'react'; | ||
|
|
||
| type IntersectHandler = ( | ||
| entry: IntersectionObserverEntry, | ||
| observer: IntersectionObserver, | ||
| ) => void; | ||
|
|
||
| export default function useIntersect<T extends HTMLElement>( | ||
| onIntersect: IntersectHandler, | ||
| options?: IntersectionObserverInit, | ||
| ) { | ||
| const ref = useRef<T | null>(null); | ||
| const callback = useCallback( | ||
| (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) onIntersect(entry, observer); | ||
| }); | ||
| }, | ||
| [onIntersect], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!ref.current) return; | ||
|
|
||
| const observer = new IntersectionObserver(callback, options); | ||
|
|
||
| observer.observe(ref.current); | ||
|
|
||
| return () => observer.disconnect(); | ||
| }, [ref, options, callback]); | ||
|
|
||
| return { ref }; | ||
| } |
Oops, something went wrong.