[FE] feat: 친구 관련 및 DM api 연동

src/frontend/src/api/directMessages.ts

@@ -0,0 +1,17 @@
+import { endPoint } from '@/constants/endPoint';
+import { GetDirectMessagesResponse, PostDirectMessageRequest } from '@/types/directMessages';
+import { tokenAxios } from '@/utils/axios';
+
+export const getDirects = async () => {
+  const { data } = await tokenAxios.get<GetDirectMessagesResponse>(endPoint.directMessages.GET_DIRECTS);
+  return data.result.directResponses;
+};
+
+interface PostDirectParams {
+  bodyRequest: PostDirectMessageRequest;
+}
+
+export const postDirect = async ({ bodyRequest }: PostDirectParams) => {
+  const { data } = await tokenAxios.post(endPoint.directMessages.POST_DIRECT, bodyRequest);
+  return data.result;
+};

src/frontend/src/api/friends.ts

@@ -0,0 +1,72 @@
+import { endPoint } from '@/constants/endPoint';
+import {
+  DeleteFriendResponse,
+  GetFriendsListResponse,
+  GetFriendInfoResponse,
+  GetReceivedRequestsResponse,
+  GetSentRequestsResponse,
+  PostAcceptResponse,
+  PostRejectResponse,
+  PostRequestResponse,
+} from '@/types/friends';
+import { tokenAxios } from '@/utils/axios';
+
+interface DeleteFriendParams {
+  friendId: string;
+}
+
+export const deleteFriend = async ({ friendId }: DeleteFriendParams) => {
+  const { data } = await tokenAxios.delete<DeleteFriendResponse>(endPoint.friends.DELETE_FRIEND(friendId));
+  return data;
+};
+
+interface GetFriendInfoParams {
+  email: string;
+}
+
+export const getFriendInfo = async ({ email }: GetFriendInfoParams) => {
+  const { data } = await tokenAxios.get<GetFriendInfoResponse>(endPoint.friends.GET_FRIENDS, { params: { email } });
+  return data.result;
+};
+
+export const getSentRequest = async () => {
+  const { data } = await tokenAxios.get<GetSentRequestsResponse>(endPoint.friends.GET_SENT_REQUESTS);
+  return data.result.friends;
+};
+
+export const getReceivedRequest = async () => {
+  const { data } = await tokenAxios.get<GetReceivedRequestsResponse>(endPoint.friends.GET_RECEIVED_REQUESTS);
+  return data.result.friends;
+};
+
+export const getFriendsList = async () => {
+  const { data } = await tokenAxios.get<GetFriendsListResponse>(endPoint.friends.GET_FRIENDS_LIST);
+  return data.result.friends;
+};
+
+interface PostFriendRequestParams {
+  toUserId: string;
+}
+
+export const postFriendRequest = async ({ toUserId }: PostFriendRequestParams) => {
+  const { data } = await tokenAxios.post<PostRequestResponse>(endPoint.friends.POST_REQUEST(toUserId));
+  return data.result;
+};
+
+interface PostRejectRequestParams {
+  friendId: string;
+}
+
+export const postRejectRequest = async ({ friendId }: PostRejectRequestParams) => {
+  const { data } = await tokenAxios.post<PostRejectResponse>(endPoint.friends.POST_REJECT_REQUEST(friendId));
+  return data.result;
+};
+
+interface PostAcceptRequestParams {
+  friendId: string;
+}
+
+export const postAcceptRequest = async ({ friendId }: PostAcceptRequestParams) => {
+  const { data } = await tokenAxios.post<PostAcceptResponse>(endPoint.friends.POST_ACCEPT_REQUEST(friendId));
+  return data.result;
+};

src/frontend/src/api/users.ts

