refactor: profile 관련 컴포넌트, 타입 공통화

app/api/member/search/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+import { ProfileSearch } from '@/features/profile-search';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const cursorId = searchParams.get('cursorId') ?? '';
+  const nameQuery = searchParams.get('nameQuery') ?? '';
+
+  const data = await fetchData<ProfileSearch>(
+    `/member/search?nameQuery=${nameQuery}&cursorId=${cursorId}`,
+    'GET',
+  );
+
+  return NextResponse.json(data);
+}

app/profile/search/page.tsx

@@ -0,0 +1,55 @@
+import dynamic from 'next/dynamic';
+
+import { LeftArrowIcon } from '@/components/atoms';
+import { HeaderBar } from '@/components/molecules';
+
+const DynamicBackButton = dynamic(
+  () => import('@/components/molecules').then(({ BackButton }) => BackButton),
+  {
+    ssr: false,
+    loading: () => <LeftArrowIcon />,
+  },
+);
+
+const DynamicSearchBarSection = dynamic(
+  () =>
+    import('@/features/profile-search').then(
+      ({ SearchBarSection }) => SearchBarSection,
+    ),
+  {
+    ssr: false,
+  },
+);
+
+const DynamicSearchResultSection = dynamic(
+  () =>
+    import('@/features/profile-search').then(
+      ({ SearchResultSection }) => SearchResultSection,
+    ),
+  {
+    ssr: false,
+  },
+);
+
+export default function ProfileSearch({
+  searchParams,
+}: {
+  searchParams: { keyword: string };
+}) {
+  const { keyword = '' } = searchParams;
+
+  return (
+    <>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <DynamicBackButton />
+        </HeaderBar.LeftContent>
+        <HeaderBar.Title>친구 찾기</HeaderBar.Title>
+      </HeaderBar>
+      <article>
+        <DynamicSearchBarSection keyword={keyword} />
+        <DynamicSearchResultSection keyword={keyword} />
+      </article>
+    </>
+  );
+}

components/molecules/index.ts

@@ -5,7 +5,8 @@ export * from './header-bar';
 export * from './infinite-scroller';
 export * from './modal';
 export * from './page-modal';
-export * from './profile-list-item';
+export * from './profile-image';
+export * from './profile-list';
 export * from './record-mark';
 export * from './search-bar';
 export * from './tab';

components/molecules/profile-image/index.ts

@@ -0,0 +1 @@
+export * from './profile-image';

components/molecules/profile-image/profile-image.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ImageProps } from 'next/image';
+import { useMemo } from 'react';
+
+import {
+  defaultProfileImages,
+  ProfileIndexType,
+} from '@/public/images/default-profile';
+
+import { Image } from '../../atoms';
+
+export const ProfileImage = ({
+  src,
+  alt = 'profile image',
+  ...props
+}: ImageProps) => {
+  const imageSrc = useMemo(() => {
+    const profileImage = defaultProfileImages[Number(src) as ProfileIndexType];
+    return profileImage ?? src;
+  }, [src]);
+
+  return <Image src={imageSrc} alt={alt} {...props} />;
+};

components/molecules/profile-list-item/index.ts → components/molecules/profile-list/index.ts

@@ -1 +1,2 @@
+export * from './profile-list';
 export * from './profile-list-item';

components/molecules/profile-list-item/profile-list-item.tsx → components/molecules/profile-list/profile-list-item.tsx

@@ -1,18 +1,20 @@
 import Link from 'next/link';
 
