[Feature] 프로필, 친구추가, 친구삭제, 차단, 차단 해제, 채팅 웹소켓 세팅

src/App.tsx

@@ -1,9 +1,6 @@
-import styled from '@emotion/native';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import { useState } from 'react';
 import { AppProviders } from '~providers/AppProviders';
 import { lightTheme } from '~styles/theme';
-import StoryBookUI from '../.storybook';
 import { RootNavigator } from '~navigation/RootNavigator';
 import { useWebSocket } from '~hooks/useWebSocket';
 import { WebSocketProvider } from '~providers/WebSocketProvider';
@@ -35,40 +32,41 @@ const MainApp = () => {
 
 export const App = () => {
   // const { isMswEnabled } = useInitializeMsw();
-  const [storybookEnabled, setStorybookEnabled] = useState(false);
+  // const [storybookEnabled, setStorybookEnabled] = useState(false);
 
   // if (__DEV__ && !isMswEnabled) {
   // return <Text>Loading MSW...</Text>;
   // }
 
-  const toggleStorybook = () => setStorybookEnabled(prev => !prev);
+  // const toggleStorybook = () => setStorybookEnabled(prev => !prev);
 
   return (
     <>
-      {__DEV__ && (
+      {/* {__DEV__ && (
         <StoryBookFloatingButton onPress={toggleStorybook} activeOpacity={0.8}>
           <StoryBookButtonText>S</StoryBookButtonText>
         </StoryBookFloatingButton>
       )}
-      {__DEV__ && storybookEnabled ? <StoryBookUI /> : <MainApp />}
+      {__DEV__ && storybookEnabled ? <StoryBookUI /> : <MainApp />} */}
+      <MainApp />
     </>
   );
 };
 
-const StoryBookFloatingButton = styled.TouchableOpacity`
-  position: absolute;
-  right: 30px;
-  bottom: 30px;
-  z-index: 1000;
-  width: 60px;
-  height: 60px;
-  border-radius: 30px;
-  background-color: purple;
-  align-items: center;
-  justify-content: center;
-`;
+// const StoryBookFloatingButton = styled.TouchableOpacity`
+//   position: absolute;
+//   right: 30px;
+//   bottom: 30px;
+//   z-index: 1000;
+//   width: 60px;
+//   height: 60px;
+//   border-radius: 30px;
+//   background-color: purple;
+//   align-items: center;
+//   justify-content: center;
+// `;
 
-const StoryBookButtonText = styled.Text`
-  color: white;
-  font-size: 24px;
-`;
+// const StoryBookButtonText = styled.Text`
+//   color: white;
+//   font-size: 24px;
+// `;

src/apis/api.ts

@@ -12,15 +12,7 @@ export const api = ky.create({
       async request => {
         const accessToken = await getAccessToken();
         if (accessToken) {
-          request.headers.set(
-            'Authorization',
-            // accessToken,
-            // `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsInByb3ZpZGVyIjoiS0FLQU8iLCJleHAiOjE3Mzk3NjQwMDIsImVtYWlsIjoibWtoNjc5M0BuYXZlci5jb20ifQ.EF03NpevMSZ2DcM5Q-trEEmRa0KEb5HpJ1HlD-Vj8xy3N2JoFvdQFoWDJRM3IGVwx58L9T2oV7GBTr6wJOevnA`,
-            // 패밀리장, 가족많음
-            // `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsInByb3ZpZGVyIjoiR09PR0xFIiwiZXhwIjoxNzQwMjQ4MjA3LCJlbWFpbCI6ImJibGJibGFuNjlAZ21haWwuY29tIn0.CpauBw9_yXlYQjr-BZP7xqm1u63pj1g1aM3kX9HwCm37BMhpOQGz1Mq8R42CihtC8henTRy0OHaxa7q9-1Svzw`,
-            //나 혼자 패밀리장
-            `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsInByb3ZpZGVyIjoiS0FLQU8iLCJleHAiOjE3NDEyNzUwNjcsImVtYWlsIjoibndpNjk1OUBnbWFpbC5jb20ifQ.pOk3HSBSFGPKGIL4KS7tbwCrzPfCloQZrA4xWzZVpngYTnodSZuenuoUYRC1DkWY-EdmvK-cv_am2EnPryhsxg`,
-          );
+          request.headers.set('Authorization', `Bearer ${accessToken}`);
         }
       },
     ],

src/apis/block/blockUser.ts

@@ -0,0 +1,23 @@
+import { HTTPError } from 'ky';
+import { api } from '~apis/api';
+import { APIResponse } from '~types/api';
+
+export interface ResponseBlockUser {
+  blockId: number;
+  blockerMemberId: number;
+  blockedMemberId: number;
+  blockedMemberName: string;
+}
+
+export const blockUser = async (blockedId: number): Promise<APIResponse<ResponseBlockUser>> => {
+  try {
+    const response = await api.post(`block/${blockedId}`).json<APIResponse<ResponseBlockUser>>();
+    return response;
+  } catch (error) {
+    if (error instanceof HTTPError) {
+      const errorData = await error.response.json();
+      console.error(errorData);
+    }
+    throw error;
+  }
+};

src/apis/block/fetchBlockedUsers.ts

@@ -0,0 +1,52 @@
+import { HTTPError } from 'ky';
+import { api } from '~apis/api';
+import { APIResponse } from '~types/api';
+import { FamilyRole } from '~types/family-role';
+import { Gender } from '~types/gender';
+
+export interface BlockedUser {
+  blockId: number;
+  blockedMemberName: string;
+  memberGender: Gender;
+  familyRole: FamilyRole;
+}
+
+interface Sort {
+  unsorted: boolean;
+  sorted: boolean;
+  empty: boolean;
+}
+
+interface Pageable {
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  unpaged: boolean;
+  offset: number;
+  sort: Sort;
+}
+
+export interface ResponseBlockList {
+  pageable: Pageable;
+  numberOfElements: number;
+  size: number;
+  content: BlockedUser[];
+  number: number;
+  sort: Sort;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
+export const fetchBlockedUsers = async (page = 0): Promise<APIResponse<ResponseBlockList>> => {
+  try {
+    const response = await api.get(`block/list?page=${page}`).json<APIResponse<ResponseBlockList>>();
+    return response;
+  } catch (error) {
+    if (error instanceof HTTPError) {
+      const errorData = error.response.json();
+      console.error(errorData);
+    }
+    throw error;
+  }
+};

src/apis/block/unblockUser.ts

@@ -0,0 +1,16 @@
+import { HTTPError } from 'ky';
+import { api } from '~apis/api';
+import { APIResponse } from '~types/api';
+
+export const unblockUser = async (blockId: number): Promise<APIResponse<string>> => {
+  try {
+    const response = await api.delete(`block/${blockId}`).json<APIResponse<string>>();
+    return response;
+  } catch (error) {
+    if (error instanceof HTTPError) {
+      const errorData = await error.response.json();
+      console.error(errorData);
+    }
+    throw error;
+  }
+};

src/apis/block/useBlock.ts

@@ -0,0 +1,47 @@
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { blockUser } from '~apis/block/blockUser';
+import { UseMutationCustomOptions } from '~types/api';
+import { unblockUser } from './unblockUser';
+import { BlockedUser, fetchBlockedUsers } from '~apis/block/fetchBlockedUsers';
+
+const useBlockedUserList = () => {
+  return useSuspenseQuery({
+    queryKey: ['allBlockedUsers'],
+    queryFn: async () => {
+      let allData: BlockedUser[] = [];
+      let currentPage = 0;
+      let isLastPage = false;
+
+      while (!isLastPage) {
+        const response = await fetchBlockedUsers(currentPage);
+        allData = [...allData, ...response.data.content];
+        isLastPage = response.data.last;
+        currentPage += 1;
+      }
+
+      return allData;
+    },
+  });
+};
+
+const useBlockUser = (mutationOptions?: UseMutationCustomOptions) => {
+  return useMutation({
+    mutationFn: (blockedId: number) => blockUser(blockedId),
+    ...mutationOptions,
+  });
+};
+
+const useUnblockUser = (mutationOptions?: UseMutationCustomOptions) => {
+  return useMutation({
+    mutationFn: (blockId: number) => unblockUser(blockId),
+    ...mutationOptions,
+  });
+};
+
+export const useBlock = () => {
+  const blockedUsers = useBlockedUserList().data;
+  const blockUserMutation = useBlockUser();
+  const unblockUserMutation = useUnblockUser();
+
+  return { blockedUsers, blockUserMutation, unblockUserMutation };
+};

src/apis/chat/fetchChatMessages.ts

@@ -0,0 +1,73 @@
+import { HTTPError } from 'ky';
+import { api } from '~apis/api';
+import { APIResponse } from '~types/api';
+import { BooleanString } from '~types/boolean-string';
+import { FamilyRole } from '~types/family-role';
+import { Gender } from '~types/gender';
+
+interface Sort {
+  unsorted: boolean;
+  sorted: boolean;
+  empty: boolean;
+}
+
+interface Pageble {
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  unpaged: boolean;
+  offset: number;
+  sort: Sort;
+}
+
+interface MemberInfo {
+  memberId: number;
+  memberName: string;
+  email: string;
+  memberGender: Gender;
+  familyRole: FamilyRole;
+  memberProfileImg: number;
+}
+
+interface ChatContent {
+  chatId: number;
+  createdAt: string;
+  updatedAt: string;
+  chatRoomId: number;
+  memberInfo: MemberInfo;
+  chatType: string;
+  isRead: BooleanString;
+  text: string;
+}
+
+export interface ResponseFetchChatMessages {
+  pageable: Pageble;
+  numberOfElements: number;
+  size: number;
+  content: ChatContent[];
+  number: number;
+  sort: Sort;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
+export const fetchChatMessages = async (
+  chatRoomId: number,
+  lastMessageCreatedAt: string,
+): Promise<APIResponse<ResponseFetchChatMessages>> => {
+  try {
+    const response = await api
+      .get(`chat/message/${chatRoomId}`, {
+        json: { chatRoomId, lastMessageCreatedAt },
+      })
+      .json<APIResponse<ResponseFetchChatMessages>>();
+    return response;
+  } catch (error) {
+    if (error instanceof HTTPError) {
+      const errorData = await error.response.json();
+      console.error(errorData);
+    }
+    throw error;
+  }
+};

src/apis/chat/fetchChatRooms.ts

@@ -4,25 +4,25 @@ import { AvatarNumber } from '~types/avatar-number';
 import { FamilyRole } from '~types/family-role';
 import { Gender } from '~types/gender';
 
-export type FetchChatRoomsResponseType = {
+interface Member {
+  memberId: number;
+  memberName: string;
+  email: string;
+  memberGender: Gender;
+  familyRole: FamilyRole;
+  memberProfileImg: AvatarNumber;
+}
+export interface ResponseFetchChatRoom {
   chatRoomId: number;
   name: string;
   lastMessage: string;
   unreadMessageCount: number;
-  members: [
-    {
-      memberId: number;
-      memberName: string;
-      email: string;
-      memberGender: Gender;
-      familyRole: FamilyRole;
-      memberProfileImg: AvatarNumber;
-    },
-  ];
-}[];
-export const fetchChatRooms = async (): Promise<APIResponse<FetchChatRoomsResponseType>> => {
+  members: Member[];
+}
+
+export const fetchChatRooms = async (): Promise<APIResponse<ResponseFetchChatRoom[]>> => {
   try {
-    const response = await api.get('chat/rooms').json<APIResponse<FetchChatRoomsResponseType>>();
+    const response = await api.get('chat/rooms').json<APIResponse<ResponseFetchChatRoom[]>>();
     return response;
   } catch (error) {
     console.error('Error:', error);

src/apis/chat/useChatMessages.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchChatMessages } from '~apis/chat/fetchChatMessages';
+import { UseQueryCustomOptions } from '~types/api';
+
+export const useChatMessages = (
+  chatRoomId: number,
+  lastMessageCreatedAt: string,
+  queryOptions?: UseQueryCustomOptions,
+) => {
+  return useQuery({
+    queryKey: ['chatMessages', chatRoomId, lastMessageCreatedAt],
+    queryFn: ({ queryKey }) => {
+      const [, chatRoomId, lastMessageCreatedAt] = queryKey;
+      return fetchChatMessages(chatRoomId as number, lastMessageCreatedAt as string);
+    },
+    ...queryOptions,
+  });
+};

src/apis/dog/createDog.ts

@@ -21,7 +21,6 @@ export const createDog = async (dogProfile: DogProfileType): Promise<APIResponse
     );
 
     formData.append('profileImgFile', dogProfile.profileImgFile);
-
     const response = await api
       .post('dogs/create', {
         body: formData,

src/apis/dog/fetchAccumulatedWalkInfo.ts

@@ -2,7 +2,7 @@ import { api } from '~apis/api.ts';
 import { APIResponse } from '~types/api';
 
 export type FetchAccumulatedWalkInfoRequestType = {
-  dogId: number;
+  memberId: number;
 };
 
 export type FetchAccumulatedWalkInfoResponseType = {
@@ -12,10 +12,12 @@ export type FetchAccumulatedWalkInfoResponseType = {
 };
 
 export const fetchAccumulatedWalkInfo = async ({
-  dogId,
+  memberId,
 }: FetchAccumulatedWalkInfoRequestType): Promise<APIResponse<FetchAccumulatedWalkInfoResponseType>> => {
   try {
-    const response = await api.get(`dogs/${dogId}/walks`).json<APIResponse<FetchAccumulatedWalkInfoResponseType>>();
+    const response = await api
+      .get(`member/walk-info/${memberId}`)
+      .json<APIResponse<FetchAccumulatedWalkInfoResponseType>>();
     return response;
   } catch (error) {
     console.error('Error:', error);