@@ -1,5 +1,6 @@
 import { endPoint } from '@/constants/endPoint';
 import {
+  GetUserInfoResponse,
   PatchUserInfoRequest,
   PatchUserInfoResponse,
   PostAuthCodeRequest,
@@ -12,6 +13,15 @@ import {
 } from '@/types/users';
 import { publicAxios, tokenAxios } from '@/utils/axios';
 
+interface DeleteAccountParams {
+  userId: string;
+}
+
+export const deleteAccount = async ({ userId }: DeleteAccountParams) => {
+  const { data } = await tokenAxios.delete(endPoint.users.DELETE_USER, { params: userId });
+  return data;
+};
+
 export const postLogin = async (requestBody: PostLoginRequest) => {
   const { data } = await publicAxios.post<PostLoginResponse>(endPoint.users.POST_SIGN_IN, requestBody);
   return data;
@@ -38,12 +48,17 @@ export const postEmailDuplicate = async ({ email }: PostEmailDuplicateParams) =>
   return data;
 };
 
+export const getUserInfo = async () => {
+  const { data } = await tokenAxios.get<GetUserInfoResponse>(endPoint.users.GET_USER_INFO);
+  return data;
+};
+
 interface PatchUserInfoParams {
   userId: string;
   bodyRequest: PatchUserInfoRequest;
 }
 
-export const PatchUserInfo = async ({ userId, bodyRequest }: PatchUserInfoParams) => {
+export const patchUserInfo = async ({ userId, bodyRequest }: PatchUserInfoParams) => {
   const { data } = await publicAxios.patch<PatchUserInfoResponse>(endPoint.users.PATCH_USER_INFO, bodyRequest, {
     params: userId,
   });

src/frontend/src/components/common/AuthCheckbox/index.tsx

@@ -3,7 +3,7 @@ import CheckedIcon from '@/assets/checked.svg';
 import * as S from './styles';
 
 interface AuthCheckboxProps {
-  id: string;
+  id?: string;
   isChecked: boolean;
   handleChange?: () => void;
   label?: string;

src/frontend/src/components/common/Modal/index.tsx

@@ -15,7 +15,7 @@ const Modal = ({ children, name }: ModalProps) => {
 
   return (
     <>
-      <S.Overlay onClick={() => closeModal(name, 'close-modal')} />
+      <S.Overlay onClick={() => closeModal(name, 'closeModal')} />
       <S.ModalContainer>
         <S.CloseButton>
           <S.CloseIcon size={28} onClick={() => closeAllModal()} />

src/frontend/src/components/common/Modal/styles.ts

@@ -51,8 +51,7 @@ export const FooterWrapper = styled.div`
   align-items: center;
   justify-content: center;
 
-  margin-top: 1.6rem;
-  padding: 2.4rem 2.4rem 0;
+  padding: 0 2.4rem 2.4rem;
 `;
 
 export const CloseButton = styled.div`

src/frontend/src/components/friend/AddFriendForm/index.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 
+import { getFriendInfo, getFriendsList, getReceivedRequest, getSentRequest, postFriendRequest } from '@/api/friends';
+import useGetUserInfo from '@/pages/FriendsPage/components/UserProfile/hooks/useGetUserInfo';
+
 import * as S from './styles';
 
 export type ResultMessageType = 'success' | 'fail';
@@ -10,17 +13,68 @@ interface ResultMessage {
 }
 
 const AddFriendForm = () => {
-  // TODO: 친구 검색 및 요청 보내기 로직 연동
-  // TODO: 요청 보내기 결과에 따라 resultMessage를 설정하고 표시
+  const { userInfo } = useGetUserInfo();
   const [inputData, setInputData] = useState('');
   const [resultMessage, setResultMessage] = useState<ResultMessage | null>(null);
 
   const handleInputChange = (value: string) => {
     setInputData(value);
   };
 
-  const handleSendRequestButtonClick = () => {
-    console.log('친구 요청');
+  const getFriendInfoByEmail = async () => {
+    try {
+      // 버튼을 눌렀을 때 요청
+      const [friends, sentRequests, receivedRequests] = await Promise.all([
+        getFriendsList(),
+        getSentRequest(),
+        getReceivedRequest(),
+      ]);
+
+      // 1. 자신을 친구로 추가하려 하는지 확인
+      if (userInfo?.email === inputData) {
+        setResultMessage({ type: 'fail', content: '본인은 추가할 수 없어요.' });
+        return null;
+      }
+
+      // 2. 이미 친구로 등록된 사용자인지 확인
+      if (friends && friends.some((friend) => friend.email === inputData)) {
+        setResultMessage({ type: 'fail', content: '이미 친구로 등록된 사용자예요.' });
+        return null;
+      }
+
+      // 3. 이미 친구 요청을 보낸 사용자인지 확인
+      if (sentRequests && sentRequests.some((request) => request.email === inputData)) {
+        setResultMessage({ type: 'fail', content: '이미 친구 요청을 보냈어요. 상대방의 응답을 기다려주세요.' });
+        return null;
+      }
+
+      // 4. 상대가 이미 친구 요청을 보냈는지 확인
+      if (receivedRequests && receivedRequests.some((request) => request.email === inputData)) {
+        setResultMessage({ type: 'fail', content: '상대방이 이미 친구 요청을 보냈어요. 친구 요청을 확인해주세요.' });
+        return null;
+      }
+
+      const response = await getFriendInfo({ email: inputData });
+      return response;
+    } catch (error) {
+      console.log('회원 검색 실패', error);
+      setResultMessage({ type: 'fail', content: '회원 검색에 실패했어요. 다시 시도해주세요.' });
+      return null;
+    }
+  };
+
+  const handleSendRequestButtonClick = async () => {
+    try {
+      const friendInfo = await getFriendInfoByEmail();
+      if (!friendInfo) return;
+
+      await postFriendRequest({ toUserId: friendInfo.userId });
+
+      setResultMessage({ type: 'success', content: '친구 요청을 보냈어요!' });
+    } catch (error) {
+      console.log('친구 요청 실패', error);
+      setResultMessage({ type: 'fail', content: '친구 요청을 보내는 데 실패했어요. 다시 시도해주세요.' });
+    }
   };
 
   return (

src/frontend/src/components/friend/AddFriendForm/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { BodyRegularText, ChipText, TitleText2 } from '@/styles/Typography';
+import { BodyRegularText, TitleText2 } from '@/styles/Typography';
 
 import { ResultMessageType } from '.';
 

src/frontend/src/components/friend/CreateDirectMessageModal/hooks/usePostDirect.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { postDirect } from '@/api/directMessages';
+import useModalStore from '@/stores/modalStore';
+
+const usePostDirect = () => {
+  const queryClient = useQueryClient();
+  const { closeAllModal } = useModalStore();
+
+  const createDirectMessageMutation = useMutation({
+    mutationFn: postDirect,
+    mutationKey: ['createDirectMessage'],
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['directMessagesList'] });
+      closeAllModal();
+    },
+    onError: (error) => {
+      console.error('DM 생성 실패', error);
+    },
+  });
+
+  const createDirectMessage = (memberIds: string[]) => {
+    createDirectMessageMutation.mutate({ bodyRequest: { memberIds } });
+  };
+
+  return { createDirectMessage, isPending: createDirectMessageMutation.isPending };
+};
+
+export default usePostDirect;

src/frontend/src/components/friend/CreateDirectMessageModal/index.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+
+import AuthCheckbox from '@/components/common/AuthCheckbox';
+import Modal from '@/components/common/Modal';
+
+import useGetFriendsList from '../FriendsList/hooks/useGetFriendsList';
+
+import usePostDirect from './hooks/usePostDirect';
+import * as S from './styles';
+
+const MAX_DIRECT_MESSAGE_FRIENDS = 9;
+
+const CreateDirectMessageModal = () => {
+  const [selectedFriends, setSelectedFriends] = useState<string[]>([]);
+  const { createDirectMessage, isPending } = usePostDirect();
+  const { friends } = useGetFriendsList();
+  if (!friends) return null;
+
+  const handleCheckboxClick = (userId: string) => {
+    // 이미 선택된 친구를 누르면 선택 해제 가능
+    if (selectedFriends.length === MAX_DIRECT_MESSAGE_FRIENDS) {
+      if (!selectedFriends.includes(userId)) return;
+    }
+
+    setSelectedFriends((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]));
+  };
+
+  const handleCreateDirectMessage = async () => {
+    createDirectMessage(selectedFriends);
+  };
+
+  const isButtonDisabled = !selectedFriends.length || isPending;
+
+  return (
+    <Modal name="withFooter">
+      <Modal.Header>
+        <S.ModalTitle>친구 선택하기</S.ModalTitle>
+        <S.SelectedFriendsCount>
+          친구를 {MAX_DIRECT_MESSAGE_FRIENDS - selectedFriends.length}명 더 선택할 수 있어요.
+        </S.SelectedFriendsCount>
+      </Modal.Header>
+      <Modal.Content>
+        <S.FriendList>
+          {friends.map((friend) => (
+            <S.FriendItem key={friend.userId} onClick={() => handleCheckboxClick(friend.userId)}>
+              <S.FriendProfileImage $imageUrl={friend.profileImageUrl}>
+                <S.FriendStatusMark $isOnline={true} />
+              </S.FriendProfileImage>
+              <S.FriendInfo>
+                <S.FriendNickname>{friend.nickname}</S.FriendNickname>
+                <S.FriendName>{friend.name}</S.FriendName>
+              </S.FriendInfo>
+              <AuthCheckbox isChecked={selectedFriends.includes(friend.userId)} />
+            </S.FriendItem>
+          ))}
+        </S.FriendList>
+      </Modal.Content>
+      <Modal.Footer>
+        <S.CreateButton disabled={isButtonDisabled} $isDisabled={isButtonDisabled} onClick={handleCreateDirectMessage}>
+          {isPending ? '요청 중...' : 'DM 생성'}
+        </S.CreateButton>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default CreateDirectMessageModal;