Merge pull request #164 from official-Trippy/feature/#130

Feature/#130
official-Trippy · Sep 28, 2024 · 2805ad0 · 2805ad0
2 parents c10c15a + 5e04a3b
commit 2805ad0
Show file tree

Hide file tree

Showing 11 changed files with 538 additions and 301 deletions.
diff --git a/src/app/oauth/callback/google/page.tsx b/src/app/oauth/callback/google/page.tsx
@@ -57,13 +57,25 @@ export default function GoogleLogin() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-[100dvh] text-center">
-      <div className="mb-4">
-        <Image src={LogoMain} alt="Logo" width={300} height={300} />
-      </div>
-      <div className="text-[2rem] font-medium">
-        로그인중입니다.
-        <span className="inline-block ml-2 animate-dots">...</span>
+    <div className="flex items-center justify-center h-screen">
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          className="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-red-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span className="sr-only">Loading...</span>
       </div>
     </div>
   );

diff --git a/src/app/oauth/callback/naver/page.tsx b/src/app/oauth/callback/naver/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
-import axios, { AxiosResponse } from "axios"; 
+import axios, { AxiosResponse } from "axios";
 import Image from "next/image";
 import Cookies from "js-cookie";
 import LogoMain from "../../../../../public/LogoMain.svg";
@@ -59,16 +59,28 @@ const NaverCallback = () => {
   }, [router]);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-[100dvh] text-center">
-      <div className="mb-4">
-        <Image src={LogoMain} alt="Logo" width={300} height={300} />
-      </div>
-      <div className="text-[2rem] font-medium">
-        로그인중입니다.
-        <span className="inline-block ml-2 animate-dots">...</span>
+    <div className="flex items-center justify-center h-screen">
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          className="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-red-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span className="sr-only">Loading...</span>
       </div>
     </div>
   );
 };
 
-export default NaverCallback;
+export default NaverCallback;
diff --git a/src/app/search/[keyword]/page.tsx b/src/app/search/[keyword]/page.tsx
@@ -3,19 +3,18 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 import Header from "@/components/shared/header/Header";
-import Keywords from "@/components/search/Keywords";
 import PopularSearches from "@/components/search/popularSearches";
-
 import axios from "axios";
-import { useRouter } from "next/navigation";
 import SortingBar from "@/components/search/sortingBar";
-// import PostAllCard from "@/components/search/PostAllCard";
-
-import { useQuery } from "react-query";
 import PostAllCard from "@/components/search/postAllCard";
 
 const SearchPage = () => {
-  const [posts, setPosts] = useState<any[]>([]);
+  const [posts, setPosts] = useState<any[]>([]); // 보여줄 포스트
+  const [postList, setPostList] = useState<any[]>([]); // POST 타입 데이터
+  const [ootdList, setOotdList] = useState<any[]>([]); // OOTD 타입 데이터
+  const [nicknameList, setNicknameList] = useState<any[]>([]); // NICKNAME 타입 데이터
+  const [blogList, setBlogList] = useState<any[]>([]); // BLOG 타입 데이터
+
   const [keywords, setKeywords] = useState<string>("");
   const [popularSearches, setPopularSearches] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -26,53 +25,88 @@ const SearchPage = () => {
   const PAGE_SIZE = 10;
   const RealKeyword = decodeURIComponent(keyword as string);
 
-
-  // Fetching Posts
+  // 검색 결과 가져오기 (처음 4개 타입에 대해 요청)
   useEffect(() => {
-    fetchPosts(RealKeyword, selectedSearchType);
-  }, [keyword, selectedSearchType]);
+    fetchAllPosts(RealKeyword);
+  }, [keyword]);
 
-  // Fetching keywords and popular searches
+  // 인기 검색어 가져오기
   useEffect(() => {
-
     fetchPopularSearches();
   }, []);
 
