feat: 호스트 정보 수정 API 연동

src/entities/host/api/hostChannelInfo.ts

@@ -0,0 +1,8 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { HostChannelInfoRequest, HostChannelInfoResponse } from '../model/hostChannelInfo';
+
+const hostChannelInfo = async (dto: HostChannelInfoRequest) => {
+  const response = await axiosClient.get<HostChannelInfoResponse>(`/host-channels/${dto.hostChannelId}/info`);
+  return response.data;
+};
+export default hostChannelInfo;

src/entities/host/hook/useHostChannelInfoHook.tsx

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import hostChannelInfo from '../api/hostChannelInfo';
+
+const useHostChannelInfo = (hostChannelId: number) => {
+  const { data } = useQuery({
+    queryKey: ['hostInfo', hostChannelId],
+    queryFn: () => hostChannelInfo({ hostChannelId }),
+    enabled: !!hostChannelId,
+  });
+  return { data };
+};
+export default useHostChannelInfo;

src/entities/host/hook/useHostDetailHook.ts

@@ -5,6 +5,7 @@ const useHostDetail = (hostChannelId: number) => {
   const { data } = useQuery({
     queryKey: ['hostDetail', hostChannelId],
     queryFn: () => hostDetail({ hostChannelId }),
+    enabled: !!hostChannelId,
   });
 
   return { data };

src/entities/host/model/hostChannelInfo.ts

@@ -0,0 +1,14 @@
+export interface HostChannelInfoRequest {
+  hostChannelId: number;
+}
+
+export interface HostChannelInfoResponse {
+  result: {
+    id: number;
+    profileImageUrl: string;
+    hostChannelName: string;
+    channelDescription: string;
+    email: string;
+    hostChannelMembers: { id: number; memberName: string }[];
+  };
+}

src/features/host/api/host.ts

@@ -0,0 +1,8 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { UpdateHostChannelInfoRequest } from '../model/host';
+
+const updateHostInfo = async (hostChannelId: number, dto: UpdateHostChannelInfoRequest) => {
+  const response = await axiosClient.put(`/host-channels/${hostChannelId}`, dto);
+  return response.data;
+};
+export default updateHostInfo;

src/features/host/hook/useHostHook.ts

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import updateHostInfo from '../api/host';
+import { UpdateHostChannelInfoRequest } from '../model/host';
+import { useParams } from 'react-router-dom';
+
+export const useUpdateHostChannelInfo = () => {
+  const { id } = useParams();
+  const hostChannelId = Number(id);
+
+  const mutation = useMutation({
+    mutationFn: (dto: UpdateHostChannelInfoRequest) => updateHostInfo(hostChannelId, dto),
+  });
+  return mutation;
+};

src/features/host/model/host.ts

@@ -0,0 +1,6 @@
+export interface UpdateHostChannelInfoRequest {
+  profileImageUrl: string;
+  hostChannelName: string;
+  hostEmail: string;
+  channelDescription: string;
+}

src/pages/menu/ui/myHost/HostDetailPage.tsx

@@ -1,15 +1,15 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import HostDetailLayout from '../../../../shared/ui/backgrounds/HostDetailLayout';
-import { trendingEvents } from '../../../../shared/types/eventCardType';
 import EventCard from '../../../../shared/ui/EventCard';
+import useHostDetail from '../../../../entities/host/hook/useHostDetailHook';
 
 const HostDetailPage = () => {
   const navigate = useNavigate();
   // URL에서 hostId를 가져오기
   const { id } = useParams<{ id: string }>();
 
-  // hostId에 해당하는 이벤트들만 필터링
-  const filteredEvents = trendingEvents.filter(event => event.id === Number(id));
+  const hostChannelId = Number(id);
+  const { data } = useHostDetail(hostChannelId);
 
   return (
     <HostDetailLayout
@@ -20,16 +20,16 @@ const HostDetailPage = () => {
       }
     >
       <div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2 z-50">
-        {filteredEvents.map((event, index) => (
+        {data?.result.events.map(event => (
           <EventCard
             id={event.id}
-            key={index}
-            img={event.img}
-            eventTitle={event.eventTitle}
-            dDay={event.dDay}
-            host={event.host}
-            eventDate={event.eventDate}
-            location={event.location}
+            key={event.id}
+            img={event.bannerImageUrl}
+            eventTitle={event.title}
+            dDay={event.remainDays}
+            host={event.hostChannelName}
+            eventDate={event.startDate}
+            location={event.onlineType}
             hashtags={event.hashtags}
           />
         ))}

src/pages/menu/ui/myHost/HostEditPage.tsx

@@ -1,21 +1,27 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import HostDetailLayout from '../../../../shared/ui/backgrounds/HostDetailLayout';
 import ProfileCircle from '../../../../../design-system/ui/Profile';
 import MultilineTextField from '../../../../../design-system/ui/textFields/MultilineTextField';
 import DefaultTextField from '../../../../../design-system/ui/textFields/DefaultTextField';
 import TertiaryButton from '../../../../../design-system/ui/buttons/TertiaryButton';
 import { useParams } from 'react-router-dom';
 import MemberEmailInput from '../../../../features/menu/ui/MemberEmailInput';
-import { hostInfo } from '../../../../shared/types/hostInfoType';
+import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInfoHook';
+import { useUpdateHostChannelInfo } from '../../../../features/host/hook/useHostHook';
+import { useQueryClient } from '@tanstack/react-query';
 
 const HostEditPage = () => {
   const { id } = useParams<{ id: string }>();
   const [selectedHost, setSelectedHost] = useState(true);
   const [selectedInfo, setSelectedInfo] = useState(false);
   const [tags, setTags] = useState<string[]>([]);
   const [inputValue, setInputValue] = useState('');
+  const [channelDescription, setChannelDescription] = useState('');
 
-  const user = hostInfo.filter(user => user.id === Number(id));
+  const hostChannelId = Number(id);
+  const { data: hostInfo } = useHostChannelInfo(hostChannelId);
+  const { mutate } = useUpdateHostChannelInfo();
+  const queryClient = useQueryClient();
 
   const handeHostInfoClick = () => {
     setSelectedHost(true);
@@ -25,13 +31,44 @@ const HostEditPage = () => {
     setSelectedInfo(true);
     setSelectedHost(false);
   };
+
+  const handleSave = () => {
+    if (!hostInfo?.result.id) return;
+
+    const updatedData = {
+      hostChannelId,
+      profileImageUrl: hostInfo.result.profileImageUrl,
+      hostChannelName: hostInfo.result.hostChannelName,
+      hostEmail: hostInfo.result.email,
+      channelDescription,
+    };
+
+    mutate(updatedData, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: ['hostInfo', hostChannelId],
+        });
+        alert('저장되었습니다.');
+      },
+      onError: () => {
+        alert('저장에 실패했습니다.');
+      },
+    });
+  };
+
   const handleAddClick = () => {
     if (inputValue.trim() && !tags.includes(inputValue.trim())) {
       setTags([...tags, inputValue.trim()]);
       setInputValue('');
     }
   };
 
+  useEffect(() => {
+    if (hostInfo?.result.channelDescription && channelDescription === '') {
+      setChannelDescription(hostInfo.result.channelDescription);
+    }
+  }, [hostInfo, channelDescription]);
+
   return (
     <HostDetailLayout>
       <div className="relative overflow-y-auto">
@@ -61,20 +98,20 @@ const HostEditPage = () => {
           <div className="flex flex-col px-8 md:px-12 gap-6">
             <div className="flex flex-col gap-4 py-4">
               <p className="text-xl text-black font-semibold">대표 이메일</p>
-              <p>example@example.com</p>
+              <p>{hostInfo?.result.email}</p>
             </div>
             <div className="flex flex-col gap-4 lg:gap-6">
               <p className="text-xl text-black font-semibold">멤버 목록</p>
               <div className="flex flex-wrap gap-x-5 gap-y-4 lg:gap-x-10 lg:gap-y-6 text-sm md:text-16 lg:text-base">
-                {user.map(user => (
+                {hostInfo?.result.hostChannelMembers.map(user => (
                   <ProfileCircle
                     key={user.id}
                     id={user.id}
                     profile="userProfile"
-                    name={user.nickname}
+                    name={user.memberName.slice(1)}
                     className="w-12 h-12 md:w-13 md:h-13 lg:w-14 lg:h-14 text-sm md:text-16 lg:text-base"
                   >
-                    {user.name}
+                    {user.memberName}
                   </ProfileCircle>
                 ))}
               </div>
@@ -87,17 +124,18 @@ const HostEditPage = () => {
             <DefaultTextField
               label="대표 이메일"
               detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
-              placeholder="example@example.com"
+              value={hostInfo?.result.email || ''}
               className="h-12"
               labelClassName="sm:text-base md:text-lg"
             />
             <div className="flex flex-col gap-2">
               <MultilineTextField
                 label="채널에 대한 설명"
-                placeholder="채널에 대한 설명을 작성해주세요."
+                value={channelDescription}
+                onChange={e => setChannelDescription(e.target.value)}
                 className="h-24 mb-8"
               />
-              <TertiaryButton type="button" label="저장하기" size="large" color="pink" />
+              <TertiaryButton type="button" label="저장하기" size="large" color="pink" onClick={handleSave} />
             </div>
             <div className="flex flex-col gap-2">
               <div className="flex flex-col">

src/pages/menu/ui/myHost/HostInfoPage.tsx

@@ -1,33 +1,34 @@
 import HostDetailLayout from '../../../../shared/ui/backgrounds/HostDetailLayout';
 import ProfileCircle from '../../../../../design-system/ui/Profile';
 import { useParams } from 'react-router-dom';
-import { hostInfo } from '../../../../shared/types/hostInfoType';
+import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInfoHook';
 
 const HostInfoPage = () => {
   const { id } = useParams<{ id: string }>();
 
-  const user = hostInfo.filter(user => user.id === Number(id));
+  const hostChannelId = Number(id);
+  const { data } = useHostChannelInfo(hostChannelId);
 
   return (
     <HostDetailLayout>
       <div className="relative overflow-y-auto">
         <div className="flex flex-col px-8 md:px-12 gap-6">
           <div className="flex flex-col gap-4 py-8">
             <p className="text-xl text-black font-semibold">대표 이메일</p>
-            <p>example@example.com</p>
+            <p>{data?.result.email}</p>
           </div>
           <div className="flex flex-col gap-4 lg:gap-6">
             <p className="text-xl text-black font-semibold">멤버 목록</p>
             <div className="flex flex-wrap gap-x-5 gap-y-4 lg:gap-x-10 lg:gap-y-6 text-sm md:text-16 lg:text-base">
-              {user.map(user => (
+              {data?.result.hostChannelMembers.map(user => (
                 <ProfileCircle
                   key={user.id}
                   id={user.id}
                   profile="userProfile"
-                  name={user.nickname}
+                  name={user.memberName.slice(1)}
                   className="w-12 h-12 md:w-13 md:h-13 lg:w-14 lg:h-14 text-sm md:text-16 lg:text-base"
                 >
-                  {user.name}
+                  {user.memberName}
                 </ProfileCircle>
               ))}
             </div>

src/shared/ui/backgrounds/HostDetailLayout.tsx

@@ -2,7 +2,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import ProfileCircle from '../../../../design-system/ui/Profile';
 import Header from '../../../../design-system/ui/Header';
 import { ButtonHTMLAttributes, ReactElement } from 'react';
-import { hostInfo, hostInfoData } from '../../types/hostInfoType';
+import useHostChannelInfo from '../../../entities/host/hook/useHostChannelInfoHook';
 
 interface HostDetailLayoutProps {
   rightContent?: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
@@ -12,7 +12,8 @@ const HostDetailLayout = ({ rightContent, children }: HostDetailLayoutProps) =>
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
 
-  const host: hostInfoData | undefined = hostInfo.find(host => host.id === Number(id));
+  const hostChannelId = Number(id);
+  const { data } = useHostChannelInfo(hostChannelId);
 
   const handleBackClick = () => {
     navigate(-1);
@@ -29,12 +30,12 @@ const HostDetailLayout = ({ rightContent, children }: HostDetailLayoutProps) =>
           rightContent={rightContent}
           color="white"
         />
-        <div className="flex justify-center items-center px-6 md:px-10">
+        <div className="flex justify-start items-center px-6 md:px-10">
           <ProfileCircle profile="hostProfile" className="md:w-28 md:h-28 w-24 h-24" />
 
           <div className="flex flex-col gap-1 md:gap-3 ml-5 text-white">
-            <p className="text-lg md:text-xl font-bold">{host?.name}</p>
-            <p className="flex-wrap text-sm md:text-base">{host?.description}</p>
+            <p className="text-lg md:text-xl font-bold">{data?.result.hostChannelName}</p>
+            <p className="flex-wrap text-sm md:text-base">{data?.result.channelDescription}</p>
           </div>
         </div>
       </div>