Fix/blog profile url

src/common/apis/member.tsx

@@ -37,6 +37,9 @@ export const handleKakaoLogin = () =>
 export const getProfile = async () =>
     await axiosApi.get("/member/profile");
 
+export const getProfileByUsername = async (username: string) =>
+    await axiosApi.get(`/member/profile/${username}`);
+
 export const updateUsername = async (username: string) =>
     await axiosApi.post("/member/username", {
         username: username,

src/common/types/member.tsx

@@ -4,7 +4,7 @@ export interface MemberProfileSearchRequest {
     size: number,
 }
 
-export interface MemberProfileSearchResponse {
+export interface MemberProfileResponse {
     username: string,
     profileUrl: string | null,
 }

src/components/blog/BlogSideBar.tsx

@@ -7,9 +7,10 @@ import BlogTagCard from "./BlogTagCard.tsx";
 import {getFolderTitle} from "../../common/util/string.tsx";
 import ProfileImageCircle from "../common/ProfileImageCircle.tsx";
 
-function BlogSideBar({folders, username, addTag, setSelectedFolder, bgColor, side}: {
+function BlogSideBar({folders, username, profileUrl, addTag, setSelectedFolder, bgColor, side}: {
     folders: FolderType[],
     username: string | undefined,
+    profileUrl: string | null,
     addTag: (tagName: string) => void,
     setSelectedFolder: (folder: FolderType) => void,
     bgColor?: string,
@@ -21,7 +22,7 @@ function BlogSideBar({folders, username, addTag, setSelectedFolder, bgColor, sid
     return (
         <div className={`${bgColor} ${side && "h-screen overflow-y-scroll"}`}>
             <div className="flex flex-col justify-start items-center py-4 gap-4 z-200">
-                <ProfileImageCircle profileUrl={loginState.profileUrl} size="lg"/>
+                <ProfileImageCircle profileUrl={profileUrl} size="lg"/>
                 <div className="flex justify-center items-center text-2xl font-black">
                     {username}
                 </div>

src/components/common/Header.tsx

@@ -78,7 +78,7 @@ function Header() {
                 <IconButton
                     icon={<MdOutlineSearch
                         className="size-5"/>}
-                    onClick={() => navigate("/search?word=&option=TITLE&sort=createdAt&isDescending=false&tab=post")}/>
+                    onClick={() => navigate("/search?word=&option=ALL&sort=createdAt&isDescending=true&tab=post")}/>
                 {loginState.isLogin
                     ? <div ref={dashboardRef}>
                         <div

src/components/common/ProfileImageCircle.tsx

@@ -1,7 +1,7 @@
 import {MdOutlinePerson} from "react-icons/md";
 
 function ProfileImageCircle({profileUrl, size, onClick, addStyle}: {
-    profileUrl: string,
+    profileUrl: string | null,
     size?: string,
     onClick?: () => void,
     addStyle?: string,
@@ -18,12 +18,12 @@ function ProfileImageCircle({profileUrl, size, onClick, addStyle}: {
     }
 
     if (profileUrl) {
-        return <img className={`${imageSize} ${addStyle} rounded-full border border-gray-200 hover:cursor-pointer`}
+        return <img className={`${imageSize} ${addStyle} rounded-full border border-gray-200 ${onClick && "hover:cursor-pointer"}`}
                     onClick={onClick}
                     src={profileUrl} alt="user_image"/>;
     }
 
-    return <MdOutlinePerson className={`${iconSize} ${addStyle} text-gray-700 m-1 rounded-full hover:cursor-pointer`}
+    return <MdOutlinePerson className={`${iconSize} ${addStyle} text-gray-700 m-1 rounded-full ${onClick && "hover:cursor-pointer"}`}
                             onClick={onClick}/>;
 }
 

src/pages/blog/BlogPage.tsx

@@ -11,6 +11,8 @@ import IconButton from "../../components/common/IconButton.tsx";
 import {PageResponse} from "../../common/types/common.tsx";
 import {getMemberPosts} from "../../common/apis/blog.tsx";
 import {PostResponse} from "../../common/types/post.tsx";
+import {MemberProfileResponse} from "../../common/types/member.tsx";
+import {getProfileByUsername} from "../../common/apis/member.tsx";
 
 function BlogPage() {
 
@@ -25,6 +27,7 @@ function BlogPage() {
         totalPages: 0
     });
     const [posts, setPosts] = useState<PostResponse[]>([]);
+    const [member, setMember] = useState<MemberProfileResponse>({username: username || "", profileUrl: null});
     const folderData: FolderType[] = [
         {
             id: crypto.randomUUID(),
@@ -149,6 +152,12 @@ function BlogPage() {
             return;
         }
 
+        getProfileByUsername(username)
+            .then((res) => {
+                setMember(res.data);
+            })
+            .catch(error => alert(error.response.data.message));
+
         getMemberPosts({
             username: username,
             folderId: null,
@@ -191,6 +200,7 @@ function BlogPage() {
                         <BlogSideBar
                             folders={folders}
                             username={username}
+                            profileUrl={member.profileUrl}
                             addTag={addTag}
                             setSelectedFolder={setSelectedFolder}/>
                     </div>
@@ -206,6 +216,7 @@ function BlogPage() {
                 <BlogSideBar
                     folders={folders}
                     username={username}
+                    profileUrl={member.profileUrl}
                     addTag={addTag}
                     setSelectedFolder={setSelectedFolder}
                     bgColor={"bg-gray-50"}

src/pages/post/SearchPage.tsx

@@ -9,7 +9,7 @@ import {PostResponse, PostSearchRequest} from "../../common/types/post.tsx";
 import {PageResponse} from "../../common/types/common.tsx";
 import {searchPost} from "../../common/apis/post.tsx";
 import {searchProfile} from "../../common/apis/member.tsx";
-import {MemberProfileSearchResponse} from "../../common/types/member.tsx";
+import {MemberProfileResponse} from "../../common/types/member.tsx";
 import ProfileImageCircle from "../../components/common/ProfileImageCircle.tsx";
 
 function SearchPage() {
@@ -21,12 +21,12 @@ function SearchPage() {
     const [openOrder, setOpenOrder] = useState(false);
 
     const [posts, setPosts] = useState<PostResponse[]>([]);
-    const [blogs, setBlogs] = useState<MemberProfileSearchResponse[]>([]);
+    const [blogs, setBlogs] = useState<MemberProfileResponse[]>([]);
     const [trigger, setTrigger] = useState(false);
     const [refresh, setRefresh] = useState(true);
     const [postPage, setPostPage] = useState(0);
     const [blogPage, setBlogPage] = useState(0);
-    const pageSize = 1;
+    const pageSize = 10;
     const [postPageInfo, setPostPageInfo] = useState<PageResponse>({
         number: 0,
         size: pageSize,
@@ -292,7 +292,7 @@ function SearchTab({selectedTab, setSelectedTab}: {
 
 function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage, handleBlogPage, selectedTab}: {
     posts: PostResponse[],
-    blogs: MemberProfileSearchResponse[],
+    blogs: MemberProfileResponse[],
     postPageInfo: PageResponse,
     blogPageInfo: PageResponse,
     handlePostPage: () => void,
@@ -320,7 +320,7 @@ function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage
                 {blogs.map((blog) => (
                     <Link key={blog.username} to={`/blog/${blog.username}`}
                           className="flex justify-start items-center px-4 py-6 gap-8 divide-y divide-gray-200 hover:bg-gray-100 shadow-gray-400 duration-300 ease-out">
-                        <ProfileImageCircle profileUrl={blog.profileUrl || ""} size="lg"/>
+                        <ProfileImageCircle profileUrl={blog.profileUrl} size="lg"/>
                         <div className="flex flex-col gap-y-1 justify-center items-start">
                             <div className="text-2xl font-black">{blog.username}</div>
                         </div>