fix: 오탈자 수정

src/api/channelUserAPI.ts

@@ -1,4 +1,4 @@
-import { Tables } from '@/types/supabase';
+import { InsertChannelUserType } from '@/types/channeluser';
 import { AxiosInstance } from 'axios';
 
 class ChannelUserAPI {
@@ -8,15 +8,15 @@ class ChannelUserAPI {
     this.axios = axios;
   }
 
-  async getChannelUserList(channel_id: number): Promise<Tables<'channel_user'>> {
+  async getChannelUserList(channel_id: number): Promise<InsertChannelUserType> {
     const response = await this.axios.get(this.path, {
       params: { channel_id }
     });
 
     return response.data;
   }
 
-  async postChannelUser(row: Tables<'channel_user'>) {
+  async postChannelUser(row: InsertChannelUserType) {
     const response = await this.axios.post(this.path, row);
     return response.data;
   }

src/app/(providers)/(root)/video-channel/_components/VideoList/VideoList.tsx

@@ -1,29 +1,16 @@
 import useChannel from '@/hooks/useChannel';
-import { useRouter } from 'next/navigation';
 import VideoListItem from '../VideoListItem';
 
 // 해당 파일은 임시 파일 입니다.
 const VideoList = () => {
   // 전역으로 관리 되어야 할듯
   const workspace_id = 2;
-  const userName = 'minkon';
-
-  const router = useRouter();
   const { channelList } = useChannel('video', workspace_id);
 
   if (!channelList) {
     return <div>목록이 없습니다..</div>;
   }
-  const handleSubmit = (e: MouseEvent, roomName: string) => {
-    e.preventDefault();
 
-    // TODO: DB에 방 추가 하는 로직 작성 해야함.
-    if (roomName && userName) {
-      router.push(`/video-channel/${roomName}?username=${userName}`);
-    } else {
-      alert('방이름과 사용자 이름을 입력해 주세요.');
-    }
-  };
   return (
     <div className="m-5">
       {channelList.map((channel) => (

src/app/(providers)/(root)/video-channel/create/page.tsx

@@ -1,31 +1,71 @@
 'use client';
+import useChannel from '@/hooks/useChannel';
+import useChannelUser from '@/hooks/useChannelUser';
 import useWorkspaceUserList from '@/hooks/useWorkspaceUserList';
+import { ChannelInsertType } from '@/types/channel';
 import { Tables } from '@/types/supabase';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 const FAKE_WORKSPACE_ID = 2;
+
+// 임시 파일
+type WorkspaceUserType = Tables<'workspace_user'>;
+
 const CreateChannelPage = () => {
+  const userName = 'minkon';
+  const router = useRouter();
+
   const { workspaceUserList } = useWorkspaceUserList(FAKE_WORKSPACE_ID);
-  const [selectedUserList, setSelectedUserList] = useState<string[]>([]);
+  const { createChannel } = useChannel('video', FAKE_WORKSPACE_ID);
+  const [selectedUserList, setSelectedUserList] = useState<WorkspaceUserType[]>([]);
 
-  const handleSelectUser = (user_id: string) => {
-    setSelectedUserList((prev) => [...selectedUserList!, user_id]);
+  const handleSelectUser = (user: WorkspaceUserType) => {
+    setSelectedUserList((prev) => [...selectedUserList!, user]);
   };
+  const handleSubmit = async (roomName: string) => {
+    const newChannel: ChannelInsertType = {
+      name: roomName,
+      type: 'video',
+      workspace_id: FAKE_WORKSPACE_ID
+    };
+
+    const channel = await createChannel(newChannel); // 생성된 채널 정보 가져오기
 
-  // [utils]
+    console.log('생성된 채널 정보 : ', channel);
+    selectedUserList.forEach((user) => {
+      const { enterChannel } = useChannelUser(channel[0].channel_id, user.id);
+      enterChannel(user.user_id);
+    });
+
+    if (roomName) {
+      router.push(`/video-channel/${roomName}?username=${userName}`);
+    } else {
+      alert('방이름과 사용자 이름을 입력해 주세요.');
+    }
+  };
+  // [utils] : 방 이름 작성
   const makeRoomName = () => {
-    return selectedUserList.join(',');
+    let roomName = '';
+    for (let i = 0; i < selectedUserList.length; i++) {
+      if (i !== 0) {
+        roomName += `,${selectedUserList[i]}`;
+      } else {
+        roomName + selectedUserList[i];
+      }
+    }
+    return roomName;
   };
-
   return (
     <div>
       <div className="flex gap-5 p-5">
-        <p>{makeRoomName()}</p>
-        <button className="border hover:brightness-90">확인</button>
+        <button onClick={() => handleSubmit(makeRoomName())} className="border hover:brightness-90">
+          확인
+        </button>
       </div>
       {workspaceUserList &&
         workspaceUserList.map((wokespaceUser) => (
-          <div key={wokespaceUser.id} onClick={() => handleSelectUser(wokespaceUser.name as string)}>
+          <div key={wokespaceUser.id} onClick={() => handleSelectUser(wokespaceUser)}>
             <UserItem {...wokespaceUser} />
           </div>
         ))}
@@ -40,7 +80,7 @@ type UserItemProps = Tables<'workspace_user'>;
 const UserItem = ({ ...wokespaceUser }: UserItemProps) => {
   return (
     <div className="bg-red-100 hover:brightness-90 p-5">
-      <p>{wokespaceUser.name}</p>
+      <p>{wokespaceUser.user_id}</p>
     </div>
   );
 };

src/app/api/channel/route.ts

@@ -12,7 +12,7 @@ export const GET = async (request: NextRequest) => {
   try {
     const { data, error } = await supabase
       .from('channel')
-      .select()
+      .select('*')
       .eq('type', type!)
       .eq('workspace_id', workspace_id!)
       .order('created_at', { ascending: true });
@@ -39,7 +39,7 @@ export const POST = async (request: NextRequest) => {
 
   const { name, type, workspace_id } = await request.json();
   try {
-    const { error } = await supabase.from('channel').insert({ name, type, workspace_id });
+    const { data, error } = await supabase.from('channel').insert({ name, type, workspace_id }).select('*');
 
     if (error)
       return NextResponse.json({
@@ -48,7 +48,7 @@ export const POST = async (request: NextRequest) => {
         status: false,
         statusCode: 500
       });
-    return NextResponse.json({ message: 'Create Channel' });
+    return NextResponse.json(data);
   } catch (error) {
     return NextResponse.json({
       message: 'Failed to insert data',

src/hooks/useChannel.ts

@@ -13,7 +13,7 @@ const useChannel = (type: 'chat' | 'video', workspace_id: number) => {
     queryFn: () => api.channel.getChannelList(type, workspace_id)
   });
 
-  const { mutateAsync: addChannel } = useMutation({
+  const { mutateAsync: createChannel } = useMutation({
     mutationFn: (channel: ChannelInsertType) => api.channel.postChannel(channel),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['channel'] });
@@ -29,7 +29,7 @@ const useChannel = (type: 'chat' | 'video', workspace_id: number) => {
     }
   });
 
-  return { channelList, isPending, isError, addChannel, delChannel };
+  return { channelList, isPending, isError, createChannel, delChannel };
 };
 
 export default useChannel;

src/hooks/useChannelUser.ts

@@ -1,8 +1,7 @@
 import api from '@/api/api';
-import { Tables } from '@/types/supabase';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
-const useChannel = (channel_id: number, workspace_user_id?: string) => {
+const useChannelUser = (channel_id: number, workspace_user_id: string) => {
   const queryClient = useQueryClient();
   const {
     data: channelUser,
@@ -14,18 +13,20 @@ const useChannel = (channel_id: number, workspace_user_id?: string) => {
   });
 
   const { mutateAsync: enterChannel } = useMutation({
-    mutationFn: (row: Tables<'channel_user'>) => api.channelUser.postChannelUser(row),
+    mutationFn: (user_id: string) => api.channelUser.postChannelUser({ user_id, channel_id, workspace_user_id }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['channelUser', channel_id] });
     }
   });
 
   const { mutateAsync: leaveChannel } = useMutation({
-    mutationFn: (row: Tables<'channel_user'>) => api.channelUser.deleteChannelUser(channel_id, workspace_user_id!),
+    mutationFn: () => api.channelUser.deleteChannelUser(channel_id, workspace_user_id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['channelUser', channel_id] });
     }
   });
 
   return { channelUser, isPending, isError, enterChannel, leaveChannel };
 };
+
+export default useChannelUser;

src/types/channeluser.ts

@@ -0,0 +1,8 @@
+export type InsertChannelUserType = {
+  channel_id: number;
+  created_at?: string;
+  id?: number;
+  last_read_chat_id?: number | null;
+  user_id: string;
+  workspace_user_id?: string | null;
+};