(fix: 게시판 글 수정 오류 해결, 빌드 시 오류(exhaustive-deps,no-unused-vars) 해결) (#30)

* (fix:글 수정 오류 해결) * (fix:빌드 시 오류(exhaustive-deps,no-unused-vars) 해결)
PetGoorm · Dec 13, 2023 · 6ed8497 · 6ed8497
1 parent fe3034f
commit 6ed8497
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 55 deletions.
diff --git a/src/components/board/BoardList.tsx b/src/components/board/BoardList.tsx
@@ -24,22 +24,6 @@ function BoardList(): JSX.Element {
   const navigate = useNavigate();
   const location = useLocation();
   const page = new URLSearchParams(location.search).get('page');
-  const fetchBoardList = async (page) => {
-    try {
-      console.log(`/api/board/page?page=${page}&category=${selectedCategory}&keyword=${keyword}&search=${search}`)
-
-      const response = await api.get(`/api/board/page?page=${page}&category=${selectedCategory}&keyword=${keyword}&search=${search}`);
-
-      const data = response.data;
-
-      setStatus(data.statusCode)
-      setBoardList(data.data.content);
-      setTotalPages(data.data.totalPages);
-
-    } catch (error) {
-      console.error('게시물 목록을 가져오는 중 오류 발생:', error);
-    }
-  };
 
   useEffect(() => {
     if (page) {
@@ -62,8 +46,23 @@ function BoardList(): JSX.Element {
   };
 
   useEffect(() => {
+    const fetchBoardList = async (page) => {
+      try {
+        console.log(`/api/board/page?page=${page}&category=${selectedCategory}&keyword=${keyword}&search=${search}`)
+
+        const response = await api.get(`/api/board/page?page=${page}&category=${selectedCategory}&keyword=${keyword}&search=${search}`);
+
+        const data = response.data;
+
+        setStatus(data.statusCode)
+        setBoardList(data.data.content);
+        setTotalPages(data.data.totalPages);
+
+      } catch (error) {
+        console.error('게시물 목록을 가져오는 중 오류 발생:', error);
+      }
+    };
     fetchBoardList(currentPage);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPage, selectedCategory, status, keyword, search]);
 
 

diff --git a/src/components/board/BoardModifyForm.tsx b/src/components/board/BoardModifyForm.tsx
@@ -10,7 +10,7 @@ function ModifyBoard(): JSX.Element {
   const navigate = useNavigate();
   const { boardId } = useParams();
 
-  const [boardData, setBoardData] = useState<boardRequestDto | null>();
+  const [boardData, setBoardData] = useState<boardRequestDto | null>(null);
 
   const fetchBoard = async () => {
     try {
@@ -78,7 +78,7 @@ function ModifyBoard(): JSX.Element {
       <TableCell>카테고리</TableCell>
       <TableCell align="left">
         <FormControl sx={{ minWidth: 120 }} size="small">
-          <Select labelId="demo-select-small-label" id="demo-select-small" name="category" value={boardData.category} onChange={handleInputChange} displayEmpty inputProps={{ 'aria-label': 'Without label' }}>
+          <Select labelId="demo-select-small-label" id="demo-select-small" name="category" value={boardData ? boardData.category : ''} onChange={handleInputChange} displayEmpty inputProps={{ 'aria-label': 'Without label' }}>
             <MenuItem value="">카테고리 선택</MenuItem>
             <MenuItem value="walk-with">산책모임</MenuItem>
             <MenuItem value="show-off">동물자랑</MenuItem>
@@ -90,19 +90,19 @@ function ModifyBoard(): JSX.Element {
     <TableRow>
       <TableCell>제목</TableCell>
       <TableCell align="center">
-        <TextField fullWidth size="small" id="outlined-multiline-static" name="title" value={boardData.title} onChange={handleInputChange} />
+        <TextField fullWidth size="small" id="outlined-multiline-static" name="title" value={boardData ? boardData.title : ''} onChange={handleInputChange} />
       </TableCell>
     </TableRow>
     <TableRow>
       <TableCell>내용</TableCell>
       <TableCell align="center">
-        <TextField fullWidth id="outlined-multiline-static" multiline rows={10} name="content" value={boardData.content} onChange={handleInputChange} />
+        <TextField fullWidth id="outlined-multiline-static" multiline rows={10} name="content" value={boardData ? boardData.content : ''} onChange={handleInputChange} />
       </TableCell>
     </TableRow>
     <TableRow>
       <TableCell>사진 첨부</TableCell>
       <TableCell align="left">
-      {boardData.image !== '' && <div style={{ display: 'flex', justifyContent: 'center', margin: '10px 0' }}>
+      {boardData && boardData.image !== '' && <div style={{ display: 'flex', justifyContent: 'center', margin: '10px 0' }}>
                     <img src={boardData.image} alt={`${boardData.title}`} style={{ maxWidth: '100%' }} /></div>}
         <BoardImageUploader onImageUpload={handleImageUpload}/>
       </TableCell>

diff --git a/src/components/board/reply/Reply.tsx b/src/components/board/reply/Reply.tsx
@@ -22,22 +22,19 @@ const Reply = () => {
 
     const [refresh, setRefresh] = useState(1)
 
-    //댓글 목록
-    const GetReplyList = () => {
-        api.get(`api/reply/list/${boardId}`)
-            .then((res) => {
-                setReplyList(res.data.data)
-                console.log(res.data.data)
-            }).catch((e) => {
-                console.log(e);
-            })
-
-    }
-
     useEffect(() => {
+        const GetReplyList = () => {
+            api.get(`api/reply/list/${boardId}`)
+                .then((res) => {
+                    setReplyList(res.data.data);
+                    console.log(res.data.data);
+                }).catch((e) => {
+                    console.log(e);
+                });
+        };
+
         GetReplyList();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refresh])
+    }, [boardId, refresh]);
 
 
 

diff --git a/src/components/pet/PetEdit.tsx b/src/components/pet/PetEdit.tsx
@@ -5,6 +5,7 @@ import PetImgUpload from "./PetImgUpload";
 import { uploadS3 } from "lib/s3";
 import { Container, Typography, Grid, TextField, Box, Button, Card } from '@mui/material';
 import { useNavigate } from "react-router-dom";
+import { get } from "http";
 
 interface PetFormData {
     petname: string;
@@ -73,26 +74,27 @@ export const PetEdit = () => {
     }
 
     useEffect(() => {
-        getPetData()
-    }, [])
+        // 펫 정보를 받아오는 함수를 useEffect 내부에 정의
+        const getPetData = () => {
+            api.get("pet/petinfo")
+                .then((res) => {
+                    const petData: PetFormData = {
+                        ...res.data.data
+                    }
+                    setPetData(petData);
+                    setFormattedDate(new Date(petData.firstmet).toISOString().split('T')[0]);
+                }).catch((error) => {
+                    alert('펫을 먼저 등록해주세요!')
+                    navigate("/pet/petform")
+                    console.log(error.message)
+                });
+        };
+
+        // 함수 호출
+        getPetData();
+    }, [navigate]);
 
-    //펫 정보 받아오는 함수
-    const getPetData = () => {
-        api.get("pet/petinfo")
-            .then((res) => {
-                const petData: PetFormData = {
-                    ...res.data.data
-                }
-                setPetData(petData);
-                setFormattedDate(new Date(petData.firstmet).toISOString().split('T')[0]);
-
-            }).catch((error) => {
-                alert('펫을 먼저 등록해주세요!')
-                navigate("/pet/petform")
 
-                console.log(error.message)
-            })
-    }
 
     return (
         <>

diff --git a/src/layouts/dashboard/header/AccountPopover.js b/src/layouts/dashboard/header/AccountPopover.js
@@ -3,7 +3,7 @@ import { useState, React, useEffect } from 'react';
 import { alpha } from '@mui/material/styles';
 import { Box, Divider, Typography, Stack, MenuItem, Avatar, IconButton, Popover } from '@mui/material';
 // mocks_
-import account from '../../../_mock/account';
+// import account from '../../../_mock/account';
 import Cookies from 'js-cookie';
 import api from 'lib/api';
 import { Link } from 'react-router-dom';