Merge pull request #76 from LikelionAssum/feat/#72-1

Feat: 검색 작업 중
LikelionAssum · Jan 14, 2024 · e8526ff · e8526ff
2 parents c981c16 + fe15275
commit e8526ff
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 108 deletions.
diff --git a/src/components/Search/SearchBar.module.css b/src/components/Search/SearchBar.module.css
@@ -0,0 +1,25 @@
+.inputContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 24px;
+  width: 300px;
+  height: 36px;
+  border: 1px solid #dcdcdc;
+  border-radius: 5px;
+  /* transition: border-color 0.3s ease-in-out; */
+}
+
+.iconSearch {
+  margin-left: 12px;
+  color: #a4a4a4;
+}
+
+.searchBar {
+  width: 250px;
+  border: none;
+  outline: none;
+  border-radius: 6px;
+  padding: 0px 6px;
+  font-size: 14px;
+}
diff --git a/src/components/Search/SearchBar.tsx b/src/components/Search/SearchBar.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import styles from "@src/components/Search/SearchBar.module.css";
+import { BiSearch } from "react-icons/bi";
+
+// 검색 바 컴포넌트
+interface SearchBarProps {
+  onSearch: (searchTerm: string) => void;
+  onSearchEnter: () => Promise<void>;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ onSearch, onSearchEnter }) => {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchTerm(value);
+    onSearch(value);
+  };
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      onSearchEnter();
+    }
+  };
+
+  return (
+    <div className={styles.inputContainer}>
+      <BiSearch className={styles.iconSearch}></BiSearch>
+      <input
+        type="text"
+        placeholder="검색어를 입력하세요..."
+        value={searchTerm}
+        onChange={handleInputChange}
+        onKeyDown={handleInputKeyDown}
+        className={styles.searchBar}
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/components/modal/basicModalWrap.tsx b/src/components/modal/basicModalWrap.tsx
@@ -1,4 +1,4 @@
-// 제외 모달 스타일 컴포넌트
+// 기본 모달 스타일 컴포넌트
 
 import styled from "styled-components";
 

diff --git a/src/pages/Detail/Detail.tsx b/src/pages/Detail/Detail.tsx
@@ -32,15 +32,15 @@ const Detail = () => {
   };
 
   useEffect(() => {
-  if (title && keyword && sum) {
-    setContents({
-      text: sum,
-      title: title,
-      keyword: keyword.split(", "),
-      link: link,
-    });
-  }
-  console.log("데이터 저장 시: ",contents);
+    if (title && keyword && sum) {
+      setContents({
+        text: sum,
+        title: title,
+        keyword: keyword.split(", "),
+        link: link,
+      });
+    }
+    console.log("데이터 저장 시: ", contents);
   }, [title, keyword, sum, link]);
 
   const accessToken = localStorage.getItem("accessToken");

diff --git a/src/pages/Home/All.module.css b/src/pages/Home/All.module.css
@@ -21,32 +21,6 @@
   font-weight: 800;
 }
 
-.inputContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 24px;
-  width: 300px;
-  height: 36px;
-  border: 1px solid #dcdcdc;
-  border-radius: 5px;
-  /* transition: border-color 0.3s ease-in-out; */
-}
-
-.iconSearch {
-  margin-left: 12px;
-  color: #a4a4a4;
-}
-
-.searchBar {
-  width: 250px;
-  border: none;
-  outline: none;
-  border-radius: 6px;
-  padding: 0px 6px;
-  font-size: 14px;
-}
-
 .body {
   width: 100%;
   display: flex;
@@ -86,7 +60,7 @@
   margin-top: 16px;
 }
 
