Merge pull request #102 from LikeLionHGU/eunju_feat/#98

Eunju feat/#98
LikeLionHGU · Aug 4, 2024 · 084fcf8 · 084fcf8
2 parents ac78d3e + ef59e67
commit 084fcf8
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 24 deletions.
diff --git a/src/apis/getDiaryQuery.jsx 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
@@ -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 (
     <ListPart>
       <Searchbar>
         <SearchIcon />
-        <input className="search-bar" placeholder="제목+내용을 입력해보세요."></input>
+        <input
+          className="search-bar"
+          placeholder="제목+내용을 입력해보세요."
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            console.log(searchQuery);
+          }}
+          onKeyDown={(e) => SearchEnterHandle(e)}
+        ></input>
       </Searchbar>
       <DairyListBox>
         <div className="diary-list-head">
           <div onClick={openCreateDiaryModal} className="diary-add">
             일지 추가하기 <img src={goPencil} alt="" />
           </div>
-          <DiaryViewDropdown currentSort={currentSort} setCurrentSort={setCurrentSort} />
+          <DiaryViewDropdown
+            currentSort={currentSort}
+            setCurrentSort={setCurrentSort}
+          />
         </div>
         <DiaryList>
           {!isLoading && filteredDiaries.length === 0 && (
-            <DiaryDoesNotExist>📝 일지 작성으로 목표에 한걸음 더! 📝</DiaryDoesNotExist>
+            <DiaryDoesNotExist>
+              📝 일지 작성으로 목표에 한걸음 더! 📝
+            </DiaryDoesNotExist>
           )}
-          {filteredDiaries.map((diaries, index) => (
-            <Diary
-              key={index}
-              onClick={() => {
-                navigate(`/detail/`, { state: { goalId, diaries } });
-              }}
-            >
-              <div className="diary-title-date">
-                <div className="diary-title">{diaries.title}</div>
-                <div className="diary-date">
-                  <div className="diary-end-date">{diaries.createdDate}</div>
-                </div>
-              </div>
-              {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음
-                <Image style={{ backgroundImage: `url(${diaries.thumbnail})` }} />
-              ) : null}
-            </Diary>
-          ))}
+
+          {/* "현재 검색중이고(검색 후 엔터를 눌렀고), 검색어가 빈칸이 아니면서 검색 결과가 0개보다 많을때"만 보일 수 있도록 하는 일지 목록 */}
+          {isSearching &&
+          searchQuery !== "" &&
+          searchedDiaries.journals.length > 0
+            ? searchedDiaries.journals.map((diaries, index) => (
+                <Diary
+                  key={index}
+                  onClick={() => {
+                    navigate(`/detail/`, { state: { goalId, diaries } });
+                  }}
+                >
+                  <div className="diary-title-date">
+                    <div className="diary-title">{diaries.title}</div>
+                    <div className="diary-date">
+                      <div className="diary-end-date">
+                        {diaries.createdDate}
+                      </div>
+                    </div>
+                  </div>
+                  {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음
+                    <Image
+                      style={{ backgroundImage: `url(${diaries.thumbnail})` }}
+                    />
+                  ) : null}
+                </Diary>
+              ))
+            : filteredDiaries.map((diaries, index) => (
+                <Diary
+                  key={index}
+                  onClick={() => {
+                    navigate(`/detail/`, { state: { goalId, diaries } });
+                  }}
+                >
+                  <div className="diary-title-date">
+                    <div className="diary-title">{diaries.title}</div>
+                    <div className="diary-date">
+                      <div className="diary-end-date">
+                        {diaries.createdDate}
+                      </div>
+                    </div>
+                  </div>
+                  {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음
+                    <Image
+                      style={{ backgroundImage: `url(${diaries.thumbnail})` }}
+                    />
+                  ) : null}
+                </Diary>
+              ))}
         </DiaryList>
       </DairyListBox>
-      {isModalOpen && <CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />}
+      {isModalOpen && (
+        <CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />
+      )}
     </ListPart>
   );
 }