Feat: search user posts (#399)

src/apis/getUserPosts.ts

@@ -1,10 +1,9 @@
 import { GetUserPostsResponse } from '@/types/apis/get';
 import { AxiosResponse } from 'axios';
-import { clientAuth } from './client';
+import { clientAuth } from '@/apis/client.ts';
 
 export const getUserPosts = async (page: number, take: number) => {
   const response: AxiosResponse<GetUserPostsResponse> = await clientAuth({
-    baseURL: import.meta.env.VITE_API_URL,
     url: `board/mypost?page=${page}&take=${take}`,
     method: 'get',
   });

src/apis/getUserPostsSearch.ts

@@ -0,0 +1,11 @@
+import { GetUserPostsResponse } from '@/types/apis/get';
+import { AxiosResponse } from 'axios';
+import { clientAuth } from './client.ts';
+
+export const getUserPostsSearch = async (page: number, take: number, q: string) => {
+  const response: AxiosResponse<GetUserPostsResponse> = await clientAuth({
+    url: `board/mypost/search?page=${page}&take=${take}&q=${q}`,
+    method: 'get',
+  });
+  return response.data;
+};

src/apis/getUserProfile.ts

@@ -1,10 +1,9 @@
 import { GetUserProfileResponse } from '@/types/apis/get';
 import { AxiosResponse } from 'axios';
-import { clientAuth } from './client';
+import { clientAuth } from './client.ts';
 
 export const getUserProfile = async () => {
   const response: AxiosResponse<GetUserProfileResponse> = await clientAuth({
-    baseURL: 'http://13.125.101.7:8080',
     url: '/users/mypage',
     method: 'get',
   });

src/pages/mypage/component/DropdownUserMenu.tsx

@@ -6,7 +6,7 @@ interface DropdownUserMenuProps {
 
 export default function DropdownUserMenu({ selectedMenu, setSelectedMenu, setIsDropdown }: DropdownUserMenuProps) {
   return (
-    <div className="w-36 rounded-xs border bg-gray-50 px-1 py-1 text-gray-700 shadow-lg xs:text-xs sm:text-xs md:text-sm">
+    <div className="rounded-xs border bg-gray-50 px-1 py-1 text-gray-700 shadow-lg marker:w-36 xs:text-xs sm:text-xs md:text-sm">
       <ul>
         <li
           className={`cursor-pointer px-4 py-3 ${

src/pages/mypage/myPosts/hooks/useGetUserPosts.ts

@@ -6,7 +6,6 @@ import axios, { AxiosError } from 'axios';
 export const useGetUserPosts = (page: number, take: number): UseQueryResult<GetUserPostsResponse, AxiosError> => {
   return useQuery<GetUserPostsResponse, AxiosError>({
     queryKey: ['get-user-posts', page, take],
-    // queryFn: () => getUserPosts(page, take),
     queryFn: async () => {
       try {
         return await getUserPosts(page, take);

src/pages/mypage/myPosts/hooks/useSearchUserPosts.ts

@@ -0,0 +1,25 @@
+import { getUserPostsSearch } from '@/apis/getUserPostsSearch';
+import { GetUserPostsResponse } from '@/types/apis/get';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import axios, { AxiosError } from 'axios';
+
+export const useSearchUserPosts = (
+  page: number,
+  take: number,
+  q: string
+): UseQueryResult<GetUserPostsResponse, AxiosError> => {
+  return useQuery<GetUserPostsResponse, AxiosError>({
+    queryKey: ['get-user-posts', page, take, q],
+    queryFn: async () => {
+      try {
+        return await getUserPostsSearch(page, take, q);
+      } catch (error) {
+        console.error('API Error:', error);
+        if (axios.isAxiosError(error)) {
+          console.error('Error response:', error.response?.data);
+        }
+        throw error;
+      }
+    },
+  });
+};

src/pages/mypage/myPosts/page.tsx

@@ -4,17 +4,27 @@ import { MyPostsContent } from './myPostsContent/myPostsContent';
 import { useGetUserPosts } from './hooks/useGetUserPosts';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { useSearchUserPosts } from './hooks/useSearchUserPosts';
 
 function MyPostsPage() {
   const [page, setPage] = useState(0);
   const [take] = useState(6);
   const [searchText, setSearchText] = useState('');
+  const [query, setQuery] = useState('');
+
+  const userPostsData = useGetUserPosts(page, take);
+  const searchData = useSearchUserPosts(page, take, query);
+
+  const data = query ? searchData.data : userPostsData.data;
+  const isLoading = query ? searchData.isLoading : userPostsData.isLoading;
+  const error = query ? searchData.error : userPostsData.error;
 
-  const { data, isLoading, error } = useGetUserPosts(page, take);
   const totalPages = data?.data?.pageInfo?.totalPages ?? 1;
 
   const onClickSearch = () => {
     console.log(searchText);
+    setPage(0);
+    setQuery(searchText);
   };
 
   const handlePageClick = (pageNumber: number) => {

src/pages/mypage/page.tsx

@@ -34,7 +34,7 @@ export default function MyPage() {
             <ChevronDown className="h-4 w-6" color="#9CA3AF" />
           </button>
           {isDropdown && (
-            <div className="absolute top-10">
+            <div className="absolute top-10 z-50">
               <DropdownUserMenu
                 selectedMenu={selectedMenu}
                 setSelectedMenu={setSelectedMenu}