-  const fetchPosts = async (searchTerm: string, searchType: string) => {
+  // 4개의 타입에 대한 데이터 요청
+  const fetchAllPosts = async (searchTerm: string) => {
     try {
-      const response = await axios.get(`https://trippy-api.store/api/search`, {
-        params: {
-          searchType: searchType,
-          page: 0,
-          size: PAGE_SIZE,
-          keyword: searchTerm,
-        },
-      });
-
-      console.log("API Response:", response.data);
-
-      const postsData = response.data.result;
-      if (Array.isArray(postsData)) {
-        // 블로그 또는 닉네임 검색일 경우, 데이터가 다르게 올 수 있음
-        if (
-          selectedSearchType === "BLOG" ||
-          selectedSearchType === "NICKNAME"
-        ) {
-          const transformedData = postsData.map((item: any) => ({
-            member: {
-              nickName: item.nickName,
-              profileUrl: item.profileImgUrl,
-            },
-            blogIntroduction: item.blogIntroduction, // 블로그 소개
-            blogName: item.blogName, // 블로그 이름
-            memberId: item.memberId, // 유저 ID
-          }));
-          setPosts(transformedData);
-        } else {
-          setPosts(postsData); // 일반 게시물일 경우 기존 로직 유지
-        }
+      setIsLoading(true);
+
+      // 4개의 타입에 대한 API 요청을 동시에 보냄
+      const [postRes, ootdRes, nicknameRes, blogRes] = await Promise.all([
+        axios.get(`https://trippy-api.store/api/search`, {
+          params: {
+            searchType: "POST",
+            page: 0,
+            size: PAGE_SIZE,
+            keyword: searchTerm,
+          },
+        }),
+        axios.get(`https://trippy-api.store/api/search`, {
+          params: {
+            searchType: "OOTD",
+            page: 0,
+            size: PAGE_SIZE,
+            keyword: searchTerm,
+          },
+        }),
+        axios.get(`https://trippy-api.store/api/search`, {
+          params: {
+            searchType: "NICKNAME",
+            page: 0,
+            size: PAGE_SIZE,
+            keyword: searchTerm,
+          },
+        }),
+        axios.get(`https://trippy-api.store/api/search`, {
+          params: {
+            searchType: "BLOG",
+            page: 0,
+            size: PAGE_SIZE,
+            keyword: searchTerm,
+          },
+        }),
+      ]);
+
+      // 각 타입의 데이터 추출
+      const postListData = postRes.data.result?.postList || [];
+      const ootdListData = ootdRes.data.result?.ootdList || [];
+      const nicknameListData = Array.isArray(nicknameRes.data.result)
+        ? nicknameRes.data.result
+        : [];
+      const blogListData = Array.isArray(blogRes.data.result)
+        ? blogRes.data.result
+        : [];
+
+      // 상태 업데이트
+      setPostList(postListData);
+      setOotdList(ootdListData);
+      setNicknameList(nicknameListData);
+      setBlogList(blogListData);
+
+      // 초기 선택 타입 설정 (우선순위: POST -> OOTD -> NICKNAME -> BLOG)
+      if (postListData.length > 0) {
+        setPosts(postListData);
+        setSelectedSearchType("POST");
+      } else if (ootdListData.length > 0) {
+        setPosts(ootdListData);
+        setSelectedSearchType("OOTD");
+      } else if (nicknameListData.length > 0) {
+        setPosts(nicknameListData);
+        setSelectedSearchType("NICKNAME");
+      } else if (blogListData.length > 0) {
+        setPosts(blogListData);
+        setSelectedSearchType("BLOG");
       } else {
-        setPosts([]);
+        setPosts([]); // 모든 타입에 데이터가 없을 경우 빈 배열 설정
       }
     } catch (error) {
       console.error("Error fetching posts:", error);
@@ -86,11 +120,9 @@ const SearchPage = () => {
       const response = await axios.get(
         "https://trippy-api.store/api/search/popular"
       );
-
       const fetchedPopularSearches = Array.isArray(response.data.result)
         ? response.data.result.map((item: string) => decodeURIComponent(item))
         : [];
-
       setPopularSearches(fetchedPopularSearches);
     } catch (error) {
       console.error("Error fetching popular searches:", error);
@@ -99,48 +131,47 @@ const SearchPage = () => {
 
   const count = posts.length;
 
-
   return (
     <div className="w-full min-h-screen bg-white">
       <Header />
 
       <div className="w-[90%] lg:w-[68%] mx-auto mt-8 px-4 lg:px-10">
         {/* 검색 결과 제목 */}
         <h1 className="text-2xl lg:text-4xl font-semibold mb-6">
-
           <span className="text-[#FB3463]">{RealKeyword}</span>에 대한{" "}
           <span className="text-[#FB3463]"> {count}</span>건의 검색 결과입니다.
         </h1>
 
         {/* Sorting Bar */}
         <SortingBar
           selectedSearchType={selectedSearchType}
-          onSelectSearchType={setSelectedSearchType}
+          onSelectSearchType={(type) => {
+            setSelectedSearchType(type);
+            // 타입 변경 시 해당 타입의 데이터로 변경
+            if (type === "POST") setPosts(postList);
+            else if (type === "OOTD") setPosts(ootdList);
+            else if (type === "NICKNAME") setPosts(nicknameList);
+            else if (type === "BLOG") setPosts(blogList);
+          }}
           selectedSortOrder={selectedSortOrder}
           onSelectSortOrder={setSelectedSortOrder}
         />
 
-
         <div className="flex flex-col lg:flex-row">
-
           <div className="flex-grow w-full">
             {/* Posts Section */}
             {isLoading ? (
               <p>Loading...</p>
             ) : posts.length > 0 ? (
-
               <div className="flex flex-wrap justify-start items-start gap-[15px] lg:gap-[25px]">
-
                 <PostAllCard
                   posts={posts}
                   selectedSearchType={selectedSearchType}
                 />
-
               </div>
             ) : (
               <div className="flex-grow max-w-full lg:max-w-[790px]">
                 <h1 className="text-lg lg:text-2xl font-semibold mb-6">
-
                   <span className="text-[#FB3463]">{RealKeyword}</span>에 대한
                   검색 결과가 없습니다
                 </h1>
@@ -149,10 +180,7 @@ const SearchPage = () => {
           </div>
 
           {/* Sidebar Section */}
-
-
           <div className="flex-none w-full lg:w-[300px] mt-8 lg:mt-0 lg:ml-8 hidden md:block">
-
             <PopularSearches popularSearches={popularSearches} />
           </div>
         </div>