feat: tag person when edit post in web

src/web/src/@types/api/auth.ts

@@ -19,6 +19,11 @@ export interface User {
   followingCount: number;
 }
 
+export type UserSearchResult = Pick<User, 'id' | 'username' | 'nickname'> & {
+  imagePath: User['profileImagePath'];
+  status?: User['status'];
+  isFollowing?: boolean;
+};
 export type UserProfile = Pick<
   User,
   | 'backgroundImagePath'

src/web/src/api/index.ts

@@ -1,6 +1,12 @@
 import { env } from '@/constants';
 import { createApiWrappers } from './handler';
-import type { JoinInfo, LoginInfo, User, UserProfile } from '@/@types';
+import type {
+  JoinInfo,
+  LoginInfo,
+  User,
+  UserProfile,
+  UserSearchResult,
+} from '@/@types';
 import { cdnAPIClient, createApiClient } from './apiFactory';
 
 const client = {
@@ -38,6 +44,8 @@ const users = createApiWrappers({
     client.public.post('/users/temporary-join', request),
   getUserProfile: (userId: User['id']) =>
     client.private.get<UserProfile>(`/users/${userId}`),
+  searchUserByDisplayName: (keyword: string) =>
+    client.private.get<UserSearchResult[]>(`/users/search?keyword=${keyword}`),
   getMyProfile: () => client.private.get<UserProfile>(`/users/me`),
   updateProfile: (
     request: Pick<

src/web/src/components/TagSearchUserModal.tsx

@@ -0,0 +1,104 @@
+import { memo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { Dispatch, SetStateAction } from 'react';
+
+import Header from './Header';
+import { apis } from '@/api';
+import type { User } from '@/@types';
+import { Spinner } from './skeleton';
+import { Typography, Input } from './common';
+import { forCloudinaryImage } from '@/utils';
+
+interface TagSearchUserModalProps {
+  tags: Pick<User, 'id' | 'nickname'>[];
+  setTags: Dispatch<SetStateAction<Pick<User, 'id' | 'nickname'>[]>>;
+  onClose: VoidFunction;
+}
+
+function TagSearchUserModal({
+  tags,
+  setTags,
+  onClose,
+}: TagSearchUserModalProps) {
+  const [value, setValue] = useState<string>('');
+  const { data: candidateList, isLoading } = useQuery({
+    queryKey: ['search', value],
+    queryFn: () => apis.users.searchUserByDisplayName(value),
+    enabled: value !== '',
+  });
+
+  return (
+    <div className="absolute top-0 z-[9999] w-full h-full bg-white max-w-[420px]">
+      <Header
+        center={{
+          type: 'text',
+          label: '사용자 태그하기',
+        }}
+        right={{
+          type: 'text',
+          label: '완료',
+          onClick: onClose,
+        }}
+      />
+      <div className="mt-[80px] px-[24px]">
+        <Input
+          label="태그"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <div className="flex flex-col gap-[16px] justify-center mt-4">
+          <div className="flex gap-2">
+            {tags.map((tag) => (
+              <Typography
+                key={tag.id}
+                size="body-3"
+                className="border border-BlueGrey400 py-2 px-3 rounded-[24px]"
+              >
+                {tag.nickname}
+              </Typography>
+            ))}
+          </div>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            candidateList?.map((user) => (
+              <button
+                type="button"
+                key={user.id}
+                className="flex gap-[4px] items-center px-[12px] pt-[12px]"
+                onClick={() =>
+                  setTags((prev) => [
+                    ...prev,
+                    { id: user.id, nickname: user.nickname },
+                  ])
+                }
+              >
+                <img
+                  src={forCloudinaryImage(user.imagePath, {
+                    resize: true,
+                    width: 100,
+                    height: 100,
+                    ratio: false,
+                    quality: 'auto:low',
+                  })}
+                  alt={`${user.username}`}
+                  className="rounded-full w-[20px] h-[20px] min-w-[20px] max-w-[20px] aspect-video"
+                />
+                <Typography size="headline-8" color="grey-600">
+                  {user.nickname}
+                </Typography>
+                <Typography size="body-1" color="blueGrey-800">
+                  {user.username}
+                </Typography>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoizedTagSearchUserModal = memo(TagSearchUserModal);
+
+export default MemoizedTagSearchUserModal;

src/web/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as MenuModal } from './MenuModal';
 export { default as QuotePostBox } from './QuotePostBox';
 export { default as NotSupportText } from './NotSupportText';
 export { default as StepTitle } from './StepTitle';
+export { default as TagSearchUserModal } from './TagSearchUserModal';
 export { default as TimelineItemBox } from './TimelineItemBox';
 export { default as TempSavedPostModal } from './TempSavedPostModal';
 export { default as TimelineItemList } from './TimelineItemList';

src/web/src/pages/PostEditPage.tsx

@@ -5,7 +5,7 @@ import { useRouter } from '@tanstack/react-router';
 import { useMutation } from '@tanstack/react-query';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 
-import type { EditPaint } from '@/@types';
+import type { EditPaint, User } from '@/@types';
 import { useAutoHeightTextArea } from '@/hooks';
 import { EditPostCancelBottomSheet } from '@/components/bottomSheet';
 import {
@@ -22,6 +22,7 @@ import {
   CircularProgress,
   Header,
   Icon,
+  TagSearchUserModal,
   TempSavedPostModal,
   Typography,
 } from '@/components';
@@ -48,6 +49,7 @@ function PostEditPage() {
   const user = DUMMY_USER;
   const router = useRouter();
   const search = editPostRoute.useSearch();
+  const [tags, setTags] = useState<Pick<User, 'id' | 'nickname'>[]>([]);
   const [editPostInfo, setEditPostInfo] = useState<EditPaint>(forEditPaint({}));
   const textAreaRef = useAutoHeightTextArea(editPostInfo.text);
   const [image, setImage] = useState<string>('');
@@ -57,7 +59,8 @@ function PostEditPage() {
   const [isModalOpen, setIsModalOpen] = useState<{
     cancel: boolean;
     tempSaved: boolean;
-  }>({ cancel: false, tempSaved: false });
+    tag: boolean;
+  }>({ cancel: false, tempSaved: false, tag: false });
   const hasTempSavedPost = !!tempSavedStorage.get()?.length;
   const [tempSavedPost] = useState<EditPaint[]>(
     () => tempSavedStorage.get() ?? [],
@@ -107,6 +110,7 @@ function PostEditPage() {
           text: editPostInfo.text,
           medias: image ? [convertToMedia(image, 'image')] : [],
           quotePaintId: search.postId,
+          taggedUserIds: tags.map((tag) => tag.id),
         }),
       ),
     );
@@ -208,6 +212,37 @@ function PostEditPage() {
                   height={20}
                   onClick={() => setImage('')}
                 />
+                <button
+                  type="button"
+                  className="my-[8px] flex gap-[4px] items-center"
+                  onClick={() =>
+                    setIsModalOpen((prev) => ({ ...prev, tag: true }))
+                  }
+                >
+                  {tags.length === 0 ? (
+                    <>
+                      <Icon
+                        type="user"
+                        width={18}
+                        height={18}
+                        stroke="blue-500"
+                      />
+                      <Typography size="body-2" color="blue-500">
+                        사람 태그하기
+                      </Typography>
+                    </>
+                  ) : (
+                    tags.map((tag) => (
+                      <Typography
+                        key={tag.id}
+                        size="body-3"
+                        className="border border-BlueGrey400 py-2 px-3 rounded-[24px]"
+                      >
+                        {tag.nickname}
+                      </Typography>
+                    ))
+                  )}
+                </button>
               </div>
             )}
           </div>
@@ -332,6 +367,14 @@ function PostEditPage() {
         />
       )}
 
+      {isModalOpen.tag && (
+        <TagSearchUserModal
+          tags={tags}
+          setTags={setTags}
+          onClose={() => setIsModalOpen((prev) => ({ ...prev, tag: false }))}
+        />
+      )}
+
       {uploadMutation.isPending && <FullScreenSpinner />}
     </>
   );