Merge pull request #164 from techeer-sv/FE/#162

Fe/#162 글 작성자 표시 및 유저 검색 기능 구현
techeer-sv · Aug 12, 2023 · 49ceafd · 49ceafd
2 parents 72f2365 + d3f3a1d
commit 49ceafd
Show file tree

Hide file tree

Showing 7 changed files with 282 additions and 42 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -16,6 +16,8 @@ const ModifyingPage = lazy(() => import('./pages/ModifyingPage'));
 const ErrorPage = lazy(() => import('./pages/ErrorPage'));
 const SigninPage = lazy(() => import('./pages/SigninPage'));
 const SignupPage = lazy(() => import('./pages/SignupPage'));
+const SearchProjectPage = lazy(() => import('./pages/SearchProjectPage'));
+const SearchUserPage = lazy(() => import('./pages/SearchUserPage'));
 
 const queryClient = new QueryClient();
 
@@ -33,6 +35,14 @@ function App() {
               <Route path="/modify" element={<ModifyingPage />} />
               <Route path="/signin" element={<SigninPage />} />
               <Route path="/signup" element={<SignupPage />} />
+              <Route
+                path="/searchProject/:projectName"
+                element={<SearchProjectPage />}
+              />
+              <Route
+                path="/searchUser/:userName"
+                element={<SearchUserPage />}
+              />
               <Route path="/*" element={<ErrorPage />} />
             </Routes>
           </Suspense>

diff --git a/frontend/src/assets/image/searchIcon.png b/frontend/src/assets/image/searchIcon.png
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -4,6 +4,7 @@ import { useRecoilState } from 'recoil';
 
 import WriteIcon from '../assets/image/pencil-square.svg';
 import ProfileIcon from '../assets/image/profileIcon.svg';
+import SearchIcon from '../assets/image/searchIcon.png';
 import { persistTokenState, refreshState, searchTextState } from '../Recoil';
 
 function NavBar() {
@@ -52,6 +53,17 @@ function NavBar() {
     navigate('/my');
   }
 
+  const handleSearch = () => {
+    if (searchText === '' || searchText === '@') {
+      navigate('/');
+    } else if (searchText.charAt(0) === '@') {
+      const username = searchText.substring(1);
+      navigate(`/searchUser/${username}`);
+    } else {
+      navigate(`/searchProject/${searchText}`);
+    }
+  };
+
   return (
     <div className="fixed z-20 mb-5 flex w-screen flex-row content-center overflow-hidden border-b border-zinc-400 bg-white pt-3 pb-3 align-middle font-ng-eb">
       {/* 로고 */}
@@ -71,14 +83,29 @@ function NavBar() {
       </button>
 
       {/* 검색창 */}
-      <input
-        value={searchText}
-        onChange={getSearchData}
-        type="text"
-        alt="search"
-        placeholder="search"
-        className=" mx-4 h-auto w-full appearance-none rounded-xl border pl-2 sm:w-full"
-      />
+      <div className="relative mx-4 flex h-auto w-full items-center rounded-xl border">
+        <input
+          value={searchText}
+          onChange={getSearchData}
+          type="text"
+          alt="search"
+          placeholder="search"
+          className=" h-auto w-full appearance-none pl-2"
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              handleSearch();
+            }
+          }}
+        />
+        <button
+          className="mr-2"
+          onClick={handleSearch}
+          aria-label="SearchButton"
+          type="button"
+        >
+          <img className="h-6 w-auto" src={SearchIcon} alt="SearchIcon" />
+        </button>
+      </div>
       {accessToken || persistToken ? (
         <button
           className=" mr-4 whitespace-nowrap rounded-full bg-graphyblue px-4 text-white"

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -30,9 +30,7 @@ function MainPage() {
   }
 
   async function getData({ pageParam = 1 }) {
-    const params = searchText
-      ? { projectName: searchText }
-      : { page: pageParam, size: 12 };
+    const params = { page: pageParam, size: 12 };
     const res = await axios.get(
       'http://localhost:8080/api/v1/projects/search',
       {
@@ -61,7 +59,7 @@ function MainPage() {
       };
       window.addEventListener('scroll', handleScroll);
     }
-  }, [fetchNextPage, isFetchingNextPage]);
+  }, [fetchNextPage, isFetchingNextPage, searchText]);
 
   if (status === 'loading') {
     return <span>Loading...</span>;
@@ -95,39 +93,19 @@ function MainPage() {
         </div>
 
         <div>
-          {searchText === '' ? (
-            <>
-              {data.pages.map((group, i) => (
-                <div
-                  className="relative mx-8 flex flex-wrap justify-center pt-6 sm:pt-8"
-                  key={group[i]?.id}
-                >
-                  {group.map((item: DataObject) => (
-                    <div className="mx-8 mb-10" key={item.id}>
-                      <ProjectCard items={item} />
-                    </div>
-                  ))}
+          {data.pages.map((group, i) => (
+            <div
+              className="relative mx-8 flex flex-wrap justify-center pt-6 sm:pt-8"
+              key={group[i]?.id}
+            >
+              {group.map((item: DataObject) => (
+                <div className="mx-8 mb-10" key={item.id}>
+                  <ProjectCard items={item} />
                 </div>
               ))}
-              {hasNextPage && isFetchingNextPage && (
-                <span>Loading more...</span>
-              )}
-            </>
-          ) : (
-            <div className="ml-0 flex flex-wrap justify-center min-[680px]:ml-10 min-[680px]:justify-start">
-              {data.pages
-                .flat()
-                .filter((x) => x.projectName.includes(searchText))
-                .map((item) => (
-                  <div
-                    className="mx-3 mt-9 min-[680px]:mx-0 min-[680px]:ml-16"
-                    key={item.id}
-                  >
-                    <ProjectCard items={item} />
-                  </div>
-                ))}
             </div>
-          )}
+          ))}
+          {hasNextPage && isFetchingNextPage && <span>Loading more...</span>}
         </div>
       </div>
     </div>

diff --git a/frontend/src/pages/ReadingPage.tsx b/frontend/src/pages/ReadingPage.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import gptIcon from '../assets/image/gptIcon.svg';
+import ProfileIcon from '../assets/image/profileIcon.svg';
 import NavBar from '../components/NavBar';
 import QuillWrtten from '../components/QuillWritten';
 import RenderModal from '../components/RenderModal';
@@ -39,6 +40,8 @@ function ReadingPage() {
   const params = useParams();
 
   const [isOpenModal, setOpenModal] = useState<boolean>(false);
+  const [nickname, setNickname] = useState<string>('');
+  const [createdAt, setCreatedAt] = useState<string>('');
 
   const onClickToggleModal = useCallback(() => {
     setOpenModal(!isOpenModal);
@@ -69,6 +72,8 @@ function ReadingPage() {
       setSelectedStack(res.data.data.techTags);
       setContents(res.data.data.content);
       setReadReply(res.data.data.commentsList);
+      setNickname(res.data.data.member.nickname);
+      setCreatedAt(res.data.data.createdAt);
     } catch (error) {
       if (axios.isAxiosError(error)) {
         if (
@@ -173,6 +178,13 @@ function ReadingPage() {
           <div className="mt-10 mb-4 text-center font-ng-eb text-4xl">
             {title}
           </div>
+          <div className="mb-4 flex items-center border-b-2 border-graphyblue pb-2">
+            <img className="h-6 w-6" src={ProfileIcon} alt="ProfileIcon" />
+            <span className="ml-1 font-ng-b text-lg">{nickname}</span>
+            <span className="text-ml font-ng text-lg text-gray-500">
+              &nbsp; |&nbsp; {createdAt.slice(0, 10)}
+            </span>
+          </div>
           <div className="mb-2 flex flex-row overflow-hidden hover:overflow-x-auto">
             <div className=" mb-2 mr-3 shrink-0 font-ng-b text-xl text-zinc-500 sm:text-2xl ">
               한줄 소개

diff --git a/frontend/src/pages/SearchProjectPage.tsx b/frontend/src/pages/SearchProjectPage.tsx
@@ -0,0 +1,89 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import WriteIcon from '../assets/image/pencil-square.svg';
+import Banner from '../components/Banner';
+import NavBar from '../components/NavBar';
+import ProjectCard from '../components/ProjectCard';
+
+interface DataObject {
+  id: number;
+  createdAt: string;
+  projectName: string;
+  description: string;
+  techTags: string[];
+  thumbNail: string;
+}
+
+function SearchProjectPage() {
+  const [data, setData] = useState<DataObject[]>([]); // 데이터를 담을 state 선언
+  const params = useParams(); // react-router-dom useParams 사용 선언
+
+  const navigate = useNavigate(); // react-router-dom useNavigate 사용 선언
+
+  function toWrite() {
+    // react-router-dom을 이용한 글쓰기 페이지로 이동 함수
+    navigate('/write');
+  }
+
+  async function getData() {
+    try {
+      const res = await axios.get(
+        'http://localhost:8080/api/v1/projects/search',
+        {
+          params: { projectName: params.projectName },
+        },
+      );
+      setData(res.data.data);
+    } catch (error) {
+      console.log(error);
+      alert('검색 결과가 없습니다.');
+      navigate('/');
+    }
+  }
+
+  useEffect(() => {
+    getData();
+  }, [params]);
+
+  return (
+    <div className="relative h-auto min-h-screen w-screen bg-gray-50">
+      <NavBar />
+      <Banner />
+
+      <div>
+        {/* 프로젝트 공유 버튼 */}
+        <button
+          className="fixed bottom-10 right-10 z-10 my-auto mb-2 flex shrink-0 flex-row items-center rounded-full
+          bg-graphyblue px-4 py-1 pt-3 pb-3 font-semibold text-slate-50 drop-shadow-md
+          sm:invisible"
+          onClick={() => toWrite()}
+          aria-label="toWritePage"
+          type="button"
+        >
+          <img className="mr-2 h-5 w-5" src={WriteIcon} alt="WriteIcon" />
+          <span className="shrink-0 font-semibold">프로젝트 공유</span>
+        </button>
+
+        <div className="mx-10 border-b-2 border-b-neutral-300 pt-0 font-ng-b text-2xl sm:mx-28 sm:mb-5 sm:pt-5">
+          {/* All */}
+        </div>
+        <div>
+          <div className="ml-0 flex flex-wrap justify-center min-[680px]:ml-10 min-[680px]:justify-start">
+            {data.map((item) => (
+              <div
+                className="mx-3 mt-9 min-[680px]:mx-0 min-[680px]:ml-16 "
+                key={item.id}
+              >
+                <ProjectCard items={item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SearchProjectPage;