-.filesWrapper>div {
+.filesWrapper > div {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -126,7 +100,7 @@
   width: 28px;
   height: 28px;
   color: white;
-  background-color: #00BFFF;
+  background-color: #00bfff;
   border-radius: 3px;
 }
 
@@ -157,8 +131,8 @@
 .newKeyword {
   margin: 0 5px;
   padding: 5px 8px;
-  border: 1px solid #00BFFF;
-  color: #00BFFF;
+  border: 1px solid #00bfff;
+  color: #00bfff;
   font-size: 14px;
   font-weight: 500;
   border-radius: 50px;
@@ -168,17 +142,17 @@
   gap: 0px;
 }
 
-.newLink>a {
+.newLink > a {
   text-decoration: none;
-  color: #00BFFF;
+  color: #00bfff;
   font-size: 15px;
   font-weight: 600;
   margin: 0;
 }
 
-.newLink>hr {
+.newLink > hr {
   margin: 0;
-  border: 1px solid #00BFFF;
+  border: 1px solid #00bfff;
 }
 
 .newbreakline {
@@ -233,14 +207,14 @@
   height: 30px;
 }
 
-.modalContent>h2 {
+.modalContent > h2 {
   font-family: "KCC-Chassam", "SUIT Variable", sans-serif;
 }
 
 .modalKeyword {
   margin: 0 5px;
   padding: 6px 12px;
-  background-color: #00BFFF;
+  background-color: #00bfff;
   color: white;
   font-size: 15px;
   font-weight: 600;
@@ -255,14 +229,14 @@
 
 .modalLink {
   margin-bottom: 54px;
-  border: 1.5px solid #00BFFF;
+  border: 1.5px solid #00bfff;
   padding: 6px 12px;
   border-radius: 5px;
 }
 
-.modalLink>a {
+.modalLink > a {
   text-decoration: none;
-  color: #00BFFF;
+  color: #00bfff;
   font-weight: 600;
   margin: 0;
 }
diff --git a/src/pages/Home/All.tsx b/src/pages/Home/All.tsx
@@ -1,16 +1,12 @@
 import { useState, useEffect } from "react";
 import styles from "@src/pages/Home/All.module.css";
-import { BiSearch } from "react-icons/bi";
 import { FaMicrophone } from "react-icons/fa";
 import axios from "axios";
-import { useAtomValue } from "jotai";
-import { userIdAtom } from "@src/store/stateJotai";
 import SideNav from "@src/components/Wokspace/SideNav";
 import { FiChevronLeft } from "react-icons/fi";
+import SearchBar from "@src/components/Search/SearchBar";
 
-interface SearchBarProps {
-  onSearch: (searchTerm: string) => void;
-}
+// '히스토리': 전체파일 페이지
 
 interface File {
   title: string;
@@ -19,31 +15,7 @@ interface File {
   text?: string;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
-  const [searchTerm, setSearchTerm] = useState<string>("");
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setSearchTerm(value);
-    onSearch(value);
-  };
-
-  return (
-    <div className={styles.inputContainer}>
-      <BiSearch className={styles.iconSearch}></BiSearch>
-      <input
-        type="text"
-        placeholder="검색어를 입력하세요..."
-        value={searchTerm}
-        onChange={handleInputChange}
-        className={styles.searchBar}
-      />
-    </div>
-  );
-};
-
 export default function All() {
-  const userId = useAtomValue(userIdAtom);
   const [list, setList] = useState<
     { title: string; keyword: string[]; link: string }[]
   >([]);
@@ -54,42 +26,66 @@ export default function All() {
     link: "",
     text: "",
   });
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [searchResults, setSearchResults] = useState<File[]>([]);
 
-  const accessToken = localStorage.getItem("accessToken");
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
 
-  const fetchDataWithUserId = async () => {
-    const config = {
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${accessToken}`,
-      },
+    const fetchDataWithToken = async () => {
+      const config = {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`,
+        },
+      };
+      try {
+        const res = await axios.get(`https://www.assum.store/all`, config);
+        console.log(res.data);
+        setList(res.data);
+        console.log("all.tsx 서버 요청 성공", res);
+      } catch (err) {
+        console.error("all.tsx 서버 요청 실패:", err);
+      }
     };
-    try {
-      const res = await axios.get(`https://www.assum.store/all`, config);
-      console.log(res.data);
-      setList(res.data);
-      console.log("all.tsx 서버 요청 성공", res);
-    } catch (err) {
-      console.error("all.tsx 서버 요청 실패:", err);
-    }
-  };
 
-  useEffect(() => {
-    if (userId) {
-      fetchDataWithUserId();
-    }
-  }, [userId]);
+    fetchDataWithToken();
+  }, []);
 
   // 파일 클릭 시 모달 열기
   const handleFileClick = (file: File) => {
-    setSelectedFile(file); // 선택한 파일 정보 저장
-    setIsModalOpen(true); // 모달 열기
+    setSelectedFile(file);
+    setIsModalOpen(true);
   };
 
   // 모달 닫기
   const handleCloseModal = () => {
-    setSelectedFile(null); // 선택한 파일 정보 초기화
-    setIsModalOpen(false); // 모달 닫기
+    setSelectedFile(null);
+    setIsModalOpen(false);
+  };
+
+  // 검색 함수
+  const handleSearch = async () => {
+    if (!searchTerm) return;
+
+    const accessToken = localStorage.getItem("accessToken");
+
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+
+    try {
+      const response = await axios.get(
+        `https://www.assum.store/findByKeyword?title=${searchTerm}`,
+        config
+      );
+      setSearchResults(response.data);
+    } catch (error) {
+      console.error("검색 요청 실패:", error);
+    }
   };
 
   return (
@@ -98,7 +94,10 @@ export default function All() {
       <div className={styles.root}>
         <div className={styles.header}>
           <div className={styles.title}>전체 파일</div>
-          <SearchBar onSearch={() => {}} />
+          <SearchBar
+            onSearch={(value) => setSearchTerm(value)} // 검색어 입력 시 setSearchTerm 호출
+            onSearchEnter={() => handleSearch()} // 엔터를 누르면 검색 실행
+          />
         </div>
         <div className={styles.body}>
           <div className={styles.titleWrapper}>
@@ -108,7 +107,7 @@ export default function All() {
             <hr className={styles.breakline}></hr>
           </div>
           <div className={styles.filesWrapper}>
-            {list
+            {(searchTerm ? searchResults : list)
               .slice()
               .reverse()
               .map((file, index) => (

diff --git a/src/pages/New/New.module.css b/src/pages/New/New.module.css
@@ -59,6 +59,12 @@
   border-radius: 5px;
   padding: 0 10px;
 }
+
+.textbox:focus {
+  border-color: #00bfff; /* 포커스 될 때의 테두리 색상 */
+  outline: none;
+}
+
 .linkBtn {
   border: none;
   border-radius: 5px;