[Feat/api/dm list/FLOW-32] DMList 불러오기 호출

src/service/feature/channel/api/channelAPI.ts

@@ -1,4 +1,5 @@
 import { createAxiosInstance } from '@service/feature/common/axios/axiosInstance';
+import { DMDetail, DMList } from '../types/channel';
 
 const axios = createAxiosInstance();
 
@@ -8,7 +9,10 @@ export const getChannelList = async (teamId: string) => {
 };
 
 export const createChannel = async ({
-  teamId, categoryId, name, channelType,
+  teamId,
+  categoryId,
+  name,
+  channelType,
 }: {
   teamId: string;
   categoryId: number;
@@ -37,14 +41,19 @@ export const deleteChannel = async ({
   return res.data;
 };
 
-export const moveChannel = async (teamId: string, categoryId: number, channelId: number, body: {
-  destCategoryId: number;
-  prevChannelId: number;
-  nextChannelId: number;
-}) => {
+export const moveChannel = async (
+  teamId: string,
+  categoryId: number,
+  channelId: number,
+  body: {
+    destCategoryId: number;
+    prevChannelId: number;
+    nextChannelId: number;
+  },
+) => {
   const res = await axios.patch(
     `/teams/${teamId}/categories/${categoryId}/channels/${channelId}`,
-    body
+    body,
   );
   return res.data;
 };
@@ -63,3 +72,18 @@ export const editChannel = async ({
   );
   return res.data;
 };
+
+export const getDMDetail = async (channelId: number): Promise<DMDetail> => {
+  const res = await axios.get(`/channels/${channelId}`);
+  return res.data.data;
+};
+
+export const getDMList = async (): Promise<DMList[]> => {
+  const res = await axios.get(`/channels/me`);
+  return res.data.data;
+};
+
+export const createDM = async (memberIds: string[]) => {
+  const res = await axios.post(`/channels/members`, memberIds);
+  return res.data.data;
+};

src/service/feature/channel/hook/query/useChannelQuery.ts

@@ -1,5 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { getChannelList } from '@service/feature/channel/api/channelAPI.ts';
+import {
+  getChannelList,
+  getDMList,
+} from '@service/feature/channel/api/channelAPI.ts';
 import { Channel } from '@service/feature/channel/types/channel.ts';
 
 // response 형식이 다름. 임시로 설정하여 사용중
@@ -11,3 +14,11 @@ export const useChannelListQuery = (serverId: string) => {
     staleTime: 1000 * 60 * 5,
   });
 };
+
+export const useDMListQuery = () => {
+  return useQuery({
+    queryKey: ['DMList'],
+    queryFn: getDMList,
+    staleTime: 1000 * 60 * 5,
+  });
+};

src/service/feature/channel/types/channel.ts

@@ -8,6 +8,34 @@ export type ChannelType = 'text' | 'voice' | 'event';
 //   [key: string]: unknown;
 // }
 
+export interface DMDetail {
+  channel: Channel2;
+  channelMembers: ChannelMember[];
+}
+
+export interface DMList extends Channel2 {
+  channelMembers: ChannelMember[];
+}
+
+export interface ChannelMember {
+  id: string;
+  nickname: string;
+  name: string;
+  avatarUrl: string;
+  state: 'ONLINE' | 'OFFLINE';
+  createdAt: string;
+}
+
+// 팀 서버 상세 조회에서 불러오는 channel 타입도 이것. 추후 아래 Channel 타입에서 이걸로 변경해야 할 듯
+export interface Channel2 {
+  id: number;
+  name: string;
+  position: number;
+  type: string;
+  accessType: string;
+  chatId: string;
+}
+
 export interface Channel {
   categoriesView: CategoriesView[];
   team: Team;
@@ -32,12 +60,5 @@ export interface Team {
 export interface TeamMembers {
   id: number;
   role: 'OWNER' | 'MEMBER';
-  memberInfo: {
-    id: string;
-    nickname: string;
-    name: string;
-    avatarUrl: string;
-    state: 'OFFLINE' | 'ONLINE';
-    createdAt: string;
-  };
+  memberInfo: ChannelMember;
 }

src/service/feature/chat/index.ts

@@ -1,7 +1,10 @@
 export { useChat } from './hook/useChat';
-export { useChannelListQuery } from '../channel/hook/query/useChannelQuery.ts';
+export {
+  useChannelListQuery,
+  useDMListQuery,
+} from '../channel/hook/query/useChannelQuery.ts';
 export { useMessageHistory } from './hook/useMessageHistory';
 export { useSendMessage } from './hook/useSendMessage';
 export { useSocket } from './context/useSocket';
 export { SocketProvider } from './context/SocketProvider';
-export * from './store/chatSlice';
+export * from './store/chatSlice';

src/service/feature/common/axios/axiosInstance.ts

@@ -6,68 +6,68 @@ import { getCookie } from '../../auth/lib/getCookie';
 export type ServiceType = 'members' | 'teams' | 'dialog';
 
 const API_CONFIG = {
-    BASE_DOMAIN: 'https://flowchat.shop:30200',
-    HEADERS: {
-        JSON: 'application/json',
-    },
+  BASE_DOMAIN: 'https://flowchat.shop:30200',
+  HEADERS: {
+    JSON: 'application/json',
+  },
 } as const;
 
 interface ErrorResponse {
-    message: string;
+  message: string;
 }
 
 const handleAxiosError = (error: AxiosError<ErrorResponse>) => {
-    const { response } = error;
-    if (!response) {
-        toast.error('네트워크 오류 또는 서버 응답 없음');
-        return Promise.reject(error);
-    }
+  const { response } = error;
+  if (!response) {
+    toast.error('네트워크 오류 또는 서버 응답 없음');
+    return Promise.reject(error);
+  }
 
-    const errorMessages: Record<number, string> = {
-        401: ERROR_MESSAGES.UNAUTHORIZED,
-        403: ERROR_MESSAGES.FORBIDDEN,
-        500: ERROR_MESSAGES.SERVER_ERROR,
-    };
+  const errorMessages: Record<number, string> = {
+    401: ERROR_MESSAGES.UNAUTHORIZED,
+    403: ERROR_MESSAGES.FORBIDDEN,
+    500: ERROR_MESSAGES.SERVER_ERROR,
+  };
 
-    toast.error(
-        errorMessages[response.status] ||
-        (response.data && response.data.message) ||
-        ERROR_MESSAGES.DEFAULT_ERROR,
-    );
+  toast.error(
+    errorMessages[response.status] ||
+      (response.data && response.data.message) ||
+      ERROR_MESSAGES.DEFAULT_ERROR,
+  );
 
-    if (response.status === 401) {
-        // TODO: logout 처리 또는 /login 리디렉션
-    }
+  if (response.status === 401) {
+    // TODO: logout 처리 또는 /login 리디렉션
+  }
 
-    return Promise.reject(error);
+  return Promise.reject(error);
 };
 
 export const createAxiosInstance = (): AxiosInstance => {
-    const instance = axios.create({
-        baseURL: API_CONFIG.BASE_DOMAIN,
-        headers: {
-            'Content-Type': API_CONFIG.HEADERS.JSON,
-        },
-        withCredentials: true,
-    });
+  const instance = axios.create({
+    baseURL: API_CONFIG.BASE_DOMAIN,
+    headers: {
+      'Content-Type': API_CONFIG.HEADERS.JSON,
+    },
+    withCredentials: true,
+  });
 
-    instance.interceptors.request.use(
-        (config) => {
-            const token = getCookie('accessToken');
-            if (token) {
-                config.headers.Authorization = `Bearer ${token}`;
-            }
-            return config;
-        },
-        (error) => Promise.reject(error)
-    );
+  instance.interceptors.request.use(
+    (config) => {
+      const token = getCookie('accessToken');
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error),
+  );
 
-    instance.interceptors.response.use(
-        (response: AxiosResponse) => response,
-        handleAxiosError
-    );
+  instance.interceptors.response.use(
+    (response: AxiosResponse) => response,
+    handleAxiosError,
+  );
 
-    return instance;
+  return instance;
 };
 
-export default createAxiosInstance;
+export default createAxiosInstance;

src/service/feature/friend/types/friend.ts

@@ -1,14 +1,7 @@
+import { ChannelMember } from '@service/feature/channel/types/channel';
+
 export interface FriendData {
   friendshipId: 8;
   friendshipDateTime: string;
-  friendshipInfo: FriendInfoData;
-}
-
-export interface FriendInfoData {
-  id: string;
-  nickname: string;
-  name: string;
-  avatarUrl: string;
-  state: 'ONLINE' | 'OFFLINE';
-  createdAt: string;
+  friendshipInfo: ChannelMember;
 }

src/view/components/common/Modal.tsx

@@ -114,7 +114,7 @@ Modal.Title = ({
           onClick={() => context?.setIsOpen(false)}
           className='mr-1 group'
         >
-          <X />
+          <X color='#ffffff' />
         </button>
       )}
     </div>
@@ -237,10 +237,12 @@ Modal.ProTip = ({ children }: { children: string }) => {
 
 Modal.Footer = ({
   onSubmit,
+  onClose,
   backBtnText,
   submitBtnText,
 }: {
   onSubmit: () => void;
+  onClose?: () => void;
   backBtnText?: string;
   submitBtnText?: string;
 }) => {
@@ -252,10 +254,17 @@ Modal.Footer = ({
     onSubmit();
   };
 
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    context.setIsOpen(false);
+  };
+
   return (
     <div className=' h-[48px] flex bg-[#2F3136] px-[0.75rem] justify-between items-center rounded-b-[4px]'>
       <button
-        onClick={() => context.setIsOpen(false)}
+        onClick={handleClose}
         className='text-[#DCDDDE] text-[10px] px-[0.94rem] py-[0.5rem] rounded-[0.13275rem] hover:bg-[#404249]'
       >
         {backBtnText ? backBtnText : 'Back'}

src/view/components/layout/sidebar/components/top/ForYou.tsx

@@ -50,11 +50,11 @@ const ForYou = ({
       </div>
 
       <button
-        className='w-7 h-7 bg-[#37393F] rounded-full mr-2'
+        className='w-7 h-7 bg-chat rounded-full mr-2'
         onClick={() => console.log('')}
         type='button'
       >
-        <EllipsisVertical  className='text-neutral-300 transform:rotate-90' />
+        <EllipsisVertical className='text-neutral-300 transform:rotate-90' />
       </button>
     </div>
   );

src/view/components/layout/sidebar/components/top/Mention.tsx

@@ -51,7 +51,7 @@ const Mention = ({
         </div>
         {/* 닫기로 수정 */}
         <button
-          className='w-7 h-7 bg-[#37393F] rounded-full mr-2'
+          className='w-7 h-7 bg-chat rounded-full mr-2'
           onClick={() => console.log('')}
           type='button'
         >

src/view/components/layout/sidebar/components/top/Message.tsx

@@ -17,12 +17,7 @@ const Message = ({
     };
   };
 }) => {
-  const {
-    channel_name,
-    team_name,
-    category_name,
-    author,
-  } = data;
+  const { channel_name, team_name, category_name, author } = data;
   console.log('?????');
   return (
     <div className='flex justify-between items-center'>
@@ -41,7 +36,7 @@ const Message = ({
       </div>
       {/* 닫기로 수정 */}
       <button
-        className='w-7 h-7 bg-[#37393F] rounded-full mr-2'
+        className='w-7 h-7 bg-chat rounded-full mr-2'
         onClick={() => console.log('')}
         type='button'
       >

src/view/components/layout/sidebar/top/TopSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import Inbox from '../components/top/Inbox';
-import { Archive } from 'lucide-react';
+import { InboxIcon } from 'lucide-react';
 
 const TopSidebar = () => {
   const [toggle, setToggle] = useState(false);
@@ -13,7 +13,7 @@ const TopSidebar = () => {
         className='w-8 h-8 p-1 rounded-full hover:bg-[#42454A]'
         onClick={() => setToggle((prev) => !prev)}
       >
-        <Archive />
+        <InboxIcon color='#ffffff' />
       </button>
       {toggle && <Inbox />}
     </div>