Merge pull request #31 from Help-M-Ssaem/fix/#30

[Fix] Comment 캐싱 오류

src/app/board/[id]/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import React, { useState } from 'react'
 import Image from 'next/image'
 import MbtiCategories from '@/components/board/MbtiCategories'
 import Button from '@/components/common/Button'
@@ -11,23 +12,32 @@ import {
 } from '@/service/board/useBoardService'
 import { useParams } from 'next/navigation'
 import CommentList from '@/components/board/CommentList'
+import Pagination from '@/components/common/Pagination' // Pagination 컴포넌트 import
 
 const BoardDetail = () => {
   const { id } = useParams()
   const { data: boardDetail } = useBoardDetail(Number(id))
   const { mutate } = usePostBoardLike()
 
+  // 페이지 상태 관리
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 5
+
   const handleLikeToggle = () => {
     mutate(Number(id))
   }
 
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
   return (
-    <>
+    <div>
       {boardDetail && (
         <>
           <MbtiCategories selectedMbti={boardDetail.boardMbti} />
           <div className="text-title3 text-maindark font-semibold my-5">
-            {boardDetail.boardMbti === 'all' ? '전체' : boardDetail.boardMbti}{' '}
+            {boardDetail.boardMbti === 'all' ? '전체' : boardDetail.boardMbti}
             게시판
           </div>
           <Container color="purple">
@@ -76,14 +86,20 @@ const BoardDetail = () => {
                 onClick={handleLikeToggle}
               />
             </div>
+            <CommentList
+              id={Number(id)}
+              page={currentPage - 1}
+              size={pageSize}
+            />
+            <Pagination
+              pagesCount={Math.ceil(boardDetail.commentCount / pageSize)}
+              currentPage={currentPage}
+              onPageChange={handlePageChange}
+            />
           </Container>
         </>
       )}
-
-      <Container color="purple">
-        <CommentList id={Number(id)} page={0} size={10} />
-      </Container>
-    </>
+    </div>
   )
 }
 

src/components/auth/MemberListCount.tsx

@@ -5,7 +5,8 @@ import {
 } from '@/service/worry/useWorryService'
 import { useDiscussionListMember } from '@/service/discussion/useDiscussionService'
 import { useCommentListMember } from '@/service/comment/useCommentService'
-import { useState } from 'react'
+import { useProfile } from '@/service/user/useUserService'
+import { useState, useEffect } from 'react'
 import { DiscussionBoardI } from '@/model/Discussion'
 import { WorryI } from '@/model/Worry'
 import { BoardI } from '@/model/Board'
@@ -16,75 +17,83 @@ import DiscussionBoard from '../discussion/DiscussionBoard'
 import WorryBoard from '../worry/WorryBoard'
 import Container from '../common/Container'
 
-const TABS = [
-  '내가 쓴 게시글',
-  '내가 쓴 토론글',
-  '내가 쓴 고민글',
-  '내가 쓴 댓글',
-  '내가 해결한 고민',
-]
-
 interface MemberListCountProps {
   id: number
 }
 
 const MemberListCount = ({ id }: MemberListCountProps) => {
-  const [activeTab, setActiveTab] = useState(TABS[0])
+  const [activeTab, setActiveTab] = useState('')
+  const [tabs, setTabs] = useState<string[]>([])
+
+  const { data: profile } = useProfile(id)
 
   const { data: boardList } = useBoardListMember(id, 0, 5)
   const { data: discussionList } = useDiscussionListMember(id, 0, 5)
   const { data: solvedWorryList } = useSolvedWorryListMember(id, 0, 5)
   const { data: waitingWorryList } = useWaitingWorryListMember(id, 0, 5)
   const { data: commentList } = useCommentListMember(id, 0, 4)
 
+  useEffect(() => {
+    const nickName = profile && profile.teacherInfo.nickName
+    const newTabs = [
+      `${nickName} 쓴 게시글`,
+      `${nickName} 쓴 토론글`,
+      `${nickName} 쓴 고민글`,
+      `${nickName} 쓴 댓글`,
+      `${nickName} 해결한 고민`,
+    ]
+    setTabs(newTabs)
+    setActiveTab(newTabs[0])
+  }, [profile])
+
   const renderList = () => {
     switch (activeTab) {
-      case '내가 쓴 게시글':
+      case `${profile?.teacherInfo.nickName} 쓴 게시글`:
         return (
           boardList &&
           boardList.result.map((item: BoardI, index: number) => (
-            <div>
-              <Board key={index} board={item} />
+            <div key={index}>
+              <Board board={item} />
               <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))
         )
-      case '내가 쓴 토론글':
+      case `${profile?.teacherInfo.nickName} 쓴 토론글`:
         return (
           discussionList &&
           discussionList.result.map((item: DiscussionBoardI, index: number) => (
-            <div>
-              <DiscussionBoard key={index} discussionBoard={item} />
+            <div key={index}>
+              <DiscussionBoard discussionBoard={item} />
               <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))
         )
-      case '내가 쓴 고민글':
+      case `${profile?.teacherInfo.nickName} 쓴 고민글`:
         return (
           waitingWorryList &&
           waitingWorryList.result.map((item: WorryI, index: number) => (
-            <div>
-              <WorryBoard key={index} worryBoard={item} />
+            <div key={index}>
+              <WorryBoard worryBoard={item} />
               <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))
         )
-      case '내가 해결한 고민':
+      case `${profile?.teacherInfo.nickName} 해결한 고민`:
         return (
           solvedWorryList &&
           solvedWorryList.result.map((item: WorryI, index: number) => (
-            <div>
-              <WorryBoard key={index} worryBoard={item} />
+            <div key={index}>
+              <WorryBoard worryBoard={item} />
               <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))
         )
-      case '내가 쓴 댓글':
+      case `${profile?.teacherInfo.nickName} 쓴 댓글`:
         return (
           commentList &&
           commentList.result.map((item: CommentI, index: number) => (
-            <div>
-              <Comment key={index} comment={item} />
+            <div key={index}>
+              <Comment comment={item} />
               <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))
@@ -97,7 +106,7 @@ const MemberListCount = ({ id }: MemberListCountProps) => {
   return (
     <div className="w-full bg-main3 rounded-t-7.5">
       <div className="flex overflow-x-auto border-b mb-4 scrollbar-hide">
-        {TABS.map((tab) => (
+        {tabs.map((tab) => (
           <button
             type="button"
             key={tab}

src/components/auth/UserProfile.tsx

@@ -28,10 +28,8 @@ const UserProfile = ({ profile }: UserProfileProps) => {
           <Button text={badge} color={badge} size="badge" />
         </div>
       </div>
-      <div className="flex flex-col gap-2">
-        <div className="text-title3 text-gray1 items-start font-semibold">
-          한 줄 소개
-        </div>
+      <div className="flex flex-col gap-2 self-start">
+        <div className="text-title3 text-gray1 font-semibold">한 줄 소개</div>
         <div className="text-body text-gray1 font-regular">{introduction}</div>
       </div>
     </div>

src/components/board/CommentList.tsx

@@ -1,7 +1,10 @@
 'use client'
 
+import { useState } from 'react'
 import { useCommentList } from '@/service/comment/useCommentService'
+import { CommentI } from '@/model/Comment'
 import Comment from './Comment'
+import ChattingInput from '../chatting/ChattingInput'
 
 interface CommentListProps {
   id: number
@@ -10,12 +13,64 @@ interface CommentListProps {
 }
 
 const CommentList = ({ id, page, size }: CommentListProps) => {
+  const [newComment, setNewComment] = useState<FormData>(new FormData())
   const { data: commentList } = useCommentList({ id, page, size })
 
+  const handleCommentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formData = new FormData()
+    formData.append('comment', e.target.value)
+    setNewComment(formData)
+  }
+
+  const handleShareBtnClick = () => {
+    console.log('share')
+  }
+  const handleReportBtnClick = () => {
+    console.log('report')
+  }
+  const handleCommentSubmit = () => {
+    console.log('submit')
+  }
+
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col">
+      <div className="flex justify-between">
+        <div className="text-maindark text-title3 font-semibold">
+          전체 댓글 {commentList && commentList.totalSize}개
+        </div>
+        <div className="flex gap-4 text-gray2 text-title3 font-semibold">
+          <button
+            type="button"
+            className="cursor-pointer"
+            onClick={handleShareBtnClick}
+          >
+            공유
+          </button>
+          <button
+            type="button"
+            className="cursor-pointer"
+            onClick={handleReportBtnClick}
+          >
+            신고
+          </button>
+        </div>
+      </div>
+      <div className="h-[1px] bg-main my-4" />
       {commentList &&
-        commentList.result.map((comment) => <Comment comment={comment} />)}
+        commentList.result.map((comment: CommentI) => (
+          <>
+            <Comment key={comment.commentId} comment={comment} />
+            <div className="h-[1px] bg-main my-4" />
+          </>
+        ))}
+
+      <div className="mb-4">
+        <ChattingInput
+          value={newComment.get('comment')?.toString() || ''}
+          onChange={handleCommentChange}
+          onClick={handleCommentSubmit}
+        />
+      </div>
     </div>
   )
 }

src/components/chatting/ChattingInput.tsx

@@ -4,11 +4,17 @@ import Button from '../common/Button'
 
 export interface ChattingInputProps {
   value: string
+  placeholder?: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   onClick: () => void
 }
 
-const ChattingInput = ({ value, onChange, onClick }: ChattingInputProps) => {
+const ChattingInput = ({
+  value,
+  placeholder,
+  onChange,
+  onClick,
+}: ChattingInputProps) => {
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       onClick()
@@ -19,14 +25,19 @@ const ChattingInput = ({ value, onChange, onClick }: ChattingInputProps) => {
     <div className="flex w-full gap-3.75">
       <input
         type="text"
-        className="w-full text-gray2 text-headline font-semibold px-4 py-2 border border-main rounded-7.5 focus:outline-none focus:border-main"
+        className="w-full text-gray2 text-headline font-semibold px-4 py-3 border border-main rounded-7.5 focus:outline-none focus:border-main"
         value={value}
         onChange={onChange}
         onKeyPress={handleKeyPress}
+        placeholder={placeholder}
       />
       <Button text="등록" color="PURPLE" size="small" onClick={onClick} />
     </div>
   )
 }
 
+ChattingInput.defaultProps = {
+  placeholder: '',
+}
+
 export default ChattingInput