[fix] eslint 에러 해결

src/hooks/changeStatus.tsx

@@ -0,0 +1,26 @@
+
+
+
+const changeStatus = async(endpoint:string, issueId:number, issueData:string) =>{
+    const url =  `${process.env.NEXT_PUBLIC_API_BASE_URL}status?issueId=${issueId}`;
+    const requestOption = {
+        method: 'PATCH',
+        headers: {
+            'Content-Type' : 'application/json'
+        },
+        body:JSON.stringify(issueData)
+    }
+
+    try{
+        const response = await fetch(url, requestOption);
+        if(!response.ok){
+            throw new Error('HTTP error! status: ${response.status}');
+        }
+        const data = await response.json();
+        return data;
+    }catch (error){
+        console.error('Error updating issue status:', error);
+        throw error;
+    }
+
+    }

src/hooks/addComment.tsx → src/hooks/useAddComment.tsx

@@ -3,7 +3,7 @@ import {NewComment, CommentInfo} from '@/types/type'
 import axios from 'axios';
 import {useRouter} from 'next/router';
 
-const addComment = () => {
+const useAddComment = () => {
     const [errorA, setError] = useState<string|null>(null);
     const [dataA, setData] = useState<CommentInfo|null>(null);
     const router = useRouter();
@@ -52,5 +52,5 @@ const addComment = () => {
     return{create, errorA, dataA};
 };
 
-export default addComment;
+export default useAddComment;
 

src/hooks/useFetchComment.tsx

@@ -6,7 +6,7 @@ interface FetchResult<T>{
     errorC: string | null;
 }
 
-const useFetchComment = <T,>(endpoint: string, fetchedData: (data: any) => T): FetchResult<T>& { refetch: () => void } =>{
+const useFetchComment = <T,>(endpoint: string, fetchedData: (data: any) => T): FetchResult<T>& { refetchC: () => void } =>{
 const [comments, setData] = useState<T[] | null>(null);
 const [loadingC, setLoading] = useState<boolean>(false);
 const [errorC, setError] = useState<string | null>(null);
@@ -43,11 +43,11 @@ useEffect(() => {
     fetchData();
 }, [endpoint]);
 
-const refetch=()=>{
+const refetchC=()=>{
     fetchData();
 }
 
-    return {comments, loadingC, errorC, refetch};
+    return {comments, loadingC, errorC, refetchC};
 };
 
 export default useFetchComment;

src/pages/issue/[id].tsx

@@ -5,7 +5,7 @@ import InfoBox from '@/components/issue/InfoBox';
 import { CommentInfo, IssueInfo, NewComment } from '@/types/type';
 import useFetchIssueDetail from '../../hooks/useFetchIssueDetail';
 import useFetchComment from '@/hooks/useFetchComment';
-import addComment from '@/hooks/addComment';
+import useAddComment from '@/hooks/useAddComment';
 import deleteComment from '@/hooks/deleteComment';
 import { useRouter } from 'next/router';
 import Navbar from '@/components/nav/Navbar';
@@ -26,7 +26,7 @@ const fetchIssueData = (data:any):IssueInfo => ({
 const fetchComment = (data:any):CommentInfo => ({
     id: data.id,
     message: data.message,
-    authorid: data.authorid,
+    authorId: data.authorId,
     created_at: data.created_at,
     username: data.username,
     role: data.role
@@ -38,11 +38,11 @@ const Issue = () => {
     const {data, loading, error} = useFetchIssueDetail<IssueInfo>(endpoint, fetchIssueData);
 
     const endpointC = '/comments';
-    const {comments:initialComment, loadingC, errorC, refetch} = useFetchComment<CommentInfo>(endpointC, fetchComment);
+    const {comments:initialComment, loadingC, errorC, refetchC} = useFetchComment<CommentInfo>(endpointC, fetchComment);
 
     const [comments, setComments] = useState<CommentInfo[]>([]);
     const [messageC, setMessage] = useState('');
-    const {create, errorA, dataA} = addComment();
+    const {create, errorA, dataA} = useAddComment();
     const router = useRouter();
 
     useEffect(() => {
@@ -63,20 +63,17 @@ const Issue = () => {
         createComment(newComment);
     }
 
+
     const createComment = async (newComment:NewComment) =>{
         const createdComment = await create(newComment);
         if(createdComment){
             setComments([...comments, createdComment]);
             setMessage('');
-            refetch();
+            refetchC();
 
         }
     }
 
-    const handleNewProjectCreated = ()=>{
-        refetch();
-    }
-
     const handleDeleteComment = async (commentId:string) =>{
         try {
             const deleted = await deleteComment(commentId);
@@ -136,7 +133,7 @@ const Issue = () => {
 
                 <CommentBoxWrapper>
                     {comments&& comments.map(comment=>(
-                        <div className='comment-container'>
+                        <div className='comment-container' key={comment.id}>
                             <CommentUser id="userType" color={typeColor[comment.role]}> 
                                 <div id='user'>{comment.username}</div>
                                 <div id='user-type'>{comment.role}</div>

src/pages/project/[id].tsx

@@ -4,9 +4,10 @@ import {useRouter} from 'next/router';
 import NewIssue from '@/components/modal/NewIssue';
 import { useRecoilState } from 'recoil';
 import { modalState } from '@/recoil/state';
-import { IssueInfo,Status,StatusType } from '@/types/type';
+import { IssueInfo,Status,StatusType, CommentInfo } from '@/types/type';
 import useFetchIssue from '../../hooks/useFetchIssue';
 import Navbar from '@/components/nav/Navbar';
+import useFetchComment from '@/hooks/useFetchComment';
 
 const Issues = () => {
     const fetchIssueData = (data:any):IssueInfo => ({
@@ -22,10 +23,20 @@ const Issues = () => {
         updated_at: data.updated_at
     })
 
+    const fetchCommentData = (data: any): CommentInfo => ({
+        id: data.id,
+        message: data.message,
+        authorId: data.authorId,
+        created_at: data.created_at,
+        username: data.username,
+        role: data.role
+    });
+
     const router = useRouter();
     const endpoint = '/issues'; 
-
     const {data, loading, error, refetch} = useFetchIssue<IssueInfo>(endpoint, fetchIssueData);
+    const endpointC = '/comments';
+    const { comments, loadingC: loadingComments, errorC: errorComments, refetchC} = useFetchComment<CommentInfo>(endpointC, fetchCommentData);
 
 
     const [isVisible, setVisiable] = useRecoilState(modalState);
@@ -62,6 +73,10 @@ const Issues = () => {
         console.log(status);
     }
 
+    const getCommentCount = (issueId: number) => {
+        return comments?.filter((comment:any) => comment.issueId === issueId).length || 0;
+    };
+
 
     return (
         <>

src/types/type.ts

@@ -41,7 +41,7 @@ export interface CommentInfo{
     role: string;
     message: string;
     created_at: string;
-    authorid: number;
+    authorId: number;
 }