-import { Button, Image } from '@/components/atoms';
-import { ProfileFollowContent } from '@/features/follow';
+import { Button } from '@/components/atoms';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
+import { MemberProfile } from '@/types';
+
+import { ProfileImage } from '../profile-image';
 
 type FollowListItem = {
   isFollow: boolean;
   onClick?: () => void;
   onClickFollow?: () => void;
-} & ProfileFollowContent;
+} & MemberProfile;
 export const ProfileListItem = ({
   memberId,
-  name,
+  nickname,
   introduction,
   profileImageUrl,
   isFollow,
@@ -21,17 +23,17 @@ export const ProfileListItem = ({
     <div className={containerStyle}>
       <Link href={`/profile/${memberId}`} className={linkStyle}>
         <div className={profileImageStyle}>
-          <Image
-            src={profileImageUrl}
+          <ProfileImage
+            src={profileImageUrl ?? ''}
             alt="profile image"
             width={40}
             height={40}
             style={{ objectFit: 'cover' }}
           />
         </div>
         <div className={text.wrapperStyle}>
-          <h1 className={text.nicknameStyle}>{name}</h1>
-          <p className={text.summaryStyle}>{introduction}</p>
+          <h1 className={text.nicknameStyle}>{nickname}</h1>
+          {introduction && <p className={text.summaryStyle}>{introduction}</p>}
         </div>
       </Link>
 

features/follow/components/follow-virtual-list.tsx → components/molecules/profile-list/profile-list.tsx

@@ -1,18 +1,17 @@
+'use client';
+
 import React from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { ProfileListItem } from '@/components/molecules';
+import { MemberProfile } from '@/types';
 
-import { ProfileFollowContent } from '../types';
+import { ProfileListItem } from './profile-list-item';
 
-type FollowVirtualList = {
-  data: ProfileFollowContent[];
+type ProfileList = {
+  data: MemberProfile[];
   fetchNextData: () => void;
 };
-export const FollowVirtualList = ({
-  data,
-  fetchNextData,
-}: FollowVirtualList) => {
+export const ProfileList = ({ data, fetchNextData }: ProfileList) => {
   const handleRangeChanged = (range: { endIndex: number }) => {
     const currentContentsLastIndex = data.length - 1;
     if (range.endIndex >= currentContentsLastIndex - 3) {

features/follow/sections/follower-section.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { ProfileList } from '@/components/molecules';
+
 import { useFollowerList } from '../apis';
-import { FollowVirtualList } from '../components';
 
 export const FollowerSection = ({ id }: { id: number }) => {
   const { flattenData, hasNextPage, isFetchingNextPage, fetchNextPage } =
@@ -13,5 +14,5 @@ export const FollowerSection = ({ id }: { id: number }) => {
     }
   };
 
-  return <FollowVirtualList data={flattenData} fetchNextData={fetchNextData} />;
+  return <ProfileList data={flattenData} fetchNextData={fetchNextData} />;
 };

features/follow/sections/following-section.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { ProfileList } from '@/components/molecules';
+
 import { useFollowingList } from '../apis';
-import { FollowVirtualList } from '../components';
 
 export const FollowingSection = ({ id }: { id: number }) => {
   const { flattenData, hasNextPage, isFetchingNextPage, fetchNextPage } =
@@ -13,5 +14,5 @@ export const FollowingSection = ({ id }: { id: number }) => {
     }
   };
 
-  return <FollowVirtualList data={flattenData} fetchNextData={fetchNextData} />;
+  return <ProfileList data={flattenData} fetchNextData={fetchNextData} />;
 };

features/follow/types/index.ts

@@ -1,16 +1,10 @@
 import { Response } from '@/apis';
+import { MemberProfile } from '@/types';
 
 export type FollowTab = 'follow' | 'following';
 
-export type ProfileFollowContent = {
-  memberId: number;
-  name: string;
-  profileImageUrl: string;
-  introduction: string;
-};
-
 export type ProfileFollow = Response<{
-  contents: ProfileFollowContent[];
+  contents: MemberProfile[];
   cursorId: number;
   hasNext: boolean;
 }>;

features/profile-search/apis/index.ts

@@ -0,0 +1 @@
+export * from './use-profile-search';

features/profile-search/apis/use-profile-search.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { ProfileSearch } from '../types';
+
+const fetchProfile = async (nameQuery: string, cursorId?: number) => {
+  const res = await fetch(
+    `/api/member/search?nameQuery=${nameQuery}&cursorId=${cursorId ?? ''}`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+
+  return res.json();
+};
+
+export const useProfileSearch = (nameQuery: string) => {
+  const query = useInfiniteQuery<ProfileSearch>({
+    queryKey: ['useProfileSearch', nameQuery],
+    queryFn: ({ pageParam }) => fetchProfile(nameQuery, pageParam as number),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage?.data?.hasNext ? lastPage?.data?.cursorId : undefined,
+    enabled: !!nameQuery?.length,
+  });
+
+  const flattenData =
+    query.data?.pages.flatMap(({ data }) => data?.memberInfoResponses ?? []) ??
+    [];
+
+  return {
+    ...query,
+    flattenData,
+  };
+};

features/profile-search/components/empty-keyword.tsx

@@ -0,0 +1,18 @@
+import { css } from '@/styled-system/css';
+
+export const EmptyKeyword = () => {
+  return (
+    <div className={containerStyle}>
+      친구를 팔로우하고
+      <br />
+      서로의 기록에 응원을 보내보세요.
+    </div>
+  );
+};
+
+const containerStyle = css({
+  m: '80px auto 0px',
+  textStyle: 'body2.normal',
+  color: 'text.alternative',
+  textAlign: 'center',
+});

features/profile-search/components/empty-search-result.tsx

@@ -0,0 +1,31 @@
+import { css } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
+
+export const EmptySearchResult = ({ keyword }: { keyword: string }) => {
+  return (
+    <div className={containerStyle}>
+      <h1 className={titleStyle}>‘{keyword}‘ 유저가 없어요.</h1>
+      <p className={descriptionStyle}>
+        마이페이지에서 내 프로필을 공유할 수 있어요
+      </p>
+    </div>
+  );
+};
+
+const containerStyle = flex({
+  direction: 'column',
+  gap: '4px',
+  m: '80px auto 0px',
+  align: 'center',
+});
+
+const titleStyle = css({
+  textStyle: 'heading6',
+  fontWeight: 'medium',
+  color: 'text.normal',
+});
+
+const descriptionStyle = css({
+  color: 'text.alternative',
+  fontWeight: 'regular',
+});

features/profile-search/components/index.ts

@@ -0,0 +1,2 @@
+export * from './empty-keyword';
+export * from './empty-search-result';

features/profile-search/index.ts

@@ -0,0 +1,2 @@
+export * from './sections';
+export * from './types';

features/profile-search/sections/index.ts

@@ -0,0 +1,2 @@
+export * from './search-bar-section';
+export * from './search-result-section';

features/profile-search/sections/search-bar-section.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { debounce } from 'lodash';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+
+import { SearchBar } from '@/components/molecules';
+import { css } from '@/styled-system/css';
+
+export const SearchBarSection = ({ keyword }: { keyword: string }) => {
+  const router = useRouter();
+  const [searchKeyword, setSearchKeyword] = useState<string>(keyword);
+
+  const handleChangeKeyword = debounce((keyword: string) => {
+    setSearchKeyword(keyword);
+  }, 400);
+
+  const setKeywordParams = useCallback(
+    (keyword: string) => {
+      const params = new URL(window.location.href);
+      params.searchParams.set('keyword', keyword);
+
+      router.replace(params.toString());
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    setKeywordParams(searchKeyword);
+  }, [searchKeyword, setKeywordParams]);
+
+  return (
+    <div className={containerStyle}>
+      <SearchBar
+        value={searchKeyword}
+        placeholder="유저 검색"
+        onChange={handleChangeKeyword}
+      />
+    </div>
+  );
+};
+
+const containerStyle = css({
+  p: '8px 20px',
+});