From 5dce7ec01a5b690e0742da8ff6b17bc05dc1e7ca Mon Sep 17 00:00:00 2001
From: naraeng <nauurr@naver.com>
Date: Sun, 2 Mar 2025 16:17:14 +0900
Subject: [PATCH] Feat: search user posts (#399)

---
 src/apis/getUserPostSearch.ts                 |   0
 src/apis/getUserPosts.ts                      |   3 +-
 src/apis/getUserPostsSearch.ts                |  11 +
 src/apis/getUserProfile.ts                    |   3 +-
 .../mypage/component/DropdownUserMenu.tsx     |   2 +-
 .../myPosts/hooks/useGetSearchUserPosts.ts    |   0
 .../mypage/myPosts/hooks/useGetUserPosts.ts   |   1 -
 .../myPosts/hooks/useSearchUserPosts.ts       |  25 ++
 src/pages/mypage/myPosts/page.tsx             |  12 +-
 src/pages/mypage/page.tsx                     |   2 +-
 src/pages/mypage/profile/page.tsx             | 246 +++++++++---------
 11 files changed, 171 insertions(+), 134 deletions(-)
 delete mode 100644 src/apis/getUserPostSearch.ts
 create mode 100644 src/apis/getUserPostsSearch.ts
 delete mode 100644 src/pages/mypage/myPosts/hooks/useGetSearchUserPosts.ts
 create mode 100644 src/pages/mypage/myPosts/hooks/useSearchUserPosts.ts

diff --git a/src/apis/getUserPostSearch.ts b/src/apis/getUserPostSearch.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/apis/getUserPosts.ts b/src/apis/getUserPosts.ts
index b1253694..9819692e 100644
--- a/src/apis/getUserPosts.ts
+++ b/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',
   });
diff --git a/src/apis/getUserPostsSearch.ts b/src/apis/getUserPostsSearch.ts
new file mode 100644
index 00000000..b6833a3c
--- /dev/null
+++ b/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;
+};
diff --git a/src/apis/getUserProfile.ts b/src/apis/getUserProfile.ts
index ed68079e..297c3664 100644
--- a/src/apis/getUserProfile.ts
+++ b/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',
   });
diff --git a/src/pages/mypage/component/DropdownUserMenu.tsx b/src/pages/mypage/component/DropdownUserMenu.tsx
index 9a07d4da..c39fad3a 100644
--- a/src/pages/mypage/component/DropdownUserMenu.tsx
+++ b/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 ${
diff --git a/src/pages/mypage/myPosts/hooks/useGetSearchUserPosts.ts b/src/pages/mypage/myPosts/hooks/useGetSearchUserPosts.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/mypage/myPosts/hooks/useGetUserPosts.ts b/src/pages/mypage/myPosts/hooks/useGetUserPosts.ts
index bff354e7..47abc438 100644
--- a/src/pages/mypage/myPosts/hooks/useGetUserPosts.ts
+++ b/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);
diff --git a/src/pages/mypage/myPosts/hooks/useSearchUserPosts.ts b/src/pages/mypage/myPosts/hooks/useSearchUserPosts.ts
new file mode 100644
index 00000000..686e7b49
--- /dev/null
+++ b/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;
+      }
+    },
+  });
+};
diff --git a/src/pages/mypage/myPosts/page.tsx b/src/pages/mypage/myPosts/page.tsx
index 3621c2be..27628148 100644
--- a/src/pages/mypage/myPosts/page.tsx
+++ b/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) => {
diff --git a/src/pages/mypage/page.tsx b/src/pages/mypage/page.tsx
index 8e523342..ef02e476 100644
--- a/src/pages/mypage/page.tsx
+++ b/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}
diff --git a/src/pages/mypage/profile/page.tsx b/src/pages/mypage/profile/page.tsx
index 8cb633bd..35216be0 100644
--- a/src/pages/mypage/profile/page.tsx
+++ b/src/pages/mypage/profile/page.tsx
@@ -1,59 +1,52 @@
 import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import UserContainer from '../component/UserContainer';
 import { useGetUserProfile } from './hooks/useGetUserProfile';
 import { usePatchUserProfile } from './hooks/usePatchUserProfile';
