diff --git a/src/apis/getDiaryQuery.jsx b/src/apis/getDiaryQuery.jsx new file mode 100644 index 0000000..16ce058 --- /dev/null +++ b/src/apis/getDiaryQuery.jsx @@ -0,0 +1,23 @@ +import axios from "axios"; + +const getDiaryQuery = async (goalId, query, csrfToken) => { + try { + const serverResponse = await axios.get( + `${process.env.REACT_APP_HOST_URL}/v1/goals/${goalId}/journals?q=${query}`, + { withCredentials: true }, + { + headers: { + "X-CSRF-TOKEN": csrfToken, + }, + } + ); + console.log("검색 일지 불러오기 성공", serverResponse); + + return serverResponse.data; + } catch (error) { + console.error("일지 불러오기 실패 ", error); + throw error; + } +}; + +export default getDiaryQuery; diff --git a/src/diaryListPage/components/Diaries.jsx b/src/diaryListPage/components/Diaries.jsx index 5ff29fa..3fc9984 100644 --- a/src/diaryListPage/components/Diaries.jsx +++ b/src/diaryListPage/components/Diaries.jsx @@ -8,6 +8,7 @@ import getDiaryList from "../../apis/getDiaryList"; import { useRecoilValue } from "recoil"; import { tokenState } from "../../atom/atom"; import { useLocation, useNavigate } from "react-router-dom"; +import getDiaryQuery from "../../apis/getDiaryQuery"; function Diaries() { const [isModalOpen, setIsModalOpen] = useState(false); @@ -20,6 +21,9 @@ function Diaries() { const navigate = useNavigate(); console.log("찐 막", goalId); + const [searchQuery, setSearchQuery] = useState(""); // 일지 내용+제목 검색할 쿼리 + const [searchedDiaries, setSearchedDiaries] = useState({ journals: [] }); + const [isSearching, setIsSearching] = useState(false); // 현재 검색중인지 아닌지를 판별(= 검색어를 '엔터'쳤을때만 검색되도록하기 위해서 설정 ) useEffect(() => { const fetchGoalList = async () => { setIsLoading(true); @@ -48,54 +52,137 @@ function Diaries() { let diaries = goalList.journals; if (currentSort === "최신순") { - diaries = diaries.sort((a, b) => formatDate(b.createdDate) - formatDate(a.createdDate)); + diaries = diaries.sort( + (a, b) => formatDate(b.createdDate) - formatDate(a.createdDate) + ); } else if (currentSort === "오래된 순") { - diaries = diaries.sort((a, b) => formatDate(a.createdDate) - formatDate(b.createdDate)); + diaries = diaries.sort( + (a, b) => formatDate(a.createdDate) - formatDate(b.createdDate) + ); } return diaries; }; const filteredDiaries = getFilteredDiaries(); + useEffect(() => { + //searchedDiaries의 상태가 변경될때마다 바로 적용 + }, [searchedDiaries]); + + const SearchEnterHandle = (e) => { + if (e.key === "Enter") { + // 엔터키 누르면 실행 + setIsSearching(true); // 검색 상태를 true로 설정 + + // 새로운 검색을 시작할 때 이전 검색 결과를 지워서 이전 기록이 보이지 않도록 함. + setSearchedDiaries({ journals: [] }); + + const fetchSearchedDiary = async () => { + setIsLoading(true); + try { + const fetchedSearchDiaries = await getDiaryQuery( + goalId, + searchQuery, + csrfToken + ); + setSearchedDiaries(fetchedSearchDiaries); + console.log("다이어리들: ", searchedDiaries); + console.log("검색어: ", searchQuery); + } catch (error) { + console.error("검색한 일지를 가져오는데 실패함: ", error); + } finally { + setIsLoading(false); + } + }; + fetchSearchedDiary(); + } + }; return ( - + { + setSearchQuery(e.target.value); + console.log(searchQuery); + }} + onKeyDown={(e) => SearchEnterHandle(e)} + >
일지 추가하기
- +
{!isLoading && filteredDiaries.length === 0 && ( - 📝 일지 작성으로 목표에 한걸음 더! 📝 + + 📝 일지 작성으로 목표에 한걸음 더! 📝 + )} - {filteredDiaries.map((diaries, index) => ( - { - navigate(`/detail/`, { state: { goalId, diaries } }); - }} - > -
-
{diaries.title}
-
-
{diaries.createdDate}
-
-
- {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음 - - ) : null} -
- ))} + + {/* "현재 검색중이고(검색 후 엔터를 눌렀고), 검색어가 빈칸이 아니면서 검색 결과가 0개보다 많을때"만 보일 수 있도록 하는 일지 목록 */} + {isSearching && + searchQuery !== "" && + searchedDiaries.journals.length > 0 + ? searchedDiaries.journals.map((diaries, index) => ( + { + navigate(`/detail/`, { state: { goalId, diaries } }); + }} + > +
+
{diaries.title}
+
+
+ {diaries.createdDate} +
+
+
+ {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음 + + ) : null} +
+ )) + : filteredDiaries.map((diaries, index) => ( + { + navigate(`/detail/`, { state: { goalId, diaries } }); + }} + > +
+
{diaries.title}
+
+
+ {diaries.createdDate} +
+
+
+ {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음 + + ) : null} +
+ ))}
- {isModalOpen && } + {isModalOpen && ( + + )}
); }