+import { PatchUserProfileRequest } from '@/types/apis/get';
 
 export default function ProfilePage() {
-  // 수정상태 여부
   const [isEditing, setIsEditing] = useState(false);
 
   const { data, isLoading, error } = useGetUserProfile();
   const userData = data?.data;
 
-  if (isLoading) console.log('loading');
-  if (error) console.log(error);
-
-  // 비밀번호
-  const [nickname, setNickname] = useState('');
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [passwordError, setPasswordError] = useState('');
+  const {
+    register,
+    setValue,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      nickname: '',
+      currentPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    },
+  });
 
   useEffect(() => {
-    if (userData?.nickname) setNickname(userData.nickname);
-  }, [userData, isEditing]);
+    if (userData?.nickname) {
+      setValue('nickname', userData.nickname);
+    }
+  }, [userData, isEditing, setValue]);
 
   const mutation = usePatchUserProfile();
 
-  const handleInputChange = (e: { target: { name: string; value: string } }) => {
-    const { name, value } = e.target;
-    if (name === 'nickname') {
-      setNickname(value);
-      console.log(nickname);
-    } else if (name === 'currentPassword') {
-      setCurrentPassword(value);
-      console.log(currentPassword);
-    } else if (name === 'newPassword') {
-      setNewPassword(value);
-      console.log(newPassword);
-    } else if (name === 'confirmPassword') {
-      setConfirmPassword(value);
-      console.log(confirmPassword);
-    }
-  };
-
-  const handleSubmit = () => {
-    if (newPassword !== confirmPassword) {
-      setPasswordError('비밀번호가 일치하지 않습니다');
+  const onSubmit = (formData: PatchUserProfileRequest) => {
+    if (formData.newPassword !== formData.confirmNewPassword) {
+      alert('비밀번호가 일치하지 않습니다.');
       return;
     }
+
     mutation.mutate(
       {
-        nickname,
-        currentPassword,
-        newPassword,
-        confirmNewPassword: confirmPassword,
+        nickname: formData.nickname,
+        currentPassword: formData.currentPassword,
+        newPassword: formData.newPassword,
+        confirmNewPassword: formData.confirmNewPassword,
       },
       {
         onSuccess: () => {
@@ -69,13 +62,19 @@ export default function ProfilePage() {
         },
       }
     );
-    // 변경 후 초기화
-    setNewPassword('');
-    setConfirmPassword('');
-    setPasswordError('');
-    setIsEditing(false);
+    reset();
   };
 
+  if (isLoading) {
+    console.log('loading');
+    return null;
+  }
+
+  if (error || !userData) {
+    console.log('error : ', error);
+    return null;
+  }
+
   return (
     <main>
       {userData?.isUnion ? (
@@ -83,67 +82,87 @@ export default function ProfilePage() {
           <UserContainer />
           <div className="mb-8 pl-16 xs:pl-0 sm:pl-0">
             {isEditing ? (
-              <div className="flex flex-col items-start xs:items-center sm:items-center">
-                <h3 className="pr-52 text-lg font-bold xs:text-base sm:text-base">기본정보</h3>
-                <div className="grid grid-cols-[1fr_5fr] gap-y-2.5 py-4 text-sm xs:mx-16 xs:grid-cols-[2fr_5fr] xs:text-xs sm:grid-cols-[2fr_5fr] sm:text-xs md:ml-6 lg:ml-6 xl:ml-6 xxl:md:ml-6">
-                  <span className="mt-1 font-semibold">단위명</span>
-                  <input
-                    className="w-[260px] rounded-sm border border-gray-300 bg-gray-200 px-3 py-1 xs:w-40 sm:w-40"
-                    value={userData?.name}
-                    readOnly
-                  />
-
-                  <span className="mt-1 font-semibold">닉네임</span>
-                  <input
-                    name="nickname"
-                    className="border-gray-30 w-[260px] rounded-sm border px-3 py-1 xs:w-40 sm:w-40"
-                    onChange={handleInputChange}
-                    value={nickname}
-                  />
-                </div>
-                <h3 className="mt-10 pr-44 text-lg font-bold xs:text-base sm:text-base">비밀번호 변경</h3>
-                <div className="grid grid-cols-[1fr_5fr] gap-x-3 gap-y-2.5 py-4 text-sm xs:grid-cols-[2fr_5fr] xs:text-xs sm:grid-cols-[2fr_5fr] sm:text-xs md:ml-6 lg:ml-6 xl:ml-6 xxl:md:ml-6">
-                  <span className="mt-1 font-semibold">기존 비밀번호</span>
-                  <input
-                    type="password"
-                    name="currentPassword"
-                    onChange={handleInputChange}
-                    className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
-                  />
-
-                  <span className="mt-1 font-semibold">새 비밀번호</span>
-                  <input
-                    type="password"
-                    name="newPassword"
-                    onChange={handleInputChange}
-                    className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
-                  />
-
-                  <span className="mt-1 font-semibold">비밀번호 확인</span>
-                  <input
-                    type="password"
-                    name="confirmPassword"
-                    onChange={handleInputChange}
-                    className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
-                  />
-                  {passwordError && <span className="col-span-2 ml-4 text-red-500">{passwordError}</span>}
-                </div>
-                <div className="my-16 mr-10 flex self-end xs:mr-0 xs:self-center sm:mr-0 sm:self-center">
-                  <button
-                    onClick={() => setIsEditing(false)}
-                    className="mr-2 rounded-xs border border-gray-400 bg-white px-6 py-1 text-center text-gray-700 hover:bg-gray-100 xs:text-xs sm:text-xs md:text-sm"
-                  >
-                    취소
-                  </button>
-                  <button
-                    onClick={handleSubmit}
-                    className="mr-2 rounded-xs border border-blue-600 bg-blue-600 px-6 py-1 text-center text-white hover:bg-blue-700 xs:text-xs sm:text-xs md:text-sm"
-                    // className="rounded-xs bg-blue-600 px-6 py-1 text-center text-white hover:bg-blue-700 sm:text-xs md:text-sm"
-                  >
-                    완료
-                  </button>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <div className="flex flex-col items-start xs:items-center sm:items-center">
+                  <h3 className="pr-52 text-lg font-bold xs:text-base sm:text-base">기본정보</h3>
+                  <div className="grid grid-cols-[1fr_5fr] gap-y-2.5 py-4 text-sm xs:mx-16 xs:grid-cols-[2fr_5fr] xs:text-xs sm:grid-cols-[2fr_5fr] sm:text-xs md:ml-6 lg:ml-6 xl:ml-6 xxl:md:ml-6">
+                    <span className="mt-1 font-semibold">단위명</span>
+                    <input
+                      className="w-64 rounded-sm border border-gray-300 bg-gray-200 px-3 py-1 xs:w-40 sm:w-40"
+                      value={userData?.name}
+                      readOnly
+                    />
+
+                    <span className="mt-1 font-semibold">닉네임</span>
+                    <input
+                      {...register('nickname')}
+                      className="w-64 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
+                    />
+                  </div>
+                  <h3 className="mt-10 pr-44 text-lg font-bold xs:text-base sm:text-base">비밀번호 변경</h3>
+                  <div className="grid grid-cols-[1fr_5fr] gap-x-3 gap-y-2.5 py-4 text-sm xs:grid-cols-[2fr_5fr] xs:text-xs sm:grid-cols-[2fr_5fr] sm:text-xs md:ml-6 lg:ml-6 xl:ml-6 xxl:md:ml-6">
+                    <span className="mt-1 font-semibold">기존 비밀번호</span>
+                    <div className="flex flex-row xs:flex-col sm:flex-col md:flex-col lg:items-center xl:items-center xxl:items-center">
+                      <input
+                        type="password"
+                        {...register('currentPassword', { required: '현재 비밀번호를 입력하세요.' })}
+                        className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
+                      />
+                      {errors.currentPassword && (
+                        <span className="text-red-500 xs:mt-2 sm:mt-2 md:mt-2 lg:ml-3 xl:ml-3 xxl:ml-3">
+                          {errors.currentPassword.message}
+                        </span>
+                      )}
+                    </div>
+
+                    <span className="mt-1 font-semibold">새 비밀번호</span>
+                    <div className="flex flex-row xs:flex-col sm:flex-col md:flex-col lg:items-center xl:items-center xxl:items-center">
+                      <input
+                        type="password"
+                        {...register('newPassword', { required: '새 비밀번호를 입력하세요.' })}
+                        className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
+                      />
+                      {errors.newPassword && (
+                        <span className="text-red-500 xs:mt-2 sm:mt-2 md:mt-2 lg:ml-3 xl:ml-3 xxl:ml-3">
+                          {errors.newPassword.message}
+                        </span>
+                      )}
+                    </div>
+
+                    <span className="mt-1 font-semibold">비밀번호 확인</span>
+                    <div className="flex flex-row xs:flex-col sm:flex-col md:flex-col lg:items-center xl:items-center xxl:items-center">
+                      <input
+                        type="password"
+                        {...register('confirmNewPassword', {
+                          required: '비밀번호를 확인해주세요.',
+                          validate: (value) => value === watch('newPassword') || '비밀번호가 일치하지 않습니다.',
+                        })}
+                        className="w-56 rounded-sm border border-gray-300 px-3 py-1 xs:w-40 sm:w-40"
+                      />
+                      {errors.confirmNewPassword && (
+                        <span className="text-red-500 xs:mt-2 sm:mt-2 md:mt-2 lg:ml-3 xl:ml-3 xxl:ml-3">
+                          {errors.confirmNewPassword.message}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="my-16 mr-10 flex self-end xs:mr-0 xs:self-center sm:mr-0 sm:self-center">
+                    <button
+                      type="button"
+                      onClick={() => setIsEditing(false)}
+                      className="mr-2 rounded-xs border border-gray-400 bg-white px-6 py-1 text-center text-gray-700 hover:bg-gray-100 xs:text-xs sm:text-xs md:text-sm"
+                    >
+                      취소
+                    </button>
+                    <button
+                      type="submit"
+                      className="mr-2 rounded-xs border border-blue-600 bg-blue-600 px-6 py-1 text-center text-white hover:bg-blue-700 xs:text-xs sm:text-xs md:text-sm"
+                    >
+                      완료
+                    </button>
+                  </div>
                 </div>
-              </div>
+              </form>
             ) : (
               <div className="flex flex-col items-start xs:items-center sm:items-center">
                 <h3 className="pr-28 text-lg font-bold xs:text-base sm:text-base">기본정보</h3>
@@ -189,31 +208,6 @@ export default function ProfilePage() {
           </div>
         </div>
       )}
-      {/* <div className="flex justify-end px-10 pb-10 sm:justify-center sm:pt-8 md:pt-8">
-        {isEditing ? (
-          <>
-            <button
-              onClick={() => setIsEditing(false)}
-              className="mr-2 rounded-sm border border-gray-400 bg-white px-6 py-1 text-center text-gray-700 hover:bg-gray-100"
-            >
-              취소
-            </button>
-            <button
-              onClick={handleSubmit}
-              className="rounded-sm bg-blue-600 px-6 py-1 text-center text-white hover:bg-blue-700"
-            >
-              완료
-            </button>
-          </>
-        ) : (
-          <button
-            onClick={() => setIsEditing(true)}
-            className="rounded-xs border border-gray-400 bg-white px-5 py-1.5 text-center text-gray-700 hover:bg-gray-100 sm:text-xs md:text-sm"
-          >
-            수정하기
-          </button>
-        )}
-      </div> */}
     </main>
   );
 }